@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

@charset "utf-8";

/*°øÅë ½ºÅ¸ÀÏ**********************************************/

html, body{height: 100%; padding:0; margin:0; font-size:14px; box-sizing:border-box; letter-spacing:-0.4px; font-family: 'Noto Sans KR', sans-serif !important;}
* {box-sizing:border-box;}
.wrap {max-width:640px; margin:0 auto;}
ol, ul {margin:0 !important;}
a:active, a:hover, a:link {text-decoration:none !important;}
h1 {font-size:2rem !important; font-weight:700 !important;}
h2 {font-size:2.3rem !important; text-align:center; font-weight:400 !important; line-height:1.3 !important;}
h3 {font-size:1.3rem !important; margin-bottom:5px !important;  margin-top:10px !important; line-height:1.3 !important; }
h2 strong {font-weight:700 !important; display:block;}
h2 span.sub {font-size:2.7rem !important; font-weight:400 !important; line-height:1.3; display:block;}
P { padding:0!important; margin:0; }
.text_wrap {font-size:2.1rem; line-height: 1.7; overflow:hidden; width: 100%;}
.text_wrap p.txt {margin:0 0 15px 0; text-align:justify;}
.copyright {float:right; margin: 10px 0 10px 0;}

.section { position:relative;}
.color {color:#f6790a;}
.color_red {color:red;}
.img_wrap > img, .section > a > img {width:100%; margin:0 auto; display:block;}

.score {position: absolute; top:34%; left:50%; transform:translateX(-50%); width:240px; height:240px; z-index:1;}
.js-circle {transform:rotate(90deg) translate(350px, -350px) scaleX(-1);}
.score::before {content:''; background:#fff; width:190px; height:190px; border-radius:999px; left:50%; top:50%; transform:translate(-50%, -50%); position:absolute; z-index:-1; } 
.score-circle {transition: stroke-dashoffset 2s ease-out; stroke: #ff3867; stroke-linecap:round;}
.score-empty {stroke: #250d65;}
.score span {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}

footer {text-align:center; padding:30px 0;}

.wd10 {width:10% !important;}
.wd20 {width:20% !important;}
.wd30 {width:30% !important;}
.wd40 {width:40% !important;}
.wd50 {width:50% !important;}
.wd60 {width:60% !important;}
.wd70 {width:70% !important;}
.wd80 {width:80% !important;}
.wd90 {width:90% !important;}
.wd100 {width:100% !important;}
.wdAUTO {width:auto !important;}



/*error*********************************************/
#msg_null { position: fixed; width: 100%; text-align: center; z-index: 10000; }



/*Æ˾÷*********************************************/
#popup{position:absolute; top:50px; left:25px; padding:5px; z-index:999; background:rgba(255, 255, 255, 0.7);}
#close{cursor:pointer; float:right; padding-top:5px;}
.popup { position: relative; font-size: 13px; color: #555; }
.popup h1 { margin:0; padding: 10px; background: #333; color:#FFF; font-size: 18px !important; font-weight: bold; }
.popup h2 { font-size: 14px; margin: 25px 15px 15px; }
.popup p { margin: 0; }
.popup .close-popup { position: absolute; top: 8px; right: 13px; }
.popup .close-popup a { display: inline-block; width:20px; height:20px; background: url(../../image/close-popup.webp) no-repeat; text-indent: -99999px; overflow: hidden; }
.popup .pre {display: inline-block; width:100%; padding:0 2%; word-wrap: break-word; word-break: break-all; line-height: 1.3; white-space: pre-wrap; text-align: left; }
.popup .pre .poptxt{font-size:15px; font-weight:bold; color:#03C;}
.popup .pre .poptxtBox{border:1px solid #CCC; box-sizing:border-box; padding:0 2%;}
.popup .pre .p5 { padding-top: 10px; }
.no-pre {display: inline-block; width: 94%; padding: 1% 2% 20px; line-height: 1.6; letter-spacing: -0.07em; }
.no-pre dl { margin-top: 10px; margin-bottom: 10px; }
.no-pre dd { padding-left: 10px; margin-bottom: 10px; }
.no-pre dt { margin-bottom: 10px; font-weight: bold; }
.no-pre ul { margin-top: 5px; margin-bottom: 10px; }
.no-pre li { padding-left: 15px; margin-bottom: 10px; }
.no-pre table { border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; }
.no-pre table th { padding: 5px; background: #ddd; border: 1px solid #ccc; }
.no-pre table td { padding: 5px; border: 1px solid #ccc; }
.no-pre .old-link { display: block; text-align: center; }
.no-pre .old-link a { display: inline-block; padding: 10px; border: 1px solid #ccc; background: #f3f3f3; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; color: #000; }
.agree_txt_all { padding: 20px; }
.text_st01 { padding-top: 15px; }
.popup table { margin-top: 15px; margin-bottom: 15px; }


/*µðºñÆû******************************************/
.form {padding:5% 3% 10%; margin-bottom:0%;}
.db_box_inner {background:#fff;  padding:30px; margin-top:5%;}
.db_btn {margin:0 auto; display:block; max-width:330px;}

/*µðºñÆû input °øÅë*/
.db_box label {font-weight:normal !important;}
.db_box table {border-collapse: separate;  border-spacing: 0 3px;}
.db_box table tr:not(:last-child) td:first-child {font-weight:600; width:100px; font-size:16px;}
.db_box table td.center:first-child {font-weight:400;}
.db_box td input, .db_box td select {width:100%; height:45px; border:1px solid #ccc; background:#fff; }
.db_box td input[type=checkbox] {width: 15px; height: 15px; margin: -2px 0 0 0;}
.db_box tr:last-child td {padding-top:15px;}
.db_box .db_btn {margin-top:20px;}

.db_box .db_info {border-bottom:1px solid #ccc;}
.db_box .db_info .q_a {margin-bottom:20px !important;}
.db_box .db_info .q_a > li:first-child {font-size:16px; font-weight:600; margin-bottom:5px;}
.db_box .db_info .q_a .select_area {display:flex; justify-content: space-between;}
.db_box .db_info .q_1 .select_area li {width:32%;}
.db_box .db_info .q_2 .select_area li {width:24%;}
.db_box .db_info .q_3 .select_area li {width:49%;}
.db_box .db_info .select_area label {font-weight:normal; font-size:16px; cursor:pointer; color: #666; display: inline-block;  width: 100%;  text-align: center;  box-sizing: border-box;  background: #fff;  padding: 5px 2px; border:1px solid #ccc;}
.db_box .db_info input[type=checkbox], .db_box .db_info input[type=radio] {display:none;}
.db_box .db_info input:checked + label { color:#fff; background:#072355;}



/*-------responsive----------------------------------------------------------------*/


@media all and (max-width:480px) {
	.db_box table tr:not(:last-child) td:first-child {width:85px; font-size:14px;}
}

@media all and (max-width:420px) {
	.wdAUTO {width:100% !important;}
	.db_box .db_btn {width:100%;}
}

@media all and (max-width:375px) {
	.checkWrap {text-align: center; margin-bottom: 10px; display: block;}
	.weightForm {width: 90%; margin: auto;}
	.checkWrap button {margin: 8px 0;}
}
.red {color:#ee0000; font-weight:500; }




/* PC 
------------------------------------------------------------------------------------------------------------*/

.wrap {max-width:640px; margin:0 auto;}
.wrap .contents { position:relative; text-align:center; }
.wrap .contents img { width:100%; max-width:600px; min-width:320px;  }

.wrap .quick { position: fixed; bottom:0; right:0; z-index:99999; overflow:hidden; padding:10px; }
.wrap .quick img { width:100px; }
 
/*form */
.wrap .form1 { background-color:#fff; }
.wrap .form1 .inner { max-width:600px; min-width:320px; margin:0 auto; padding:40px 10px 50px 10px; }
.wrap .form1 .inner h1 { font-size:52px; line-height:54px; font-weight:700; word-break:keep-all; }

.wrap .form1 .formArea { width:100%; margin:0 auto; overflow: hidden; }
.wrap .form1 .formGroup { text-align:center; }

.wrap .form1 .form_table { width:100%; border-collapse:collapse; font-size:1em; border-top:1px solid #d7d7d7;}
.wrap .form1 .form_table tbody tr { border-bottom:1px solid #d7d7d7; }
.wrap .form1 .form_table tbody tr:last-child { }
.wrap .form1 .form_table tbody th { padding:12px 10px ; vertical-align:middle; text-align:right; line-height:120%; font-size:19px; font-weight:400;  letter-spacing:-2px; }
.wrap .form1 .form_table tbody td { padding:12px 10px; vertical-align:middle; text-align:left; line-height:120%; font-size:18px; font-weight:400;}

.wrap .form1 .input_style:focus, .wrap .sel_style:focus, .wrap .textarea_style:focus { border-color:#303f99; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fff; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fff;}

.wrap .form1 label { display:inline-block; padding-right:15px; line-height:210%; }
.wrap .form1 .input_style { width:100%; padding-left:10px; height:40px; border:1px solid #ccc; font-size:16px; }
.wrap .form1 .sel_style { width:100%; padding-left:10px; height:40px; border:1px solid #ccc; font-size:16px; vertical-align:middle;}
.wrap .form1 .textarea_style { width:100%; padding:10px; height:80px; border:1px solid #ccc; font-size:16px; }

.wrap .form1 .submit_box { padding-top:10px; }
.wrap .form1 .submit_box .btn01 { width:80%; text-align:center; font-weight:500; font-size:26px; line-height:120%; letter-spacing:-2px; margin-top:10px; cursor:pointer; color:#fff; background-color:#e71875; border:none;  padding:15px 0; border-radius:10px; }
 

.img_wrap > img, .section > a > img {width:100%; margin:0 auto; display:block;}

.text_wrap {font-size:2.1rem; line-height: 1.7; overflow:hidden; width: 100%;}
.text_wrap p.txt {margin:0 0 15px 0; text-align:justify;}
.copyright {float:right; margin: 10px 0 10px 0;}

.section { position:relative;}
.color {color:#f6790a;}
.color_red {color:red;}
.img_wrap > img, .section > a > img {width:100%; margin:0 auto; display:block;}

.score {position: absolute; top:34%; left:50%; transform:translateX(-50%); width:240px; height:240px; z-index:1;}
.js-circle {transform:rotate(90deg) translate(350px, -350px) scaleX(-1);}
.score::before {content:''; background:#fff; width:190px; height:190px; border-radius:999px; left:50%; top:50%; transform:translate(-50%, -50%); position:absolute; z-index:-1; } 
.score-circle {transition: stroke-dashoffset 2s ease-out; stroke: #ff3867; stroke-linecap:round;}
.score-empty {stroke: #250d65;}
.score span {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
 


@media all and (max-width:640px) {

	html{font-size:9px !important;}
	h1 {line-height: 1.2 !important;  font-size: 2.6rem !important;}
	h2 {font-size:2.4rem !important;}
	h3 {font-size:2.3rem !important;}
	
	.score {width:37vw; height:37vw;}
	.js-circle {transform:rotate(90deg) translate(87.5%, -87.5%) scaleX(-1);}
	.score::before {width:30vw; height:30vw;}  
	.score span {width:50%; margin:0 auto;}
	.score img {width:100%;}

	/*db*/
	.db_box_inner {padding:7% 5%;}
	.db_box td {font-size:14px;} 
	.db_box .db_info .select_area label, .db_box .db_info .q_a > li:first-child {font-size:14px;}

	footer > p {font-size: 12px; word-break: keep-all;}
}
/* MOBILE
------------------------------------------------------------------------------------------------------------*/

.m_wrap  {max-width:640px; margin:0 auto;}
.m_wrap .contents img { width:100%; }

.m_wrap .quick { position: fixed; bottom:0; right:0; z-index:99999; overflow:hidden; padding:10px; }
.m_wrap .quick img { width:100px; }
 
/*form */

.formGroup:before, .formGroup:after { content: " "; display:table; }
.formGroup:after { clear:both; }

.m_wrap .form1 { }
.m_wrap .form1 .inner { background-color:#fff; }
.m_wrap .form1 .inner h1 { font-size:36px; line-height:40px; font-weight:700; letter-spacing:-2px; }
.m_wrap .form1 .formArea { width:96%; margin:0 auto; overflow:hidden; padding:30px 10px 30px 10px; }
.m_wrap .form1 .formGroup { margin-bottom:12px; text-align:center; }


.m_wrap .form1 .form_table { width:100%; padding:15px 0; border-collapse:collapse; border-top:1px solid #d7d7d7;}
.m_wrap .form1 .form_table tbody th { padding:8px 4px; vertical-align:middle; text-align:left; line-height:24px; font-size:16px; font-weight:400; letter-spacing:-2px; }
.m_wrap .form1 .form_table tbody td { padding:8px 4px; vertical-align:middle; text-align:left; line-height:24px; font-size:16px; font-weight:400; }
.m_wrap .form1 .form_table tbody tr { border-bottom:1px solid #d7d7d7; }

.m_wrap .form1 label { display:inline-block; padding-right:10px; }

.m_wrap .form1 .input_style:focus, .m_wrap .sel_style:focus, .m_wrap .textarea_style:focus { border-color:#303f99; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fff; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fff;}
.m_wrap .form1 .input_style { padding-left:5px; height:38px; border:1px solid #ccc; font-size:15px; }
.m_wrap .form1 .sel_style { width:100%; height:38px; border:1px solid #ccc; font-size:14px; vertical-align:middle; background-color:#fff;}
.m_wrap .form1 .textarea_style { width:100%; padding:6px; height:60px; border:1px solid #ccc; font-size:15px; resize:none;}

.m_wrap .form1 .submit_box { width:100%; text-align:center; }
.m_wrap .form1 .submit_box button { width:100%; font-weight:500; font-size:22px; line-height:120%; letter-spacing:-2px; cursor:pointer; color:#fff; background-color:#e71875; border:none; max-width:400px; padding:15px 0; border-radius:15px; }

/* popup CSS */
.complete_wrap { position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 10000; display:none;} 
.complete_wrap .bg { position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,0.8);z-index: 10001; }
.complete_wrap .inner { position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); height: 365px; max-height: 90vh;background: #fff;z-index: 10002; }
.complete_wrap .inner { width:90%; overflow:hidden; border-bottom:0px solid #000; background-color:none;color:#fff; font-size:14px; line-height:0; max-width:500px; margin:0 auto;}
.complete_wrap .inner .close { position: absolute;top: 20px;right: 20px; width:20px; font-weight:600; }
.complete_wrap .inner .close img { width: 100%;height: 100%; }
.complete_wrap .inner .iframe { height:100%;width:100%;border:0; overflow:hidden;}