@charset "utf-8";

:root {
    --black: #222;
    --navy: #0A2961;
    --light_gray: #666;
    --gold: #C0A353;
}


/* ==========================================================================
   Section1 : Main Visual
   ========================================================================== */
.section1 {
    position: relative;
}

.section1 .section1__visual {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 배경 슬라이드 - opacity 크로스페이드 */
.section1 .section1__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 1;
}

.section1 .section1__slide.section1__slide1 {
    background-image: url('../images/main_visual1.png');
}

.section1 .section1__slide.section1__slide2 {
    background-image: url('../images/main_visual2.png');
}

.section1 .section1__slide.section1__slide3 {
    background-image: url('../images/main_visual3.png');
}

.section1 .section1__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.section1 .section1__dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
}

.section1 .section1__text {
    position: absolute;
    top: 45%;
    left: 15%;
    transform: translateY(-50%);
    z-index: 4;
    color: #fff;
}

.section1 .section1__text .section1__sub {
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.section1 .section1__text .section1__title {
    line-height: 1.4;
}

/* 컨트롤 (숫자 + 진행바 + 화살표 + 재생버튼) */
.section1 .section1__control {
    position: absolute;
    top: 62.5%;
    left: 15%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 4;
    color: #fff;
}

.section1 .section1__control .section1__num {
    min-width: 20px;
}

.section1 .section1__control .section1__progress {
    position: relative;
    width: 130px;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
}

.section1 .section1__control .section1__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #fff;
}

.section1 .section1__control .section1__arrow {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}

.section1 .section1__control .section1__play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 6px;
}

/* 스크롤 인디케이터 */
.section1 .section1__scroll {
    position: absolute;
    left: 50%;
    bottom: 7.5%;
    margin-bottom: 90px;
    transform: translateX(-50%);
    z-index: 4;
    color: #fff;
    text-align: center;
}

.section1 .section1__scroll .section1__scroll-icon {
    display: block;
    width: 20px;
    height: 32px;
    margin: 0 auto 8px;
    border: 1px solid #fff;
    border-radius: 12px;
    position: relative;
}

.section1 .section1__scroll .section1__scroll-icon::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 6px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
    animation: section1ScrollMove 1.6s infinite;
}

@keyframes section1ScrollMove {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    70% {
        transform: translate(-50%, 10px);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 0;
    }
}

/* 위치(가운데 정렬)는 wrap이 담당 */
.section1 .section1__quick-wrap {
    width: 100%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* 애니메이션(AOS)은 quick이 담당 - transform 충돌 없음 */
.section1 .section1__quick {
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 20px 40px;
}

.section1 .section1__quick .section1__quick-title {
    color: #1a2b56;
    padding-right: 40px;
    border-right: 1px solid #e5e5e5;
    margin-right: 40px;
}

.section1 .section1__quick .section1__quick-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 50px;
    color: #777;
}

.section1 .section1__quick .section1__quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a2b56;
    color: #fff;
    font-size: 13px;
}

.section1 .section1__quick .section1__quick-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    background: #1a2b56;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    border-radius: 28px;
}

/* ==========================================================================
   Section2 : Intro (모든것은 정형으로부터)
   ========================================================================== */
.section2 {
    position: relative;
    width: 100%;
    padding: 140px 0 80px;
    overflow: hidden;
    background: #fff;
}

.section2 .section2__inner {
    text-align: center;
}

.section2 .section2__title {
    color: var(--black);
    letter-spacing: -0.02em;
}

/* '정형' 강조 텍스트 위 점 두개 장식 */
.section2 .section2__point {
    position: relative;
    display: inline-block;
}

.section2 .section2__point::before,
.section2 .section2__point::after {
    content: '';
    position: absolute;
    top: -14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--navy);
}

.section2 .section2__point::before {
    left: 30%;
}

.section2 .section2__point::after {
    left: 60%;
}

.section2 .section2__line {
    display: block;
    width: 2px;
    height: 60px;
    margin: 30px auto;
    background: #CCCCCC;
}

.section2 .section2__sub {
    margin-bottom: 30px;
}

.section2 .section2__desc {
    margin-bottom: 40px;
}

.section2 .section2__desc p:first-child {
    margin-bottom: 8px;
}

.section2 .section2__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 30px;
    border: 1px solid var(--navy);
    border-radius: 30px;
}

.section2 .section2__btn:hover {
    background-color: var(--navy);
    color: #fff;
}

/* 배경 마퀴 워터마크 */
.section2 .section2__marquee {
    width: 100%;
    margin-top: 60px;
    overflow: hidden;
    white-space: nowrap;
}

.section2 .section2__marquee-track {
    display: inline-flex;
    animation: section2MarqueeMove 30s linear infinite;
}

.section2 .section2__marquee-track span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 120px;
    font-weight: 700;
    color: rgba(10, 41, 97, 0.15);
    padding-right: 10px;
}

@keyframes section2MarqueeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Section3 : History
   ========================================================================== */
