@charset "utf-8";
/**
 * @file	: container.css
 * @author	: story
 * @brief	: 에너지관리공단 설문조사
 **/

.content_area {max-width:1300px; margin:0 auto; padding:0 30px; height:100%; text-align:center;}
.sub_content_area {width:100%; height:100%;}
.sub_content_inner {max-width:1300px; margin:30px auto; padding:30px; height:100%; border-radius:10px; background-color:#fff;}

h1 {padding:80px 0 40px; font-family:'Jalnan'; font-size:40px; line-height:50px; color:#fff;}
h1.ch1 {padding:10px; font-size:27px; color:#fff; line-height:35px;}
h2 {font-family:'Jalnan'; font-size:23px; line-height:30px; }
h2 span {font-size:28px;}
h3 {font-family:'S-Core'; font-size:18px;}
.btn-box {text-align:center; margin:80px 0 50px;}
.summary {font-size:21px; font-weight:300; line-height:30px; color:#fff;}
.summary span {display:inline-block;}
.privacy {font-size:16px; font-weight:300; line-height:30px; color:#111;}
.period {font-size:23px; font-weight:400;}
.contact {font-size:16px; line-height:25px; font-weight:300;}
.ch1-box {width:100%; padding:15px 0; text-align:Center; background-color:#1171a9;}
.q-box-outer {position:relative; width:100%; font-size:18px; }
.q-box {display:block; padding:20px; background-color:#e6edff;}
.answer {display:block; margin-bottom:30px; padding:20px; background-color:#fff;}
.answer img {max-width:100%;}
.answer-guide {color:#ff5d3a; vertical-align:middle;}
.Nlist {display:flex; justify-content: center; flex-wrap: wrap;}
.Nlist li {padding:0 20px;}


/* 숫자라디오버튼 */
input[type="radio"] {display:none;}
input[type="radio"] + label {}
input[type="radio"] + label span.no0N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no0_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no0N {background:url("/images/no0_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no1N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no1_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no1N {background:url("/images/no1_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no2N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no2_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no2N {background:url("/images/no2_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no3N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no3_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no3N {background:url("/images/no3_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no4N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no4_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no4N {background:url("/images/no4_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no5N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no5_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no5N {background:url("/images/no5_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no6N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no6_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no6N {background:url("/images/no6_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no7N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no7_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no7N {background:url("/images/no7_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no8N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no8_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no8N {background:url("/images/no8_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no9N {display:inline-block; width:23px; height:23px; margin:0; vertical-align:middle; background:url("/images/no9_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no9N {background:url("/images/no9_on.png") 0 0 no-repeat;}

input[type="radio"] + label span.no0 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no0_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no0 {background:url("/images/no0_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no1 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no1_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no1 {background:url("/images/no1_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no2 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no2_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no2 {background:url("/images/no2_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no3 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no3_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no3 {background:url("/images/no3_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no4 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no4_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no4 {background:url("/images/no4_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no5 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no5_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no5 {background:url("/images/no5_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no6 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no6_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no6 {background:url("/images/no6_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no7 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no7_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no7 {background:url("/images/no7_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no8 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no8_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no8 {background:url("/images/no8_on.png") 0 0 no-repeat;}
input[type="radio"] + label span.no9 {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/no9_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.no9 {background:url("/images/no9_on.png") 0 0 no-repeat;}

/* 체크라디오버튼 */
input[type="radio"] + label span.img-check {display:inline-block; width:23px; height:23px; margin:-5px 8px 0 0; vertical-align:middle; background:url("/images/check_off.png") 0 0 no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span.img-check {background:url("/images/check_on.png") 0 0 no-repeat;}

/* 텍스트입력 */
.input-rank {width:50px; height:26px; padding:5px 5px 10px 5px; font-size:16px; color:#0072bc; border:none;}
.input-expense {width:150px; height:26px; padding:5px 5px 10px 5px; font-size:16px; color:#0072bc; border:none;}
.input-old, .input-person {width:50px; height:22px; padding:0 5px 4px 5px; font-size:16px; line-height:25px; color:#0072bc; border:none;}
.input-public {width:120px; height:22px; padding:0 5px 4px 5px; font-size:16px; line-height:25px; color:#0072bc; border:none;}
.input-line {width:50%; height:35px; border:1px solid #c8c8c8; border-radius:0; padding:0 10px; background:0 0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
}

/* 문항안내 */
.guide-ul {position:relative;}
.guide-ul li {width:100%; padding-left:15px; line-height:30px; font-size:18px; background:url(/images/dot_gray.png) no-repeat 0 0; background-position:0 11px;}

.important-ul {position:relative;}
.important-ul li {width:100%; padding-left:18px; line-height:30px; font-size:18px; background:url(/images/star_gray.png) no-repeat 0 0; background-position:0 9px;}
.item-ul li {width:98%; padding-left:5px; line-height:30px; font-size:17px; background:none;}

.ulist li {position:relative; padding-left:15px;}
.ulist li:before {position:absolute; content:''; top:12px; left:5px; width:4px; height:4px; background-color:#777;}

@media screen and (max-width:1024px) {
.btn-box {margin:40px 0;}
h1 {padding:40px 0 0; font-size:35px; line-height:50px;}
.contact, .summary, .privacy {font-size:18px;}
}

@media screen and (max-width:640px) {
h1 {padding:30px 0 0; font-size:30px; line-height:45px;}
.contact, .summary, .privacy {font-size:17px;}
.ch1-box {padding:2px 0;}
}

@media screen and (max-width:460px) {
.content_area {padding:0 20px;}
h1 {font-size:28px;}
.contact, .summary, .privacy {font-size:16px;}
.period {font-size:17px;}
}

@media screen and (max-width:320px) {
.contact, .summary, .privacy {font-size:14px;}
}