@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
 	
@font-face {
  font-family: 'NanumSquareRoundR';
  src: url(font/NanumSquareRoundR.eot);
  src: url(font/NanumSquareRoundR?#iefix) format('embedded-opentype'),
       url(font/NanumSquareRoundR.woff2) format('woff2'),
       url(font/NanumSquareRoundR.woff) format('woff'),
       url(font/NanumSquareRoundR.ttf) format('truetype');
 }
  

#logoSurvey {
  background:#005da3; width:100%; height:66px; padding:8px 30px; box-sizing: border-box;
  
}
#logoSurvey img {height:100%}
#logoSurvey span {color:white; position: relative; top:-40%; left:30px; font-size:17px;}
#wrapSurvey {
  transform:skew(-0.09deg)
}
#wrapSurvey .main_title {background: url(/images/main_section02_01.jpg) no-repeat 0; height:300px; margin:1.5% 3%; padding:2% 3%;}
#wrapSurvey .mobile_title {background: url(/images/mobile_section02_01.jpg) no-repeat center center; background-size: cover; height:300px; margin:1.5% 3%; padding:2% 3%;}
#wrapSurvey h2 {/*background:#F38722;*/color:white; margin-top: 35px; font-weight:600; font-size:25px; text-align: center; line-height:55px; } 
#wrapSurvey .main_title p {color:white; font-weight:600; font-size:45px;} 
#wrapSurvey .sub_title h1 {
  font-size:31px; 
  font-weight:600; 
  text-align:center; 
  color:#555; 
  text-align:Center; 
  /*margin-bottom:50px; 
  /* margin-left: 10px; */
}
#wrapSurvey .sub_title h1 img {vertical-align: top;} 



#wrapSurvey .content {margin:10px auto 50px; width:80%; }
#wrapSurvey .content .questSurvey {border-bottom: 1px solid #ddd; margin-bottom: 45px;}
#wrapSurvey .content .questSurvey dt {font-weight:500; font-size:17px; margin:18px 0 10px; color:#616161; border-top:1px solid #ddd; padding:17px 30px 0; } 
#wrapSurvey .content .questSurvey dt:first-child {border-top:none; padding-top:0px}
#wrapSurvey .content .questSurvey dd {font-size:15px; color:#111; padding:8px 40px 18px}
/*#wrapSurvey .content .questSurvey dd label {padding:0 14px 0 3px; line-height:2em}*/
#wrapSurvey .content .contactSurvey {/*border:1px solid #555; */width:50%; margin:50px auto; height:200px; padding:15px;}
#wrapSurvey .content .contactSurvey dt {display:inline-block;padding:none; width:30%; text-align:center; font-weight:bold; font-size:17px; color:#555}
#wrapSurvey .content .contactSurvey dt:first-child {margin-bottom:20px}
#wrapSurvey .content .contactSurvey dd {display:inline-block; padding:none; width:67%}
#wrapSurvey .content .contactSurvey dd input {width:100%; height:26px;border:1px solid #555}
#wrapSurvey div {box-sizing: border-box; }


