@charset "EUC-KR";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
/*@import url('https://fonts.googleapis.com/css?family=Ubuntu:700&display=swap');*/

@font-face {
    font-family: 'Noto Sans KR';
    font-style: 'thin';
    font-weight: 100;
    src: url(/static/font/NotoSansKR-Thin.woff2) format('woff2'),
         url(/static/font/NotoSansKR-Thin.woff) format('woff'),
         url(/static/font/NotoSansKR-Thin.otf) format('opentype');
  }
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: 'light';
    font-weight: 300;
    src: url(/static/font/NotoSansKR-Light.woff2) format('woff2'),
         url(/static/font/NotoSansKR-Light.woff) format('woff'),
         url(/static/font/NotoSansKR-Light.otf) format('opentype');
  }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: 'regular';
     font-weight: 400;
     src: url(/static/font/NotoSansKR-Regular.woff2) format('woff2'),
          url(/static/font/NotoSansKR-Regular.woff) format('woff'),
          url(/static/font/NotoSansKR-Regular.otf) format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: 'medium';
     font-weight: 500;
     src: url(/static/font/NotoSansKR-Medium.woff2) format('woff2'),
          url(/static/font/NotoSansKR-Medium.woff) format('woff'),
          url(/static/font/NotoSansKR-Medium.otf) format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: 'bold';
     font-weight: 700;
     src: url(/static/font/NotoSansKR-Bold.woff2) format('woff2'),
          url(/static/font/NotoSansKR-Bold.woff) format('woff'),
          url(/static/font/NotoSansKR-Bold.otf) format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: 'black';
     font-weight: 900;
     src: url(/static/font/NotoSansKR-Black.woff2) format('woff2'),
          url(/static/font/NotoSansKR-Black.woff) format('woff'),
          url(/static/font/NotoSansKR-Black.otf) format('opentype');
   } 

/* CSS RESET */
html,body{width:100%; height:100%;font-family:'Noto Sans KR', sans-serif; font-weight: 400;}

/* °øÅë */
.wrap {}
.wrap img {max-width:100%;}

