@charset "utf-8";

/*공통 스타일**********************************************/
html, body{height: 100%; 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:860px; 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;}

.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;}
.img_wrap > a > img {width:100%; margin:0 auto; display:block;}

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 {background:#ededed; padding:5% 5% 7%; margin-bottom:0%;}
.db_box_inner {background:#fff;  padding:30px; margin-top:5%;}

.db_btn {margin:0 auto; display:block; width:100%; max-width:484px;}

/*디비폼 input 공통*/
.db_box label {font-weight:normal !important;}
.db_box table {border-collapse: separate;border-spacing: 0 3px;}
.db_box table td:first-child {font-weight:600;}
.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:860px) {

	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;}
	
   
	
	/*db*/
	.db_box_inner {padding:7% 5%;}
	.db_box td {font-size:14px;}
	.form {padding:5% 3% 7%;}
	.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;}
}

@media all and (max-width:600px) {
	.content {padding:0;}
}

@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;}
}