/* ==========================
COMMON
========================== */
:root {
    --key-color: #2E68FD;
    --font-color: #333;
}

/* clamp(MINpx, calc(MINpx + (MAX - MIN) * ((100vw - 360px) / 840)), MAXpx);
 */

 *[class^="cont0"] { padding: 60px 0; }
.inner { padding: 0 4%; overflow: hidden;width: 100%;max-width: 1024px;margin: 0 auto;}

h3 { text-align: center; margin-bottom: 30px; }
h3 span { display: block; color: #555; text-align: center; font-size: 28px; font-weight: 400; line-height: 1.3; letter-spacing: -0.28px; }
h3 strong { color: var(--font-color); text-align: center; font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.32px; margin-top: 6px; }
h4 { color: #222; text-align: center; font-weight: 700; line-height: 1.4; letter-spacing: -0.24px; font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px); }

.c-txt { font-size: 13px; color: #777; line-height: 1.5; font-weight: 400; text-align: left; padding-left: 32px; }
.r-txt { font-size: 13px; margin-top: 30px; color: #777; line-height: 1.5; font-weight: 400; text-align: right; }


/* ==========================
VISUAL
========================== */
/* .visual-wrap {background-repeat: no-repeat; background-size: cover; } */
.visual-wrap {padding: 0 4%;position: relative;overflow: hidden;background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/star/v_bg.png") no-repeat 0 0 / contain;background-position: top center;}
.visual-wrap .visual { padding-top: 90px; text-align: center; }
.visual-wrap .visual h3 { margin-bottom: 40px; }
.visual-wrap .visual h3 span { display: inline-block; letter-spacing: 7.2px; color: var(--font-color); font-size: 24px; font-weight: 400; line-height: 130%; }
.visual-wrap .visual h3 span:not(:last-of-type) { margin-right: 8px; }


/* ==========================
v-cont (Swiper)
========================== */
.v-cont { margin: 80px 0 60px; }
.v-cont h3 { margin-bottom: 20px; }

.inner_slider { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; box-sizing: border-box; }
.inner_slider .swiper-wrapper { align-items: center; }
.inner_slider .swiper-slide { position: relative; width: 290px; height: auto; flex-shrink: 0; opacity: 1; border-radius: 20px; overflow: visible; transition: transform .35s ease, opacity .35s ease; transform: scale(0.895); transform-origin: center center; will-change: transform; }
.inner_slider .swiper-slide.swiper-slide-active { transform: scale(1); z-index: 3; box-shadow: 0 22px 40px 0 rgba(163,163,163,.20); }
.inner_slider .swiper-slide img { position: relative; z-index: 2; display: block; width: 100%; height: auto; border-radius: 10px;will-change: transform;  backface-visibility: hidden;  transform: translateZ(0);}
.inner_slider .swiper-slide a { position: absolute; right: 44px; bottom: 44px; width: 48px; height: 48px; z-index: 4; background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/star/ico_play.png") no-repeat 0 0 / contain; }
.inner_slider .swiper-button-prev, .inner_slider .swiper-button-next { width: 36px; height: 36px; margin-top: -18px; color: transparent; z-index: 10; background-size: 12px auto; }
.inner_slider .swiper-button-prev::after, .inner_slider .swiper-button-next::after { display: none; }
.inner_slider .swiper-button-prev { left: calc(50% - 200px); background: url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/2025_star/cont01_prev_arrow.png') no-repeat center center / 12px auto; }
.inner_slider .swiper-button-next { right: calc(50% - 200px); background: url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/2025_star/cont01_next_arrow.png') no-repeat center center / 12px auto; }
.inner_slider .swiper-pagination { position: relative; width: 100%;max-width: 995px; height: 6px; margin: 30px auto 0; background: #DBDBDB; border-radius: 999px; overflow: hidden; display: flex; }
.inner_slider .swiper-pagination .swiper-pagination-bullet { flex: 1 1 0; height: 100%; margin: 0 !important; border-radius: 0; background: transparent; opacity: 1; position: relative; }
.inner_slider .swiper-pagination .swiper-pagination-bullet::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background .25s ease; }
.inner_slider .swiper-pagination .swiper-pagination-bullet-active::before { background: #3D6BFF; border-radius: 999px; }

.dsc_slide { color: #b1b1b1; text-align: center; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: -0.14px; margin-top: 30px; }


/* ==========================
CONT01
========================== */
.cont01 { background: #F5F5F5; }
.cont01 .inner { width: 792px; }
.cont01 .result-grid { display: grid; justify-content: center; gap: 24px; width: 100%; margin: 0 auto; }
.cont01 .result-item { width: 248px; padding: 22px 0; display: flex; flex-direction: column; justify-content: center; border-radius: 20px; border: 1px solid var(--key-color); background: #FFF; }
.cont01 .result-item .tit { color: var(--font-color); text-align: center; font-size: 18px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
.cont01 .result-item .num { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0; line-height: 1; }
.cont01 .result-item .num strong { color: var(--key-color); text-align: center; font-size: 32px; font-weight: 700; line-height: 1; }
.cont01 .result-item .num span { color: #555; text-align: center; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.18px; }
.cont01 .result-item:nth-child(1) { grid-column: 2 / 4; }
.cont01 .result-item:nth-child(2) { grid-column: 4 / 6; }
.cont01 .result-item:nth-child(3) { grid-column: 1 / 3; }
.cont01 .result-item:nth-child(4) { grid-column: 3 / 5; }
.cont01 .result-item:nth-child(5) { grid-column: 5 / 7; }

.data-tip-wrap { display: flex; justify-content: flex-end; width: 792px; margin: 0 auto; }
.data-tip-wrap span.ex { position: relative; display: inline; margin-top: 24px; color: rgba(85, 85, 85, 0.50); text-align: right; vertical-align: middle; cursor: pointer; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.6px; }
.data-tip-wrap span.ex > img { width: 14px; margin-right: 4px; vertical-align: top; }
.data-tip-wrap span.ex:hover .tooltip {display:block;}
.data-tip-wrap span.ex .tooltip img {  width: 16px;vertical-align: top; display: none;}
.data-tip-wrap span.ex .tooltip { display: none; z-index: 10; position: absolute; top: 20px; right: -15px; width: auto; min-width: 415px; padding: 14px 0 14px 14px; background: #fff; text-align: left; line-height: 1.5; font-size: 12px; font-weight: 500; color: #777; border: 1px solid #777; border-radius: 8px; }
.data-tip-wrap span.ex.active .tooltip { display: block; }
.data-tip-wrap .close-btn { position: absolute; top: 10px; right: 10px; }


/* ==========================
CONT02
========================== */
.cont02 { background: #fff; }
.cont02 .inner { max-width: unset; margin: 0 auto; }
.cont02 .interview-list { display: grid; grid-template-columns: repeat(2, 500px); gap: 24px; width: 100%; max-width: 1024px; margin: 0 auto; }
.cont02 .interview-item { position: relative; display: flex; align-items: center; padding: 30px; border-radius: 20px; background: #F0F6FF; box-sizing: border-box; }
.cont02 .interview-item .thumb { position: relative; flex: 0 0 116px; width: 116px; height: 116px; margin-right: 24px; border-radius: 50%; background: #F4F4F4; }
.cont02 .interview-item .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cont02 .info { position: relative; flex: 1 1 auto; min-width: 0; }
.cont02 .tit { display: flex; align-items: center; gap: 6px; margin: 0; color: #333; line-height: 1.3; }
.cont02 .tit strong { color: var(--font-color); text-align: center; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.24px; }
.cont02 .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 41px; height: 24px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--key-color); border-radius: 999px; color: var(--key-color); text-align: center; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.16px; }
.cont02 .name { margin: 6px 0 0; color: #555; font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; }
.cont02 .name strong { color: #555; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; }
.cont02 .desc { margin: 16px 0 0; padding-top: 16px; color: #777; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px; word-break: keep-all; border-top: 1px solid #D9E5F9; }
.cont02 .interview-list .btn-play { position: absolute; right: 0; bottom: 3px; width: 40px; height: 40px; box-sizing: border-box; background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/star/ico_play.png") no-repeat 0 0 / contain; }
.cont02 .blind { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); }

.cont02 .slide-sub-tit { color: #333; text-align: center; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.28px; margin: 60px 0 30px; }

.cont02 .interview-card { position: relative; display: block; height: 100%; padding: 14px 14px 16px; border: 1px solid #D9D9D9; border-radius: 16px; background: #FFF; box-sizing: border-box; transition: background .25s ease, border-color .25s ease; }
.cont02 .interview-card .thumb { width: 100%; margin-bottom: 16px; border-radius: 10px; overflow: hidden;position: relative; }
.cont02 .interview-card .thumb img { display: block; width: 100%; object-fit: cover;will-change: transform;backface-visibility: hidden;  transform: translateZ(0);}
.cont02 .interview-card .info { position: relative; }
.cont02 .interview-card .school { margin: 0; color: #555; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.15px; }
.cont02 .interview-card .name { margin: 6px 0 0; color: #555; font-size: 18px; font-weight: 300; line-height: 1.4; letter-spacing: -0.13px; }
.cont02 .interview-card .campus { color: #777; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.16px; }
.cont02 .interview-card .btn-play { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; }

.cont02 .interview-card:hover, .cont02 .interview-card.is-hover { background: var(--key-color); border-color: var(--key-color); }
.cont02 .interview-card:hover .school, .cont02 .interview-card:hover .name, .cont02 .interview-card:hover .campus, .cont02 .interview-card.is-hover .school, .cont02 .interview-card.is-hover .name, .cont02 .interview-card.is-hover .campus { color: #FFF; }

.cont02 .interview-slide-wrap + .interview-slide-wrap { margin-top: 30px; }
.cont02 .interview-swiper .swiper-wrapper { display: flex; }
.cont02 .interview-slide-wrap { width: 100%; overflow: hidden;padding: 1px 0;}
.cont02 .interview-swiper {width:100%;overflow:visible;}
.cont02 .interview-swiper .swiper-wrapper {align-items:stretch;transform:translate3d(0,0,0);}
.cont02 .interview-swiper .swiper-slide {width:238px !important;flex-shrink:0;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);}
.cont02 .interview-swiper .swiper-slide img {transform:translateZ(0);}


/* ==========================
bottom
========================== */
.btm-txt {color: #333;text-align: center;font-size: 32px;font-weight: 400;line-height: 1.3;letter-spacing: -0.32px;background: #E8FAFC;padding: 40px 0;}
.btm-txt strong {color: #333;font-size: 32px;font-weight: 700;line-height: 1.3;letter-spacing: -0.32px;}

.data-tip-wrap span.ex:hover .tooltip {display:block;}


/* ====================================================
   RESPONSIVE (Media Queries)
==================================================== */

/* ÅÂºí¸´ ÀÌÇÏ (1199px ÀÌÇÏ) */
@media (max-width: 1199px) {
    .data-tip-wrap span.ex:hover .tooltip {display:none;}
    .data-tip-wrap span.ex.active .tooltip {display:block;}

    .visual-wrap {padding: 0;background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/star/v_bg_ta.png") no-repeat 0 0 / cover;background-position: top center;}
    .inner_slider {max-width:unset;padding-bottom: 50px;position: relative;}
    .inner_slider .swiper-slide {transform: scale(1);}
    .inner_slider .swiper-slide {box-shadow: 0 22px 40px 0 rgba(163,163,163,.20);}
    .inner_slider .swiper-pagination {width: calc(100% - 6%);box-sizing: border-box;margin: 40px auto 0;}
    .dsc_slide {margin-top: -20px;}

    .cont01 .inner {width: unset;}
    .cont01 .result-item {width: 100%;min-width: 224px;}
    .swiper-button-prev {display: none;}
    .swiper-button-next {display: none;}
    .data-tip-wrap {width: 720px;}
    .data-tip-wrap span.ex .tooltip img {display: block;}
    .data-tip-wrap span.ex:hover .tooltip {display:none;}
    .data-tip-wrap span.ex.active .tooltip {display:block;max-width: 480px;}

    .cont02 .interview-list {grid-template-columns: 1fr;}
    .cont02 .interview-card:hover { background: unset;border: 1px solid #D9D9D9; }
    .cont02 .interview-card.is-hover { background: unset;border: 1px solid #D9D9D9; }
    .cont02 .interview-card:hover .school {color: #555;}
    .cont02 .interview-card:hover .name {color: #555;}
    .cont02 .interview-card:hover .campus { color: #777;}
    .cont02 .interview-card.is-hover .school {color: #555;}
    .cont02 .interview-card.is-hover .name {color: #555;}
    .cont02 .interview-card.is-hover .campus { color: #777;}

}



/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width: 767px) {
    
    h3 {margin-bottom: clamp(20px, calc(20px + (30 - 20) * ((100vw - 360px) / 840)), 30px); }
    *[class^="cont0"] { padding: clamp(40px, calc(40px + (60 - 40) * ((100vw - 360px) / 840)), 60px) 0; }
    h3 span {font-size: clamp(22px, calc(22px + (24 - 22) * ((100vw - 360px) / 840)), 24px); }
    h3 strong {font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px); }
    
    .visual-wrap {background: url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/star/v_bg_mo.png") no-repeat 0 0 / cover;background-position: top center;}
    .visual-wrap .visual {padding-top:  clamp(50px, calc(50px + (90 - 50) * ((100vw - 360px) / 840)), 90px);}
    .visual-wrap .visual h3 span {font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 360px) / 840)), 24px);letter-spacing: 1.8px;}
    .visual-wrap .visual h2 {width: clamp(275px, calc(275px + (462 - 275) * ((100vw - 360px) / 840)), 462px);margin: 0 auto;}
    .visual-wrap .visual h2 img {width: 100%;}
    .visual-wrap .visual h3 {margin-bottom: clamp(24px, calc(24px + (40 - 24) * ((100vw - 360px) / 840)), 40px);}
    .visual-wrap .visual h3 span:not(:last-of-type) {margin-right: 0;}
    .v-cont {margin: clamp(40px, calc(40px + (90 - 40) * ((100vw - 360px) / 840)), 90px) 0 clamp(40px, calc(40px + (60 - 40) * ((100vw - 360px) / 840)), 60px);}

    .cont01 .result-item {min-width: unset;}
    .cont01 .inner { width: 100%; padding: 0 4%; max-width: none; overflow: visible; }
    .cont01 .result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, calc(16px + (24 - 16) * ((100vw - 360px) / 840)), 24px); width: 100%; max-width: 640px; margin: 0 auto; justify-content: initial; }
    .cont01 .result-item { width: 100%; padding:  clamp(14px, calc(14px + (22 - 14) * ((100vw - 360px) / 840)), 22px);  border-radius: 10px; box-sizing: border-box; }
    .cont01 .result-item:nth-child(1), .cont01 .result-item:nth-child(2), .cont01 .result-item:nth-child(3), .cont01 .result-item:nth-child(4) { grid-column: auto; }
    .cont01 .result-item:nth-child(5) { grid-column: 1 / 3; width: calc(50% - 8px); margin: 0 auto; }
    .cont01 .result-item .tit { font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px); line-height: 1.35; margin-bottom: clamp(4px, calc(4px + (6 - 4) * ((100vw - 360px) / 840)), 6px); word-break: keep-all; }
    .cont01 .result-item:nth-child(3) .tit, .cont01 .result-item:nth-child(4) .tit { line-height: 1.3; }
    .cont01 .result-item .num { gap: 4px; align-items: flex-end; }
    .cont01 .result-item .num strong { font-size: clamp(24px, calc(24px + (44 - 24) * ((100vw - 360px) / 840)), 44px); line-height: 1; }
    .cont01 .result-item .num span { font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 360px) / 840)), 18px);  line-height: 1; margin-bottom: 4px; }
    .data-tip-wrap { width: 100%; padding: 0 4%; margin: 24px auto 0; justify-content: center; }
    .data-tip-wrap span.ex { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; font-size: clamp(12px, calc(12px + (14 - 12) * ((100vw - 360px) / 840)), 14px); line-height: 1.3; text-align: center; }
    .data-tip-wrap span.ex > img { width: clamp(12px, calc(12px + (16 - 12) * ((100vw - 360px) / 840)), 16px); margin-right: 6px; vertical-align: middle; }
    .data-tip-wrap span.ex .tooltip { top: calc(100% + 10px); right: 50%; transform: translateX(50%); width: calc(100vw - 32px); min-width: auto; max-width: 640px; padding: 18px 36px 18px 18px; font-size: 13px; line-height: 1.6; box-sizing: border-box; }
    .data-tip-wrap .close-btn { top: 10px; right: 10px; }

    .dsc_slide {font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 360px) / 840)), 14px);}

    .cont02 .tit strong {font-size: clamp(17px, calc(17px + (24 - 17) * ((100vw - 360px) / 840)), 24px);}
    .cont02 .name {font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 360px) / 840)), 18px);margin: clamp(4px, calc(4px + (6 - 4) * ((100vw - 360px) / 840)), 6px) 0 0;}
    .cont02 .name strong {font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px);}
    .cont02 .badge {font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 360px) / 840)), 16px);line-height: 1.5;height: unset;}
    .cont02 .interview-list .btn-play {width: clamp(30px, calc(30px + (40 - 30) * ((100vw - 360px) / 840)), 40px);height: clamp(30px, calc(30px + (40 - 30) * ((100vw - 360px) / 840)), 40px);}
    .cont02 .interview-item {padding: clamp(16px, calc(16px + (30 - 16) * ((100vw - 360px) / 840)), 30px) clamp(14px, calc(14px + (30 - 14) * ((100vw - 360px) / 840)), 30px);border-radius: 10px;}
    .cont02 .interview-item .thumb {width: clamp(76px, calc(76px + (116 - 76) * ((100vw - 360px) / 840)), 76px);height: clamp(76px, calc(76px + (116 - 76) * ((100vw - 360px) / 840)), 76px);    flex: 0 0 clamp(76px, calc(76px + (116 - 76) * ((100vw - 360px) / 840)), 76px);    margin-right: clamp(10px, calc(10px + (24 - 10) * ((100vw - 360px) / 840)), 24px);}

    .cont02 .interview-swiper .swiper-slide {width:180px !important;}
    .cont02 .slide-sub-tit {margin: clamp(40px, calc(40px + (60 - 40) * ((100vw - 360px) / 840)), 60px) 0 clamp(20px, calc(20px + (30 - 20) * ((100vw - 360px) / 840)), 30px);font-size: clamp(22px, calc(22px + (28 - 22) * ((100vw - 360px) / 840)), 28px);}
    .cont02 .interview-card {padding: 16px;}
    .cont02 .interview-card .school {font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px);}
    .cont02 .interview-card .name {font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 360px) / 840)), 18px);margin: clamp(4px, calc(4px + (6 - 4) * ((100vw - 360px) / 840)), 6px) 0 0;}
    .cont02 .interview-card .campus {font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 840)), 16px);font-weight: 500;}
    .cont02 .interview-card .thumb {margin-bottom: clamp(10px, calc(10px + (16 - 10) * ((100vw - 360px) / 840)), 16px);}
    .cont02 .interview-card .btn-play {width: clamp(30px, calc(30px + (40 - 30) * ((100vw - 360px) / 840)), 40px);height: clamp(30px, calc(30px + (40 - 30) * ((100vw - 360px) / 840)), 40px);right: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px);bottom: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px);}
    .cont02 .interview-card .btn-play > img {width: 100%;}
    .cont02 .desc {font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 840)), 16px);margin: clamp(8px, calc(8px + (16 - 8) * ((100vw - 360px) / 840)), 16px) 0 0;padding-top: clamp(8px, calc(8px + (16 - 8) * ((100vw - 360px) / 840)), 16px);}
    .btm-txt {font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px);padding: clamp(30px, calc(30px + (40 - 30) * ((100vw - 360px) / 840)), 40px) 0;}
    .btm-txt strong {font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px);}

    .cont02 .interview-card {border-radius: 10px;}
    .cont02 .interview-swiper .swiper-slide {width: 180px !important;}
    .cont02 .interview-list {gap: 16px;}

    .inner_slider .swiper-slide.swiper-slide-active { transform: scale(1); }
    /* .inner_slider .swiper-slide a { right: 16px; bottom: 16px; width: clamp(40px, calc(40px + (48 - 40) * ((100vw - 360px) / 840)), 48px); height:  clamp(40px, calc(40px + (48 - 40) * ((100vw - 360px) / 840)), 48px); } */
    .inner_slider .swiper-slide a { right: 32px; bottom: 32px; width: 40px;height: 40px; }
    .inner_slider .swiper-pagination {margin: clamp(20px, calc(20px + (40 - 20) * ((100vw - 360px) / 840)), 40px) auto 0;}

}



