@charset "utf-8";

body,input,textarea,select,button,table{font-family:'Noto Sans CJK KR',Dotum,arial,sans-serif;font-size:14px;color:#333;font-weight:500; }


#wrap{position:relative; width:100%; height:100%; display:block; background:url(../img/main_bg01.png) no-repeat center -100px; margin:0 auto}
#header{position:relative; width:100%; height:550px; z-index:1000; margin:0 auto; box-sizing:border-box; background:url(../img/top_bg.png) no-repeat top center #5149f3;}

#header div.inner{position:relative; width:1300px; height:100%; display:table; margin:0 auto; padding:60px 0 0 0; box-sizing:border-box;}

#header h1{position:absolute; width:197px; height:48px; top:20px; left:0; display:block}
#header h1 a{width:100%; height:100%; display:block; background:url(../img/mi_02.png) no-repeat top center; background-size:100%; text-indent:-9999px}

#header ul{display:block; width:90%; margin:0 auto}
#header li{position:relative; width:auto; display:block; text-align:center;margin:0 auto; padding-bottom:20px}
#header li:nth-child(2){width:1000px}
#header li:nth-child(2)::after{content:"";position:absolute; display:block; background:url(../img/headcopy_04.png) no-repeat top center; width:32px; height:32px; right:-20px; top:-30px}
#header li:nth-child(3){color:#fff; font-size:20px; line-height:36px; font-weight:400; letter-spacing:-1px}
#header li:nth-child(3) b{background:#4e00ff; font-size:22px; font-weight:500; padding:2px 5px}
#header p{position:absolute; width:100%; height:270px; bottom:-60px; text-align:center; margin:0 auto}

#header li img{max-width:90%}

#survey{position:relative; width:100%; display:table; margin:0 auto; background:#c6e2f3; padding:60px 0 }
#survey h3{color:#000; text-align:center; font-size:28px; margin:40px auto 20px auto}
.survey_inner{position:relative; width:1300px; display:table; margin:0 auto; padding:70px 130px; box-sizing:border-box; background:#fff; border-radius:30px}
.que{position:relative; width:100%; display:table; margin:0 auto 50px auto; }
.que p{position:relative; width:100%; display:table; padding:0 0 0 60px; box-sizing:border-box; font-size:20px; line-height:24px; color:#222; font-weight:500; z-index:1000}
.que p b{position:absolute; top:-20px; left:0; display:block; width:56px; height:56px; line-height:54px; text-align:center; background:url(../img/q_no.png) no-repeat top center; background-size:100%; color:#fff; font-size:22px; font-weight:600}
.que ul{position:relative; width:100%; display:table; background:#e6f1f7; box-sizing:border-box; border-radius:10px; padding:25px 10px 25px 55px; margin:8px auto 12px auto }
.que li{display:inline-block; margin-right:60px; font-size:17px; }
.que li:last-child{margin-right:0}

.que.type_02 li{display:block; margin-right:0}
.que.type_03 ul{padding:30px}
.que.type_03 li{display:block; margin-right:0}

.opinion{position:relative; width:100%; display:table; background:#e6f1f7; box-sizing:border-box; border-radius:10px; padding:30px; margin:10px auto}
.opinion ul{position:relative; width:100%; display:table; padding:0 100px 10px 10px; box-sizing:border-box}
.opinion li:nth-child(1){position:relative; padding-left:10px; font-size:20px; color:#222}
.opinion li:nth-child(1)::before {content: ""; position: absolute; width: 7px; height: 7px; background-color: #0052b8; left:-10px; top:8px; border-radius:10px }
.opinion li:nth-child(2){position:absolute; top:5px; right:0; font-size:14px}
.opinion li:nth-child(2) span{color:#F00}


.etc{position:relative; width:100%; display:table; background:#e6f1f7; box-sizing:border-box; border-radius:10px; padding:40px 70px; margin:10px auto}

.etc dl{width:100%;margin-bottom:20px}
.etc dt{display:inline-block; width:130px; height:34px; line-height:34px; background:#1d84cc; border-radius:50px; color:#fff; text-align:center; font-size:18px; margin-right:20px}
.etc dd{display:inline-block;font-size:17px; margin-right:20px;}

.etc dl:nth-child(1){margin-bottom:20px}
.etc dl:last-child{margin-bottom:0px}


.thank{font-size:20px; color:#000; text-align:center; margin-top:40px; line-height:28px}
.parti{font-size:24px; color:#000; text-align:center; }

.btn_write{margin:40px auto; display:block; text-align:center}
.btn_write a{display:inline-block; background:url(../img/arrow.png) 85% center no-repeat #1f5bc9; color:#fff; font-size:20px; padding:20px 120px 20px 50px; border-radius:5px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2); transition: all .3s;}

.btn_write a:hover{background:url(../img/arrow.png) 90% center no-repeat #1f87c9; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.1); transition: all .3s;}


#footer{width:100%; height:120px; line-height:120px; color:#fff; margin:0 auto; text-align:center; background:#50535f; font-weight:500}


/* input 정의 */
input[type=text],input[type=password],input[type=number], select{height:35px;border:1px solid #ddd;background-color:#fff;line-height:35px; border-radius:3px}

input[type=text]{width:100%; border-top:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; border-bottom:1px solid #c3dae7; padding:20px; background:#fff; font-size:16px}

textarea{width:100%; border-top:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; border-bottom:1px solid #c3dae7; padding:20px; background:#fff; font-size:16px}

input[type=radio]{width:0;height:25px;opacity:0}
input[type=radio] + label{min-height:25px; display:inline-block;width:auto; padding-left:30px;background-repeat:no-repeat;background-position:left top;text-align:left;box-sizing:border-box; color:#444; font-weight:400; line-height:25px; margin:5px 0}
input[type=radio] + label{background-image:url(../img/radio_off.png);}
input[type=radio]:checked + label{background-image:url(../img/radio_on.png); color:#000; font-weight:500}/*color:#00416f;*/
input[type=radio]:disabled + label{background-image:url(../img/radio_off.png)}
input[type=radio] + label:hover,input[type=radio]+ label:focus{cursor:pointer}

@media only screen and (max-width:1350px) {
#header div.inner{width:90%;}
.survey_inner{width:90%; padding:70px}

}


@media only screen and (max-width:1250px) {
#header {height: 600px;}
#header li:nth-child(2){width:auto}

.opinion ul{padding:0 0 10px 10px}
.opinion li:nth-child(2){position:static; text-align:right; padding-top:5px}
.que li{margin-right:40px}

}


@media only screen and (max-width:1050px) {
#header li:nth-child(2)::after{display:none}

.etc{padding:40px}
.etc dl:nth-child(2) dd{width:auto; margin-right:10px}
}

@media only screen and (max-width:1000px) {
	#header{height:650px}
	#header ul {width: 100%;}
}

@media only screen and (max-width:900px){
#header{height:auto}
#header li:nth-child(2) img{padding:5px 0}
#header li:nth-child(3) span{display:block}
#header p{position:static; bottom:0}
}

@media only screen and (max-width:740px){
#header p{width:90%; height:auto }
#header p img{width:100%; padding-top:20px}
.survey_inner{padding:60px 40px}
.que ul{padding:25px 10px 25px 25px}
.que li{margin-right:0; width:48%}

.que.type_02 li{width:95%}
.que.type_03 li{width:100%}

.etc{padding:25px}
}

@media only screen and (max-width:680px){

#header h1{width:110px; height:50px;}
#header li:nth-child(3){font-size:18px; line-height:26px; word-break:break-all}
#header li:nth-child(3) br{display:none}
#header li:nth-child(3) span{display:contents}
#header li:nth-child(3) b{font-size:20px;} /* background:none; padding:0*/

.que p{font-size:18px}
.opinion ul{padding:0 0 10px 0}
.opinion li:nth-child(1){font-size:18px; padding-left:0; line-height:24px}
.opinion li:nth-child(1)::before{display:none}


}

@media only screen and (max-width:540px){
.que li{width:100%}
.etc dl:nth-child(2) dt{display:block}
}

@media only screen and (max-width:460px){
#survey{background:#fff; padding:40px 0}
.survey_inner{width:85%; padding:0}
.que{margin:0 auto 30px auto}
.que p{padding:0 0 0 50px}
.que p b{top:-10px; left:0; width:50px; height:50px; line-height:50px}
.etc dt{display:block; margin-bottom:10px}
}