/* reset.css */
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;
}

footer{font-family:'Spoqa Han Sans', 'Noto Sans SC', 'Apple Gothic', sans-serif;}

.optional_textbook, .optional_textbook button{font-family:'NanumSquareNeo','Malgun Gothic', '맑은 고딕','돋움',Gulim,Tahoma, Geneva, sans-serif,verdana;}
.optional_event, .optional_event button{font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
#wrap.event_wrap{font-family:'Spoqa Han Sans', 'Apple Gothic', sans-serif;}

.floating{display:none;}

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;}
a{text-decoration:none;}
blockquote::before, blockquote::after,
q::before, q::after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/**/
.visually_hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

img{max-width:100%}
.section{width:100%;position:relative;box-sizing:border-box}

#cursorBanner{visibility:hidden;position:fixed;top:50%;left:50%;z-index:1000;width:158px;height:158px;justify-content:center;align-items:center;background:rgba(0, 0, 0, .7);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:transform 0.1s ease-out;}
#cursorBanner p{padding-top:90px;color:#fff;font-size:13px;line-height:20px;font-weight:700;text-align:center;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_cursor.svg') no-repeat 50% 20px / 48px auto;}
#topBanner{display:none;position:absolute;top:-48px;left:0;z-index:10000;width:100%;height:48px;border-radius:25px 25px 0 0;justify-content:center;align-items:center;background:#275C30;text-align:center;}
#topBanner p{display:inline-block;padding-right:30px;font-size:18px;font-weight:700;text-align:center;color:#fff;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_arrow3.svg') no-repeat 100% 50% / 18px auto;}


