@charset "utf-8";

@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2) format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2) format('woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2) format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2) format('woff2');
    font-weight: 900;
    font-style: normal;
}

/* body{background:linear-gradient(180deg,rgba(14, 18, 57, 1) 0%, rgba(84, 146, 236, 1) 100%);} */
img{max-width:100%;}


.event_wrap{position:relative; width:100%; text-align:center; background:url(../img/bg.png)no-repeat center top; background-size:cover; overflow:hidden; font-family:'Paperlogy'; z-index:1;}
.event_wrap:after{content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:315px; background:url(../img/bg_bottom.png)no-repeat center top; background-size:100% auto; z-index:-1;}			 
.inner{width:920px; margin:0 auto; text-align:center; }

.visual{position:relative; padding:130px 0 0; margin:0 auto;}
.visual .event_tit{position:relative; animation:fadeInDown 1.4s both;}
.visual .event_tit .tit1{position:relative; z-index:1}
.visual .event_tit .tit2{margin-top:15px; position:relative; z-index:3}
.visual .rocket{position:absolute; top:-50px; left:50%; margin-left:-150px; z-index:2; animation:fadeInUp 1s both 0.4s;}
.visual .btn_wrap{display:flex; justify-content:center; gap:0 15px; margin-top:50px;}
.visual .btn_wrap a:hover{transform:translate3d(0, 0.5rem, 0); transition:0.3s;}

@keyframes fadeInDown{
	0%{opacity:0; transform:translate3d(0, -10%, 0);}
	100%{opacity:1; transform:translate3d(0, 0, 0);}
}

@keyframes fadeInUp{
	0%{opacity:0; transform:translate3d(-60px, 40%, 0);}
	100%{opacity:1; transform:translate3d(0, 0, 0);}
}

