/* NELT 문법 실전 모의고사 상품 랜딩 — 원본 pages/nelt/grm_mocktest.asp inline <style>(.grm_test 스코프) 포팅.
   현재(만료 이벤트 제외) 렌더 섹션만: 타이틀/6레벨+표/why·video·recommend·video2/교재설명 swiper/플로팅/하단바.
   bare 클래스(inner_section·video_wrap·fl_wrap·bn_float)는 .grm_test 하위로 스코프(전역 충돌 방지). */

#content.grm_test { padding: 0; }
.grm_test .inner { width: 720px; margin: 0 auto; }
.grm_test #img1 { margin-top: 80px; margin-bottom: 10px; }
.grm_test #img3 { width: 788px; padding-top: 80px; }
.grm_test #img5 { margin-top: 100px; }

.grm_test .event-inner1 { position: relative; padding-bottom: 90px; text-align: center; }
.grm_test .event-inner1:before { position: absolute; z-index: -1; content: ''; width: 100%; height: 246px; background: #EEE; display: block; bottom: 0; }

.grm_test .event-inner2 { background: #03205c; text-align: center; padding-bottom: 100px; }

.grm_test .section2 { background: #fff; padding: 50px 20px; border-radius: 20px; overflow: hidden; }
.grm_test .section2 p { margin: 0; }
.grm_test .section2 .mes1 { position: relative; overflow: hidden; padding-bottom: 10px; list-style: none; }
.grm_test .section2 .mes1 li { float: left; width: 33.3%; }
.grm_test .section2 .mes1 li img { opacity: 0.5; width: 80%; margin-top: 30px; }
.grm_test .section2 .mes1 li.on img { opacity: 1; }
.grm_test .section2 .btn_preview { display: inline-block; width: 162px; height: 40px; border-radius: 20px; line-height: 40px; text-align: center; background: #03205C; color: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, .16); }
.grm_test .section2 .btn_preview strong { font-weight: 700; }

/* 레벨 구성 표 + 회전 하이라이트 */
.grm_test #nelt-table { padding: 0 20px; margin-top: 30px; }
.grm_test #nelt-table > ul { display: flex; width: 100%; padding: 0; border-bottom: 1px solid #eee; }
.grm_test #nelt-table > ul > li { width: 16.6%; }
.grm_test #nelt-table ul li { list-style: none; }
.grm_test #nelt-table > ul > li > ul { padding: 0; }
.grm_test #nelt-table > ul > li > ul > li { height: 40px; line-height: 40px; }
.grm_test #nelt-table .lb { background: #DFE0E1; border-right: 1px solid #fff; font-weight: 700; }
.grm_test #nelt-table > ul > li > ul > li.sb { border-right: 1px solid #eee; border-top: 1px solid #eee; box-sizing: border-box; }
.grm_test #nelt-table > ul > li > ul:last-child > li.sb { border-right: 0 none; }
.grm_test #nelt-table > ul > li.on { border: 5px solid #03205c; }
.grm_test #nelt-table > ul > li.on > ul > li.sb { font-weight: 900; }
.grm_test #nelt-table > ul > li.on > ul > li.lb { height: 35px; line-height: 35px; background: #03205c; border-color: #03205c; border-bottom-width: 0; color: #fff; font-weight: 900; box-sizing: border-box; }

/* 교재설명 슬라이더(탭 + swiper) */
.grm_test .slider-bs { margin-top: 50px; position: relative; padding: 20px; }
.grm_test .slider-bs:before { position: absolute; display: block; content: ''; width: 30px; height: 1000px; background: #fff; left: -10px; bottom: 0; z-index: 9; }
.grm_test .slider-bs:after { position: absolute; display: block; content: ''; width: 30px; height: 1000px; background: #fff; right: -10px; bottom: 0; z-index: 9; }
.grm_test .slider-bs .slide_tab { display: flex; margin-left: 10px; }
.grm_test .slider-bs .slide_tab div { border: 1px solid #aaa; text-decoration: none; color: #666; font-size: 22px; margin-bottom: 30px; height: 50px; line-height: 50px; display: inline-block; padding-left: 40px; padding-right: 15px; position: relative; cursor: pointer; }
.grm_test .slider-bs .slide_tab #act1 { padding-left: 20px; }
.grm_test .slider-bs .slide_tab #act1.on { padding-left: 20px; }
.grm_test .slider-bs .slide_tab div.on { background: #03205c; color: #fff; }
.grm_test .slider-bs .slide_tab div:before { position: absolute; content: ''; display: block; width: 35px; height: 35px; background: #fff; right: -19px; top: 6px; z-index: 9; border-top: 1px solid #aaa; border-right: 1px solid #aaa; transform: rotate(45deg); border-radius: 0 0 0 100px; outline: 0 solid #fff; }
.grm_test .slider-bs .slide_tab div.on:before { z-index: 9; right: -35px; top: -11px; width: 35px; height: 72px; border: 0 none; background: url('https://pic.neungyule.com/netutor/img/nelt/grm_test/arr_on.png') no-repeat 50% 50% / 100% auto; transform: rotate(0); border-radius: 0; outline: 0 none; }

.grm_test .swiper { position: relative; overflow: hidden; width: 640px; padding-top: 60px; margin: 30px auto 0; }
.grm_test .swiper-slide img { width: 100%; }
.grm_test .swiper-pagination { height: 20px; bottom: auto !important; top: 0; }
.grm_test .swiper-pagination-bullet { width: 20px !important; height: 20px !important; border-radius: 20px !important; }
.grm_test .swiper-pagination-bullet-active { width: 40px !important; background: #03205c !important; }
.grm_test .swiper-button-next,
.grm_test .swiper-button-prev { width: 50px !important; height: 100px !important; margin-top: 25px; background: rgba(3, 32, 92, .5); color: #fff !important; font-size: 20px; font-weight: 900; }
.grm_test .swiper-button-next { right: 0 !important; border-radius: 10px 0 0 10px; }
.grm_test .swiper-button-prev { left: 0 !important; border-radius: 0 10px 10px 0; }
.grm_test .swiper-button-prev:after { font-size: 20px !important; }
.grm_test .swiper-button-next:after { font-size: 20px !important; }
/* 원본은 구버전 swiper 의 ::after 폰트아이콘(font-size 20px)으로 꺽쇠를 그렸다. swiper v12 는 그 대신
   svg.swiper-navigation-icon 을 주입하는데, layout.tsx 전역 규칙이 그 svg 를 숨긴다(2025.css 배경이미지
   화살표와 겹침 방지). 이 화면은 배경을 색으로 덮어 배경 화살표가 없으므로 svg 를 다시 보인다(2026-10-03). */
.grm_test .swiper-button-prev .swiper-navigation-icon,
.grm_test .swiper-button-next .swiper-navigation-icon { display: block; width: 11px; height: 20px; }

/* 20240612 추가 섹션(why/video/recommend/video2) */
.grm_test .inner_section { padding: 80px 0; text-align: center; }
.grm_test .event-inner-why { background: #FC6820; }
.grm_test .event-inner-video1 { background: #FCDFB9; }
.grm_test .event-inner-recommend { background: #35241C; }
.grm_test .event-inner-video2 { background: #E2E8F5; }
.grm_test .video_wrap { width: 720px; margin: 30px auto 0; border-radius: 20px; overflow: hidden; }
.grm_test .video_wrap .video_box { position: relative; width: 100%; height: 0; padding-top: 56.25%; }
.grm_test .video_wrap .video_box iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* 플로팅 배너 */
.grm_test .fl_wrap { display: flex; position: fixed; z-index: 3; width: 1280px; left: 50%; transform: translateX(-50%); height: 0; top: 120px; }
.grm_test .bn_float { display: inline-block; position: absolute; top: 30px; right: 0; z-index: 9; transition: all .2s ease; border-radius: 50%; box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .16); }
.grm_test .bn_float.fixed { top: 0; }
.grm_test .bn_float .btn_close { position: absolute; right: 0; top: 0; z-index: 100; display: inline-block; width: 30px; height: 30px; text-indent: -9999px; background: none; border: 0 none; cursor: pointer; }

/* 하단 고정 구매바(Yes24) */
.grm_test + .tb_bar { position: fixed; left: 0; bottom: 0; width: 100%; height: 100px; z-index: 50; background: #fff; border-top: 1px solid #000; }
.grm_test + .tb_bar.lock { position: relative; }
.grm_test + .tb_bar .inner { position: relative; width: 930px; height: 100px; margin: 0 auto; background: url(https://pic.neungyule.com/netutor/img/nelt/grm_test/pc/txt_nelt_mocktest.png) no-repeat 0 50% / 650px auto; }
.grm_test + .tb_bar .btn_buy { position: absolute; right: 12px; top: 20px; display: block; width: 203px; height: 60px; background: url(https://pic.neungyule.com/netutor/img/nelt/grm_test/pc/btn_yes24.png) no-repeat 50% 0 / 100% auto; text-indent: -9999em; }
.grm_test + .tb_bar .btn_buy:focus { background-image: url(https://pic.neungyule.com/netutor/img/nelt/grm_test/pc/btn_yes24_press.png); top: 25px; }
.tb_bar .btn_buy:after { display: none; }