.visual_section{position:relative;z-index:1;height:100vh;padding-top:130px;/*padding-top:35vw;*/box-sizing:border-box;background:#FFE450;overflow:hidden;}
.visual_section .title{max-width:360px;margin:0 auto;text-align:center;position:relative;}
.visual_section .title .sparkle_box > span,
.visual_section .title .book_bar_box > span{display:inline-block;position:absolute;}
.visual_section .title .sparkle_box > span img,
.visual_section .title .sparkle_box > span img{width:100%;}
.visual_section .title .spk1{width:6.53%;height:7.56%;top:8.43%;left:5.83%;animation: pulse 1.2s linear infinite;}
.visual_section .title .spk2{width:4.86%;height:5.81%;top:0;left:28.06%;animation: pulse 1s linear infinite;animation-delay:0.5s;}
.visual_section .title .spk3{width:7.36%;height:8.72%;top:17.88%;left:32.92%;animation: pulse 2s linear infinite;animation-delay:0.3s;}
.visual_section .title .bar1{width:5.97%;height:11.05%;top:88.6%;left:25.97%;animation:tiltBook 1.6s linear infinite alternate;}
.visual_section .title .bar2{width:5.97%;height:11.05%;top:88.6%;left:51.11%;animation:tiltBook2 1.6s linear infinite alternate;}
.visual_section .title .bar3{width:5.97%;height:11.05%;top:88.6%;left:76.25%;animation:tiltBook 1.6s linear infinite alternate;}
.visual_section .banner{position:absolute;right:15px;top:35px;display:inline-block;width:152px;height:152px;border-radius:50%;}
.visual_section .scroll_indicator{position:absolute;left:50%;bottom:25px;width:100%;padding-top:70px;text-align:center;transform:translateX(-50%);color:#000;font-size:12px;font-weight:700;}
.visual_section .scroll_indicator:before{content:'';position:absolute;left:50%;top:0;display:inline-block;width:35px;height:59px;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_scroll.png') no-repeat 50% 0 / 100% auto;transform:translateX(-50%);animation:scrollIndicator 1.2s infinite alternate;}

@keyframes scrollIndicator{
    0%		{transform: translateY(3px);}
	100%	{transform: translateY(-3px);}
}
@keyframes pulse {
    0%{transform: scale(1);}
    60%{transform: scale(0.1);}
    100%{transform: scale(1);}
}
@keyframes tiltBook {
    0%{transform:rotate(0);}
    100%{transform:rotate(-55deg);}
}
@keyframes tiltBook2 {
    0%{transform:rotate(0);}
    100%{transform:rotate(55deg);}
}

.slider_wrapper{opacity:0;height:100vh;}
.slider_container{display:flex;width:100%;padding:0 12px;margin:0 auto;flex-direction:row;gap:12px;justify-content:center;box-sizing:border-box;}
.slider_container .book_wrapper{overflow:hidden;flex-shrink:0;width:95px;}
.slider_container .slide_track{display:flex;flex-direction:column;gap:73px;transition:transform 0.5s ease;width:95px;}
.slider_container .slide_track.on{animation:slideUp 70s linear infinite;}
.slider_container .slide_track:nth-child(odd).on{animation:slideUp 60s linear infinite reverse;}
.slider_container .slide{width:95px;height:125px;display:flex;align-items:center;justify-content:center;transition: box-shadow 0.3s ease 1s;}
.slider_container .slide_track.on .slide{box-shadow:0 0 20px 0 rgba(30, 30, 30, .18)}
.slider_container .slide a{display:block;height:100%}

@keyframes slideUp{
	0%		{transform: translateY(0);}
	100%	{transform: translateY(-50%);}
}

.card_section{opacity:0;z-index:3;height:calc(100vh - 48px);padding:110px 0 30px;text-align:center;background:#275C30 url('https://pic.neungyule.com/neteacher/m/2022/optional/bg_card_section.png') no-repeat 50% 50% / 100% auto;}
.card_section h2{position:relative;display:inline-block;color:#fff;font-size:25px;font-weight:900}
.card_section h2 i{position:absolute;left:50%;top:-45px;display:inline-block;padding:8px 18px;color:#fff;font-size:16px;font-weight:900;transform:translateX(-50%) rotate(6deg);background-color:#000;border-radius:30px;}
.card_section h2 i:after{content:'';position:absolute;left:40px;bottom:-6px;display:inline-block;width:18px;height:10px;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/bg_bubble_tail.svg') no-repeat 50% 50% / 100% auto}
.card_section h2 strong{display:block;width:234px;margin:12px auto 22px;color:#FFE450;font-size:50px;font-weight:900;background: url('https://pic.neungyule.com/neteacher/m/2022/optional/bg_flower.svg') no-repeat 0 50% / 20px auto, url('https://pic.neungyule.com/neteacher/m/2022/optional/bg_flower.svg') no-repeat 100% 50% / 20px auto;}
.card_section h2+p{color:rgba(255, 255, 255, .85);font-size:14px;line-height:22px;}
.card_section .card_btn{position:relative}
.card_section .card_btn img{max-width:360px}
.card_section .card_btn .btn{position:absolute;left:50%;bottom:0;display:block;width:285px;height:55px;line-height:55px;background-color:#FFE450;border-radius:55px;transform:translate(-50%, 0);border:0;}
.card_section .card_btn .btn span{display:inline-block;padding-right:15px;color:#000;font-weight:900;font-size:18px;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_arrow.svg') no-repeat 100% 50% / 8px auto}
.card_section .card_btn .sparkle_box > span{display:inline-block;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_sparkle.svg') no-repeat center / 100% auto;position:absolute;}
.card_section .card_btn .sparkle_box .sparkle1{width:11.81%;height:14.21%;top:17.22%;left:6.39%;animation: pulse 1.2s linear infinite;}
.card_section .card_btn .sparkle_box .sparkle2{width:6.25%;height:8.36%;top:30.27%;left:15.69%;animation: pulse 1s linear infinite;animation-delay:0.1s;}
.card_section .card_btn .sparkle_box .sparkle3{width:6.25%;height:8.36%;top:3.85%;left:80.28%;animation: pulse 0.8s linear infinite;animation-delay:0.3s;}

.card_notice{background:rgba(0, 0, 0, .3);width:100%;padding:20px;position:absolute;left:0;bottom:0;}
.card_notice ul li{position:relative;font-size:12px;color:#fff;line-height:20px;text-align:left;padding-left:6px;}
.card_notice ul li:before{content:'';display:inline-block;width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;left:0;top:8px;}

.popup{display:none;position:fixed;top:0;left:0;right:0;bottom:0;align-items:flex-end;background:rgba(0,0,0,0.8);z-index:9999;justify-content:center;font-family:'NanumSquareNeo','Malgun Gothic', '맑은 고딕','돋움',Gulim,Tahoma, Geneva, sans-serif,verdana;}
.popup_header{overflow:hidden;position:sticky;left:0;right:0;top:0;z-index:10;width:100%;padding:30px 25px 20px;background-color:#fff;box-sizing:border-box;}
.popup_header .tab_swiper .swiper-slide{width:auto !important}
.popup_content_wrap{position:relative;overflow:hidden;box-sizing:border-box;padding-top:40px;}
.popup_content{position:relative;overflow-y:auto;background:#fff;padding:0 0 25px;width:100%;max-height:85vh;border-radius:20px 20px 0 0;box-sizing:border-box;}
.popup_content_wrap .popup_close{position:relative;width:30px;height:30px;background-color:#fff;text-indent:-9999px;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/btn_close_x.png') no-repeat 50% / 30px auto;position:absolute;top:0;right:16px;z-index:2;}
/* .popup_content .popup_close:after{content:'';position:absolute;left:50%;top:50%;display:inline-block;width:48px;height:3px;background:#CFCFCF;border-radius:3px;transform:translate(-50%, -50%)} */
.popup_content .popup_title{margin-top:15px;text-align:center}
.popup_content .popup_title p{display:inline-block;padding:8px 22px;font-size:15px;font-weight:700;color:#fff;border-radius:20px;background:#000;}
.popup .pop_section_title{position:relative;text-align:center;}
.popup .pop_section_title p{position:relative;z-index:1;display:inline-block;padding:0 6px;font-size:25px;font-weight:900;color:#000;}
.popup .pop_section_title p:after{content:'';position:absolute;left:0;bottom:-4px;z-index:-1;display:block;width:100%;height:10px;background:#FFE450;border-radius:6px;}


.popup .swiper-container{padding:38px 0 30px;}
.popup .swiper-container .slide_title{margin-bottom:24px;font-size:16px;color:#000;text-align:center;font-weight:700}
.popup .swiper-container .info_list li{position:relative;padding-left:10px;color:#666;font-size:13px;line-height:22px;word-break:keep-all;letter-spacing:-0.5px}
.popup .swiper-container .info_list li:before{content:'';position:absolute;left:0;top:8px;display:inline-block;width:3px;height:3px;background:#7A7A7A;border-radius:50%}
.popup .swiper-container .info_list li+li{margin-top:15px}
.popup .swiper-container .img_box{display:flex;gap:7px;margin-top:20px;justify-content:center}
.popup .swiper-container .img_box>span{flex:1}
.popup .swiper-container .img_box>img{border:1px solid #eee}
.popup .swiper-container .swiper-pagination-progressbar{top:auto;left:50%;bottom:0;width:326px;height:2px;background:#EBEBEB;transform:translateX(-50%);}
.popup .swiper-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#000000}


.pop_info_section{padding:20px 25px 80px;}
.pop_info_section .img_wrapper{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:30px;}
.pop_info_section .img_wrapper .img_box{display:inline-block;}
.pop_info_section .img_wrapper .img_box img{width:151px;border:1px solid #DEDEDE;}
.pop_info_section .info_wrapper{text-align:center}
.pop_info_section .info_wrapper .book_name{margin-bottom:15px;color:#000;font-size:35px;line-height:40px;font-weight:700;word-break:keep-all}
.pop_info_section .info_wrapper .label_box{margin-bottom:35px;}
.pop_info_section .info_wrapper .tag_box{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:20px 0 0;}
.pop_info_section .info_wrapper .tag{display:inline-block;padding:10px 15px;font-size:12px;color:#000;background-color:#E9E9E9;border-radius:5px;}
.pop_info_section .info_wrapper .tag + .tag{margin-top:5px}
.pop_info_section .info_wrapper .txt{color:#666;font-size:14px;line-height:22px}


.tabs{display:flex;gap:5px;justify-content:center;}
.tab_btn{position:relative;z-index:1;padding:0 6px;background:none;border:none;font-size:18px;font-weight:900;color:#000;transition:background-color 0.2s;word-break:keep-all}
.tab_btn.active:after{content:'';position:absolute;left:0;bottom:0;z-index:-1;display:block;width:100%;height:9px;background:#FFE450;border-radius:6px;}
.tab_content{display:none;}
.tab_content.active{display:block;}

.pop_features_section{padding:60px 25px 100px;background-color:#F2F2F2}
.pop_features_section .pop_section_title:before{content:'';position:absolute;left:50%;top:-110px;display:inline-block;width:110px;height:110px;margin-left:-55px;background:#F2F2F2 url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_book.svg') no-repeat 50% 26px / 46px auto;border-radius:50%;}

.pop_curriculum_section{padding:60px 25px 20px}
.pop_curriculum_section .pop_section_title:before{content:'';position:absolute;left:50%;top:-110px;display:inline-block;width:110px;height:110px;margin-left:-55px;background:#fff url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_book.svg') no-repeat 50% 26px / 46px auto;border-radius:50%;}
.pop_curriculum_section .curriculum_table{width:100%;margin-top:35px;border-top:1px solid #000;border-bottom:1px solid #D9D9D9}
.pop_curriculum_section .curriculum_table th{padding:15px 8px;color:#000;font-weight:700;font-size:13px;border-right:1px solid #D9D9D9;border-bottom:1px solid #D9D9D9;text-align:left;vertical-align:middle;line-height:20px}
.pop_curriculum_section .curriculum_table td{padding:15px 15px;color:#666;font-size:13px;line-height:1.4;border-bottom:1px solid #D9D9D9;vertical-align:middle;letter-spacing:-.05px}
.pop_curriculum_section .curriculum_table td.tl{text-align:left}
.pop_curriculum_section .curriculum_table td p{color:#666666;font-size:14px;}
.pop_curriculum_section .curriculum_table td p + p{margin-top:6px;}
.pop_curriculum_section .btn_box{display:flex;max-width:280px;margin:20px auto 0;gap:2px;align-items:center;justify-content:center;}
.pop_curriculum_section .btn_box a{flex:1;display:flex;align-items:center;justify-content:center;padding:0 34px;height:43px;background:#000;border-radius:48px}
.pop_curriculum_section .btn_box a.disabled{font-size:16px;font-weight:700;color:#fff;cursor:default}
.pop_curriculum_section .btn_box a strong{display:inline-block;padding-right:15px;font-size:16px;font-weight:700;color:#fff;background:url('https://pic.neungyule.com/neteacher/m/2022/optional/ico_arrow2.svg') no-repeat 100% 50% / 6px auto}


@media screen and (orientation: landscape) and (max-width: 767px) {
	.visual_section{height:100vh;padding-top:0;}
	.visual_section .title{max-width:180px;padding-top:60px;}
	.slider_wrapper{overflow-y:hidden;height:100vh}
	.card_section{height:100%;background-position:50% -100%}
}

.test_wrap{width:100%;max-width:360px;padding:42px 25px;min-height:calc(100vh - 162px);display:flex;flex-direction:column;justify-content:center;}
.test_wrap .test_step{text-align:right;color:#999;font-size:13px;font-weight:500;margin-bottom:10px;}
.test_wrap .test_step strong{color:#000;}
.test_swiper{overflow:hidden;text-align:center;}
.test_swiper .q_lb{font-size:13px;font-weight:500;text-align:center;display:inline-block;width:29px;height:29px;line-height:29px;background:#ECECEC;color:#555;border-radius:50px;}
.test_swiper .title{margin:15px 0;font-size:28px;line-height:38px;font-weight:700;letter-spacing:-0.04em;color:#000;}
.test_swiper .img_box{margin:50px auto 45px;}
.test_swiper .check_list li input[type=radio]{overflow:hidden;display:inline-block;position:absolute;width:1px;height:1px;border:0;z-index:-1;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);}
.test_swiper .check_list li input[type=radio] + label{display:inline-block;width:100%;height:55px;background-color:#fff;border:1px solid #ADADAD;line-height:53px;border-radius:10px;font-weight:700;font-size:16px;color:#000;}
.test_swiper .check_list li input[type=radio]:checked + label{border-color:#FFE450;background-color:#FFE450;}
.test_swiper .check_list li + li{margin-top:5px;}
.test_swiper .check_list.four{display:flex;flex-wrap:wrap;gap:5px 5px;}
.test_swiper .check_list.four li{width:calc(50% - 3px);}
.test_swiper .check_list.four li + li{margin:0;}
.test_swiper .loading_slide .q_lb{opacity:0;}
.test_swiper .loading_box .bnr_img{width:65.22%;margin:0 auto 40px;animation:tilt-shaking 0.36s infinite;text-indent:20px;}
.test_swiper .loading_txt{font-size:23px;line-height:35px;letter-spacing:-0.04em;color:#000;font-weight:600;}
.test_swiper .loading_txt span{color:#3D9A67}
@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.optional_event.result{background:#275C30 url('https://pic.neungyule.com/neteacher/m/2022/optional/result_bg.png') no-repeat 50% 50% / 100% auto;min-height:calc(100vh - 162px);}
.result_wrap{width:100%;max-width:360px;margin:0 auto;padding:64px 25px 48px;}
.result_wrap .title{color:#fff;font-size:38px;line-height:45px;text-align:center;letter-spacing:-0.04em;font-weight:700;}
.result_wrap .title span{color:#FFE450;}

.result_wrap .card_textbook .card_item{max-width:310px;margin:0 auto;}
.result_wrap .card_gift .card_item{width:151px;margin:0 auto;}
.result_wrap .card_box .card_item{margin:60px auto;position:relative;cursor:pointer;}
.result_wrap .card_box .card_item .front,
.result_wrap .card_box .card_item .back{
    display: flex;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: ease-in-out 600ms;
    
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.result_wrap .card_box .card_item .front{transform: perspective(800px) rotateY(0deg);box-shadow:0 0 35px rgba(0,0,0,.16);}
.result_wrap .card_box .card_item .back{position: relative;transform: perspective(800px) rotateY(180deg);}
.result_wrap .card_box .card_item.flipped .back {
    -moz-transform: perspective(800px) rotateY(0);
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
}
.result_wrap .card_box .card_item.flipped .front {
    -webkit-transform: perspective(800px) rotateY(-180deg);
    -moz-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
}

.result_wrap .button_box{display:flex;flex-wrap:wrap;gap:5px 5px;}
.result_wrap .button_box a{display:inline-block;width:calc(50% - 3px);height:55px;line-height:55px;font-size:15px;font-weight:700;color:#000;background-color:#fff;border-radius:10px;text-align:center;}

.event_notice{padding:50px 22px;letter-spacing:-0.04em;background:#000;}
.event_notice h3{font-size:20px;color:#fff;font-weight:700;margin-bottom:20px;}
.event_notice ul+h3{margin-top:40px;}
.event_notice ul li{font-size:12px;line-height:20px;color:rgba(255,255,255,0.8);position:relative;padding-left:8px;}
.event_notice ul li:before{content:'';display:inline-block;width:2px;height:2px;background:rgba(255,255,255,0.8);position:absolute;top:8px;left:2px;border-radius:50%;}