/* =========================
    °øÅë
========================= */
:root {
    --key-color: #803EF4;
    --key-color02: #130498;
    --main-txt: #222;
}
.sub-wrap {padding: 49px 0 87px 0;}
.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-menu */
.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:101px;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(120px + 100px) !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;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
================================================== */
/* *[class^="cont0"] .area:last-child {padding-bottom: calc(100vw / 7.2);} */
.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;}


/* ==================================================
    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;
    }
}