@charset "utf-8"; @font-face {   font-family: "Noto Sans KR";   font-weight: 100;   font-style: normal;   src: url("../fonts/NotoSans-Thin.eot?") format("eot"),   url("../fonts/NotoSans-Thin.otf") format("opentype"),   url("../fonts/NotoSans-Thin.woff") format("woff"),   url("../fonts/NotoSans-Thin.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 200;   font-style: normal;   src: url("../fonts/NotoSans-Light.eot?") format("eot"),   url("../fonts/NotoSans-Light.otf") format("opentype"),   url("../fonts/NotoSans-Light.woff") format("woff"),   url("../fonts/NotoSans-Light.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 300;   font-style: normal;   src: url("../fonts/NotoSans-DemiLight.eot?") format("eot"),   url("../fonts/NotoSans-DemiLight.otf") format("opentype"),   url("../fonts/NotoSans-DemiLight.woff") format("woff"),   url("../fonts/NotoSans-DemiLight.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 400;   font-style: normal;   src: url("../fonts/NotoSans-Regular.eot?") format("eot"),   url("../fonts/NotoSans-Regular.otf") format("opentype"),   url("../fonts/NotoSans-Regular.woff") format("woff"),   url("../fonts/NotoSans-Regular.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 500;   font-style: normal;   src: url("../fonts/NotoSans-Medium.eot?") format("eot"),   url("../fonts/NotoSans-Medium.otf") format("opentype"),   url("../fonts/NotoSans-Medium.woff") format("woff"),   url("../fonts/NotoSans-Medium.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 700;   font-style: normal;   src: url("../fonts/NotoSans-Black.eot?") format("eot"),   url("../fonts/NotoSans-Black.otf") format("opentype"),   url("../fonts/NotoSans-Black.woff") format("woff"),   url("../fonts/NotoSans-Black.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans KR";   font-weight: 900;   font-style: normal;   src: url("../fonts/NotoSans-Bold.eot?") format("eot"),   url("../fonts/NotoSans-Bold.otf") format("opentype"),   url("../fonts/NotoSans-Bold.woff") format("woff"),   url("../fonts/NotoSans-Bold.woff2") format("woff2"); } 


@font-face { font-family: 'NIXGONM-Vb'; src: url('../fonts/NIXGONM-Vb.woff') format('woff'); font-weight: normal; font-style: normal; }
 
@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 src: url(../fonts/NanumSquareR.eot);
 src: url(../fonts/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareR.woff) format('woff'),
      url(../fonts/NanumSquareR.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 700;
 src: url(../fonts/NanumSquareB.eot);
 src: url(../fonts/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareB.woff) format('woff'),
      url(../fonts/NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 800;
 src: url(../fonts/NanumSquareEB.eot);
 src: url(../fonts/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareEB.woff) format('woff'),
      url(../fonts/NanumSquareEB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 300;
 src: url(../fonts/NanumSquareL.eot);
 src: url(../fonts/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareL.woff) format('woff'),
      url(../fonts/NanumSquareL.ttf) format('truetype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {	margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
body {	line-height: 1;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {	content: '';content: none;}
table {	border-collapse: collapse;border-spacing: 0;}
body{overflow: hidden;  font-family: 'NanumSquare', sans-serif ; font-size: 18px; }
*{box-sizing: border-box;}
.tts{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
:focus{outline: none;}

button{cursor: pointer;font-family: 'NanumSquare', sans-serif ; color: #fff; font-weight: 600;}

#event_wrap{background: url('../img/event_bg.jpg') no-repeat; background-size:  cover; width: 100%; height: 100vh;;}

.logo{position: absolute; top: 30px; left: 30px;;}
h1{background:url('../img/event_title.png') no-repeat ; width: 895px; height: 126px; margin:0px auto ; position: relative; top: 50px;}
h1::after{width: 200px; height: 1px; background: #e13491; content: ""; display: block; position: absolute; left:150px; top: 13px; animation: move4 0.7s ease-out 1;}
h1::before{width: 200px; height: 1px; background: #e13491; content: ""; display: block; position: absolute; right:150px ; top:13px ;animation: move4 0.7s ease-out 1; }
@keyframes move4{
    0%{ width:0 } 
    100%{ width: 200px;}
} 
 
#event_wrap > div {  display: none;}
#event_wrap > div.on{display: block;}

/* quiz common */
.event, .finsh{width: 1680px; height: auto; margin: 100px auto;}
.video{background: url('../img/event_movie.png') no-repeat; width: 870px; height: 540px; position: relative; float: left; top: 50px;}
.video video{width: 717px; height: 403px; position: absolute; top: 30px; left: 71px;}
.quiz{width: 780px; float: right; margin-left: 30px;}
.quiz h2{position: relative;}
.quiz h2 br{display: none;}
.quiz h2 > span span{color:#e13491;}
.quiz h2 > span:nth-child(1){font-family: 'NIXGONM-Vb'; font-size: 72px; color: #000;  }
.quiz h2 > span:nth-child(2){ font-size: 18px; color: #e13491; font-weight: 400; position: absolute; top: 8px; left: 130px;}
.quiz h2 > span:nth-child(3){font-size: 30px; color: #000; font-weight: 600; position: absolute; top: 33px; left: 130px;}
.quiz ul{width: 100%; margin-top: 30px;}
.quiz ul::after{content: ""; display: block; clear: both;}
.quiz ul li{width: 330px; height: 220px; float: left;  }
.quiz ul li button{ width: 300px; height: 190px; background: #fff; color: #333; border: 0; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); border-radius: 15px;  font-family: 'NanumSquare', sans-serif ; font-size: 18px; line-height: 140%; font-weight: 600; } 
.on .quiz ul li button{}
.quiz ul li button .over{display: none;}
.quiz ul li button::before{content: ""; display: block; margin: 0 auto; width: 150px; height: 130px; background: url('../img/event_icon.png') no-repeat;}

.event.no1 .quiz ul li:nth-child(2) button::before{ background-position: -150px 0 ;}
.event.no1 .quiz ul li:nth-child(3) button::before{ background-position: -300px 0 ;}
.event.no1 .quiz ul li:nth-child(4) button::before{ background-position: -450px 0 ;}
.event.no2 .quiz ul li:nth-child(1) button::before{ background-position: 0px -150px;}
.event.no2 .quiz ul li:nth-child(2) button::before{ background-position: -150px -150px;}
.event.no2 .quiz ul li:nth-child(3) button::before{ background-position: -300px -150px;}
.event.no2 .quiz ul li:nth-child(4) button::before{ background-position: -450px -150px;}
.event.no3 .quiz ul li:nth-child(1) button::before{ background-position: 0px -300px;}
.event.no3 .quiz ul li:nth-child(2) button::before{ background-position: -150px -300px;}
.event.no3 .quiz ul li:nth-child(3) button::before{ background-position: -300px -300px;}
.event.no3 .quiz ul li:nth-child(4) button::before{ background-position: -450px -300px;}
.event.no3 .quiz h2 > span:nth-child(3){font-size: 28px; } 

.quiz ul li button.on{border:5px solid #e13491; font-size: 24px;color: #e13491;}
.quiz ul li button.on::before{display: none;}
.quiz ul li button.on .over{display: block;}

.star{position: relative; top: 3px;}

/* finsh */
.finsh {font-family: 'Noto Sans KR', sans-serif; position: relative; }  
.finsh .img{position: relative; }
.finsh .img > div{width: 907px; height: 564px; position: absolute; top: 0; left: 0;}
.finsh .img .bga{ background: url('../img/event_finsh_img2.png');}
.finsh .img .text{background: url('../img/event_finsh_img3.png');font-weight: 500; position: relative;   animation: move3 0.5s 0.5s ; animation-fill-mode: backwards}
.finsh .img .text > div{width: 370px; position: absolute; top: 90px; left: 290px; text-align: center; font-size: 15px; line-height: 24px; letter-spacing: -0.07em; color: #555;}
.finsh .img .text > div p{font-family: 'NanumSquare', sans-serif; font-size: 30px;  margin-bottom: 20px;color: #000;}
.finsh .img .text > div span{color: #e13491; letter-spacing: 0;}
.finsh .img .text > div strong{color: #000; font-weight: 500;display: block; margin-bottom: 10px; }
.finsh .img .bgb{ background: url('../img/event_finsh_img1.png');}
.finsh .img .post{  text-align: center; position: absolute; top:390px; z-index: 10; left: 30px; font-size: 15px; font-weight: 500; }
.finsh .img .post button{border: none; background: #333; color: #fff; display: block; padding: 10px 30px;  font-size: 15px; font-weight: 500; margin: 20px auto;font-family: 'Noto Sans KR', sans-serif;}
.finsh .form{width:600px; position: absolute; top: 110px; right: 200px;} 
.form .add_text{width:600px; height: 80px; background: #393179; color: #e5d9f3; text-align: center; border-radius: 100px; font-weight: 600; line-height: 140%; padding-top: 15px; font-family: 'NanumSquare', sans-serif ;}
.form .add_text span{color: #ffda5b; display: block;}
.form form{  display: block;width:600px; margin-top: 20px;   }
.form form label{display: block; margin-bottom: 5px; vertical-align: bottom;}
.form form label span{ color: #362e2e; font-size: 18px; font-weight: 600; width: 220px; text-align: right; padding-right: 20px; padding-bottom: 5px; display: inline-block; letter-spacing: -2px;vertical-align: bottom;font-family: 'NanumSquare', sans-serif ;}
.form form input{border: 0; border-bottom: 1px solid rgba(76, 64, 64, 0.5); height: 30px; width:360px; background: transparent}
.form form .checkbox_list{ margin-top: 30px;text-align: center; font-size: 14px; letter-spacing: -1px;}
.form form .checkbox{ padding-top: 0px; font-weight:500 }
.form form .checkbox_list label{display: inline; vertical-align: top; color:#555}
.form form .checkbox_list label:first-child{margin-right: 20px;}
.form form .checkbox input{width: 20px; height: 20px;vertical-align: top; position: relative; top: -5px;}
.form form .checkbox a{vertical-align: top}
.form form p.text{position: relative; top:0px; left: 220px; color: #9e4b55 ; font-size: 14px; letter-spacing: -1px;}
.form form button{ display: block; margin: 10px auto 0; background: #393179; color: #fff;  height: 50px; width: 300px; font-size: 20px;box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ; font-weight: 600; border: 0; font-family: 'NanumSquare', sans-serif ;}
.form .ager{ display: none; position: absolute; bottom: 00px; right:0px; width: 600px;  background: rgba(53, 53, 68, 0.95);  padding :30px; color:#fff; font-size: 14px; line-height: 22px; font-weight: 200; text-align: left; }
.form .ager span.btn{ display: block; padding: 3px 10px; background: rgba(255, 255, 255, 0.8); color: #333; width: 200px; margin: 10px auto ; text-align: center; font-weight: 500; cursor: pointer}
.form .ager.active{display: block}
.form .ager > p{padding-left: 16px;}



@keyframes move3{
    0%{ top: 180px;  } 
    100%{ top: 0px; }
}


/* no */
#event_wrap .no, #event_wrap .yes{ background: rgba(53, 58, 68,0.8); width: 100%; height: 100vh; position: fixed; top: 0; left: 0;}
#event_wrap .no > div{ background: url('../img/event_no.jpg'); width: 890px; height: 500px; margin: 0 auto; top: 50%; transform: translateY(50%); padding-top: 50px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); }
#event_wrap .no img{margin:  0 auto 150px; display: block; position: relative;    animation: move2 0.5s  ;} 

@keyframes move2{
    0%{ transform: scale(0.1); } 
    100%{  transform: scale(1); }
}

#event_wrap .no button{width: 304px; height: 64px; background: url('../img/event_no_btn.png') no-repeat; border: 0; display: block;margin: 0 auto; font-size: 20px; padding-right: 50px;  }

/* yes */ 
#event_wrap .yes > div{ background: url('../img/event_yes.jpg'); width: 890px; height: 500px; margin: 0 auto; top: 50%; transform: translateY(50%); overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); }
#event_wrap .yes img{margin:  30px auto 0; display: block; position: relative;    animation: move 0.5s  ;} 

@keyframes move{
    0%{ bottom: -300px;  } 
    100%{ bottom: 0px; }
}


#event_wrap .yes button{width: 304px; height: 64px; background: url('../img/event_yes_btn.png') no-repeat; border: 0; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 280px;  font-size: 20px; padding-right: 50px; }



 @media (max-width: 780px) {  
     
    #event_wrap{ height: auto; padding-bottom: 100px; min-height: 100vh; overflow-x: hidden;}
     body{overflow: auto;}
    .event, .finsh{width: 760px; margin: 30px auto 0;}
    h1{width: 90%; background-size: 100%;  top:100px;}
    h1::after{  left:50px; top: 10px;  }
    h1::before{  right:50px ; top:10px ;  }
    .video{width: 740px;background-size: 100%; float: none;  margin: 0 auto; }
    .video video{width: 600px; top: 0px;left: 65px;;}
    .quiz{width: 740px; float: none; margin: 0 auto; padding-left: 50px;}
    #event_wrap .no > div, #event_wrap .yes > div{  width: 700px; background-size: 100%; background-position:  0 70px;} 
    #event_wrap .yes > div{  background-position:  0} 
    #event_wrap .yes > div{height: 400px;}
    #event_wrap .yes img{width: 100%;}
    #event_wrap .yes button{top: 120px;}
    .quiz h2 > span:nth-child(2){font-size: 24px; top:0}
    .quiz h2 br{display: block;}

    .finsh{padding-bottom: 200px;}

    .finsh .img{ position: relative; top: 100px; left: -130px; transform: scale(1.3);}     
    .finsh .form{width:740px; position: relative; top: 200px; right: 0; margin: 0 auto 0px;} 
    .form .add_text{width: 100%;font-size: 24px; line-height: 140%; height:100px ;;}
    .finsh .img .text > div{font-size: 17px;}
    .finsh .img .post{font-size: 18px;}
    .finsh .img .post button{font-size: 18px;}
    .form form{width: 100%;}
    .form form label span{font-size: 26px; position: relative; top: -10px;}
    .form form input{height: 60px; width: 450px;font-size: 24px;}
    .form form .checkbox_list{font-size: 24px; margin-bottom: 30px;}
    .form form button{height: 70px; font-size: 30px;}

    .form .ager{   top: 55%; left: 50%;  transform: translate(-50%,-50%); width: 740px;  padding :20px;  font-size:20px; line-height: 28px; height: 350px;}
    .form .ager span.btn{ display: block; padding: 3px 10px; background: rgba(255, 255, 255, 0.8); color: #333; width: 200px; margin: 10px auto ; text-align: center; font-weight: 500; cursor: pointer}
    .form .ager.active{display: block}
    .form .ager > p{padding-left: 16px;}
    .quiz ul li button{font-size: 20px;}
    
    .form form{background: rgba(255, 255, 255, 0.8); border-radius: 15px; padding-bottom: 30px;}
 

 

 }
 

  @media (min-width: 781px) {
    .quiz ul li button:hover{border:5px solid #e13491; font-size: 24px;color: #e13491;}
    .quiz ul li button:hover::before{display: none;}
    .quiz ul li button:hover .over{display: block;}
}