.section3 {
    position: relative;
    width: 100%;
    padding: 160px 0;
    overflow: hidden;

    /* 배경 이미지 : 네이비 + 별빛(우주) 이미지, 값 확정되면 아래에 채워주세요 */
    background-image: url('../images/section3_bg.png');
    background-color: var(--navy);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section3 .section3__inner {
    display: flex;
    justify-content: space-between;
}

/* 좌측 History 로고 타이포 */
.section3 .section3__logo {
    position: relative;
    flex: 0 0 auto;
}

.section3 .section3__logo .section3__logo-en {
    font-family: 'Cormorant Garamond', serif;
    display: block;
    text-align: right;
    color: #fff;
    font-size: 45px;
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 0;
}

.section3 .section3__logo .section3__logo-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 200px;
    color: #fff;
    line-height: 1;
    position: relative;
}

.section3 .section3__logo .section3__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: 8px;
    vertical-align: baseline;
}

/* 우측 텍스트 콘텐츠 */
.section3 .section3__content {
    flex: 1;
    margin-left: 80px;
}

.section3 .section3__content .section3__title {
    color: #fff;
    margin: 50px 0 30px;
}

.section3 .section3__content .fc_gold {
    color: var(--gold);
}

.section3 .section3__content .section3__desc {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 50px;
}

.section3 .section3__content .section3__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    color: #fff;
}

.section3 .section3__content .section3__btn:hover {
    background-color: #fff;
    color: var(--navy);
}

/* ==========================================================================
   Section4 : Medical Field
   ========================================================================== */
.section4 {
    width: 100%;
    padding: 140px 0 160px;
    background: #fff;
    overflow: hidden;
}

.section4 .section4__head {
    text-align: center;
    margin-bottom: 60px;
}

.section4 .section4__label {
    margin-bottom: 10px;
}

.section4 .section4__title {
    color: var(--black);
}

/* 슬라이더 wrap : 전체 화면 폭 사용, 화살표는 화면 가장자리 고정 */
.section4 .section4__slider-wrap {
    position: relative;
    width: 100%;
}

.section4 .section4__slider {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.section4 .section4__slider li {
    margin: 0;
}

.section4 .section4__slider .slick-list {
    margin: 0 -15px;
    overflow: hidden;
}

.section4 .section4__slider .slick-slide {
    margin: 0 15px;
}

.section4 .section4__slider:not(.slick-initialized) {
    opacity: 0;
    height: 520px;
    overflow: hidden;
}

.section4 .section4__item {
    position: relative;
}

/* 이미지와 카드/캡션의 기준 폭 : 항상 790px */
.section4 .section4__frame {
    position: relative;
    width: 100%;
    max-width: 790px;
    margin: 0 auto 150px;
    /* 카드가 내려갈 150px만큼 미리 공간 확보 */

}

.section4 .section4__img {
    width: 100%;
    overflow: hidden;
}

.section4 .section4__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 풀카드 : 기본은 숨김, 활성 슬라이드에서만 노출 */
.section4 .section4__card {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -150px;
    transform: translateX(-50%);
    width: 70%;
    background: #fff;
    padding: 36px 40px;
    box-sizing: border-box;
}

.section4 .slick-current .section4__card {
    display: block;

}

.section4 .section4__card .section4__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section4 .section4__card .section4__plus {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
}

.section4 .section4__card .section4__plus i {
    font-size: 35px;
    transition: transform 0.4s ease;
    transform: rotate(0deg);
}

.section4 .section4__card .section4__plus:hover i {
    transform: rotate(90deg);
}

.section4 .section4__card .section4__card-en {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    margin-bottom: 14px;
}

.section4 .section4__card .section4__card-desc {
    margin-bottom: 18px;
}

.section4 .section4__card .section4__card-text p {
    line-height: 1.7;
}

/* 미니 캡션 : 기본(비활성 슬라이드)에서만 노출, 이미지 바로 아래 */
.section4 .section4__caption {
    display: block;
    margin-top: 16px;
}

.section4 .slick-current .section4__caption {
    display: none;
}

/* 좌우 화살표 : 화면 가장자리에 고정 */
.section4 .section4__arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
}

.section4 .section4__arrow--prev {
    left: 5%;
}

.section4 .section4__arrow--next {
    right: 5%;
}

/* ==========================================================================
   Section5 : Clinic System
   ========================================================================== */
.section5 {
    position: relative;
    width: 100%;
    padding: 120px 0;
    background-color: #F3F5F8;
    overflow: hidden;
}

/* 좌측 워터마크 : "Yonsei." 배경이미지(png) */
.section5 .section5__bg-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/section5_bg_text.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    z-index: 1;
}

.section5 .center {
    position: relative;
    z-index: 2;
}

.section5 .section5__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 60px;
}

.section5 .section5__label {
    margin-bottom: 12px;
}

.section5 .section5__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 30px;
    border: 1px solid var(--navy);
    border-radius: 30px;
    white-space: nowrap;
}

.section5 .section5__more:hover {
    background-color: var(--navy);
    color: #fff;
}

