@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
*{margin:0; padding:0;}
* {margin:0; padding:0; box-sizing:border-box}
body {width:100%; font-family: 'Inter', 'Noto Sans KR', sans-serif; font-size:16px; font-weight: 400}
a {text-decoration:none; color:inherit}
ul,ol,dl {list-style:none}
input[type="text"],
input[type="number"],
input[type="tel"]  {-webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; border:0; padding:0 10px; font-family: inherit; font-size: inherit}
button {background:transparent; border:0; outline:0; cursor:pointer; font-family: inherit; font-size: inherit;}
img {border:0; vertical-align:middle}
iframe {width:0; height:0; visibility:hidden; position:absolute; top:0; left:0}


#icletime {width:100%; max-width:750px; margin:0 auto; position:relative}
#icletime > img {width:100%; display: block}

/* 헤더 */

header {
	width: 100%;
	max-width: 680px;
	margin: 0px auto;
	text-align: left;
	padding: 15px 10px 30px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 10px;
    position:relative;
}

header h1 {
	font-weight: 400;
	font-size: 40px;
	padding: 20px 0px 40px 0px;
	line-height: 1.4;
	color: #000;
	letter-spacing: -1px;
	text-align: left;
    font-family:  "Pretendard Variable", Pretendard, 'sans-serif' !important;
}

header h2 {
	font-weight: 400;
	font-size: 18px;
	padding: 5% 0px 0px 0px;
	line-height: 1.3;
	text-align: left;
color: #292929;
	
}

header p {
	font-weight: 300;
	line-height: 1.7;
	color: #a1a1a1;
	position: relative;
    font-size: 15px;
	margin: 0px;
	text-align: left;
}

header h5{
	font-weight: 400;
	font-size: 19px;
	padding: 0px 0px 0px 0px;
	line-height: 1;
	color: #666;
	letter-spacing: -1px;
	text-align: left;
}

.sub {
	width: 100%;
	color: #999999;
	font-size: 17px;
	margin-top: 0px;
}

.sub img {
	width: 46px;
	margin-right: 12px;
}

header .sub2 {font-weight: 400;line-height: 1.7;color: #4c227b; position: absolute;font-size: 14px;margin: 0px;padding: 4px 10px;; display: block;text-align: right; right: 10px; border: 1px solid #4c227b;  }


/* 본문*/
#wrap {
	width: 90%;
	max-width: 680px;
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}

#wrap h2 {
font-weight: 600;
	font-size: 25px;
	padding: 18px 0px;
margin-top: 5%;
	line-height: 1.3;
	color: #1d1d1d;
    text-align: left;
    border-bottom: 1px solid #9b9b9b;
    font-family: "Nanum Myeongjo", serif;
}
.imgsub {
    font-weight: 300;
	position: relative;
	font-size: 16px;
	margin: 7px 0px 0px 0px;
    color: #717171;
}
h6 {
	font-weight: 600;
	line-height: 1.6;
	color: red;
	position: relative;
    border-bottom: 0px solid#7e7e7e;
	font-size: 28px;
	margin: 7px 0px 0px 0px;}
h7 {
	font-weight: 300;
	line-height: 1.6;
	color: #222222;
	position: relative;
	text-align: center;
	font-size: 21px;
	margin: 20px 0px 40px 0px;	}

hr{margin-top: 20px;margin-bottom: 20px;}


.img_wrap {
	width: 100%;
	border: 0px solid#eee;
	margin: auto;
	padding-top: 6%;	
}

.text_wrap {
	overflow: hidden;
	width: 100%;
	font-size: 21px;
	line-height: 1.9;
	letter-spacing: -0.5px;
	padding-top: 6%;

}
mark {
	color: red;
	background-color: #fff947;
    font-weight: bold;
    padding: 0 5px;
    font-size: 22px;}

.line{
text-decoration: underline; text-underline-position:under; color:#000;
	font-weight: 500;}
