/* NELT 문법 실전 모의고사 랜딩 CSS — 레거시 pages/nelt/grm_mocktest.asp 임베드 <style>(11~203) 1:1. */
.grm_test img { max-width: 100%; }
.grm_test { padding-top: 52px; }
.grm_test .inner { max-width: 720px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; }
.grm_test .section1 { text-align: center; }
.grm_test #img1 { width: 100%; margin-bottom: 15px; }
.grm_test #img2 { width: 100%; }
.grm_test #img3 { width: 100%; }
.grm_test #img5 { width: 90%; margin-bottom: 20px; }
.grm_test .event-inner1 { position: relative; padding-bottom: 35px; }
.grm_test .event-inner1:before { position: absolute; z-index: -1; content: ''; width: 100%; height: 220px; background: #EEE; display: block; bottom: 0; }
.grm_test .section1 hr { width: 100px; margin-top: 20px; margin-bottom: 20px; }
.grm_test .section1 h3 { font-size: 90px; color: #03205c; margin-bottom: 0; margin-top: 30px; }
.grm_test .section1 h5 { font-size: 30px; color: #000; margin-top: 0; }
.grm_test .event-inner2 { padding: 30px 0; background: #03205c; text-align: center; }
.grm_test .event-inner3 { background: #E2E8F5; padding-top: 30px; padding-bottom: 30px; }
.grm_test .event-inner2 h2 { color: #fff; font-size: 56px; padding-top: 100px; margin: 0; }
.grm_test .event-inner2 h3 { font-size: 67px; color: #52B9FE; margin: 0; }
.grm_test .ims { width: 700px; text-align: left; margin: 40px auto 0; }
.grm_test .ims li { font-size: 24px; color: #fff; }
.grm_test .section2 { background: #fff; padding-top: 20px; border-radius: 20px; overflow: hidden; }
.grm_test .section2 > img { width: 187px; }
.grm_test .section2 h4 { font-size: 40px; color: #e96f24; padding-top: 40px; position: relative; margin: 0; }
.grm_test .section2 h4:before { content: ''; display: block; width: 120px; height: 1px; position: absolute; left: 300px; top: 70%; background: #e96f24; }
.grm_test .section2 h4:after { content: ''; display: block; width: 120px; height: 1px; position: absolute; right: 300px; top: 70%; background: #e96f24; }
.grm_test .section3 > h3 { font-size: 40px; color: #03205c; padding-top: 40px; text-align: center; position: relative; margin: 0; }
.grm_test .section2 p { margin: 0; }
.grm_test .section2 .mes1 { position: relative; overflow: hidden; list-style: none; margin-top: 20px; padding: 0 20px; }
.grm_test .section2 .mes1 li { float: left; width: 33.3%; }
.grm_test .section2 .mes1 li img { width: 100%; opacity: 0.3; }
.grm_test .section2 .mes1 li.on img { opacity: 1; }
.grm_test .section2 .mes1 li .btn_preview { display: inline-block; width: 80%; padding: 5px 0; line-height: 14px; margin: 3px 0 20px; text-align: center; font-size: 12px; color: #fff; background: #03205C; border-radius: 5px; box-shadow: 0 6px 6px rgba(0, 0, 0, .16); }
.grm_test .section2 .mes1 li .btn_preview strong { font-weight: 700; }
/* 교재설명 탭+슬라이더 — 원본 grm_mocktest.asp L72~82. **블록 통째로 빠져 있었다**:
   `.slide_tab div` 가 스타일 없는 block 으로 떨어져 탭 4개가 세로로 쌓이고(각 12px), 슬라이드와 맞붙었다. */
.grm_test .slider-bs { margin-top: 0; position: relative; padding: 20px 0; }
.grm_test .slider-bs:before { display: none; position: absolute; content: ''; width: 30px; height: 400px; background: #fff; left: -10px; bottom: 0; z-index: 9; }
.grm_test .slider-bs:after { display: none; position: absolute; content: ''; width: 30px; height: 400px; background: #fff; right: -10px; bottom: 0; z-index: 9; }
.grm_test .slider-bs .slide_tab { display: flex; margin-left: -10px; margin: 20px 0 30px; justify-content: center; }
.grm_test .slider-bs .slide_tab div { border: 1px solid #aaa; text-decoration: none; color: #666; font-size: 11px; height: 30px; line-height: 30px; display: inline-block; padding-left: 18px; padding-right: 5px; position: relative; font-weight: 700; word-break: keep-all; }
.grm_test .slider-bs .slide_tab #act1 { padding-left: 10px; }
.grm_test .slider-bs .slide_tab #act1.on { padding-left: 10px; }
.grm_test .slider-bs .slide_tab div.on { background: #03205c; color: #fff; padding-right: 10px; }
.grm_test .slider-bs .slide_tab div:before { position: absolute; content: ''; display: block; width: 20px; height: 22px; background: #fff; right: -11px; top: 4px; 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: -16px; top: -6px; width: 16px; height: 40px; 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 { width: 100%; overflow: hidden; padding: 0 10px; box-sizing: border-box; }
.grm_test .swiper-slide img { width: 100%; }
/* 🔴 페이지네이션·좌우버튼의 **기준 박스**를 라이브와 맞춘다.
   라이브는 Swiper 6 이고 컨테이너 클래스가 `swiper-container-*` 라 `.slide_box`(=`.swiper`)에 붙는 스타일이
   하나도 없다 → computed `position:static`(2026-09-21 라이브 실측) → 절대배치의 기준이 `.slider-bs`(position:relative).
   그래서 `top:20px` 인 bullet 이 **탭 위 슬라이더 맨 윗줄**에, `top:60%` 인 화살표가 슬라이더 세로 60% 에 온다.
   Swiper 11 은 `.swiper{position:relative}` 라 기준이 슬라이드 박스로 바뀌어 **bullet 이 교재 이미지 글자 위에 겹쳤다**.
   → 라이브의 기준 박스를 복원한다(전역이 아니라 이 화면 한정). */
.grm_test .slide_box { position: static; }
.grm_test .swiper-pagination { top: 20px !important; height: 10px; }
.grm_test .swiper-pagination-bullet { width: 10px !important; height: 10px !important; border-radius: 20px !important; }
.grm_test .swiper-pagination-bullet-active { width: 20px !important; background: #03205c !important; }
.grm_test .swiper-button-next { width: 30px !important; height: 60px !important; background: rgba(3, 32, 92, .5); right: 11px !important; top: 60%; color: #fff !important; font-size: 14px; font-weight: 900; border-radius: 10px 0 0 10px; margin-top: 0 !important; }
.grm_test .swiper-button-prev { width: 30px !important; height: 60px !important; background: rgba(3, 32, 92, .5); left: 11px !important; top: 60%; color: #fff !important; font-size: 20px; font-weight: 900; border-radius: 0 10px 10px 0; margin-top: 0 !important; }
.grm_test .swiper-button-prev:after { font-size: 14px !important; }
.grm_test .swiper-button-next:after { font-size: 14px !important; }
/* 🔴 좌우 화살표 — 이 화면은 라이브(Swiper 6)가 **swiper 기본 아이콘**을 그린다
   (`::after{content:'prev'/'next';font-family:swiper-icons;font-size:14px}` → 실측 7.2×14px 흰색 ‹ ›).
   Swiper 12 는 `::after` 를 없애고 `<svg class="swiper-navigation-icon">` 로 바꿨는데,
   layout.tsx 가 그 svg 를 **전역으로 숨긴다**(다른 화면은 사이트 CSS 가 background-image 로 직접 그려서 겹침) →
   이 화면만 화살표가 통째로 사라져 회색 알약만 남았다. 여기서만 되살리고 라이브 글리프 크기로 맞춘다. */
.grm_test .swiper-button-prev .swiper-navigation-icon,
.grm_test .swiper-button-next .swiper-navigation-icon { display: block !important; width: 7.2px; height: 14px; }
.grm_test .inner2 { max-width: 720px; margin: 0 auto; box-sizing: border-box; }
.grm_test .fix_bar { overflow: hidden; position: fixed; right: 0; left: 0; bottom: 0; width: 100%; z-index: 19; max-height: 116px; background: #FF6F00; }
.grm_test .fix_bar img { max-width: 720px; width: 100%; margin: 0 auto; }
.grm_test .fix_bar a { display: block; border-top: 2px solid #000; text-align: center; }
.inner_section { padding: 30px 0; text-align: center; }
/* 원본 grm_mocktest.asp L181~184 — 섹션별 배경색. 이식 때 빠져 네 구역이 전부 투명이었다(검수 혼합-48). */
.event-inner-why { background: #FC6820; }
.event-inner-video1 { background: #FCDFB9; }
.event-inner-recommend { background: #35241C; }
.event-inner-video2 { background: #E2E8F5; }
.video_wrap { width: 100%; margin: 20px auto 0; border-radius: 10px; overflow: hidden; }
.video_wrap .video_box { position: relative; width: 100%; height: 0; padding-top: 56.25%; }
.video_wrap .video_box iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* 레벨 구성 표 — 원본 L52~65. `ul` 로 만든 표라 `display:flex` 가 없으면 세로로 무너진다(검수 혼합-47). */
.grm_test #nelt-table { padding: 0 10px; }
.grm_test #nelt-table > ul { display: flex; width: 100%; font-size: 11px; border-bottom: 1px solid #eee; padding: 0; }
.grm_test #nelt-table > ul > li { flex: 1; }
.grm_test #nelt-table ul li { list-style: none; }
.grm_test #nelt-table #label { width: 14%; }
.grm_test #nelt-table > ul > li > ul { padding: 0; }
.grm_test #nelt-table > ul > li > ul > li { line-height: auto; padding: 10px 0; box-sizing: border-box; font-size: 10px; }
.grm_test #nelt-table .lb { background: #DFE0E1; border-right: 1px solid #fff; }
.grm_test #nelt-table > ul > li > ul > li.sb { border-right: 1px solid #eee; border-top: 1px solid #eee; }
.grm_test #nelt-table > ul > li:last-child > ul > li.sb { border-right: 0 none; }
.grm_test #nelt-table > ul > li.on { border: 2px solid #03205c; box-sizing: border-box; }
.grm_test #nelt-table > ul > li.on > ul > li.sb { font-weight: 900; }
.grm_test #nelt-table > ul > li.on > ul > li.lb { background: #03205c; border: 1px solid #03205c; color: #fff; font-weight: 300; padding: 8px 0; }

/* 특강 활용법 플로팅 — 원본 L189~192. 빠져 있어서 페이지 맨 아래에 static 으로 붙어 있었다(검수 혼합-44).
   ⚠ `.btn_float_close` 는 `.bn_float_wrap` **바깥**의 형제라 두 규칙이 따로 필요하다(원본도 그렇다). */
.bn_float_wrap { position: fixed; top: 110px; right: 10px; z-index: 90; display: block; width: 105px; height: 105px; transition: all .2s ease; border-radius: 50%; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .16); }
.bn_float_wrap a { display: block; }
.bn_float_wrap .btn_float_close { position: absolute; right: 0; top: 0; z-index: 5; display: inline-block; width: 15px; height: 15px; text-indent: -9999px; background: none; border: 0 none; }
.btn_float_close { position: fixed; top: 110px; right: 10px; z-index: 100; display: inline-block; width: 15px; height: 15px; text-indent: -9999px; background: none; border: 0 none; }

@media screen and (min-width: 720px) {
  .grm_test .event-inner2, .inner_section { padding: 60px 0; }
  .video_wrap { margin: 40px auto 0; }
  .grm_test .section2 .mes1 li .btn_preview { padding: 10px 0; line-height: 28px; margin: 3px 0 20px; font-size: 24px; border-radius: 10px; }
  .grm_test #nelt-table > ul > li > ul > li { font-size: 18px; }
}