.section1{padding:50px 0 300px;}
.section1 .point_wrap{display:flex; justify-content:space-between; flex-wrap:wrap;}
.section1 .point_wrap .point{position:relative; padding:0 20px; height:60px; display:flex; align-items:center; gap:0 26px; border:2px solid #fff;}
.section1 .point_wrap .point:before{content:''; display:block; width:49px; height:100%;}
.section1 .point_wrap .point.point01:before{ background:url(../img/point_01.png)no-repeat center; background-size:100% auto;}
.section1 .point_wrap .point.point02:before{background:url(../img/point_02.png)no-repeat center; background-size:100% auto;}
.section1 .point_wrap .point p{font-size:28px; color:#fff; font-weight:600;}
.section1 .point_wrap .point p span{font-size:18px; font-weight:300;}
.section1 .video_wrap{width:100%; margin-top:15px;}
.section1 .video_wrap video{width:100%;}
.section1 .quiz_wrap{}
.section1 .quiz_wrap .tit{margin:75px 0 30px;}
.section1 .quiz_wrap .txt1{font-size:24px; color:#fff; font-weight:400; line-height:1.3; word-break:keep-all;}
.section1 .quiz_wrap .txt2{margin:25px 0 100px; display:flex; justify-content:center; align-items:center; gap:0 50px; word-break:keep-all;}
.section1 .quiz_wrap .txt2:after{display:none;}
.section1 .quiz_wrap .txt2 li{display:flex; align-items:center; font-size:24px; color:#ffde00;}
.section1 .quiz_wrap .txt2 li span{display:inline-block; margin-right:15px; font-size:20px; font-weight:900;}
.section1 .quiz_wrap .quiz{position:relative; padding:80px 50px 45px; display:flex; align-items:center; justify-content:space-between; border:3px solid #fff;}
.section1 .quiz_wrap .quiz .quiz_tit{position:absolute; top:-53px; left:50%; transform:translateX(-50%); width:100%; padding:0 25px;}
.section1 .quiz_wrap .quiz .quiz_tit .pc{}
.section1 .quiz_wrap .quiz .quiz_tit .mb{display:none;}
.section1 .quiz_wrap .quiz .rdo{}
.section1 .quiz_wrap .quiz .rdo input[type="radio"]{display:none;}
.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label{display:flex; align-items:center; gap:0 10px; font-size:45px; color:#fff; font-weight:700; cursor:pointer;}
.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label span{display:block; width:40px; height:40px; border-radius:50%; border:3px solid #fff; font-size:32px; }
.section1 .quiz_wrap .quiz .rdo input[type="radio"]:checked + label{color:#ffde00;}
.section1 .quiz_wrap .quiz .rdo input[type="radio"]:checked + label span{border:3px solid #ffde00;}
.section1 .quiz_wrap .quiz .rdo input[type="radio"]:hover + label{color:#ffde00;}
.section1 .quiz_wrap .quiz .rdo input[type="radio"]:hover + label span{border:3px solid #ffde00;}
.section1 .btn_wrap{display:flex; justify-content:center;}
.section1 .btn_wrap a{margin-top:23px; display:flex; align-items:center; justify-content:center; width:400px; height:102px; font-size:45px; color:#17325f; font-weight:700; border-radius:102px; background:#fff;}
.section1 .btn_wrap a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; transform:translate3d(0, 0.5rem, 0); transition:0.2s;}
.section1 .gift_wrap{position:relative; margin-top:115px;}
.section1 .gift_wrap{display:flex; justify-content:center;}			   
.section1 .gift_wrap p{position:relative; padding-right:256px; text-align:left; font-size:35px; color:#fff; line-height:1.2; flex:none;}	  
.section1 .gift_wrap p:after{content:''; position:absolute; top:-60px; right:0; display:block; width:249px; height:225px; background:url(../img/event_gift.png)no-repeat; background-size:100% auto; animation:move 0.7s both infinite alternate;}
.section1 .gift_wrap .point{color:#36d145; font-weight:700;}
@keyframes move{
	0%{transform:translate3d(0, 1rem, 0);}
	100%{transform:translate3d(0, 0, 0);}
}

button{cursor:pointer;}
.popup_wrap{background:#61d4ff;}
.popup{min-height:100vh; max-width:700px; width:100%; margin:0 auto; background:#61d4ff; font-family:'Paperlogy'}
.popup .popup_inner{padding:40px 3%;}
.popup .tit_pop{margin-bottom:35px; font-size:35px; color:#17325f; font-weight:800; text-align:center; line-height:1;}	   
.popup input[type="text"]{height:50px; padding:0 10px; font-size:15px; color:#abb4b7; border:1px solid #e0dfdf; background:#fff; border-radius:5px; outline:0;}
.popup select{width:170px; height:50px; padding:0 10px; font-size:15px; color:#abb4b7; border:1px solid #e0dfdf; background:#fff url(../img/select.png)no-repeat center right 15px; border-radius:5px; outline:0;}
.popup .form_box{padding:30px 15px;border-bottom:2px solid #17325f;border-top:2px solid #17325f;}
.popup .form_box li{display:flex; align-items:baseline;}
.popup .form_box li + li{margin-top:20px;}
.popup .form_box li span{width:180px; text-align:left; font-size:25px; color:#17325f; font-weight:500;}
.popup .form_box li div p{margin-top:5px; font-size:20px; color:#17325f; line-height:1.2;}
.popup .form_box li.name input[type="text"]{width:200px;}
.popup .form_box li.phone input[type="text"]{width:345px;}
.popup .form_box li.sch div{display:flex;}
.popup .form_box li.sch input[type="text"]{width:200px; margin-right:5px;}
.popup .form_box li.sch button{width:115px; height:50px; border-radius:5px; color:#fff; font-size:20px; background:#17325f; outline:0; border:0; margin:0; padding:0;}
.popup .form_box li.class select{width:170px;}
.popup .agree_wrap{padding:40px 0;}
.popup .agree_box{padding-left:15px; word-break:keep-all; position:relative;}
.popup .agree_box + .agree_box{margin-top:50px;}
.popup .agree_box button{position:absolute; top:0; right:0; width:125px; height:50px; border-radius:5px; color:#fff; font-size:20px; background:#17325f; outline:0; border:0; margin:0; padding:0;}
.popup .agree_box button img{margin-left:5px;}
.popup .agree_box p{color:#17325f; font-size:20px; line-height:1.2;}
.popup .agree_box p + p{margin-top:10px;}
.popup .agree_box .chk + .chk{margin-left:55px;}
.popup .agree_box input + label{margin-left:10px; font-size:20px; color:#17325f;}
.popup .box{display:none;margin-top:20px; }
.popup .agree_box .box table th{height:65px; padding:0 10px; text-align:center; color:#fff; font-size:20px; background:#17325f; border:1px solid #17325f; word-break:keep-all;}
.popup .agree_box .box table td{padding:20px 10px; text-align:center; color:#17325f; font-size:20px; background:#61d4ff; border-bottom:1px  solid #17325f; border-right:1px solid #17325f; word-break:keep-all;}
.popup .agree_box .box table td:first-child{border-left:1px solid #17325f;}
.popup .agree_box .box p{padding-left:30px; text-indent:-30px; margin-top:10px; font-size:20px; color:#17325f;}
.popup .agree_box.on .box{display:block;}			 

.popup .btn_confirm{width:100%; height:70px; font-size:40px; color:#fff; background:#17325f; font-weight:700; border-radius:15px; border:0; outline:0;}
.popup .box2{position:relative; margin-top:55px; padding:30px 20px 30px 35px; border-radius:15px; border:1px solid #17325f;}
.popup .box2 + .box2{margin-top:36px;}
.popup .box2 .tit{position:absolute; top:-30px; left:20px;}
.popup .box2 .tit span{display:inline-block ;padding: 15px; background:#61d4ff; font-size:22px; color:#17325f; font-weight:700;}
.popup .box2 .gein{}
.popup .box2 .gein li{display:flex; align-items:baseline; gap:0 8px; font-size:19px; color:#17325f; font-weight:400; line-height:1.3; letter-spacing:-1px; word-break:keep-all;}
.popup .box2 .gein li span{flex:none;}
.popup .box2 .gein li + li{margin-top:5px;}
																							
@media screen and (max-width:1920px){
.event_wrap:after{content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:315px; background:url(../img/bg_bottom.png)no-repeat center bottom;}

}
											   

@media screen and (max-width:960px){	
	.visual{width:92%;}
	.inner{width:92%;}

			 
	.inner{width:92%; margin:0 auto; text-align:center; }
	.visual{padding:100px 0 0;}
	.visual .event_tit .tit2{margin-top:10px}
	.visual .rocket{width:38%; top:-30px; left:50%; margin-left:-22%;}
	.visual .btn_wrap{display:flex; justify-content:center; gap:0 15px; margin-top:50px;}


	
	.section1 .point_wrap .point{width:100%; justify-content:center;}	  	
	.section1 .point_wrap .point + .point{margin-top:10px;}
	.section1 .quiz_wrap .txt2{gap:15px 0; flex-wrap:wrap;}
	.section1 .quiz_wrap .txt2 li{width:100%; justify-content:center;}
	.section1 .quiz_wrap .quiz{padding:65px 40px 35px}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label{gap:0 8px; font-size:38px;}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label span{width:35px; height:35px; font-size:25px; }
}
	
@media screen and (max-width:767px){
	.mb_br{display:block;}
	.event_wrap{background:url(../img/bg_m.png)no-repeat center bottom; background-size:cover;}
	.event_wrap:after{content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:200px; background:url(../img/bg_bottom.png)no-repeat center bottom; background-size:auto 100%;}
	
	.visual{padding:60px 0 0;}
	.visual .btn_wrap{margin-top:30px;}
	.section1{padding:30px 0 100px; }
	.section1 .point_wrap .point{height:40px; gap:0 15px;}
	.section1 .point_wrap .point:before{width:30px;}
	.section1 .point_wrap .point + .point{margin-top:10px;}
	.section1 .point_wrap .point p{font-size:18px;}
	.section1 .point_wrap .point p span{font-size:12px;}

	.section1 .quiz_wrap .tit{margin:45px 0 20px;}
	.section1 .quiz_wrap .txt1{font-size:20px;}
	.section1 .quiz_wrap .txt2{margin:15px 0  80px; gap:10px 0;}
	.section1 .quiz_wrap .txt2 li{font-size:18px;}
	.section1 .quiz_wrap .txt2 li span{font-size:14px; margin-right:10px;}
	.section1 .quiz_wrap .quiz{flex-wrap:wrap; padding:14.9935vw 5.2151vw 3.9113vw;}
	.section1 .quiz_wrap .quiz .quiz_tit{transform:translateX(-50%); margin:1.3038vw 0 0; top:-50%; padding:0; width:92%;}
	.section1 .quiz_wrap .quiz .quiz_tit .pc{display:none;}
	.section1 .quiz_wrap .quiz .quiz_tit .mb{display:block;}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label{font-size:24px;}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label span{width:24px; height:24px; font-size:17px; border:2px solid #fff;}
	.section1 .btn_wrap a{margin-top:15px; max-width:240px; width:80%; height:65px; font-size:27px;}
	.section1 .gift_wrap{margin-top:50px;}
	.section1 .gift_wrap{flex-wrap:wrap;}			   
	.section1 .gift_wrap p{font-size:22px; text-align:center; width:100%; padding:0;}	  
	.section1 .gift_wrap p:after{content:''; position:relative; top:auto; right:auto; margin-top:20px; width:100%; height:160px; background:url(../img/event_gift.png)no-repeat center; background-size:auto 100%; animation:move 0.7s both infinite alternate;}
}


@media screen and (max-width:700px){
	.popup{min-height:100vh; max-width:700px; width:100%;}
	.popup .popup_inner{padding:5.7143vw 5%;}
	.popup .tit_pop{margin-bottom:5.0000vw; font-size:5.0000vw;}	   
	.popup input[type="text"]{height:7.1429vw; padding:0 1.4286vw; font-size:2.1429vw; border-radius:0.7143vw;}
	.popup select{width:170px; height:7.1429vw; padding:0 1.4286vw; font-size:2.1429vw; background:#fff url(../img/select.png)no-repeat center right 2.1429vw; border-radius:0.7143vw; background-size:2.2857vw auto;}
	.popup .form_box{padding:4.2857vw 2.1429vw;border-bottom:0.2857vw solid #17325f;border-top:0.2857vw solid #17325f;}
	.popup .form_box li + li{margin-top:2.8571vw;}
	.popup .form_box li span{width:25.7143vw; font-size:3.5714vw;}
	.popup .form_box li div p{margin-top:0.7143vw; font-size:2.8571vw;}
	.popup .form_box li.name input[type="text"]{width:28.5714vw;}
	.popup .form_box li.phone input[type="text"]{width:49.2857vw}
	.popup .form_box li.sch input[type="text"]{width:28.5714vw; margin-right:0.7143vw;}
	.popup .form_box li.sch button{width:12.1429vw; height:7.1429vw; border-radius:0.7143vw; font-size:2.8571vw;}
	.popup .form_box li.class select{width:24.2857vw;}
	.popup .agree_wrap{padding:5.7143vw 0;}
	.popup .agree_box{padding-left:2.1429vw;}
	.popup .agree_box + .agree_box{margin-top:7.1429vw;}
	.popup .agree_box button{width:17.8571vw; height:7.1429vw; border-radius:0.7143vw; font-size:2.8571vw;}
	.popup .agree_box button img{margin-left:0.7143vw; width:2.2857vw;}
	.popup .agree_box p{font-size:2.8571vw; letter-spacing:-1px;}
	.popup .agree_box p + p{margin-top:1.4286vw;}
	.popup .agree_box .chk + .chk{margin-left:7.8571vw;}
	.popup .agree_box input + label{margin-left:1.4286vw; font-size:2.8571vw;}
	
	.popup .box{margin-top:2.8571vw; }
	.popup .agree_box .box table th{height:9.2857vw; padding:0 1.4286vw; font-size:2.8571vw;}
	.popup .agree_box .box table td{padding:2.7143vw 1.4286vw; font-size:2.8571vw; }
	.popup .agree_box .box p{padding-left:4.2857vw; text-indent:-4.2857vw; margin-top:1.4286vw; font-size:2.8571vw}

	.popup .btn_confirm{height:10.0000vw; font-size:5.7143vw;  border-radius:2.1429vw;}
	.popup .box2{margin-top:7.8571vw; padding:4.2857vw 2.8571vw 4.2857vw 5.0000vw;}
	.popup .box2 + .box2{margin-top:5.1429vw;}
	.popup .box2 .tit{top:-4.2857vw; left:2.8571vw;}
	.popup .box2 .tit span{padding: 2.1429vw; font-size:3.1429vw; }
	.popup .box2 .gein{}
	.popup .box2 .gein li{gap:0 4px; font-size:2.7143vw; }
	.popup .box2 .gein li + li{margin-top:0.7143vw;}

}


@media screen and (max-width:490px){
	.visual .btn_wrap{margin-top:20px;}
	.section1{padding:20px 0 80px;}
	.section1 .point_wrap .point{gap:0 10px; padding:0 5px;}
	.section1 .point_wrap .point:before{width:20px;}
	.section1 .point_wrap .point + .point{margin-top:5px;}
	.section1 .point_wrap .point p{font-size:14px; letter-spacing:-0.5px;}
	.section1 .point_wrap .point p span{font-size:10px;}
	.section1 .btn_wrap a{height:50px; font-size:22px;}
	
	.section1 .quiz_wrap .quiz{flex-wrap:wrap; justify-content:center; gap:10px 0; padding:9.9935vw 5.2151vw 3.9113vw;}
	.section1 .quiz_wrap .quiz .rdo{width:calc(100%/3);}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label{justify-content:center;}
	.section1 .gift_wrap p{font-size:19px;}
	.section1 .gift_wrap p:after{height:120px;}
}

@media screen and (max-width:320px){
	.section1 .quiz_wrap .txt1{font-size:16px;}
	.section1 .quiz_wrap .txt2{margin-top:12px;}
	.section1 .quiz_wrap .txt2 li{font-size:15px;}
	.section1 .quiz_wrap .txt2 li span{font-size:12px;}
	.section1 .quiz_wrap .quiz .rdo{flex-wrap:wrap; width:calc(100%/3);}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label{font-size:20px;}
	.section1 .quiz_wrap .quiz .rdo input[type="radio"] + label span{width:20px; height:20px; font-size:14px;}
}