/* ==========================
COMMON
========================== */
:root {
    --key-color: #2E68FD;
    --font-color: #333;
}

/* clamp(MINpx, calc(MINpx + (MAX - MIN) * ((100vw - 360px) / 840)), MAXpx);
 */



/* ==========================
TITLE
========================== */
.title-section {padding: 80px 0; background-image: url('https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/suneung_hit/bg-pc.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.title-section .title-wrap {display: flex; flex-direction: column; align-items: center;}
.title-section .title-wrap > span {display: flex;padding: 8px 20px;justify-content: center;align-items: center;border-radius: 999px;border: 1px solid #803EF4;color: #803EF4;text-align: center;font-size: 24px;font-style: normal;font-weight: 600;line-height: 140%;letter-spacing: -0.24px;}
.title-section .title-wrap h3 {display: flex; flex-direction: column; margin-top: 24px;}
.title-section .title-wrap h3 > span:nth-of-type(1) {color: #222; text-align: center; font-size: 46px; font-style: normal; font-weight: 600; line-height: 130%; letter-spacing: -0.46px;}
.title-section .title-wrap h3 > span:nth-of-type(2) {text-align: center; font-size: 84px; font-style: normal; font-weight: 800; line-height: 110%; letter-spacing: -1.26px;background: linear-gradient(180deg, #803EF4 0%, #4F2B8E 82.61%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.title-section .title-wrap > p { color: #101010; text-align: center; font-size: 20px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.2px; margin-top: 24px;}
.title-section .title-wrap > p span {color: #101010; font-size: 20px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.2px;}

/* ==========================
TAB
========================== */

/* ¸ÞÀÎ ÅÇ */
.content-section {position: relative;}
.content-section .tab-content-wrap .tab-content { display: none; }
.content-section .tab-content-wrap .tab-content.is-active { display: flex; }
.content-section .tab-wrap { position: sticky; top: 0; z-index: 99; display: flex; justify-content: center; height: 60px; border-top: 1px solid #4F2B8E; background-color: #4F2B8E;}
.content-section.is-tab-fixed .tab-wrap.scroll-up {top: 60px;}
.content-section .tab-wrap .tab { width: 240px;}
.content-section .tab-wrap .tab.is-active { background-color: #FFF;}
.content-section .tab-wrap .tab.is-active a { color: #4F2B8E;}
.content-section .tab-wrap .tab + .tab {border-left: 1px solid #DBDBDB;}
.content-section .tab-wrap .tab a {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; color: #B1B1B1; text-align: center; font-size: 18px; font-style: normal; font-weight: 800; line-height: 130%; letter-spacing: -0.45px;}

/* ¼­ºê ÅÇ */
.tab-content-wrap .sub-tab-content { display: none; }
.tab-content-wrap .sub-tab-content.is-active { display: flex; }
.tab-content-wrap .sub-tab-wrap { display: flex; justify-content: center; z-index: 99; gap: 12px; margin: 12px auto 0; width: 100%; max-width: 1200px; cursor: grab; user-select: none;}
.tab-content-wrap .sub-tab-wrap .sub-tab.is-active {border: 1px solid #4F2B8E;}
.tab-content-wrap .sub-tab-wrap .sub-tab.is-active a {color: #4F2B8E; font-weight: 600;}
.tab-content-wrap .sub-tab-wrap .sub-tab {display: flex; justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #E6E6E6; background: #FFF;}
.tab-content-wrap .sub-tab-wrap .sub-tab a {width: 100%; height: 100%; padding: 12px 24px; color: #777; font-size: 16px; font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: -0.4px; white-space: nowrap; -webkit-user-drag: none; user-select: none;}
.tab-content-wrap .sub-tab-wrap.is-dragging {cursor: grabbing;}
.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-tab-wrap {position: fixed; top: var(--tab-fixed-height, 60px); left: 0; right: 0; margin: 0 auto; padding: 12px 0; background: #FFF;}
.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-content-wrap {padding-top: 60px;}
.content-section.is-tab-fixed.has-fixed-sub-tab .scroll-up+.tab-content-wrap .tab-content.is-active .sub-tab-wrap {top: 120px;}

/* ==========================
CONTENT
========================== */
.tab-content {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.tab-content > h3{color: #333; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.64px; margin-top: 60px;}
.tab-content .question-wrap {position: relative; display: flex; max-width: 1200px; padding: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 24px;border-radius: 10px; border: 1px solid #E5E5E5; margin-top: 30px;}
.tab-content .question-wrap > h3{color: #4F2B8E; text-align: center; font-size: 24px; font-style: normal; font-weight: 600; line-height: 140%; letter-spacing: -0.24px;}
.tab-content .question-wrap .q-wrap {display: flex; flex-direction: column;}
.tab-content .question-wrap .q-wrap .q-img-wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
.tab-content .question-wrap .q-wrap .q-img-wrap + .q-img-wrap { margin-top: 30px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .img.border {border: 1px solid #DDD;}
.tab-content .question-wrap .q-wrap .q-img-wrap .img img{width: 100%;}
.tab-content .question-wrap .q-wrap .q-img-wrap .q-img {max-width: 545px; width: calc(50% - 14px);}
.tab-content .question-wrap .q-wrap .q-img-wrap .q-title {display: flex; padding: 18px 28px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 12px 12px 0 0; background: #EDEDED; color: #333; text-align: center;}
.tab-content .question-wrap .q-wrap .q-img-wrap .q-title h3 {font-size: 18px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.18px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .q-title h3 span {color: #ff0; font-weight: 700;}
.tab-content .question-wrap .q-wrap .q-img-wrap .q-title span {font-weight: 400;}
.tab-content .question-wrap .q-wrap .q-img-wrap .right .q-title {border-radius: 12px 12px 0 0; background: #21005C; color: #FFF;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom {display: grid; width: 100%; grid-template-columns: 1fr auto; align-items: center; gap: 50px; min-height: 93px; flex-direction: column; justify-content: space-between; padding: 24px 40px; border-radius: 0 0 12px 12px; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; border-left: 1px solid #DDD; background: #F0EBFF;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left-wrap { display: flex; flex-direction: column; gap: 10px; }
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left {display: flex; align-items: center; gap: 9px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left img {width: 24px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left span {color: #333; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.16px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right {display: flex; padding: 10px 30px; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; background: #803EF4;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right img {width: 16px;}
.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right span {color:  #FFF; font-size: 18px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.18px;}
.tab-content-wrap .sub-content-wrap > h3 {color: #333; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.64px; margin-top: 60px;}
.bottom-section {max-width: 1200px; margin: 30px auto 60px;}
.bottom-section p {color: #B1B1B1; text-align: right; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.14px;}
/* ==========================
BANNER
========================== */
.banner-section {position: absolute; right: 0; top: 190px;}
.banner-section .banner-wrap {position: absolute; display: flex; flex-direction: column; right: 0; gap: 8px;}
.banner-section .banner-wrap li {display: flex; width: 120px; height: 70px; padding-left: 18px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; border-radius: 10px 0 0 10px; background: #133486;}
.banner-section .banner-wrap li + li {background: #574536;}
.banner-section .banner-wrap li a { display: flex; align-items: center; gap: 11px;}
.banner-section .banner-wrap li span {color: #FFF; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -0.16px;}
.content-section.is-tab-fixed .banner-section .banner-wrap {position: fixed; top: 190px; right: 0; z-index: 30;}
/* ====================================================
RESPONSIVE (Media Queries)
==================================================== */

/* ÅÂºí¸´ ÀÌÇÏ (1199px ÀÌÇÏ) */
@media (max-width: 1199px) {
	.title-section {background-image: url('https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/suneung_hit/bg-ta.png');}
	.tab-content-wrap {padding: 0 24px;}
	.tab-content-wrap .sub-content-wrap > h3 {margin-top: 52px;}

	.tab-content .sub-tab-wrap {justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; padding: 0 24px;}
	.tab-content.sc .sub-tab-wrap { justify-content:center;}
    .tab-content .sub-tab-wrap::-webkit-scrollbar { display: none; }
	.tab-content > h3 {margin-top: 52px;}
	.tab-content .question-wrap {padding: 24px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-title {padding: 10.8px 16.8px; }
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-title h3 {font-size: 14px; line-height: 150%; letter-spacing: -0.14px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-title span {text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.14px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-img {width: calc(50% - 9px);}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom {padding: 16px 24px; min-height: auto; gap: 8px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left-wrap {gap: 4.8px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left img {width: 14.4px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left span {font-size: 13px; line-height: 150%; letter-spacing: -0.13px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right {padding: 6px 18px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right img {width: 9.6px; height: 10.8px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right span {font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.13px;}
	.bottom-section {margin-bottom: 30px; padding-right: 24px;}
	.banner-section {position: static; top: 0; left: 0;}
	.banner-section .banner-wrap {display: flex; flex-direction: row; position: static; top: 0; left: 0; padding: 0 24px; margin-bottom: 40px;}
	.content-section.is-tab-fixed .banner-section .banner-wrap {position: static; top: 0; right: auto; z-index: auto;}
	.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-tab-wrap {position: fixed; top: var(--tab-fixed-height, 60px); left: 0; right: 0; margin: 0 auto; padding: 12px 24px; background: #FFF;}
	.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-content-wrap {padding-top: 70px;}
	.banner-section .banner-wrap li {padding: 0;}
	.banner-section .banner-wrap li span {font-size: 15px;}
	.banner-section .banner-wrap .banner {display: flex; height: 42px; flex: 1 0 0; border-radius: 6px; background: #222;}
	.banner-section .banner-wrap .banner a {width: 100%; height: 100%; justify-content: center; align-items: center; color: #FFF; text-align: center; font-size: 15px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.3px;}
}



/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width: 767px) {
	.title-section {padding: 50px 0; background-image: url('https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/suneung_hit/bg-mo.png');}
	.title-section .title-wrap > span {font-size:clamp(20px, calc(20px + 4 * ((100vw - 360px) / 840)), 24px);}
	 .title-section .title-wrap h3 > span:nth-of-type(1) {font-size:clamp(40px, calc(40px + 6 * ((100vw - 360px) / 840)), 46px);}
    .title-section .title-wrap h3 > span:nth-of-type(2) {font-size:clamp(72px, calc(72px + 12 * ((100vw - 360px) / 840)), 84px);}
    .title-section .title-wrap > p {font-size:clamp(16px, calc(16px + 4 * ((100vw - 360px) / 840)), 20px);}
    .title-section .title-wrap > p span {font-size:clamp(16px, calc(16px + 4 * ((100vw - 360px) / 840)), 20px);}
    .content-section .tab-wrap {z-index: 100; height:55px;}
	.content-section.is-tab-fixed .tab-wrap.scroll-up {top: 55px;}
    .content-section .tab-wrap .tab a {font-size:clamp(16px, calc(16px + 2 * ((100vw - 360px) / 840)), 18px);}
    .tab-content > h3 {font-size:clamp(24px, calc(24px + 8 * ((100vw - 360px) / 840)), 32px); line-height:130%; letter-spacing:-0.48px;}
    .tab-content-wrap .sub-content-wrap > h3 {font-size:clamp(24px, calc(24px + 8 * ((100vw - 360px) / 840)), 32px); line-height:130%; letter-spacing:-0.48px; margin-top:38px;}
    .tab-content-wrap .sub-tab-wrap .sub-tab a {font-size:clamp(14px, calc(14px + 2 * ((100vw - 360px) / 840)), 16px); letter-spacing:-0.35px; line-height:130%; padding:8px 16px;}
    .tab-content .question-wrap > h3 {font-size:clamp(18px, calc(18px + 6 * ((100vw - 360px) / 840)), 24px);}
    .tab-content .question-wrap .q-wrap .q-img-wrap .q-title h3 {font-size:clamp(12px, calc(12px + 2 * ((100vw - 360px) / 840)), 14px); line-height:130%; letter-spacing:-0.12px;}
    .tab-content .question-wrap .q-wrap .q-img-wrap .q-title span {font-size:clamp(12px, calc(12px + 2 * ((100vw - 360px) / 840)), 14px); line-height:130%; letter-spacing:-0.12px;}
    .tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left span {font-size:clamp(12px, calc(12px + 1 * ((100vw - 360px) / 840)), 13px); letter-spacing:-0.12px; line-height:150%;}
    .tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right span {font-size:clamp(12px, calc(12px + 1 * ((100vw - 360px) / 840)), 13px); line-height:100%; letter-spacing:-0.3px;}
    .bottom-section p {font-size:clamp(12px, calc(12px + 2 * ((100vw - 360px) / 840)), 14px); letter-spacing:-0.12px; line-height:150%;}
	
	.tab-content-wrap {padding: 0;}
	.tab-content .sub-tab-wrap {padding: 0 16px; gap: 4px;}
	.content-section.is-tab-fixed.has-fixed-sub-tab .scroll-up+.tab-content-wrap .tab-content.is-active .sub-tab-wrap {top: 110px;} 
	.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-tab-wrap {top: var(--tab-fixed-height, 55px); padding: 12px 16px 8px;} 
	.content-section.is-tab-fixed.has-fixed-sub-tab .tab-content.is-active .sub-content-wrap {padding-top: 54px;}
	.tab-content-wrap .question-wrap {margin: 20px 16px 0; padding: 24px 12px;}
	.tab-content .question-wrap {gap: 14.4px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap {display: flex;align-items: stretch;gap: 8px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .img {display: flex;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .img.border {border:1px solid #EDEDED}
	.tab-content .question-wrap .q-wrap .q-img-wrap .img img {width: 100%;height: 100%;object-fit: cover;display: block;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-title { display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 10px 6px; box-sizing: border-box;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .q-img {width: calc(50% - 4px);display: flex;flex-direction: column;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom {position: relative; margin-top: 20px; border-radius: 6px; border: none; padding: 25px 14px 17px; gap: 0;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left-wrap {gap: 6px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left {align-items: unset; gap: 5px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-left img {width: 12.745px; height: 11.083px; margin-top: 3px;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right {position: absolute; top: -7.1px; left: 50%; transform: translateX(-50%); padding: 6px 14px; gap: 6px; white-space: nowrap;}
	.tab-content .question-wrap .q-wrap .q-img-wrap .bottom .btm-right img {width: 8.889px; height: 10px;}
	
	.bottom-section {margin: 16px 0 20px; padding: 0 16px;}
	.banner-section .banner-wrap li span {font-size: 15px; letter-spacing: -0.3px;}
	.banner-section .banner-wrap {margin-bottom: 30px;}
}

@media (max-width: 390px) {
	.tab-content.sc .sub-tab-wrap { justify-content: flex-start;}
}