.foot1 {width:50%; margin: 30px auto; overflow: hidden;}
.foot1 .foot_logo {width:42%; float:left; padding-right:10px;}
.foot1 .foot_logo img {width:100%}
.foot1 .foot_likes li {margin-bottom:10px; font-size:16px;}
.foot1 .foot_likes {width:50%; float:left;margin-left:2%; border-left:1px solid #eee; padding-left:10px}
.foot1 .foot_likes img {width:40px; margin-right:10px}


.foot2 { margin:0px auto 0; padding:30px 0; /* border-top:1px solid #ddd;*/ border-bottom:1px solid #ddd} 
.foot2 p {margin-bottom:10px; font-size:16px;text-align: center}

.foot3 #logo {width:43%; margin-right:3%}
.foot3 #like {width:54%}
.foot3 div img {width:100%}
.foot3 div {float:left}

.foot4 { margin:0px auto; padding:40px 0; border-top:1px solid #ddd; background: #eee;} 
.foot4 p {font-size:13px; text-align: center;}


.btnArea {text-align:center; margin-top:30px; margin-bottom: 30px;}
.btn_submit,
.btn_submit::after {
  -webkit-transition: all 0.3s;	-moz-transition: all 0.3s;  -o-transition: all 0.3s;	transition: all 0.3s;
}

.btn_submit {  background: none;  border: 3px solid #336bfe;  border-radius: 5px;
  color: #336bfe;  display: block;  font-size: 1.2em;  font-weight: bold;  margin: 1em auto;  padding: 1.2em 5.5em;
  position: relative;}

.btn_submit::before,
.btn_submit::after {
  background:#336bfe;  content: '';  position: absolute;  z-index: -1;}

.btn_submit:hover {  color: #fff;}


/* BUTTON 2 */
.btn_submit::after {  height: 100%;  left: 0;  top: 0;  width: 0;}

.btn_submit:hover:after {  width: 100%;}
.questText label {width:25%; display:inline-block}
.questText input {width:60%; height:2em}
.questText label img {vertical-align: middle; margin-right:5%}
#wrapSurvey .complete_title {text-align: center}
#wrapSurvey .complete_check {width:40%; margin:30px auto}


/*개인정보 동의 */
.privacy_agree {
  padding:5px;
  font-size:16px;

}
.privacy_agree .tc_itle {
  font-weight:bold;
}
.privacy_agree  input {
  height:19px;
}
.privacy_agree .btn_tcTxt {
  display:inline-block;
  font-size:14px;
  font-weight:500;
  padding:5px 20px;
  border-radius:7px; 
}
.privacy_agree .tc_txt {
  margin-top:5px;
  line-height:23px;
  font-size:15px;
  border:1px solid #eee;
  padding:20px;
  box-sizing:border-box;
}
.privacy_agree .tc_txt h5 {font-size:16px;}
.privacy_agree .tc_txt span {
  padding-left:5px;
}

/* 본인 확인 서비스 추가 */
.cmem_certi_area{margin-top:50px}
.cmem_certi_area + .cmem_certi_area{padding-top:50px;border-top:1px solid #eee}
.cmem_certi_area .cmem_btnarea{margin-top:30px}
.cmem_certi_area .cmem_btn{font-size:14px}
.cmem_certi{display:table;table-layout:fixed;width:50%; font-family: 'NanumSquare', sans-serif; background:#798e00}
.cmem_certi .cmem_certi_item{display:table-cell;border-left:10px solid transparent;vertical-align:top}
.cmem_certi .cmem_certi_item:first-child{border-left:0}
.cmem_certi .cmem_certi_item a{text-decoration:none}
.cmem_certi .cmem_certi_phone,.cmem_certi .cmem_certi_card{display:block;height:54px;padding-top:60px;border:1px solid #e0e0e0;box-sizing:border-box;background:#fff;font-size:15px;line-height:45px;color:#222;text-align:center}
.cmem_certi .cmem_certi_phone:before,.cmem_certi .cmem_certi_card:before{display:inline-block;height:44px;margin-right:5px;background:url(../img/common/sp_cmem_certi.png) no-repeat;background-size:83px 44px;vertical-align:top;content:''}
.cmem_certi .cmem_certi_phone:before{width:35px;background-position:0 0}
.cmem_certi .cmem_certi_card:before{width:46px;background-position:-37px 0}
.cmem_certi_tit{font-family:'NanumSquare',sans-serif;font-size:15px;color:#222;line-height:1.6;text-align:center}
.cmem_certi_tit + .cmem_certi{margin-top:40px}

.cmem_certi_area.ty_big{margin-top:14px}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone{padding-top:15px; background:#798e00}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card{padding-top:30px}


.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card input{
  width: 30%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.1em;
  padding: 10px;
  box-sizing: border-box;
}

.cmem_certi_area.ty_big .btn_ok {
  width: 30%;
  line-height: 30px;
  border: 1px solid #8F9194;
  background: #8F9194;
  color: #fff;
  margin: 0 auto;
}


/*
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone:before,
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card:before{height:57px;background:url(/images/hp.png) no-repeat;background-size:110px 57px;content:''}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone:before{width:46px;background-position:0 0}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card:before{width:54px;background-position:100% 0}

*/



/*checkbox css start*/
.questSurvey [type="checkbox"]:checked,
.questSurvey [type="checkbox"]:not(:checked), 
.questSurvey [type="radio"]:checked,
.questSurvey [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.questSurvey [type="checkbox"]:checked + label,
.questSurvey [type="checkbox"]:not(:checked) + label,
.questSurvey [type="radio"]:checked + label,
.questSurvey [type="radio"]:not(:checked) + label
{    position: relative;
    padding-left: 30px;
    padding-right: 30px; 
    cursor: pointer;
    line-height: 30px;
    display: inline-block;
}
.questSurvey [type="checkbox"]:checked + label:before,
.questSurvey [type="checkbox"]:not(:checked) + label:before,
.questSurvey [type="radio"]:checked + label:before,
.questSurvey [type="radio"]:not(:checked) + label:before
{
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid #e1e1e1;
    background: #e1e1e1;
    -webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.questSurvey [type="checkbox"]:checked + label:after,
.questSurvey [type="checkbox"]:not(:checked) + label:after,
.questSurvey [type="radio"]:checked + label:after,
.questSurvey [type="radio"]:not(:checked) + label:after
{
    content: '';
    background: #1b88ff;
    height: 14px;
    width: 14px;
    position: absolute;
    top: 8px;
    left: 4px;
    border: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.questSurvey [type="checkbox"]:not(:checked) + label:after,
.questSurvey [type="radio"]:not(:checked) + label:after
{
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.questSurvey [type="checkbox"]:checked + label:after,
.questSurvey [type="radio"]:checked + label:after
{
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.questSurvey [type="radio"]:checked+label:before,
.questSurvey [type="radio"]:not(:checked)+label:before {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.questSurvey [type="radio"]:checked + label:after,
.questSurvey [type="radio"]:not(:checked) + label:after
{
    -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.questSurvey input[type="text"] {
  width:100%; box-sizing: border-box; height:40px;border-radius: 6px;
  background:#fff;
}




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

.questText input {height:1.3em}



}




/* 모바일 */
@media screen and (max-width: 800px) {
    #logoSurvey {padding:8px 20px}
    #logoSurvey img {height:80%; }
    #logoSurvey span {font-size:4vw; top:-13px; left:0px; margin-left:10px }
    #wrapSurvey {padding:10px; }
    #wrapSurvey h2 {line-height:40px; margin:2% 1%; padding:2% 1%; font-family: 'NanumSquare', sans-serif; font-size:5.5vw; }
    #wrapSurvey h2 div {font-size:13px; line-height:20px; margin-bottom:10%; color:#d9ff04; font-weight: 500;}

    
    #wrapSurvey .sub_title {line-height:35px; margin:0% 8%; font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal;  font-size:25px; }
    #wrapSurvey .sub_title h1{font-size:6.5vw; margin-top:30px; line-height:35px;}
    #wrapSurvey .sub_title h1 img {vertical-align: middle; width:7vw; height:100%} 

    
    #wrapSurvey .main_title {background: url(/images/mobile_section02_01.jpg) no-repeat center center; background-size: cover; height:300px; margin:1.5% 3%; padding:2% 3%;}
    #wrapSurvey .main_title p {color:white; font-weight:600; font-size:35px;} 
    #wrapSurvey .content {padding: 3% 5%; width:100%}
    #wrapSurvey .content p {}


    #wrapSurvey .content .questSurvey {
      border-bottom: 1px solid #ddd;
      margin-bottom: 15px;

  }
}
  @media screen and (max-width: 800px) {
#wrapSurvey .content dl {width:100%}
    #wrapSurvey .content .questSurvey dt {font-family: 'NanumSquare', sans-serif; font-weight: normal; font-style: normal; font-size:4.2vw; margin:10px 0 5px 0;padding:15px 0 0 0; }
    #wrapSurvey .content .questSurvey dd {font-size:3.7vw; padding:10px 0 10px 0;}
    #wrapSurvey .content .questSurvey dt.no {width:10%;}
    #wrapSurvey .content .questSurvey dt.subject {width:80%; font-size:3.7vw; padding:10px}
    .foot2 {padding:15px 0}
    .foot2 p {font-size:4vw}
    .foot3  {width:60%}
    .foot3 #logo {width:100%; text-align: center;}
    .foot3 #like {width:100%; text-align: center; font-size: 16px; margin-top: 15px;}
    .foot3 #like input{
      height: 35px;
      font-size: 15px;
      box-sizing: border-box;}


}


    div.left {
        width: 50%;
        float: left;
        box-sizing: border-box;
        
        background: #ff0;
    }
    div.right {
        width: 50%;
        float: right;
        box-sizing: border-box;
        
        background: #0ff;
    }



  }
  
@media screen and (max-width: 800px) {
#wrapSurvey .content .contactSurvey {width:100%; margin: 50px auto; height:200px;}
#wrapSurvey .complete_title {padding:10px ; font-size:5vw}
#wrapSurvey .complete_check {width:40%; margin:30px auto;}


/* 본인 확인 서비스 추가 */
.cmem_certi_area{margin-top:50px}
.cmem_certi_area + .cmem_certi_area{padding-top:50px;border-top:1px solid #eee}
.cmem_certi_area .cmem_btnarea{margin-top:30px}
.cmem_certi_area .cmem_btn{font-size:14px}
.cmem_certi{display:table; table-layout:fixed; /*width:90%;*/font-family: 'NanumSquare', sans-serif; }
.cmem_certi .cmem_certi_item{display:table-cell;border-left:10px solid transparent;vertical-align:top}
.cmem_certi .cmem_certi_item:first-child{border-left:0}
.cmem_certi .cmem_certi_item a{text-decoration:none}
.cmem_certi .cmem_certi_phone,.cmem_certi .cmem_certi_card{display:block;height:84px;padding-top:30px;border:1px solid #e0e0e0;box-sizing:border-box;background:#fff;font-size:15px;line-height:45px;color:#222;text-align:center}
.cmem_certi .cmem_certi_phone:before,.cmem_certi .cmem_certi_card:before{display:inline-block;height:44px;margin-right:5px;background:url(../img/common/sp_cmem_certi.png) no-repeat;background-size:83px 44px;vertical-align:middle;content:''}
.cmem_certi .cmem_certi_phone:before{width:35px;background-position:0 0}
/*.cmem_certi .cmem_certi_card:before{width:46px;background-position:-37px 0}*/
.cmem_certi_tit{font-family: 'NanumSquare', sans-serif; font-size:15px;color:#222;line-height:1.6;text-align:center}
.cmem_certi_tit + .cmem_certi{margin-top:40px}
.cmem_certi_tit + .cmem_certi:hover {background: rgba(255,255,255,0.4)}


.cmem_certi_area.ty_big{margin-top:14px}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone{padding-top:10px}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card{padding-top:3px}


.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card input{
  width: 80%;
  height: 30px;
  margin-top: 3px;
  font-size: 1.1em;
  box-sizing: border-box;
}

.cmem_certi_area.ty_big .btn_ok {
  width: 30%;
  line-height: 30px;
  border: 1px solid #8F9194;
  background: #8F9194;
  color: #fff;
  margin: 0 auto;
}



.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone:before{height:57px;background:url(/images/hp.png) no-repeat;background-size:110px 57px;content:''}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_phone:before{width:46px;background-position:0 0}
.cmem_certi_area.ty_big .cmem_certi .cmem_certi_card:before{}
}

.cmem_certi .cmem_certi_phone:before,.cmem_certi .cmem_certi_card:before{display:inline-block; font-size:10px; height:44px;margin-right:5px;background:url(../img/common/sp_cmem_certi.png) no-repeat;background-size:83px 44px;vertical-align:middle;content:''}
.cmem_certi .cmem_certi_phone:before{width:35px;background-position:0 0}


@media screen and (max-width: 800px) {
.foot4 { margin:0px auto; padding:20px; border-top:1px solid #ddd; background: #eee;} 
.foot4 p {font-size:13px; text-align: center;}