@charset "UTF-8";

:root{--hero-bg:#e1c300;--primary:#b33025;--text:#000;--text-sub:#565656;--text-mute:#444;--line:#eaeaea;--bg-soft:#f0f0f0;--pill-bg:#f2f2f2;
	--c1:#df530a;--c2:#548f3b;--c3:#06776c;--c4:#eb6ea1;--c5:#7f73b2;--c6:#1093db;--c7:#d4ad02;--c8:#be4318;--c9:#013f98;--c10:#7a0575;}
.book-card.c1, .preview-list .it.c1{--book-color:var(--c1);}
.book-card.c2, .preview-list .it.c2{--book-color:var(--c2);}
.book-card.c3, .preview-list .it.c3{--book-color:var(--c3);}
.book-card.c4, .preview-list .it.c4{--book-color:var(--c4);}
.book-card.c5, .preview-list .it.c5{--book-color:var(--c5);}
.book-card.c6, .preview-list .it.c6{--book-color:var(--c6);}
.book-card.c7, .preview-list .it.c7{--book-color:var(--c7);}
.book-card.c8, .preview-list .it.c8{--book-color:var(--c8);}
.book-card.c9, .preview-list .it.c9{--book-color:var(--c9);}
.book-card.c10, .preview-list .it.c10{--book-color:var(--c10);}

html,body,input,textarea,select,button{font-family:"Paperlogy",sans-serif;}
html,body{margin:0;padding:0;color:#000;background:#fff;}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{margin:0;padding:0;}
ul,ol,li{list-style:none;}
a{color:inherit;text-decoration:none;}
img{border:0;vertical-align:top;}
button{font-family:inherit;border:none;background:transparent;cursor:pointer;}

.event_area{position:relative;margin:0 auto;min-width:1280px;letter-spacing:-0.02em;}
#quick_wrap.fixed{display:none}

/* ===== 헤더 BI ===== */
.bi{position:absolute;left:42px;top:42px;z-index:5;}
.bi img{height:24px;display:block;}

/* ===== 플로팅 이벤트 버튼 ===== */
.fab_wrap{position:fixed;top:-30px;right:40px;z-index:500;width:210px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:fabSwing 3.4s ease-in-out infinite;}
.fab_string{position:relative;z-index:10;width:46px;height:99px;margin-bottom:-18px;pointer-events:none;}
.fab_string img{width:100%;height:100%;display:block;}
.fab_event{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:211px;height:211px;border-radius:50%;background:var(--primary);color:#fff;text-align:center;box-shadow:10px 10px 5px rgba(0,0,0,0.25);text-decoration:none;}
.fab_event::after{content:'';position:absolute;top:11px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#E1C300;z-index:2;}
.fab_event .ev_banner{display:block;margin:0 auto 2px;}
.fab_event .ev_desc{font-size:16px;line-height:22px;font-weight:400;color:#fff;}
@keyframes fabSwing{
	0%  {transform:rotate(-4deg);}
	50% {transform:rotate(4deg);}
	100%{transform:rotate(-4deg);}
}

/* ===== 히어로 ===== */
.hero{overflow:hidden;position:relative;width:100%;text-align:center;padding:80px 0 130px;}
.hero::before{content:'';position:absolute;top:0;left:0;z-index:0;width:100%;height:884px;background:var(--hero-bg);}
.hero > *{position:relative;z-index:1;}
.hero-eyebrow{margin-bottom:20px;font-weight:800;font-size:32px;color:var(--primary);margin-bottom:14px;letter-spacing:0;}
.hero-logo{margin:0 0 40px;line-height:0;}
.hero-logo img{display:inline-block;max-width:760px;width:auto;height:auto;}
.hero-sub{font-weight:700;font-size:30px;color:#000;margin-bottom:10px;}
.hero-sub strong{font-weight:700;}
.hero-desc{font-size:20px;color:rgba(0,0,0,.6);margin-bottom:32px;}

/* 스탯 카드 (10레벨 / 30권 / 100% 연계율) */
.stats{display:inline-flex;gap:14px;background:transparent;box-shadow:none;}
.stats:before{content:'';display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:1px;background:var(--primary);z-index:-1;}
.stat-item{width:164px;height:160px;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:30px 0;text-align:center;position:relative;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2026/0601/bg_stat.svg') no-repeat 50% 50% / 100% auto;box-sizing:border-box;}
.stat-num{font-family:'Paperlogy',sans-serif;font-weight:900;font-size:50px;line-height:1;color:var(--primary);letter-spacing:-0.02em;}
.stat-num .pct{font-size:18px;font-weight:900;vertical-align:bottom;margin-left:2px;}
.stat-unit{font-family:'Paperlogy',sans-serif;font-weight:900;font-size:18px;color:var(--primary);margin-top:4px;}
.stat-unit.unit-nanum{font-family:'NanumSquare Neo','Paperlogy',sans-serif;font-weight:800;}
.stat-desc{margin-top:10px;font-size:14px;color:var(--text-mute);}

/* 책 라인업 */
.books{margin-top:60px;padding:20px 0 50px;}
.books-inner{display:flex;gap:10px;width:max-content;animation:booksMarquee 40s linear infinite;}
.books-inner:hover{animation-play-state:paused;}
@keyframes booksMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.book-card{width:263px;text-align:center;position:relative;flex-shrink:0;}
.book-card img{display:block;width:263px;height:358px;object-fit:cover;transform-origin:50% 100%;transition:transform .25s ease;}
.book-card:hover img{transform:scale(1.2);}
.book-card .label{display:block;width:100%;margin-top:-15px;font-weight:500;font-size:14px;color:var(--book-color);text-align:center;transition:transform .25s ease;}
.book-card:hover .label{transform:scaleX(1.2);transform-origin:50% 50%;}
.badge-new{position:absolute;top:-15px;right:5px;width:80px;height:80px;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2026/0601/bg_new.svg') no-repeat 50% 50% / 100% auto;color:#fff;font-weight:900;font-size:19.7px;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .25s ease;}
.book-card:hover .badge-new{transform:translate(26px,-72px);}

/* 책 호버 툴팁(펼침_Read It_XX) — 책 위로 표시, 화살표 아래 방향 */
.book-tip{position:absolute;left:50%;bottom:calc(100% + 80px);transform:translateX(-50%) translateY(-8px);width:299px;height:271px;background:#fff;border:3px solid var(--book-color, #ccc);border-radius:10px;box-shadow:10px 10px 4px rgba(0,0,0,.15);padding:40px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:30;pointer-events:none;box-sizing:border-box;}
.book-tip::after{content:'';position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:0;height:0;border-style:solid;border-width:22px 12px 0 12px;border-color:var(--book-color, #ccc) transparent transparent transparent;z-index:2;}
.book-tip .tip-title{font-weight:800;font-size:30px;line-height:35px;text-align:center;margin-bottom:20px;color:var(--book-color);}
.book-tip ul{display:flex;flex-direction:column;}
.book-tip li{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:14px;line-height:24px;color:#000;border-bottom:1px solid #eaeaea;letter-spacing:-0.28px;}
.book-tip li:last-child{border-bottom:none;}
.book-tip li span:first-child{color:#4d4d4d;font-weight:300;}
.book-tip li span:last-child{font-weight:700;text-align:right;}
.book-card:hover{z-index:40;}
.book-card:hover .book-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* CTA 버튼 */
.cta{text-align:center;display:flex;justify-content:center;gap:20px;}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;min-width:254px;height:60px;padding:0 60px;border-radius:10px;font-weight:700;font-size:22px;box-sizing:border-box;}
.btn-cta.solid{background:var(--primary);color:#fff;}
.btn-cta.outline{border:1px solid var(--primary);color:var(--primary);background:#fff;}
.btn-cta:hover{opacity:.9;}

/* ===== 탭 ===== */
.tab-bar{border-bottom:1px solid var(--line);display:flex;justify-content:center;height:60px;}
.tab-bar .tab{flex:0 0 480px;text-align:center;font-weight:700;font-size:34px;line-height:60px;color:#d1d1d1;cursor:pointer;position:relative;}
.tab-bar .tab.active{color:var(--primary);}
.tab-bar .tab.active::after{content:'';position:absolute;left:50%;bottom:-1px;width:206px;height:3px;background:var(--primary);transform:translateX(-50%)}

.tab-content{padding:100px 0 0;display:none;}
.tab-content.active{display:block;}

/* 정보 pills */
.info-list{max-width:960px;margin:0 auto 100px;display:flex;flex-direction:column;gap:15px;}
.info-row{display:flex;align-items:center;gap:20px;}
.info-row .pill{display:inline-flex;align-items:center;justify-content:center;background:var(--pill-bg);border-radius:100px;height:35px;padding:0 30px;font-size:16px;color:var(--text-sub);min-width:89px;box-sizing:border-box;}
.info-row .val{font-weight:600;font-size:16px;color:#000;}

/* 왜 Read It */
.why{max-width:960px;margin:0 auto;text-align:center;}
.why h2{color:var(--primary);font-weight:900;font-size:50px;margin-bottom:30px;}
.why .why-sub{display:flex;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);border-radius:10px;height:40px;padding:0 28px;color:var(--text-sub);font-size:18px;margin-bottom:60px;}
.why .why-sub .arr{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #565656;opacity:0.56;transform:rotate(-90deg);margin:0 6px;}

.why-grid{position:relative;display:flex;flex-wrap:wrap;margin-top:30px;}
.why-grid .it{flex:0 0 50%;box-sizing:border-box;padding:0 0 60px;}
.why-grid .it1{text-align:left;padding-right:60px;}
.why-grid .it2{text-align:right;padding-left:60px;}
.why-grid .it3{text-align:left;padding:60px 60px 0 0;}
.why-grid .it4{text-align:right;padding:60px 0 0 60px;}
.why-grid .it h3{font-weight:500;font-size:30px;letter-spacing:-0.02em;margin-bottom:20px;}
.why-grid .it p{font-size:16px;line-height:30px;color:var(--text-sub);}
.why-logo{position:absolute;top:50%;left:50%;z-index:-1;transform:translate(-50%,-50%);}
.why-logo span{display:block;}

/* ===== Online Resource ===== */
.online{margin-top:85px;background:var(--bg-soft);padding:80px 0;text-align:center;}
.online h2{color:var(--primary);font-weight:800;font-size:50px;margin-bottom:20px;}
.online-list{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;max-width:1080px;margin:0 auto;}
.online-item{position:relative;width:97px;text-align:center;}
.online-item::after{content:'';position:absolute;right:-7px;top:10px;display:inline-block;width:1px;height:110px;background:rgba(217, 217, 217, 1)}
.online-item:last-child::after{display:none}
.online-item .ico{width:97px;height:97px;border-radius:10px;background-image:url('https://pic.neungyule.com/nebuildandgrow/img/event/2026/0601/ico_sprite.png');background-repeat:no-repeat;background-color:var(--bg-soft);background-size:873px 97px;}
.online-item:nth-child(1) .ico{background-position:0 0;}
.online-item:nth-child(2) .ico{background-position:-97px 0;}
.online-item:nth-child(3) .ico{background-position:-194px 0;}
.online-item:nth-child(4) .ico{background-position:-291px 0;}
.online-item:nth-child(5) .ico{background-position:-388px 0;}
.online-item:nth-child(6) .ico{background-position:-485px 0;}
.online-item:nth-child(7) .ico{background-position:-582px 0;}
.online-item:nth-child(8) .ico{background-position:-679px 0;}
.online-item:nth-child(9) .ico{background-position:-776px 0;}
.online-item .nm{margin-top:6px;font-size:14px;color:var(--text-sub);line-height:1.2;letter-spacing:-0.14px;}

/* ===== 미리보기 탭 ===== */
.preview-list{max-width:804px;margin:0 auto;padding-bottom:120px;display:flex;flex-direction:column;gap:40px;}
.preview-list .it{display:flex;gap:40px;align-items:center;padding:0;border:none;}
.preview-list .cover{flex:0 0 auto;width:228px;height:300px;position:relative;overflow:visible;}
.preview-list .cover img{width:228px;height:310px;display:block;object-fit:contain;}
.preview-list .badge_new{position:absolute;top:-10px;left:-10px;width:80px;height:80px;color:#fff;font-weight:900;font-size:19.7px;display:flex;align-items:center;justify-content:center;z-index:2;}
.preview-list .badge_new::before{content:'';position:absolute;inset:0;background:url('https://pic.neungyule.com/nebuildandgrow/img/event/2026/0601/bg_new2.svg') no-repeat 50% 50% / 100% auto;z-index:-1;animation:badgeNewPulse 1.6s ease-in-out infinite;}
@keyframes badgeNewPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.preview-list .info{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.preview-list .info .tit{margin-bottom:20px;}
.preview-list .info .txt{margin-bottom:40px;}
.preview-list .tit{font-weight:800;font-size:40px;line-height:1;color:var(--primary);}
.preview-list .txt{display:flex;flex-direction:column;gap:10px;}
.preview-list .sub_tit{font-weight:700;font-size:16px;line-height:1.3;color:#000;letter-spacing:0;}
.preview-list .desc{font-weight:400;font-size:16px;line-height:30px;color:var(--text-sub);letter-spacing:0;}
.preview-list .btns{display:flex;gap:10px;align-items:center;}
.preview-list .btn_preview,
.preview-list .btn_buy{display:inline-flex;width:218px;height:47px;align-items:center;justify-content:center;border-radius:10px;font-weight:800;font-size:18px;box-sizing:border-box;}
.preview-list .btn_preview{background:#f2f2f2;color:#0e0e0e;}
.preview-list .btn_buy{background:#e1c300;color:#fff;}
.preview-list .it .tit{color:var(--book-color, var(--primary));}