/* =========================
    ����
========================= */
:root {
    --key-color: #803EF4;
    --key-color02: #130498;
    --main-txt: #222;
}

.suneung-hit-wrap {overflow-x:hidden;}
.suneung-hit-wrap img {display:block;width:100%;height:auto;margin:0 auto;}
.sticky {z-index: 1;position:sticky;top:0;left:64px !important;border-left:1px solid #d9d9d9;background:#FFF}

.fix-wrap {position:relative;height: 120px;}
.fix-menu {position:absolute;top:0;left:0;width:100%;display:flex;line-height:0;box-sizing:border-box;height: 120px;background: #fff;flex-wrap: wrap;}
.fix-menu li {height: 60px;display:flex;justify-content:center;align-items:center;width:calc(100% / 3);box-sizing: border-box;text-align:center;color:#C5BFE4;font-size:1.6rem;font-weight:bold;line-height:1.3;letter-spacing:-0.5px;background:#382E6B;border-right:1px solid #999999}
.fix-menu li:last-child {border-right:none;}
.fix-menu li.on {color:#111;background:#fff}
.fix-menu.fix {position:fixed;top:61px;z-index:7;height: 120px;}
.fix-menu li:nth-child(3) {border-right: 0;}
.fix-menu li:nth-child(n+4):nth-child(-n+5) {flex: 1;border-top: 1px solid #999999;}


/* --------------------------------------------- */
/* 2뎁스 탐구 탭 (사회탐구 / 과학탐구)           */
/* --------------------------------------------- */

/* 2뎁스가 fix된 상태 */
.fix-depth2 {    position: fixed !important;    top: calc(60px + 120px) !important;    left: 0;    z-index: 8;}

/* 2뎁스 전체 래퍼 */
/* .depth2-wrap {width: 100%;background: #fff;padding: 25px 15px 10px;border-bottom: 1px solid #E2E2E2;display: none;box-sizing: border-box;position: absolute;top: 120px;left: 0;} */
.depth2-wrap {width: 100%;background: #fff;padding: 25px 15px 10px;border-bottom: 1px solid #E2E2E2;display: none;box-sizing: border-box;position: absolute;top: 0px;left: 0;z-index: 1;}

/* 각 2뎁스 그룹 (사회탐구 / 과학탐구 개별) */
.depth2 {    display: none; /* 기본 숨김 */    width: 100%;    white-space: nowrap;    overflow-x: auto;    padding-bottom: 10px;}

/* 스크롤바 */
.depth2::-webkit-scrollbar {height: 6px;}
/* .depth2::-webkit-scrollbar-thumb {background: #D8D8D8;    border-radius: 10px;} */
.depth2::-webkit-scrollbar-thumb {background: #d8d8d800;    border-radius: 10px;}

/* 2뎁스 탭 단일 아이템 */
.depth2 li {display: inline-flex;align-items: center;justify-content: center;padding: 6px 10px;margin-right: 3px;font-weight: 500;font-size: 1.3rem;color: #222;background: #F5F5F5;    border-radius: 20px;    cursor: pointer;    flex-shrink: 0;}

/* 마지막 여백 제거 */
.depth2 li:last-child {margin-right: 0;}

/* 활성화된 2뎁스 탭 */
.depth2 li.on {background: #803EF4;color: #fff;font-weight: 700;}


/* ==================================================
    visual
================================================== */
.visual {background-color:#01030b;overflow: hidden;}
.visual .inner {background-color:#01030b;position:relative;text-align: center;}

.visual .bg {position:absolute;top:0;left:50%;transform:translateX(-50%);width: 100%;height: inherit;}
.visual .bg-star {position:absolute;bottom:0;right:calc(0vw / 7.2);animation:expandStar 20s ease-in-out infinite alternate;}

.visual h2 {position:relative;width:100%;height:calc(896vw / 7.2);margin:0 auto;}
.visual h2 span {position:absolute;animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.visual h2 .v-tit01 {top:calc(194vw / 7.2);left:calc(82vw / 7.2);animation: fadeEffect .5s 1s both;width: calc(395vw / 7.2);}
.visual h2 .v-tit02 {top:calc(296vw / 7.2);left:calc(82vw / 7.2);animation: fadeEffect .5s 1s both;width: calc(350vw / 7.2);}
.visual h2 .v-tit03 {top:calc(383vw / 7.2);left:calc(60vw / 7.2);animation-delay: 1.4s;width: calc(293vw / 7.2);}
.visual h2 .v-tit04 {top:calc(383vw / 7.2);right:calc(60vw / 7.2);animation-delay: 1.6s;width: calc(292vw / 7.2);}
.visual h2 .v-tit05 {top:calc(637vw / 7.2);left: calc(182vw / 7.2);text-align: right;animation: fadeEffect .5s 2s both;width: calc(478vw / 7.2);}

.visual .v-light {position:absolute;top:calc(290vw / 7.2);left:calc(0vw / 7.2);mix-blend-mode: screen;animation: fadeEffect .5s 2.5s both;width: calc(547vw / 7.2);}
.visual .v-light02 {position:absolute;top:0;right:0px;mix-blend-mode: screen;animation: fadeEffect .5s 2.5s both;width: 100%;}



/* ==================================================
    contents
================================================== */
.suneung-hit-wrap .tbl-box {padding: 0 4% 20px;}
.cont01, .cont03 {background: #F5F5F5;padding-bottom: 60px;}

.subject-wrap {padding: 0 4%;margin-bottom: 30px;}
.subject-wrap:last-child {margin-bottom: 0;}
.subject-wrap .subject-box {border-radius: 15px;background: #FFF;box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.05);padding-bottom: 20px;}
.subject-wrap .subject-box > p {color: var(--key-color);text-align: center;font-size: 2rem;letter-spacing: -0.8px;padding: 28px 0 20px;}
.subject-wrap .subject-box > p strong {font-weight: 800;}

.subject-wrap .subject-box .set-wrap {margin-top: 40px;}
.subject-wrap .subject-box .set-wrap:first-of-type {margin-top: 0px;}
.subject-wrap .subject-box .img-wrap {display: flex;padding: 0 3%;gap: 7px;}
.subject-wrap .subject-box .img-wrap .img-box {display: flex;flex-direction: column;width:50%;}
.subject-wrap .subject-box .img-wrap .img-box.box01 > div {background: #DDDDDD;}
.subject-wrap .subject-box .img-wrap .img-box.box01 > div p {color: #222;}
.subject-wrap .subject-box .img-wrap .img-box.box02 > div {background: #803EF4;}
.subject-wrap .subject-box .img-wrap .img-box.box02 > div p {color: #fff;}
.subject-wrap .subject-box .img-wrap .img-box.box02 > div p span {color: #FFFF00;}
.subject-wrap .subject-box .img-wrap .img-box > div {border-radius: 6px 6px 0 0;}
.subject-wrap .subject-box .img-wrap .img-box > div > p {padding: 9px 0; text-align: center;font-size: 1rem;font-weight: 700;letter-spacing: -0.22px;line-height: 1.2;}



.txt-wrap {background: #F0EBFF;border-radius: 6px;margin: 20px 3% 0px;position: relative;}
.txt-wrap ul {padding: 25px 4% 17px 10%;}
.txt-wrap ul li {color: #222;font-size: 1.2rem;font-weight: 400;letter-spacing: -0.72px;position: relative;line-height: 1.4;}
.txt-wrap ul li::after {position: absolute;top: 3px;left: -15px;  display: block;content: '';background: url("https://russeldata.megastudy.net/campus/images/russel/m_russel/intro/2026/suneung_hit/ico_check.png") no-repeat 0 0;background-size: contain;width: 13px;height: 12px;}
.txt-wrap ul li:not(:last-of-type) {margin-bottom: 6px;}
.txt-wrap .tit-box {position: absolute;top: -10px;left: 50%;transform: translateX(-50%);background: var(--key-color);border-radius: 50px;width: fit-content;padding: 0 11px; height: 22px; display: flex;justify-content: center;align-items: center;}
.txt-wrap .tit-box p {line-height: 1;color: #FFF;font-size: 1.2rem;font-weight: 700;letter-spacing: -0.6px;position: relative;margin-left: 15px;white-space: nowrap;}
.txt-wrap .tit-box p::after {position: absolute;top: 50%;transform: translateY(-50%); left: -15px;  display: block;content: '';background: url("https://russeldata.megastudy.net/campus/images/russel/m_russel/intro/2026/suneung_hit/ico_sunder.png") no-repeat 0 0;background-size: contain;width: 9px;height: 10px;}

p.r-txt {color: rgba(0, 0, 0, 0.45);text-align: right;font-size: 1.1rem;font-weight: 400;letter-spacing: -1.1px;margin: -15px 4% 20px;}


.btn-wrap {border-radius: 5px;display: flex;gap: 10px; justify-content: center;align-items: center;margin: 0 4%;height: 50px;}
.btn-wrap a::after {display: block;content: '';border-top: 2px solid rgba(255, 255, 255, 0.50);
    border-right: 2px solid rgba(255, 255, 255, 0.50);width: 8px;height: 8px;transform: rotate(45deg) translateY(-50%);position: absolute;top: 48%;right: 27px;}
.btn-wrap a {color: #fff;text-align: center;font-size: 1.6rem;font-weight: 700;display: block;width: 100%;height: 100%;line-height: 50px;letter-spacing: -0.5px;background: #222222;border-radius: 5px;position: relative;}



/* ==================================================
    table
================================================== */
.tbl-box {background: #fff;text-align: center;padding: 4%;}


.tbl-type01 {width:100%;border-top:2px solid #262626;border-collapse:separate}
.tbl-type01 *, .tbl-type01 li {font-size:1.3rem;letter-spacing: -1px;}
.tbl-type01 thead th {text-align:center;padding:15px 0;background:#f6f6f6;border-right:1px solid #d9d9d9;border-bottom:1px solid #262626;}
.tbl-type01 thead th:last-child {border-right: none;}
.tbl-type01 tbody th, .tbl-type01 tbody td {border-bottom:1px solid #d9d9d9;}
.tbl-type01 tbody th {font-weight: normal;padding:12px 0;text-align: center;}
.tbl-type01 tbody td {border-left:1px solid #d9d9d9;padding:10px 1.5% 10px;line-height: 1.5;word-break: keep-all;}
.tbl-type01 tbody .b-l-n {border-left:none;}
.tbl-type01 .b-r {border-right:1px solid #d9d9d9!important;}
.tbl-type01 tbody u {text-decoration: line-through;color:#9b9b9b}
.tbl-type01 .tr-bg td {background:#f7f0ef}
.tbl-type01 .box-width {width:80%;}
.tbl-type01 .txt-center {text-align: center;padding-left:0!important;padding-right:0!important}
.tbl-type01 .bor-left {border-left:1px solid #d9d9d9;}
.tbl-type01 .sel-subj {padding:0 2.5%;width:80%;}
.tbl-type01 .sel-subj02 {width:80%;}
.tbl-type01 .spe-subj {background:#f2f2f2;table-layout:fixed;width:20%;}
.tbl-type01 .spe-subj02 {background:#dae3f3;table-layout:fixed;width:20%;}
.tbl-type01 .bor-top {border-top:1px solid #d9d9d9;}
.tbl-center th, .tbl-center td {text-align: center;padding-left:0!important;padding-right:0!important}
table .txt-left {text-align: left!important;;padding-left:2.5%!important;}
table .bg-purple {background-color: #fbf8ff!important;}
table .bg-gray {background-color: #b2b2b2!important;}
table .bg-gray2 {background-color: #f2f3f6!important;}
table .bg-y {background-color:#fff4c1!important;}
table .bg-y2 {background-color:#fff8e0!important;}
table .bg-mint {background-color:#e3f5f2!important;}
table .bg-sky {background:#f1f4f9!important;}
table .bg-wh {background:#fff!important;}

.tbl-scroll-x {overflow: scroll;width:100%}
.tbl-scroll-x table {width:140%;table-layout: fixed;border-color: unset;}
.tbl-scroll-x thead tr:first-child th:first-child {position: sticky;left:0;top:0;}
.tbl-scroll-x thead .th-st {position: sticky;left:0;top:0;}
.tbl-scroll-x tbody th {position: sticky;left:0;top:0;z-index: 1;}



/* ==================================================
    animation
================================================== */
@keyframes expandStar {
    0% {
    transform: scale(1);
    opacity: 0.8;
    }
    100% {
    transform: scale(1.5);
    opacity: 1;
    }
}

@keyframes fadeEffect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-in-right {
    0% {
        transform: translateX(calc(150vw / 7.2));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}