@charset "utf-8";
@import url("default.css");
@import url("login.css");
@import url("common.css");
@import url("form.css");
@import url("popup.css");
@import url("board.css");
@import url("jquery_ui.css");
/* *******************************************************
 * PROJECT : DYB 입시전략연구소 유학 프로그램
 * DESCRIPTION : 미국캠프 유학 프로그램
 * DATE : 2025.08.04 ~ 2025.08.14
 * MANAGER : 전지연
******************************************************** */

/*  mainBanner  */
#mainBanner {position: relative; background: url("../images/common/main_banner.jpg") center / cover no-repeat; z-index: 1; clip-path: ellipse(110% 100% at 50% 0%); -webkit-clip-path: ellipse(110% 100% at 50% 0%); will-change: clip-path; transform: translate3d(0, 0, 0); backface-visibility: hidden;}
#mainBanner .inner {height: 724px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
#mainBanner .mainTitle {display: flex; flex-direction: column; gap: 20px; color: #fff; text-align: center;}
#mainBanner .mainTitle h1 {font-size: 48px; font-weight: 700;}
#mainBanner .mainTitle h1 span {display: block;}
#mainBanner .mainTitle p {font-size: 20px; font-weight: 500; opacity: 0.7;}


#mainBanner1 {position: relative; background: url("../images/common/main_banner1.jpg") center / cover no-repeat; z-index: 1; clip-path: ellipse(110% 100% at 50% 0%); -webkit-clip-path: ellipse(110% 100% at 50% 0%); will-change: clip-path; transform: translate3d(0, 0, 0); backface-visibility: hidden;}
#mainBanner1 .inner {height: 724px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
#mainBanner1 .mainTitle {display: flex; flex-direction: column; gap: 20px; color: #fff; text-align: center;}
#mainBanner1 .mainTitle h1 {font-size: 48px; font-weight: 700;}
#mainBanner1 .mainTitle h1 span {display: block;}
#mainBanner1 .mainTitle p {font-size: 20px; font-weight: 500; opacity: 0.7;}

/*.mainSelect {position: relative; z-index: 3; margin-top: 64px;width: 640px; }*/
/*.mainSelect .btn {width: 100%; height: 72px; border-radius: 99px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); cursor: pointer; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; padding: 22px 32px; position: relative; user-select: none; box-sizing: border-box;}*/
/*.mainSelect .btn:after {content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 32px; width: 24px; height: 24px; background: url(../images/common/ic_select.svg) 0 0 no-repeat; transition: all .2s;}*/
/*.mainSelect .btn.active:after {transform: translate(0, -50%) rotate(-180deg);}*/
/*.mainSelect .btn:hover {background: rgba(255, 255, 255, 0.40); backdrop-filter: blur(5px);}*/
/*.mainSelect .con {position: absolute; top: 100%; left: 0; right: 0; padding-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-20px); transition: all 0.3s ease;}*/
/*.mainSelect .con.active {max-height: 300px; opacity: 1; transform: translateY(0);}*/
/*.mainSelect .con ul {background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); border-radius: 8px; box-shadow: 4px 4px 16px 0px rgba(55, 42, 42, 0.06); padding: 32px; color: #fff; font-size: 20px; display: flex; flex-direction: column; gap: 24px;}*/
/*.mainSelect .con ul li a { color: #fff; font-size: 18px;}*/
.mainSelect {position: relative; z-index: 3; margin-top: 64px; width: 640px;}

