@charset "utf-8";
@import url('font.css');

/* reset */	
*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
}
*, *:before, *:after{box-sizing:border-box;-webkit-box-sizing:border-box; , -moz-box-sizing:border-box;}
[hidden], area, base, basefont, command, datalist, head,input[type=hidden], link, menu[type=context], meta, noembed, noframes,param, script, source, style, track, title {display: none;/* case-insensitive */}
address, article, aside, blockquote, body, center, dd, dir, div, dl,dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,section, summary, ul, xmp{display:block;}
table{display: table;}
caption{display: table-caption;}
colgroup{display: table-column-group;}
col{display: table-column;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td, th{display: table-cell;}
li{display: list-item;}

/* reset */				  
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,ol,table,tr,th,td,caption,form,fieldset,input,select,textarea,blockquote,address{margin:0;padding:0;line-height:1; word-break:keep-all;}
img,fieldset,iframe{border:0 none; font-weight:400;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:400;}
address,em{font-style:normal;font-weight:normal;}
table{width:100%; border-collapse:collapse; border-spacing:0px; table-layout:fixed;}
input,textarea,select,button,table{font-size:inherit;font-family:inherit;line-height:inherit;}
input, select{-webkit-border-radius:0px; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"]{-webkit-appearance:none; vertical-align:middle;}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none; opacity:1 !important; background:#fff url("../img/skin/select_arrow.png") calc(100% - 20px) 50% no-repeat; border:1px solid #ced1d3; vertical-align:middle; outline:none;}
select::-ms-expand{display:none;}
input,select,button{border:0; outline:0; padding:0;}

/* base */
body{min-width:280px; min-height: 100vh; min-height: -webkit-fill-available; position:relative; font-family:'NanumSquareNeo', sans-serif; font-size:16px; font-weight:400; color:#000000; padding:0; overflow-x:hidden;}
body * {letter-spacing:-0.025em;}
ul,ol,li{list-style:none;line-height:100%;}
a{text-decoration:none; color:inherit; line-height:1.0;}
a:hover, a:focus{text-decoration:none;}
caption,legend, .hide{position:absolute;top:-5000px;text-indent:-5000px;visibility:hidden;width:0;height:0;font-size:0;line-height:0;}
ul:after{content:" ";display:block;clear:both;}
textarea {resize:none;}
img{vertical-align:middle;}	   
button{background:none; border:0; outline:0; cursor:pointer;}
hr{display:none;}
section{margin:0;padding:0;}
section:after{content:" "; display:block; clear:both;}
header:after{content:" "; display:block; clear:both;}
.clfix:after{content:" "; display:block; clear:both;}
map area{display:block; cursor:pointer;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}


.pc{display:block;}
.mb{display:none;}
.blind{font-size:0; display:none; opacity:0;}

.event_wrap{position:relative; overflow:hidden; width:100%; margin:0 auto; font-family:'Paperlogy';}
.event_wrap img{max-width:100%;}
.event_wrap .section{padding:120px 0;}
.event_wrap .inner{position:relative; z-index:200; margin:0 auto; width:100%; max-width:625px; text-align:center; }
.event_wrap .sect_01{padding:150px 0 85px; background:#000000; text-align:center;}
.event_wrap .sect_01 .inner{max-width:100%;}
.event_wrap .sect_01 .event_info{position:absolute; top:30px; left:50%; transform:translateX(-50%); width:100%; max-width:925px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;}
.event_wrap .sect_01 .event_info .line{width:100%; height:1px; background:#fff;}
.event_wrap .sect_01 .event_info span:not(.line){font-size:22px; color:#fff; letter-spacing:1px; font-weight:300; flex:none;} 
.event_wrap .sect_01 .event_info span:first-child{padding-right:20px; background:#000;}
.event_wrap .sect_01 .event_info span:last-child{padding-left:20px; background:#000;}
.event_wrap .sect_01 .event_tit{animation: fadeInDown 1s both;}		  
.event_wrap .sect_01 .event_tit p{margin-top:35px; font-size:32px; color:#fff;}
.event_wrap .sect_01 .visual_img{margin-top:90px;}
.event_wrap .sect_01 .visual_img .info{animation: fadeInDown 1s both 0.2s;}
.event_wrap .sect_01 .visual_img .box_gift{position:relative; margin-top:40px; margin:40px auto 0; animation:gift_show 1s both 0.6s;}
.event_wrap .sect_01 .visual_img .box_gift img{animation:zoom 1s both infinite alternate 0.6s;}
.event_wrap .sect_01 .event_mission{margin-top:-65px;}

@keyframes fadeInDown {
  from {
	opacity: 0;
	-webkit-transform: translate3d(0, -50px, 0);
	-moz-transform: translate3d(0, -50px, 0);
	-o-transform: translate3d(0, -50px, 0);
	transform: translate3d(0, -50px, 0);
  }

  to {
	opacity: 1;
	-webkit-transform: translatex(0);
	-moz-transform: translatex(0);
	-o-transform: translatex(0);
	transform: translatex(0);
  }
}
@keyframes gift_show{ 
	0% {transform:scaleX(0); } 
	100% {transform: scaleX(1); } 
}

@keyframes zoom{
	0%{transform:scale(1.02)}
    100% {transform:scale(1)}
}

.event_wrap .sect_02{position:relative; background:#202426;}
.event_wrap .sect_02:after{content:''; position:absolute; bottom:-42px; left:50%; transform:translateX(-50%); width:197px; height:68px; background:url(../img/sect_02_after.png)no-repeat; background-size:100% auto;}
.event_wrap .sect_02 .gift_wrap{margin-top:55px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:50px 44px; }
.event_wrap .sect_02 .gift_box{width:calc(100%/2 - 44px/2); color:#fff;}
.event_wrap .sect_02 .gift_box.wide{width:100%;}
.event_wrap .sect_02 .gift_box .finish{display:none;}
.event_wrap .sect_02 .gift_welcome{margin-top:100px;}  
.event_wrap .sect_02 .gift_box.finish img{display:none;}
.event_wrap .sect_02 .gift_box.finish .finish{display:block;}
.event_wrap .sect_03{background:#d6effc;}
.event_wrap .sect_04{background:#f0faff;}
.event_wrap .sect_04 .mission_wrap .mission_box .cont{margin-top:50px; border-radius:20px; box-shadow:8px 0 32px rgba(108,174,209,0.28); overflow:hidden;}
.event_wrap .sect_04 .mission_wrap .mission_box + .mission_box{margin-top:120px;}
.event_wrap .sect_05{background:#000000;}
.event_wrap .sect_05 .inner > div + div{margin-top:100px;}
.event_wrap .sect_05 .form_wrap .tit{margin-bottom:28px;}
.event_wrap .sect_05 .form_wrap .input_txt{padding:0 40px; width:100%; height:80px; border-radius:20px; border:2px solid #fff; background:#000; font-size:40px; color:#fff; font-weight:300;}
.event_wrap .sect_05 .quiz_wrap .tit{margin-bottom:50px;}
.event_wrap .sect_05 .quiz_box + .quiz_box{margin-top:70px;}
.event_wrap .sect_05 .quiz_box .q_txt{margin-bottom:35px;}
.event_wrap .sect_05 .quiz_box .rdo_wrap{display:flex; justify-content:space-between;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo{width:calc(100%/2 - 22px/2);}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo input[type="radio"]{display:none;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo input[type="radio"] + label{display:block; width:100%; height:300px; border-radius:20px; background:#202426 url(../img/sect_04_o.png)no-repeat center; cursor:pointer;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo input[type="radio"]:checked + label{background:#202426 url(../img/sect_04_o_on.png)no-repeat center; transition:0.2s;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.yes input[type="radio"] + label{background:#202426 url(../img/sect_04_o.png)no-repeat center;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.yes input[type="radio"]:hover + label,
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.yes input[type="radio"]:checked + label{border:2px solid #59c3fb; background:rgba(89,195,251,0.28) url(../img/sect_04_o_on.png)no-repeat center; transition:0.2s;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.no input[type="radio"] + label{background:#202426 url(../img/sect_04_x.png)no-repeat center; cursor:pointer;}
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.no input[type="radio"]:hover + label,
.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo.no input[type="radio"]:checked + label{border:2px solid #ff798f; background:rgba(255,121,143,0.28) url(../img/sect_04_x_on.png)no-repeat center; transition:0.2s;}
.event_wrap .sect_05 .agree_box{padding:40px; width:100%; background:#202426; border-radius:20px; color:#fff; text-align:left;}
.event_wrap .sect_05 .agree_box dt{position:relative; padding-left:10px; margin-bottom:30px; font-size:23px; font-weight:500;}
.event_wrap .sect_05 .agree_box dt:before{content:''; position:absolute; top:1px; left:0; display:block; width:2px; height:19px; background:#fff;}
.event_wrap .sect_05 .agree_box dd{font-size:22px; font-weight:300;}
.event_wrap .sect_05 .agree_box dd + dd{margin-top:12px;}
.event_wrap .sect_05 .agree_chk{display:block; margin-top:20px; padding-left:35px; text-align:left;}
.event_wrap .sect_05 .agree_chk input[type="checkbox"]{display:none;}
.event_wrap .sect_05 .agree_chk input[type="checkbox"] + label{position:relative; padding-left:42px; font-size:23px; color:#fff; font-weight:400; line-height:1.3; cursor:pointer;}
.event_wrap .sect_05 .agree_chk input[type="checkbox"] + label:after{content:''; position:absolute; top:-1px; left:0; width:28px; height:28px; border-radius:4px; border:1px solid #ffffff;}
.event_wrap .sect_05 .agree_chk input[type="checkbox"]:checked + label:after{border:1px solid #59c3fb; background:#59c3fb url(../img/chk_on.png)no-repeat center;}
.event_wrap .sect_05 .btn_done{margin-top:80px;}
.event_wrap .sect_05 .btn_done:hover{transform:translate3d(0,0.5rem,0); transition:0.2s;}

.event_wrap .sect_last{padding:80px 0 75px; background:#202426}
.event_wrap .sect_last .inner{max-width:935px; margin:0 auto; padding:0 45px;}
.event_wrap .sect_last .notice{text-align:left;}
.event_wrap .sect_last .notice dt{margin-bottom:35px; color:#59c3fb; font-size:28px; font-weight:500;}
.event_wrap .sect_last .notice dd{position:relative; padding-left:14px; text-indent:-14px; font-weight:300; font-size:22px; color:#fff; line-height:1.3;}
.event_wrap .sect_last .notice dd + dd{margin-top:12px;}

@media all and (max-width:935px){
	.event_wrap .section{padding:100px 0;}
	.event_wrap .inner{}
	.event_wrap .sect_01{padding:120px 0 65px;}
}  

@media all and (max-width:640px){
	.event_wrap .inner{width:92%; max-width:92%; margin: 0 auto;}
	
	.event_wrap .section{padding:60px 0;}
	.event_wrap .sect_01{padding:80px 0 35px;}	
	.event_wrap .sect_01 .event_info{top:15px; max-width:92%; padding:0; margin:0 auto;}
	.event_wrap .sect_01 .event_info span:not(.line){font-size:15px; letter-spacing:-0.5px;} 
	.event_wrap .sect_01 .event_info span:first-child{padding-right:14px; background:#000;}
	.event_wrap .sect_01 .event_info span:last-child{padding-left:14px; background:#000;}

	.event_wrap .sect_01 .event_tit{width:60%; margin:0 auto;}	
	.event_wrap .sect_01 .event_tit p{margin-top:20px; font-size:24px; color:#fff;}
	.event_wrap .sect_01 .visual_img{margin-top:50px;}
	.event_wrap .sect_01 .visual_img .info{width:80%; margin:0 auto;}
	.event_wrap .sect_01 .visual_img .box_gift{margin-top:30px; width:96%; margin:25px auto 0; }
	.event_wrap .sect_01 .event_mission{margin-top:-40px;}

	.event_wrap .sect_02:after{bottom:-22px; width:99px; height:34px;}
	.event_wrap .sect_02 .gift_wrap{margin-top:35px; gap:30px 2%;}
	.event_wrap .sect_02 .gift_box{width:48%;}
	.event_wrap .sect_02 .event_tit{width:52%; margin:0 auto;}
	.event_wrap .sect_02 .gift_welcome{margin-top:60px;}

	.event_wrap .sect_04 .mission_wrap .mission_box .tit{width:45%; margin:0 auto;}
	.event_wrap .sect_04 .mission_wrap .mission_box .cont{margin-top:30px;}
	.event_wrap .sect_04 .mission_wrap .mission_box + .mission_box{margin-top:65px;}
	
	.event_wrap .sect_05 .inner > div + div{margin-top:60px;}  
	.event_wrap .sect_05 .tit img{max-height:30px;}
	.event_wrap .sect_05 .form_wrap.phone .tit img{max-height:50px;}
	.event_wrap .sect_05 .form_wrap .tit{margin-bottom:15px;}
	.event_wrap .sect_05 .form_wrap .input_txt{padding:0 20px; height:50px; font-size:20px; border-radius:10px;}
	.event_wrap .sect_05 .quiz_wrap .tit{margin-bottom:30px;}
	.event_wrap .sect_05 .quiz_box + .quiz_box{margin-top:40px;}
	.event_wrap .sect_05 .quiz_box .q_txt{margin-bottom:20px;}
	.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo{width:49%;}
	.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo input[type="radio"] + label{height:200px; background-size:auto 45% !important;}

	.event_wrap .sect_05 .agree_box{padding:25px; border-radius:10px;}
	.event_wrap .sect_05 .agree_box dt{padding-left:6px; margin-bottom:18px; font-size:15px;}
	.event_wrap .sect_05 .agree_box dt:before{width:2px; height:14px;}
	.event_wrap .sect_05 .agree_box dd{font-size:13px;}
	.event_wrap .sect_05 .agree_box dd + dd{margin-top:8px;}
	.event_wrap .sect_05 .agree_chk{margin-top:14px; padding-left:20px;}
	.event_wrap .sect_05 .agree_chk input[type="checkbox"] + label{display:block; padding-left:30px; font-size:15px; line-height:1.3;}
	.event_wrap .sect_05 .agree_chk input[type="checkbox"] + label:after{top:1px; width:20px; height:20px; border-radius:2px;}
	.event_wrap .sect_05 .agree_chk input[type="checkbox"]:checked + label:after{background-size:10px auto;}
	.event_wrap .sect_05 .btn_done{margin-top:50px;}

	.event_wrap .sect_last{padding:40px 0 35px}
	.event_wrap .sect_last .inner{max-width:92%; padding:0;}
	.event_wrap .sect_last .notice dt{margin-bottom:20px; font-size:19px;}
	.event_wrap .sect_last .notice dd{padding-left:10px; text-indent:-10px; font-size:15px;}
	.event_wrap .sect_last .notice dd + dd{margin-top:8px;}

}

@media all and (max-width:390px){
	.event_wrap .section{padding:45px 0;}
	.event_wrap .sect_01{padding:60px 0 30px}
	.event_wrap .sect_01 .event_info span:not(.line){font-size:12px;} 
	.event_wrap .sect_01 .event_info span:first-child{padding-right:10px;}
	.event_wrap .sect_01 .event_info span:last-child{padding-left:10px;}
	.event_wrap .sect_05 .quiz_box .rdo_wrap .rdo input[type="radio"] + label{height:150px;}
	.event_wrap .sect_01 .event_tit p{font-size:17px;}
}

@media all and (max-width:320px){
	.event_wrap .sect_01 .event_info span:not(.line){font-size:10px;} 
}