table {background:#fff;}

/* 20250114 kang ¼öÁ¤ */
/*.header {height:70px; background:#fff; box-shadow:0 0px 10px rgba(0, 0, 0, 0.1); border-bottom:1px solid #eee}
.header h1 {text-align:center; margin-top:10px;}
.header h1 img {margin:0 auto;}
*/

/* 20250114 kang ¼öÁ¤ */
/*.top_util {float:right; margin-top:-40px;}*/


.top_util .btn_logout {background:#555; color:#fff; border-radius:30px; border:0; padding:5px 10px; margin-left:10px;}

.contents {padding:2rem 0 4rem 0;}

  nav.menu {
      padding:27px 0 0 0;
      text-align: center;
  }
  nav.menu > ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
  }
  nav.menu > ol > li {
    float: left;
    padding-right: 5px;
  }

.footer {text-align:center; font-weight:300; background:#3f3838; padding:20px 0;}
.footer h3 {font-size:16px; color:#b2adad; line-height:1.6em;  font-weight:400;}
.footer h5 {font-size:16px; color:#b2adad; line-height:1.6em;  font-weight:400;}

/* ·Î±×ÀÎ */

.loginArea {background:url('/static/img/login_bg.jpg') center top no-repeat; background-size:cover; position:relative; overflow:hidden; height:100%}
.loginArea .login_box {background:#fff; border-radius:20px; width:90%; max-width:470px; margin:0 auto; box-shadow:0 0 30px rgba(0, 0, 0, 0.25); margin:15rem auto; text-align:center; padding:5rem 0;}
.loginArea .login_box h2 {padding-botom:30px;}
.loginArea .login_box h2 img {width:100%; max-width:240px;}
.loginArea .login_box a {display:block; padding:20px 0;}
.btn_main_info input {background:none; border-bottom:2px solid #229deb; border-radius:0; color:#229deb;}


.join_info {border:1px solid #ddd; border-radius:10px; padding:30px; text-align:center; margin:20px 0}
.join_info b {font-size:18px;}

.join_textarea {border:1px solid #ddd; background:#f5f5f5; width:100%; }

.agree {padding-bottom:30px;}


/* ÆäÀÌÁö */
.page {padding-bottom:50px;}
.page_number {display:flex; justify-content:center; align-items:center;}
.left_button, .right_button {border:1px solid #ddd; background:#fff; width:30px; height:30px; line-height:0; margin:0 2px;}

.page_number li {border:1px solid #ddd; background:#fff; width:30px; height:30px; line-height:30px; text-align:center; margin:0 2px;}

/* °Ë»ç°á°ú-Æ˾÷ */
.pop_tit {border:1px solid #ddd; text-align:Center; border-radius:50px; padding:10px; background:#f9f9f9; margin-bottom:20px;}
.test_result_table>tbody>tr>td {padding:10px; border:0; width:33%}
.test_result_table>tbody>tr>td {font-weight:bold}



/* ¼¼ºÎ */
.basic_tbl thead {background:#f9f9f9; border-top:1px solid #222; }
.basic_tbl thead th {border-bottom:1px solid #ddd; padding:10px;}
.basic_tbl td {border-bottom:1px solid #ddd; vertical-align:middle;}

.birth_input select {width:20%; display:inline-block;}

.table-bordered th{background:#f9f9f9}
.table-bordered>tr>td>table>tr>td {padding-right:5px;}
.table>thead>tr>th {border-bottom:0; padding:10px;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {vertical-align:middle; padding:4px;}

.table-bordered label {font-weight:400}



.tit_wrap {display:inlin-block;}
.tit_wrap p {color:#666; padding-bottom:30px;}
.h3_tit {color:#222; font-weight:700; padding-right:10px;}
.h4_tit {color:#222; font-weight:700; padding-right:10px; font-size:18px}
.btn-right {float:right; right:0; margin-top:0; margin-bottom:10px;}


.btn_info {border:1px solid #ccc; border-radius:30px; background:#f5f5f5; }
.btn_test {border:1px solid #007bc9; border-radius:30px; background:#229deb; color:#fff;}
.btn_close {border:1px solid #007bc9; border-radius:5px; background:#229deb; color:#fff; text-align:center; }
.btn_test:hover, .btn_close:hover {color:#fff}

.input_tbl>tbody>tr>td, .input_tbl>tbody>tr>th, .input_tbl>tfoot>tr>td, .input_tbl>tfoot>tr>th, .input_tbl>thead>tr>td, .input_tbl>thead>tr>th {border-top:0;}
.input_tbl {border-top:1px solid #222;}
.input_tbl>tbody>tr>td {border-bottom:1px solid #ddd; padding-left:15px;}
.input_tbl>tbody>tr>td.tit {background:#f7f7f7}
.modal-footer {text-align:center;}

.pr-5 {padding-right:5px;}

.btn-danger {padding: 5px !important;}
.btn_bottom {width:200px; margin:0 auto; }
.btn_bottom .btn_progress {background:#229deb; color:#fff; width:200px; padding:10px; }



/* ------------------------------------ */

/*
#myModal, #myNext {
	
	margin-top : 20%;
    vertical-align: middle;
}
*/


.dropdown-menu {
    min-width: 105px !important;
}


#section1, #section2 {
    text-align:center; width:404px; margin: 0 auto;
}

#question {
    margin: 0 -10%;
}
#question2 {
    margin: 0 3%;
}
.__animation--circle {
  margin: 0;
  text-align: center;
}

.__bg--circle-wrapper {
  width: 240px;
  height: 240px;
  mix-blend-mode: multiply;
  position: relative;
  padding: 1rem;
  margin: auto;
}

.__bg--circle-wrapper p {
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  top: 50%;
  z-index: 1;
  position: absolute;
  padding: 0 5%;
}


.__bg--circle-anim {
  background: #f66;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  animation: border-animation 6s infinite linear, bg-color-gradation-anim 10s infinite linear;
}

.__bg--circle-1 {
  background: #f66;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  animation: border-animation 6s infinite linear, bg-color-gradation-5 10s infinite linear;
}

/* Animation */
@keyframes border-animation {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bg-color-gradation-anim {
  0% {
    background-color: #e74c3c;
  }

  20% {
    background-color: #f1c40f;
  }

  40% {
    background-color: #1abc9c;
  }

  60% {
    background-color: #3498db;
  }

  80% {
    background-color: #9b59b6;
  }

  100% {
    background-color: #e74c3c;
  }
}

@media screen and (max-width: 768px) { 
	.header h1 {text-align:left;}
	.loginArea {background:url('/static/img/login_bg_m.png') center top no-repeat; background-size:cover; position:relative; overflow:hidden; height:100%}
	.loginArea .login_box {width:60%; margin:10rem auto; padding:30px;}
	
	/*
		20250103 kang ÁÖ¼®Ã³¸®
		.contents {width:96%; margin:0 2%}
	*/
	
	.color img {max-width:50px; max-height:50px;}
	
	#myModal, #myNext {
	
	margin-top : 20%;
    vertical-align: middle;
}
	

}

@media screen and (max-width: 500px) { 
.birth_input select {width:45%; margin-bottom:3px}

	
}

@media screen and (max-width: 400px) {
	
	#myModal, #myNext {
	


	}
	
}



/* 20250113 kang ¼öÁ¤ */
.btn-right2 {float:right;}
@media screen and (max-width: 768px) {
	.form-inline {
		flex-wrap: wrap;
	}
	
	.form-selectSerach {
		flex-wrap: wrap;
		margin-top: 10px;
	}
	
	.contents {
		margin:0 20px;
	}
}

/* °Ë»ö ¿µ¿ª ÄÁÅ×ÀÌ³Ê */
.search-container {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* À̸§ °Ë»ö ÀÔ·Â ¿µ¿ª */
.search-name-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* select °Ë»ö ±×·ì */
.search-select-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;
}

/* select ¹Ú½º °øÅë ½ºÅ¸ÀÏ */
.search-select-group select {
    min-height: 20px;
    padding: 0 15px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* °Ë»ö ¹öÆ° */
.search-button {
    margin-left: 10px;
}

/* °Ë»çÁøÇà ¹öÆ° */
.test-button {
    margin-left: auto;  /* ¿À¸¥ÂÊ Á¤·Ä */
}

/* Å×ÀÌºí ½ºÅ¸ÀÏ */
.table.basic_tbl {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

/* ¸ð´Þ °ü·Ã ½ºÅ¸ÀÏ */
.modal-content {
    border-radius: 8px;
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.test_result_table td {
    padding: 10px;
    vertical-align: middle;
}

/* ÆäÀÌÁö³×ÀÌ¼Ç ¿µ¿ª */
.page {
    margin-top: 20px;
    text-align: center;
}

/* ¹ÝÀÀÇü µðÀÚÀÎÀ» À§ÇÑ ¹Ìµð¾î Äõ¸® */
@media screen and (max-width: 768px) {
    .search-container {
        /* flex-direction: column;*/
        gap: 15px;
    }
    
    .search-select-group {
        flex-direction: column;
        width: 100%;
    }
    
    .search-select-group select {
        width: 100%;
    }
    
    .test-button {
        width: 100%;
        margin-top: 10px;
    }
    
    .search-button {
    	margin-left: 0;
    }
}

/* »ö»ó º¯¼ö È°¿ë */
:root {
    --border-color: #e1e1e1;
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
}

.btn-left .btn {
    margin-right: 5px;
}

.btn-left .btnReset {
    background-color: #6c757d;  /* ȸ»ö °è¿­·Î °Ë»ö ¹öÆ°°ú ±¸ºÐ */
    color: white;
}

.btn-left {
	display: flex;
    justify-content: flex-start;
    align-items: center;
}





/* 20250114 kang ¼öÁ¤ */
.header-logo h1, h5 {
	display: inline-block;
}

.top_util {float:right; margin-top:-40px;}

.header {
	height:100%;
	background:#fff;
	box-shadow:0 0px 10px rgba(0, 0, 0, 0.1);
	border-bottom:1px solid #eee;
}
.header h1 {
	text-align:center; margin-top:10px;
}
.header h1 img {
	margin:0 auto;
}

@media screen and (max-width: 768px) {
	.container {
		padding-bottom: 10px; 
	}
	
    .header-logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-logo h1 {
        margin: 0;
        padding-top: 10px;
    }
    
    .header-logo h5 {
        margin: 5px 0 0 5px;
    }
}

/* 20250119 kang ¼öÁ¤ */
/* ¸ð¹ÙÀÏ °Ë»ö ¹öÆ° ÄÁÅ×ÀÌ³Ê */
.mobile-search-btn {
    display: none;
}

/* ¹Ìµð¾î Äõ¸® ¼öÁ¤ */
@media screen and (max-width: 1024px) {
    .search-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .search-container .search-name-wrapper,
    .search-container .search-select-group {
        display: none;
    }
    
    .mobile-search-btn {
        display: block;
    }
    
    .mobile-search-btn .btn-modal-search {
        display: inline-block;
    }
    
    /* °Ë»çÁøÇà ¹öÆ° ½ºÅ¸ÀÏ Á¶Á¤ */
    .btn-right2.search-button {
        margin-left: 10px;
    }
    
    #searchModal {
    	transform: translateY(10%);
    }
}