.mainSelect .selectBox {width: 100%; height: 72px; border-radius: 99px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); color: #fff; font-size: 20px; font-weight: 700; padding: 0 56px 0 32px; border: none; cursor: pointer; box-sizing: border-box; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.mainSelect .selectBox:hover {background: rgba(255, 255, 255, 0.40); backdrop-filter: blur(5px);}
.mainSelect .selectBox option {background: #fff; color: #333; padding: 10px;}

/* 화살표 */
.mainSelect::after {content: ""; position: absolute; top: 50%; right: 32px; width: 24px; height: 24px; background: url(../images/common/ic_select.svg) 0 0 no-repeat; transform: translateY(-50%); pointer-events: none; transition: all 0.2s ease;}
.mainSelect.active::after {transform: translateY(-50%) rotate(-180deg);}

@media only all and (max-width: 760px) {
    .mainSelect .selectBox {height: 64px; font-size: 17px; padding: 0 52px 0 28px;}
}




@media only all and (max-width: 1500px) {
    #mainBanner {clip-path: ellipse(160% 100% at 50% 0%); -webkit-clip-path: ellipse(160% 100% at 50% 0%);}
    #mainBanner1 {clip-path: ellipse(160% 100% at 50% 0%); -webkit-clip-path: ellipse(160% 100% at 50% 0%);}
}
@media only all and (max-width: 760px) {
    #mainBanner {position: relative; background: url("../images/common/main_banner_m.jpg") center / cover no-repeat;}
    #mainBanner .inner {height: 560px;}
    #mainBanner .mainSelect {margin-top: 40px; width: 100%;}
    #mainBanner .mainSelect .btn {height: 64px; padding: 0 28px; font-size: 17px;}
    #mainBanner .mainTitle h1 {font-size: 36px;}
    #mainBanner .mainTitle p {font-size: 17px;}
    #mainBanner {clip-path: ellipse(180% 100% at 50% 0%); -webkit-clip-path: ellipse(180% 100% at 50% 0%);}


    #mainBanner1 .inner {height: 560px;}
    #mainBanner1 .mainSelect {margin-top: 40px; width: 100%;}
    #mainBanner1 .mainSelect .btn {height: 64px; padding: 0 28px; font-size: 17px;}
    #mainBanner1 .mainTitle h1 {font-size: 36px;}
    #mainBanner1 .mainTitle p {font-size: 17px;}
    #mainBanner1 {clip-path: ellipse(180% 100% at 50% 0%); -webkit-clip-path: ellipse(180% 100% at 50% 0%);}
}


/*  mainContainer  */
.mainContainer > section > .inner {padding-top: 120px; padding-bottom: 120px;}

/*  하버드 여름캠프  */
.harvardIntro {display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px;}
.harvardIntro span {font-weight: 700;}
.harvardIntro h2 {font-size: 44px; font-weight: 700;}
.harvardIntro p {font-weight: 500; color: #565656;}
.harvardBanner img {max-width: 100%; height: auto; border-radius: 16px; margin-bottom: 64px;}

.harvardHighlights {display: flex; gap: 24px; margin-bottom: 40px;}
.harvardHighlights .highlightCard {display: flex; flex-direction: column; flex: 1;}
.harvardHighlights .highlightCard img {width: 80px; height: 80px; margin-bottom: 24px;}
.harvardHighlights .highlightCard h3 {font-size: 22px; font-weight: 700; margin-bottom: 20px;}
.harvardHighlights .highlightCard ul {color: #565656; font-size: 18px; font-weight: 400;}
.harvardHighlights .highlightCard ul li ~ li {margin-top: 12px;}
.harvardHighlights .highlightCard ul li {position: relative; padding-left: 11px;}
.harvardHighlights .highlightCard ul li:before {content: ""; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; border-radius: 999px; background: #565656;}

@media only all and (max-width: 1024px) {
    .harvardHighlights {flex-direction: column;}
    .harvardIntro {margin-bottom: 48px;}
}

@media only all and (max-width: 760px) {
    .mainContainer > section > .inner {padding-top: 80px; padding-bottom: 80px;}
    .harvardIntro {gap: 12px; margin-bottom: 48px;}
    .harvardIntro h2 {font-size: 32px;}
    .harvardBanner img {width: 100%; margin-bottom: 48px;}
    .harvardHighlights {flex-direction: column; gap: 48px; margin-bottom: 0;}
    .harvardHighlights .highlightCard img {width: 68px; height: 68px; margin-bottom: 20px;}
    .harvardHighlights .highlightCard h3 {font-size: 18px; margin-bottom: 12px;}
    .harvardHighlights .highlightCard ul {font-size: 16px;}
    .harvardHighlights .highlightCard ul li ~ li {margin-top: 8px;}
}


/*  여름캠프 콘텐츠  */
.sectionCampContents {background: #F0F2FA;}

.campArrow {display: flex; align-items: center; gap: 40px;}
.campArrow .btnArea {display: flex; gap: 16px;}
.campArrow .btnArea > div {width: 40px; height: 40px; cursor: pointer; text-indent: -9999px;}

.campArrow .pageArea {height: 4px; border-radius: 999px; background: rgba(22, 22, 22, 0.10); width: 100%;}

@media only all and (max-width: 1024px) {
    .campArrow .btnArea {display: none;}
}
@media only all and (max-width: 760px) {
    .campSlider {margin-bottom: 48px;}
    .campSlider li img {width: 280px; margin-bottom: 20px;}
    .campSlider li h3 {font-size: 18px; margin-bottom: 8px;}
    .campSlider li p {font-size: 16px;}
}

/* 슬라이드 영역 */
.slideContentsWrap {overflow: hidden;}
.slideContents.swiper {overflow: visible;}
.slideContents .btnInfo {display: flex; gap: 40px; align-items: center; margin-top: 66px;}
.slideContents .btnInfo .btnPn {display: flex; gap: 16px;}
.slideContents .btnInfo .btnPn .button-prev.swiper-button-disabled {cursor: default; background: url(../images/board/ic_campList_arrowl.svg) 0 0 no-repeat;}
.slideContents .btnInfo .btnPn .button-next.swiper-button-disabled {cursor: default; background: url(../images/board/ic_campList_arrowr2.svg) 0 0 no-repeat;}
.slideContents .btnInfo .btnPn .btn {width: 40px; height: 40px;cursor: pointer;}
.slideContents .btnInfo .btnPn .button-prev {background: url(../images/board/ic_campList_arrowl2.svg) 0 0 no-repeat;}
.slideContents .btnInfo .btnPn .button-next {background: url(../images/board/ic_campList_arrowr.svg) 0 0 no-repeat;}

.slideContents .paging {flex: 1; display: flex; align-items: center; height: 4px; background: #DADCE3; border-radius: 99px}
.slideContents .paging span {flex: 1; height: 100%; display: block; background: #DADCE3; border-radius: 99px; cursor: pointer;}
.slideContents .paging span.swiper-pagination-bullet-active {background: #161616; border-radius: 99px;}

@media (max-width: 1024px) {
    .slideContents.swiper .swiper-slide {width: 80%;}
    .slideContents .btnInfo .btnPn {display: none;}
    .slideContents.swiper .swiper-slide .img img {width: 100%;}
    .slideContents .btnInfo {margin-top: 48px;}
}

.slideContents .swiper-wrapper {display: flex;}
.slideContents .swiper-slide .img {width: 100%; overflow: hidden; border-radius: 16px 16px 0 0;}
.slideContents .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover;}
.slideContents .swiper-slide img {width: 440px; border-radius: 16px; margin-bottom: 24px;}
.slideContents .swiper-slide h3 {font-size: 20px; font-weight: 700; margin-bottom: 12px;}
.slideContents .swiper-slide p {color: #565656; font-size: 18px; font-weight: 400;}

@media only all and (max-width: 760px) {
    .slideContents .swiper-slide h3 {font-size: 18px; margin-bottom: 8px;}
    .slideContents .swiper-slide p {font-size: 16px;}
    .slideContents .swiper-slide .img {margin-bottom: 0;}
    .slideContents .swiper-slide img {margin-bottom: 20px;}
}

/*  안전한 캠프활동  */
.safeCamp ul {display: flex; gap: 64px; flex-direction: column;}
.safeCamp ul li {display: flex; justify-content: space-between; gap: 32px;}
.safeCamp ul li > div {width: 520px;}
.safeCamp ul li img {border-radius: 16px;}

.safeCamp h3 {font-size: 22px; font-weight: 700; margin-bottom: 12px;}
.safeCamp p {font-size: 18px; font-weight: 400; color: #565656;}

@media only all and (max-width: 1024px) {
    .safeCamp ul {gap: 48px;}
    .safeCamp ul li {flex-direction: column; gap: 0;}
    .safeCamp ul li img {order: -1; margin-bottom: 20px;}
    .safeCamp h3 {font-size: 18px; margin-bottom: 8px;}
    .safeCamp p {font-size: 16px;}
}
@media only all and (max-width: 760px) {
    .safeCamp ul li > div {width: 100%;}
}



/* 학생들의 후기 */
.mainContainer > section > .inner.iroofReview {padding-bottom: 0;}
#container > .outer.roofReview {padding: 0;}
.campAfter {margin-bottom: 120px;}
.campAfter ul {display: flex; align-items: flex-start;}
.campAfter ul li {background: #fff; width: 440px; padding: 40px; box-sizing: border-box; border-radius: 16px; flex-shrink: 0; height: auto;}
.campAfter .afterTitle h3 {font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.campAfter .afterTitle p {font-size: 18px; color: #565656; margin-bottom: 20px; font-weight: 400;}
.campAfter .afterProfile {position: relative; padding-left: 60px; line-height: 48px;}
.campAfter .afterProfile:before {content: ""; position: absolute; width: 48px; height: 48px; left: 0;}

.campAfter .afterProfile[data-profile="01"]:before {background: url("../images/board/ic_afterProfile_01.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="02"]:before {background: url("../images/board/ic_afterProfile_02.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="03"]:before {background: url("../images/board/ic_afterProfile_03.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="04"]:before {background: url("../images/board/ic_afterProfile_04.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="05"]:before {background: url("../images/board/ic_afterProfile_05.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="06"]:before {background: url("../images/board/ic_afterProfile_06.svg") no-repeat 0 0;}
.campAfter .afterProfile[data-profile="07"]:before {background: url("../images/board/ic_afterProfile_07.svg") no-repeat 0 0;}

/* 스크롤 관련 스타일 */
.campAfterSection {overflow: hidden; width: 100%; position: relative;}
.campAfter ul {cursor: grab; will-change: transform;}
.campAfter ul:active {cursor: grabbing;}

@media only all and (max-width: 1300px) {
    #container > .outer > .inner.iroofReview {padding: 80px var(--sp) 0 var(--sp);}
    .campAfter {margin-bottom: 80px;}
}
@media only all and (max-width: 760px) {
    .campAfter ul li {width: 280px; padding: 28px;}
    .campAfter {margin-bottom: 80px;}
    .campAfter .afterTitle h3 {font-size: 18px;}
    .campAfter .afterTitle p {font-size: 16px;}
}

/* 이미지 드래그만 방지 */
.swiperMarqueeTxt img, .campAfterSection img {-webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; pointer-events: none;}








/*  직접 전하는 이야기  */
.mp4Section {display: flex; flex-direction: row; gap: 64px; justify-content: space-between;}
.mp4Section span {font-weight: 700; margin-bottom: 16px; display: inline-block;}
.mp4Section h2 {font-size: 44px; font-weight: 700;}

.mp4Section iframe {width: 785px; height: 440px; border-radius: 16px;}

@media only all and (max-width: 1200px) {
    .mp4Section {flex-direction: column; gap: 48px;}
    .mp4Section iframe {width: 100%; height: 56.25vw; max-height: 440px;}
}
@media only all and (max-width: 760px) {
    .mainContainer > section > .inner.mp4Margin {padding-bottom: 40px;}
    .mp4Section h2 {font-size: 32px;}
}


/*  검증된 교육 연계  */
.tahsBanner ol {display: flex; gap: 48px;}
.tahsBanner img {margin-bottom: 24px;}
.tahsBanner h3 {font-size: 22px; font-weight: 700; margin-bottom: 20px;}
.tahsBanner ul {margin-bottom: 20px;}
.tahsBanner ul li {font-size: 18px; font-weight: 400; color: #565656; position: relative; padding-left: 11px;}
.tahsBanner ul li:before {content: ""; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; border-radius: 999px; background: #565656;}
.tahsBanner ul li ~ li {margin-top: 12px;}
.tahsBanner a {color: #4964EB; font-weight: 700; position: relative; font-size: 16px;}
.tahsBanner a:after {content: ""; position: absolute; width: 16px; height: 16px; background: url("../images/board/ic_tahs_arrow.svg") no-repeat 0 0;  top: calc(50% - 8px); right: -20px;}

@media only all and (max-width: 1300px) {
    .tahsBanner ol {flex-direction: column;}
    .tahsBanner img {width: 100%; margin-bottom: 20px;}
}
@media only all and (max-width: 760px) {
    .tahsBanner h3 {font-size: 18px; margin-bottom: 12px;}
    .tahsBanner ul li {font-size: 16px;}
    .tahsBanner a {font-size: 15px;}
}

/*  여름캠프 신청안내  */
.campApply {margin-bottom: 64px;}
.campApply img {margin-bottom: 40px; width: 100%;}
.campApply ul {border-top: 1px solid #161616;}
.campApply ul li {display: flex; border-bottom: 1px solid #E6E6E6 !important; padding: 32px 0; align-items: flex-start;}
.campApply ul li h3 {width: 184px; font-size: 18px; font-weight: 700; flex-shrink: 0;}
.campApply ul li p {font-size: 18px; font-weight: 400; color: #565656; line-height: 1.8;}
.campApply ul li p a {color: #4964EB; font-size: 16px; font-weight: 700; border-radius: 4px; border: 1px solid #4964EB; padding: 0 20px; height: 40px; display: flex; align-items: center;}

.campApplyBtn a {display: block; width: 100% ; height: 72px; background: #4964EB; border-radius: 16px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; line-height: 72px;}

@media only all and (max-width: 1024px) {
    .campApply {margin-bottom: 48px;}
}
@media only all and (max-width: 760px) {
    .campApply img {margin-bottom: 28px;}
    .campApply ul li {flex-direction: column;  padding: 24px 0; gap: 8px;}
    .campApply ul li h3 {font-size: 16px;}
    .campApply ul li p {font-size: 16px;}
    .campApply ul li p a {width: 80px; padding: 0; height: 36px; justify-content: center; font-size: 14px;}
    .campApplyBtn a {font-size: 17px; height: 60px; line-height: 60px;}
}


/* 모바일 화살표 강제 중앙 정렬 */
@media only all and (max-width: 760px) {
    .mfp-container {padding-left: 20px !important; padding-right: 20px !important;}
    .mfp-arrow-left, .mfp-arrow-right {
        position: fixed !important;
        top: 50% !important;
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 99999 !important;
    }
    .mfp-arrow-left {left: -20px !important;}
    .mfp-arrow-right {right: -20px !important;}
    .mfp-arrow-left:before {border-right: none !important;}
    .mfp-arrow-left:after {border-right: 20px solid #4964EB !important;}
    .mfp-arrow-right:before {border-left: none !important;}
    .mfp-arrow-right:after {border-left: 20px solid #4964EB !important;}
}








/* ------------------------ 유학프로그램 ------------------------ */

#mainBanner.secondBanner {background: url("../images/common/main_banner2.jpg") center / cover no-repeat;}

/* 스크롤 관련 스타일 */
.campAfterSection1 {position: relative; overflow: hidden; width: 100%;}

/* 왼쪽 그라데이션 */
.campAfterSection1::before {content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 96px; background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); z-index: 2; pointer-events: none;}
/* 오른쪽 그라데이션 */
.campAfterSection1::after {content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 96px; background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); z-index: 2; pointer-events: none;}

.campAfter1 {position: relative;}
.campAfter1 ul {display: flex; gap: 40px; align-items: flex-start; cursor: grab; will-change: transform;}
.campAfter1 ul:active {cursor: grabbing;}
.campAfter1 ul li {background: #fff; width: 200px; flex-shrink: 0; height: 96px;}
.campAfter1 ul li img {width: 100%; height: 100%; object-fit: contain;}
@media only all and (max-width: 760px) {
    .campAfter1 ul {gap: 20px;}
    .campAfter1 ul li {width: 135px; height: 64px;}
    .campAfterSection1::before {width: 32px; height: 64px;}
    .campAfterSection1::after {width: 32px; height: 64px;}
}

.schoolImg {position: relative;}
.schoolImg > img {border-radius: 16px; margin-top: 64px; width: 100%;}
.schoolIcons {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.schoolIcon {position: absolute; opacity: 0; transform: translateY(20px); transition: all 0.8s ease;}
.schoolIcon.animated {opacity: 1; transform: translateY(0);}

/* 아이콘 위치 조정  */
.schoolIcon.icon1 {top: 45%; left: 30%; transition-delay: 0.6s;}
.schoolIcon.icon2 {top: 40%; left: 60%; transform: translate(-50%, -50%) translateY(20px); transition-delay: 0.8s;}
.schoolIcon.animated.icon2 {transform: translate(-50%, -50%) translateY(0);}
.schoolIcon.icon3 {top: 60%; right: 30%; transition-delay: 1s;}

.schoolIcons .schoolIcon.icon1 img {width: 205px;}
.schoolIcons .schoolIcon.icon2 img {width: 68px;}
.schoolIcons .schoolIcon.icon3 img {width: 167px;}

@media only all and (max-width: 960px) {
    .schoolIcon.icon1 {top: 40%; left: 20%;}
    .schoolIcon.icon2 {top: 40%; left: 60%;}
    .schoolIcon.icon3 {top: 50%; right: 25%;}
}
@media only all and (max-width: 760px) {
    .schoolImg > img {margin-top: 48px;}
    .schoolIcon.icon1 {top: 45%; left: 10%;}
    .schoolIcon.icon2 {top: 40%; left: 70%;}
    .schoolIcon.icon3 {top: 60%; right: 20%;}
    .schoolIcons .schoolIcon.icon1 img {width: 166px;}
    .schoolIcons .schoolIcon.icon2 img {width: 44px;}
    .schoolIcons .schoolIcon.icon3 img {width: 107px;}
}



/*  어떤 학생이 가는가?  */
.potenBanner {margin-bottom: 64px;}
.potenBanner ul {display: flex; width: 100%; height: 400px; background: url("../images/board/img_potenBanner.png") center/cover; border-radius: 16px;}
.potenBanner ul li {flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center;}
.potenBanner ul li span {font-size: 44px; font-weight: 700; color: #fff;}
.potenBanner ul li p {font-size: 20px; font-weight: 500; color: #fff; opacity: 0.7;}
.potenBanner ul li:first-child {border-right: 1px solid rgba(255, 255, 255, 0.20);}

.potenContents ul {display: flex; gap: 64px; flex-direction: column;}
.potenContents ul li {display: flex; gap: 64px; flex: 1; align-items: center;}
.potenContents ul li:nth-child(even) {flex-direction: row-reverse;}
.potenContents ul li:nth-child(even) div {text-align: right;}
.potenContents ul li img {border-radius: 16px;}
.potenContents ul li span {color: #4964EB; font-size: 16px; font-weight: 400; margin-bottom: 12px;}
.potenContents ul li h3 {color: #161616; font-size: 24px; font-weight: 700; margin-bottom: 12px;}
.potenContents ul li p {color: #565656; font-size: 18px; font-weight: 400;}

.potenBtn {display: inline-flex; padding: 22px 40px; justify-content: center; align-items: center; border-radius: 16px; background: #161616; color: #fff; font-size: 20px; font-weight: 700;  margin: 80px auto 0; cursor: pointer; gap: 8px; white-space: nowrap; position: relative; left: 50%; transform: translateX(-50%);}

@media only all and (max-width: 960px) {
    .potenContents ul {gap: 48px;}
    .potenContents ul li {flex-direction: column; gap: 20px; width: 100%;}
    .potenContents ul li:nth-child(even) {flex-direction: column;}
    .potenContents ul li:nth-child(even) div {text-align: left;}
    .potenContents ul li img {width: 100%;}
    .potenContents ul li div {width: 100%;}
    .potenBanner {margin-bottom: 48px;}
    .potenContents ul li h3 {font-size: 18px; margin-bottom: 8px;}
    .potenContents ul li p {font-size: 16px; }
    .potenBtn {margin: 48px auto 0; padding: 18px 24px; font-size: 17px;}
}

@media only all and (max-width: 760px) {
    .potenBanner ul {flex-direction: column; height: 480px; font-size: 32px;}
    .potenBanner ul li:first-child {border-bottom: 1px solid rgba(255, 255, 255, 0.20); font-size: 17px;}
    .potenBanner ul li span {font-size: 32px;}
    .potenBanner ul li p {font-size: 17px;}
}


/*  UBCE 프로그램  */
.UBCEImg {border-radius: 16px; margin-bottom: 64px;}
.UBCEImg img {width: 100%;}

.UBCETab {margin-bottom: 40px;}
.UBCETab ul {display: flex; gap: 8px; padding: 6px; border-radius: 16px; background: #F0F2FA; color: #565656; font-size: 20px; font-weight: 400; align-items: center; justify-content: center;}
.UBCETab ul li {flex: 1; text-align: center; cursor: pointer;}
.UBCETab ul li.active {border-radius: 16px; background: #FFF; padding: 18px 0; color: #161616; font-weight: 700;}

.UBCETab2 {margin-bottom: 24px;}
.UBCETab2 ul {display: flex;}
.UBCETab2 ul li {padding: 15px 28px; color: #969696; font-size: 18px; font-weight: 400; cursor: pointer; border-radius: 999px;}
.UBCETab2 ul li.active {background: #161616; color: #fff; font-weight: 600;}

/* 첫 번째 탭 (totalUBCE) - 애니메이션 없음 */
.totalUBCE .campApply.UBCE {margin-bottom: 0;}

/* 두 번째 탭 (totalUBCE22) */
.totalUBCE22 .campApply.UBCE {margin-bottom: 0; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s ease-in-out; transform: translateY(20px);}
.totalUBCE22 .campApply.UBCE.active {max-height: 1200px; opacity: 1; transform: translateY(0);}


.campApply.UBCE img {margin-bottom: 0;}
.totalUBCE22 {display: none;}

@media only all and (max-width: 760px) {
    .UBCETab ul {font-size: 14px;}
    .UBCETab2 ul li {font-size: 14px; padding: 12px 18px;}

    /* 대학진학과정 이미지 스크롤 */
    .campApply ul li:last-child p {overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; width: 100%; margin: 0 -24px 0 0; /* 오른쪽만 여백 제거 */ padding: 0 24px 0 0; /* 오른쪽 패딩 제거 */}
    .campApply ul li:last-child p img {width: 468px; max-width: none; height: auto; display: block;}

    /* 스크롤바 스타일링 */
    .campApply ul li:last-child p::-webkit-scrollbar {height: 6px;}
    .campApply ul li:last-child p::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 3px;}
    .campApply ul li:last-child p::-webkit-scrollbar-thumb {background: #c1c1c1; border-radius: 3px;}
    .campApply ul li:last-child p::-webkit-scrollbar-thumb:hover {background: #a1a1a1;}
}


/*  커리어까지 동행  */
.careerContents ul {display: flex; gap: 64px; flex-direction: column;}
.careerContents ul li {display: flex; justify-content: space-between; gap: 30px;}
.careerContents ul li h3 {color: #161616; font-size: 22px; font-weight: 700; margin-bottom: 20px;}
.careerContents ul li p {color: #565656; font-size: 18px; font-weight: 400; position: relative; padding-left: 11px;}
.careerContents ul li p ~ p {margin-top: 12px;}
.careerContents ul li p:before {content: ""; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; border-radius: 999px; background: #565656;}

.careerContents ul li .internship {display: flex; gap: 8px; align-items: center; color: #4964EB; font-size: 16px; font-weight: 400; margin-top: 12px;}
.careerContents ul li .internship * {margin: 0; line-height: 1;}
.careerContents ul li .internship p:before {content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 999px; background: #565656; transform: translateY(-50%);}
.careerContents ul li .internship span {cursor: pointer; margin-right: 2px;}
.careerContents ul li .internship img {margin-left: -6px; cursor: pointer;}

@media only all and (max-width: 1024px) {
    .careerContents ul {gap: 48px;}
    .careerContents ul li {flex-direction: column-reverse; gap: 20px;}
    .careerContents ul li h3 {font-size: 18px; margin-bottom: 12px;}
    .careerContents ul li p {font-size: 16px;}
    .careerContents ul li p ~ p {margin-top: 8px;}
    .careerContents ul li .internship {margin-top: 8px; flex-direction: column; gap: 12px; align-items: flex-start;}
    .careerContents ul li .internship span {font-size: 14px;}
}


/*  든든한 유학 파트너  */
.TAHS {display: flex; justify-content: space-between;}
.TAHS a {color: #4964EB; font-weight: 700; position: relative; font-size: 18px; padding-right: 22px;}
.TAHS a:after {content: ""; position: absolute; width: 18px; height: 18px; background: url(../images/board/ic_tahs_arrow.svg) no-repeat 0 0; top: calc(50% - 9px); right: 0;}

.mainContainer > section > .inner.iroofReview {padding-bottom: 0;}
#container > .outer.roofReview {padding: 0;}
.TAHScamp {margin-bottom: 64px;}
.TAHScamp ul {display: flex; align-items: flex-start;}
.TAHScamp ul li {background: #fff; width: 240px; box-sizing: border-box; border-radius: 16px; flex-shrink: 0; height: auto;}

.humanIMG img {margin-bottom: 20px; border-radius: 16px;}
.humanIMG h3 {color: #161616; font-size: 18px; font-weight: 700; margin-bottom: 8px;}
.humanIMG p {color: #565656; font-size: 16px; font-weight: 400;}


/* 스크롤 관련 스타일 */
.TAHSSection {overflow: hidden; width: 100%; position: relative;}
.TAHScamp ul {cursor: grab; will-change: transform;}
.TAHScamp ul:active {cursor: grabbing;}

.mainContainer > section > .inner.TAHSApplyBtn {padding-top: 0; padding-bottom: 120px;}

@media only all and (max-width: 1300px) {
    #container > .outer > .inner.iroofReview {padding: 80px var(--sp) 0 var(--sp);}
    .TAHScamp {margin-bottom: 80px;}
    .TAHS a {display: none;}
    .humanIMG h3 {font-size: 16px;}
    .humanIMG p {font-size: 14px;}
    #container > .outer > .inner.TAHSApplyBtn {padding: 0 var(--sp) 80px var(--sp);}
}
@media only all and (max-width: 760px) {
    .TAHScamp {margin-bottom: 48px;}
    .TAHScamp ul li {width: 196px;}
    .humanIMG img {width: 196px;}
}

.splide__sr {display: none !important;}






/* PhotoSwipe 커스텀 스타일 */
.pswp {--pswp-bg: rgba(0, 0, 0, 0.9); --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000;}
.pswp__button--zoom {display: none !important;}
.pswp__button {background-color: rgba(0, 0, 0, 0.5); border-radius: 50%;}
.pswp__button:hover {background-color: rgba(0, 0, 0, 0.7);}
.pswp__counter {color: #fff; font-size: 14px; background: rgba(0, 0, 0, 0.5); padding: 8px 12px; border-radius: 20px;}

/* 이미지 팝업 링크 스타일 */
.image-popup {color: #4964EB; font-size: 16px; font-weight: 700; border-radius: 4px; border: 1px solid #4964EB; padding: 0 20px; height: 40px; display: flex; align-items: center;}

.image-popup:hover {background: #4964EB; color: #fff; text-decoration: none;}


/* 반응형 스타일 */
@media only all and (max-width: 760px) {
    .pswp {--pswp-bg: rgba(0, 0, 0, 0.95);}
    .pswp__button {width: 44px; height: 44px;}
    .pswp__counter {font-size: 12px; padding: 6px 10px;}
    .image-popup {padding: 6px 12px; font-size: 12px;}
}

@media only all and (max-width: 480px) {
    .pswp__button {width: 40px; height: 40px;}
    .image-popup {padding: 5px 10px; font-size: 11px;}
}

.pswp .pswp__counter {line-height: 1;}