@charset "UTF-8";

:root {
	--primary-green: #077E4E;
}

html, body, input, textarea, select, button{font-family: "Paperlogy", sans-serif;}
input, textarea, select, td, th, button{font-family: "Paperlogy", sans-serif;}
html,body{margin:0;padding:0;height:100%;margin:0 auto;min-width:auto;font-family: "Paperlogy";}
div, p{padding:0;margin:0;}
section{position:relative;text-align:center;}
section img,
footer img{/*width:100%;max-width:1080px;*/vertical-align:top;}
section img{position:relative;z-index:1;}
button{font-family:inherit;border:none;box-shadow:none;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
canvas{position:absolute;left:50%;top:0;z-index:2;width:90vw;height:612px;pointer-events:none;transform:translateX(-50%);}
footer{text-align:center}
footer img{max-width:815px}
.blind{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%);}
.event_area{position:relative;margin:0 auto;min-width:1080px;/*max-width:815px;*/letter-spacing:-0.02em}

#quick_wrap.fixed{display:none !important}

.visual{overflow:hidden;position:relative;padding:120px 0 150px;background-color:var(--primary-green);}
.visual .logo{position:absolute;left:42px;top:42px;width:226px;}

.phonics_title{position:relative;display:inline-block;padding-bottom:80px;}
.phonics_title h2{font-size:50px;font-weight:900;color:#fff;line-height:60px;font-weight:700;/*text-shadow:2px 2px 4px rgba(0,0,0,0.2);*/animation:fadeInUp 1s ease-out;}
.phonics_title h2 strong{display:inline-block;margin-top:25px;font-size:80px;color:#FFD700;font-weight:700;animation:bounceIn 0.8s ease-out 0.3s both;}
@keyframes fadeInUp{
	0%{opacity:0;transform:translateY(30px);}
	100%{opacity:1;transform:translateY(0);}
}
@keyframes bounceIn{
	0%{opacity:0;transform:scale(0.9) translateY(20px);}
	60%{opacity:1;transform:scale(1.02) translateY(-3px);}
	100%{opacity:1;transform:scale(1) translateY(0);}
}
.phonics_title .open_badge{position:absolute;right:0;top:-70px;width:110px;height:110px;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2025/1120/bg_badge.svg') no-repeat 50% 50%;display:flex;align-items:center;justify-content:center;font-size:22px;letter-spacing:-0.02em;font-weight:800;color:#000;transform-origin:50% 50%;opacity:0;animation:fadeInBadge 0.5s ease-out 1.1s forwards, shake 2s ease-in-out 1.6s infinite;}
@keyframes fadeInBadge{
	0%{opacity:0;transform:rotate(20deg) scale(0.8);}
	100%{opacity:1;transform:rotate(20deg) scale(1);}
}
@keyframes shake{
	0%, 100%{transform:rotate(20deg);}
	10%, 30%, 50%, 70%, 90%{transform:rotate(18deg);}
	20%, 40%, 60%, 80%{transform:rotate(22deg);}
}
.phonics_links{display:flex;justify-content:center;gap:100px;margin:170px 0 0;}
.phonics_links a{position:relative;display:inline-block;padding:3px 0;font-size:28px;font-weight:600;color:#fff;text-decoration:none;transition:opacity 0.3s;border-bottom:1px solid rgba(255, 255, 255, .5);}
.phonics_links a:after{content:'';position:absolute;right:-20px;top:10px;display:inline-block;width:14px;height:14px;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2025/1120/ico_arr.svg') no-repeat 50% 50% / 10px auto}


.tab{display:flex;align-items:center;justify-content:center;gap:260px;border-bottom:1px solid #C7C7C7;}
.tab li{position:relative;}
.tab li a{position:relative;display:inline-block;padding:15px 30px;font-size:30px;font-weight:600;line-height:36px;color:rgba(164, 164, 164, .5);text-align:center;text-decoration:none;cursor:pointer;font-weight:800}
.tab li.active{position:relative;}
.tab li.active:after{content:'';position:absolute;left:0;bottom:-1px;display:block;width:100%;height:4px;background:#FAAF18;border-radius:99px;}
.tab li.active a{color:#FAAF18;}
.tab li.active a > i{background:#FAAF18;color:#fff;}

/* 탭 콘텐츠 */
.tab_content{display:none;max-width:960px;margin:0 auto;padding:100px 0 0;}
.tab_content.active{display:block;}
/*.content{text-align:center;}*/

/**/
.book_list{max-width:780px;margin:0 auto;}
.book_list .item{display:flex;/*align-items:center;*/gap:40px;padding:20px 0;}
.book_list .book_cover{flex:0 0 auto;width:228px;}
.book_list .book_cover img{width:100%;height:auto;display:block;}
.book_list .info{padding-top:30px;flex:1;text-align:left;}
.book_list .tit{font-size:40px;font-weight:800;margin:0 0 20px;line-height:1.2;letter-spacing:-0.02em;}
.book_list .item:nth-child(1) .tit{color:#006332;}
.book_list .item:nth-child(2) .tit{color:#0E2E8F;}
.book_list .item:nth-child(3) .tit{color:#601E7C;}
.book_list .item:nth-child(4) .tit{color:#E4047F;}
.book_list .item:nth-child(5) .tit{color:#FF5112;}
.book_list .sub_tit{font-size:18px;color:#000;margin:0 0 10px;font-weight:600;line-height:1.4}
.book_list .desc{font-size:16px;color:#555;line-height:1.4;margin:0 0 40px;}
.book_list .btn_preview{display:inline-flex;width:222px;height:46px;align-items:center;justify-content:center;background:#F2F2F2;border:none;border-radius:10px;font-size:18px;font-weight:900;color:#0E0E0E;cursor:pointer;}

.phonics_container{position:relative;max-width:1400px;margin:0 auto;padding:0 40px;}

.banner_event{position:sticky;left:100%;bottom:0;z-index:499;display:inline-block;/*box-shadow:0 4px 8px rgba(0,0,0,0.2);*/}
.banner_event > a{display:inline-block;background:#FFD446;border-radius: 10px 10px 0 0;padding:25px 120px 25px 40px;}
.banner_event .banner_text{font-size:22px;font-weight:700;color:#000;white-space:nowrap;}
.banner_event .character{position:absolute;right:-20px;bottom:-1px;width:156px;height:150px;display:flex;align-items:center;justify-content:center;font-size:32px;pointer-events: none;}
.banner_event .character img{position:absolute;left:0;bottom:0;}
.banner_event .quick_top{position:absolute;bottom:150px;right:0;z-index:499;display:inline-block;width:48px;height:48px;text-align:right;padding-right:30px;}
.banner_event .quick_top button{width:48px;height:48px;background:rgba(0, 0, 0, .5);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff !important;font-weight:500;}
/*.banner_event a{position:relative;display:inline-block;}
.banner_event:after{content:'';position:absolute;right:-20px;top:10px;display:inline-block;width:155px;height:204px;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2025/1120/character.png') no-repeat 50% 50% / 100% auto}*/

.swiper_wrap{position:relative;}
.swiper_visual{width:100%;padding:20px 0 40px;}
.swiper_visual .swiper-wrapper{display:flex;align-items:center;}
.swiper_visual .swiper-slide{position:relative;display:flex;flex-direction:column;gap:20px;width:400px !important;flex-shrink:0;/*transition:all 0.4s ease;*/}
.swiper_visual .swiper-slide .img_box{margin-top:60px;box-shadow:0 3px 10px rgba(0,0,0,0.15);border-radius:20px;}
.swiper_visual .swiper-slide-active{opacity:1;/*width:600px !important;*/}
.swiper_visual .swiper-slide img{width:100%;height:auto;object-fit:contain;}

.phone_frame{overflow:hidden;position:absolute;top:0;left:50%;z-index:100;transform:translateX(-50%);width:598px;height:328px;background:transparent;border-radius:30px;border:7px solid #fff;box-shadow:0 3px 15px rgba(0,0,0,0.15);/*transition:all 0.3s ease;*/pointer-events:none;}
.phone_frame:after{content:'';position:absolute;top:50%;right:-80px;z-index:10;width:180px;height:25px;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2025/1120/bg_phone.svg') no-repeat 50% 50% / auto 100%;transform:translateY(-50%) rotate(90deg);}

.swiper_phone{position:absolute !important;top:0;left:50%;z-index:100;transform:translateX(-50%);width:600px;height:390px;margin:0 auto;}
.swiper_phone .swiper-slide{width:100% !important;}
.swiper_phone .swiper-slide img{width:100%;height:auto;object-fit:contain;}
.swiper_phone .swiper-slide p{display:none;height:0;line-height:1.2}
.swiper_phone .swiper-slide-active p{display:block;height:auto;margin-top:30px;font-size:18px;color:rgba(255,255,255,0.8);}


.tab_section{padding:150px 0 80px;}
.tab_section .img_box{width:1006px;margin:0 auto;padding-bottom:45px;}
.tab_section .img_box img{width:100%}

.phonics_tit{color:#000;font-size:22px;line-height:1.5;text-align:center}
.phonics_tit img{display:block;margin:20px auto 0;}

/* Phonics Table Styles */
.phonics_table{width:100%;max-width:960px;margin:10px auto 0;border-collapse:collapse;letter-spacing:-0.04em;font-size:18px;text-align:center;border-bottom:2px solid #FAAF18}
.phonics_table thead{background-color:#FAAF18;}
.phonics_table th{padding:28px 10px;color:#fff;font-weight:600;font-size:22px;}
.phonics_table tbody tr{border-bottom:1px solid #A2A2A2;}
.phonics_table td{padding:13px 10px;border:1px solid #A2A2A2;border-top:none;color:#000;vertical-align:middle;}
.phonics_table td.book_title{padding:13px 10px 13px 40px;text-align:left;}
.phonics_table tbody tr td:first-child{border-left:none;}
.phonics_table tbody tr td:last-child{border-right:none;}
.phonics_table td[rowspan]{vertical-align:middle;}

/* Info List Styles */
.info_list .info_item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.info_list dt.info_label{display:inline-flex;width:104px;height:40px;align-items:center;justify-content:center;background-color:#FAAF18;border-radius:20px;font-size:20px;font-weight:500;color:#fff;white-space:nowrap;flex-shrink:0;margin:0;}
.info_list dd.info_value{flex:1;text-align:left;font-size:18px;color:#555;line-height:1.5;margin:0 0 0 40px;font-weight:400}

/* Features Section Styles */
.features{position:relative;margin:130px auto 0;}
.features_logo{position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%, -50%);width:304px;height:304px;margin:0;}
.features_logo img{width:100%;height:100%;object-fit:contain;display:block;}
.features_list{display:flex;flex-wrap:wrap;min-height:560px;}
.features_list .item{position:relative;flex:0 0 50%;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;}
.features_list .tl{padding:0 0 60px;text-align:left;border-right:1px solid rgba(151, 151, 151, .6)}
.features_list .tr{padding:0 0 60px;text-align:right;}
.features_list .bl{padding:60px 0 0;text-align:left;border-top:1px solid rgba(151, 151, 151, .6);border-right:1px solid rgba(151, 151, 151, .6)}
.features_list .br{padding:60px 0 0;text-align:right;border-top:1px solid rgba(151, 151, 151, .6)}
.features_list .tit{font-size:34px;font-weight:700;color:#FAAF18;margin:0 0 20px;line-height:1.2;}
.features_list .desc{font-size:18px;color:#555;line-height:1.6;}