hr{border: 1px solid #cfcfcf; width: 70%; margin: 0 auto; margin-top: 6%;}
.notice{
    text-decoration: underline; text-underline-position:under; color:#e51e1e; padding-right: 3px;font-size: 24px; }
.notice2{ 
    text-decoration: underline; text-underline-position:under; color:#e51e1e; padding-right: 3px;font-size: 22px; }

.redd {text-decoration: underline; text-underline-position:under; color:#e51e1e; padding-right: 3px;font-size: 30px;}
.point {font-size: 22px; color: black;}

.aa img {width: 4%;padding-top: 3%; padding-bottom: 3%;display: block;}

u {
	text-decoration: underline;
	text-underline-position: under;
	font-weight: 600;
}
.un p img {
	width: 70px;
	margin: 0 auto;
	text-align: center;}


div.infobox {clear:both;overflow:hidden;display:block;position:relative;margin:5% 0 5% 0;color:#333;}
div.infobox img {position:relative;margin:0;padding:0}

div.ipForm {padding:3% 4%; border:5px solid #381161; border-top: none; background:#fff;}
div.ipForm dl	{width:100%;float:left;padding:0;text-align:left;margin:2% 0;}
div.ipForm dl dt {width:16%;float:left;display:inline-block;font-size:1.0em;letter-spacing:-0.063em;font-weight:normal;text-align:left;padding:2% 0 0 0;}
div.ipForm dl dd {width:80%;float:left;display:inline-block; margin: 0 0 0 3%; white-space:nowrap;}
div.ipForm dl dd label {width:90%;float:left;display:inline-block;}
div.ipForm dl dd ipForm {border:1px solid #ccc;width:30%;padding:5px 3px;}
div.ipForm dl dd input {display:inline-block;width:94%;height:27px;padding:2% 2%;border:1px solid #616161;color:#646464;-webkit-border-radius:0; font-size:1.125em;}



div.ipForm dl dd .inputChk {width:0.750em;height:0.750em;color:#a0a0a0;padding:0;}

div.ipForm .Form_Q {width:100%; float:left; line-height:1.5; padding-bottom:2%; border-bottom:2px dashed #eee;}
div.ipForm .Form_Q th {font-size:1.125em; text-align:left; padding:2% 0;}

div.ipForm .bnr {width:100%;margin:0 auto;padding:0;}
div.ipForm .bnr button {width:100%;padding:3% 0;background:#1e4acd;color:#fff;border:0;font-weight:bold;font-size:1.500em;letter-spacing:-0.063em;}
/*디비*/




/* main_db */
#main_db {max-width: 750px; background: #fff1de; padding: 5%}
#main_db dl {width:100%; display:table; margin-bottom:10px}
#main_db dl > * {display:table-cell; vertical-align:middle}
#main_db dl dt {width:30%; font-weight: 500; font-size: 21px}
#main_db dl dd {width:70%}
#main_db dl dd input {width:100%; height:45px; border-radius:5px; padding:0 10px; font-family: inherit; font-size: 18px}
#main_db dl dd select {font-size:18px; height:45px; border-radius:5px; padding:0 10px; margin:2% 0%;width: 28%; border: 0px; color: #828282;}
#main_db dl dd .s_btn {width:100%; height:45px; line-height:45px; text-align:center}
#main_db dl dd .s_btn  {width:50%; height:100%; float:left; background:#fff; cursor:pointer; font-size: 18px}
#main_db dl dd  .on {background:#ffd700; color:#222}
#main_db dl dd .s_btn .s_m {border-radius:5px 0 0 5px}
#main_db dl dd .s_btn .s_f {border-radius:0 5px 5px 0}

.dbq .q_sub3 input {
    display: none;
}

.dbq .q_sub3 input + label {
    display: inline-block;
    width: 49%;
    padding: 8px 6px;
    text-align:center;
    background: #fff;
    border-radius: 5px;
	font-size: 18px;
	font-weight: 400;
	cursor:pointer; 
}

.dbq .q_sub3 input:checked + label {
background:#ffd700; color:#222;
}


#main_db .agree {width:100%; margin:20px 0; text-align:center; clear:both}
#main_db .agree a {vertical-align: middle; font-size: 12px; opacity: 0.8; letter-spacing: -1px}
#main_db .agree input[type="checkbox"] {vertical-align: middle}
#main_db .bnr {text-align:center}
#main_db .bnr button {width:100%}
#main_db .bnr button img {width:100%}
	#sfrm3 #n_age::placeholder { font-size: 13px;}
/* 메인DB 희망키 선택 영역 */
.n_content {margin-bottom: 5%; padding: 5%; border: 1px solid #fff;  border-radius: 10px;  background: rgba(255, 255, 255, 0.6)}
.n_content .n_content_title {letter-spacing: -1px; margin-bottom: 15px}
.n_content .n_content_title p {font-size: 21px; font-weight: 500}
.content_wrap {margin: 0 -5px}
.content_wrap:before,
.content_wrap:after {content:''; width: 100%; display: block}
.content_wrap:after {clear: both}
.content_wrap > div {width: 50%; float: left; padding: 0 5px; margin: 5px 0}
.content_wrap > div label {display: block; width: 100%; height: 40px; text-align: center; line-height: 38px; border: 1px solid #555; border-radius: 5px; font-size: 18px; cursor: pointer}
.content_wrap > div input[type="radio"] {display: none}
.content_wrap > div input[type="radio"]:checked + label {background: #ff4b28; border-color: #ff4b28; color:#fff;  font-weight: 500}

.incall a {display:block}
.incall a img {width:100%}

.video {background: #000; padding: 30px 30px 0 30px}
.video img {width: 100%}



.self_test {padding:0px; background:#fff; text-align:center}
.self_test h2 {font-size:1.5em}
.self_test p {font-size:1.3em}
.self_test .inner_box {width:92%; background:#fff; box-shadow:0 0 0px #eee; padding:0px 20px; margin:auto;text-align: center;border: 1px solid #17b2b1;border-radius: 5px;}
.self_test .inner_box ul {height:auto; overflow:hidden; margin:10px 0}
.self_test .inner_box ul li {width: 100%; float:left; text-align: left; font-size: 1.3em; font-weight:300; line-height:1.6;  position:relative}
.self_test .inner_box ul li input {position: absolute; top: 0; left: 0; width: 0; height: 0}
.self_test .inner_box ul li label {position:relative; padding-left:30px}
.self_test .inner_box ul li label:before {content:''; width:20px; height:20px; border:1px solid #ddd;  display: inline-block; vertical-align: -2px; margin-right: 5px; position:absolute; top:6px; left:0}
.self_test .inner_box ul li input[type="checkbox"]:checked+label:after {content:'\e929'; font-family: 'xeicon'; color: #fff;background: #17b2b1; line-height:20px; position:absolute; top:6px; left:0; width:22px; height:22px; text-align:center; line-height:20px}






section {padding:5% 4% 0 4%;}
section img { padding:3% 0 0 0;}
.arrow {width:90%;padding-top: 5% !important;padding-bottom: 5% !important; margin:0 auto !important; display: block;}
button {cursor:pointer;}

.foot{background:#eee; text-align:center; padding:20px 0;  z-index:999;margin: auto; font-size:12px; color: #9b9b9b;width: 100%;letter-spacing: -0.063em;padding-bottom:20px; }


@media screen and (max-width:600px) {
.foot{background:#eee; text-align:center; padding:20px 0;  z-index:999;margin: auto; font-size:12px; color: #9b9b9b;max-width:720px;width: 100%;letter-spacing: -0.063em;padding-bottom:20px; }
}
@media screen and (max-width:500px) {
    body {font-size:13px}

    #main_db {padding:30px 10px}
    #main_db dl {width:100%}
    #main_db dl dt {font-size: 16px}
    #main_db dl dd input {height:40px; font-size: 16px}
    #main_db dl dd select {height:40px; font-size: 16px;}
    #main_db dl dd .s_btn {height:40px; line-height:40px}
    #main_db dl dd .s_btn > div {font-size: 15px}

    .db_slide_wrap .db_slide .cell {font-size: 12px}
    .db_slide_wrap .db_slide .cell.name {width: 15%}
    .db_slide_wrap .db_slide .cell.age {width: 15%}
    .db_slide_wrap .db_slide .cell.phone {width: 40%}
    .db_slide_wrap .db_slide .cell.state {width: 30%}



    .n_content {padding: 3%}
    .n_content .n_content_title p {font-size: 18px}
    .content_wrap > div label {font-size: 16px}

}
@media screen and (max-width:320px) {
    #main_db dl dt {font-size: 15px}
}