/* 박스 리스트 */
.section5 .section5__list {
    display: flex;
    gap: 24px;
}

.section5 .section5__box {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* 이미지 크기는 디자이너가 1920px 기준으로 조정해서 제공 - 임의 크롭/높이 고정 금지 */
.section5 .section5__box img {
    display: block;
    width: 100%;
    height: auto;
}

.section5 .section5__box .section5__box-text {
    position: absolute;
    left: 40px;
    bottom: 36px;
    color: #fff;
}

.section5 .section5__box .section5__box-title {
    line-height: 1.4;
    margin-bottom: 14px;
}

.section5 .section5__box .section5__box-desc {
    line-height: 1.6;
    opacity: 0.9;
}

/* ==========================================================================
   Tablet (768px ~ 1024px)
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Section1 : Main Visual */
    .section1 .section1__text {
        left: 8%;
    }

    .section1 .section1__control {
        left: 8%;
    }

    .section1 .section1__quick {
        padding: 16px 24px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .section1 .section1__quick .section1__quick-title {
        padding-right: 20px;
        margin-right: 20px;
    }

    .section1 .section1__quick .section1__quick-item {
        margin-right: 20px;
    }

    /* Section2 : Intro */
    .section2 .section2__marquee-track span {
        font-size: 80px;
    }

    /* Section3 : History */
    .section3 .section3__inner {
        flex-direction: column;
        gap: 40px;
    }

    .section3 .section3__logo .section3__logo-title {
        font-size: 130px;
    }

    .section3 .section3__logo .section3__logo-en {
        font-size: 32px;
    }

    .section3 .section3__content {
        margin-left: 0;
    }

    /* Section4 : Medical Field */
    .section4 .section4__frame {
        max-width: 600px;
    }

    .section4 .section4__card {
        width: 85%;
        padding: 28px 30px;
    }

    .section4 .section4__card .section4__plus {
        width: 56px;
        height: 56px;
    }

    /* Section5 : Clinic System */
    .section5 .section5__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .section5 .section5__list {
        gap: 16px;
    }

    .section5 .section5__box .section5__box-text {
        left: 24px;
        bottom: 24px;
    }
}

/* ==========================================================================
   Mobile (max-width: 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {

    /* Section1 : Main Visual */
    .section1 .section1__visual {
        height: 100vh;
    }

    .section1 .section1__text {
        left: 6%;
        width: 88%;
    }

    .section1 .section1__control {
        left: 6%;
        gap: 8px;
    }

    .section1 .section1__control .section1__progress {
        width: 80px;
    }

    .section1 .section1__scroll {
        display: none;
    }

    .section1 .section1__quick-wrap {
        width: calc(100% - 6%);
        left: 3%;
        transform: none;
        bottom: 3%;
    }

    .section1 .section1__quick {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }

    .section1 .section1__quick .section1__quick-title {
        padding-right: 0;
        border-right: none;
        margin-right: 0;
    }

    .section1 .section1__quick .section1__quick-item {
        margin-right: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .section1 .section1__quick .section1__quick-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    /* Section2 : Intro */
    .section2 {
        padding: 80px 0 50px;
    }

    .section2 .section2__point::before {
        left: 20%;
    }

    .section2 .section2__point::after {
        left: 50%;
    }

    .section2 .section2__marquee-track span {
        font-size: 42px;
    }

    /* Section3 : History */
    .section3 {
        padding: 80px 0;
    }

    .section3 .section3__inner {
        flex-direction: column;
        gap: 30px;
    }

    .section3 .section3__logo .section3__logo-title {
        font-size: 72px;
    }

    .section3 .section3__logo .section3__logo-en {
        font-size: 20px;
        position: static;
        text-align: left;
        margin-bottom: 6px;
    }

    .section3 .section3__content {
        margin-left: 0;
    }

    .section3 .section3__content .section3__title {
        margin: 24px 0 16px;
    }

    .section3 .section3__content .section3__desc {
        margin-bottom: 30px;
    }

    /* Section4 : Medical Field */
    .section4 {
        padding: 80px 0 100px;
    }

    .section4 .section4__frame {
        max-width: 90%;
        margin: 0 auto 120px;
    }

    .section4 .section4__card {
        width: 92%;
        bottom: -120px;
        padding: 24px 20px;
    }

    .section4 .section4__card .section4__plus {
        width: 48px;
        height: 48px;
    }

    .section4 .section4__card .section4__plus i {
        font-size: 24px;
    }

    .section4 .section4__arrow {
        font-size: 22px;
    }

    .section4 .section4__arrow--prev {
        left: 2%;
    }

    .section4 .section4__arrow--next {
        right: 2%;
    }

    /* Section5 : Clinic System */
    .section5 {
        padding: 60px 0;
    }

    .section5 .section5__bg-text {
        background-size: auto 60%;
        opacity: 0.5;
    }

    .section5 .section5__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 30px;
    }

    .section5 .section5__list {
        flex-direction: column;
        gap: 16px;
    }

    .section5 .section5__box .section5__box-text {
        left: 20px;
        bottom: 20px;
    }
}