@charset "utf-8";

@font-face {
    font-family: 'DDH';
    src: url('./fonts/subset-Cafe24Dangdanghae.woff2') format('woff2'),
        url('./fonts/subset-Cafe24Dangdanghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ESdream';
    src: url('./fonts/subset-S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

#main_banner {
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 80rem;
    padding-top: 13rem;
}

#main_banner .mb-title {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}

#main_banner .mb-title h3 {
    position: absolute;
    top: calc(18% + 13rem);
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    padding: 0 2rem;
    font-family: 'ESdream';
    font-size: 3.2rem;
    font-weight: 300;
    color: #fff;
    text-align: center;
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.20);
    word-break: keep-all;
}

/* 단일 h2: 그림자 레이어 + background-clip 레이어 분리(시각만 aria-hidden), 제목은 sr-only로 1회 노출 */
#main_banner .mb-title h2.mb-title-name {
    position: absolute;
    top: calc(45% + 13rem);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    padding: 0 2rem;
    margin: 0;
    font-family: 'DDH';
    font-size: 10rem;
    font-weight: normal;
    text-align: center;
}

#main_banner .mb-title .mb-title-name__visual {
    position: relative;
    display: block;
    width: 100%;
    min-height: 1em;
}

#main_banner .mb-title .mb-title-name__layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    gap: 28vw;
}

#main_banner .mb-title .mb-title-name__layer span {
    background: linear-gradient(to bottom, #fff 40%, #31E9F8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#main_banner .mb-title .mb-title-name__layer--shadow span {
    text-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.25);
}

.mb-swiper .swiper-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 어항형: 알약 + 상단만 물결 (CSS 내 data URI clip-path, HTML 구조 추가 없음) */
.mb-swiper {
    position: relative;
    width: 90%;
    height: 105%;
    border-radius: 13rem;
    overflow: hidden;
    user-select: none;
    /* clip-path: 인라인 SVG #aquariumWave 참조 (버튼 클릭 시 path d 변경으로 물결 애니메이션) */
    clip-path: url("#aquariumWave");
    -webkit-clip-path: url("#aquariumWave");
    border-radius: 0;
}

.mb-swiper .swiper-wrapper {
    height: 100%;
}

.mb-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* height: % 는 슬라이드 높이가 확정되지 않으면 iOS 웹킷에서 auto 로 떨어져 object-fit 가 깨짐 → 박스에 맞춤 */
.mb-swiper .swiper-slide img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    -webkit-user-drag: none;
}

/* 리스트별 제목은 JS(mb-slide-title 동기화)만 쓰이고 레이아웃 높이엔 포함되면 안 됨 */
.mb-swiper .slide-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mb-swiper .swiper-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.125) 20%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.125) 80%);
}

/* .mb-swiper .swiper-slide::before {content: ''; position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,.75), transparent);} */

#main_banner .swiper-pager {
    position: absolute;
    bottom: 10rem;
    left: 4%;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 0 17rem 0 4rem;
}

#main_banner .swiper-pagination {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: 'Pretendard';
    font-size: 0;
}

#main_banner .swiper-pagination-current,
#main_banner .swiper-pagination-total {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 600;
    color: #00B7C6;
}

#main_banner .swiper-pagination-current {
    left: 0;
}

#main_banner .swiper-pagination-total {
    right: 13rem;
    font-weight: 500;
    color: #fff;
}

#main_banner .swiper-control {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

#main_banner button {
    position: static;
    transform: none;
    width: 4rem;
    aspect-ratio: 1 / 1;
    margin: 0;
    font-size: 2.4rem;
    color: #fff;
}

#main_banner button::after {
    display: none;
}

#main_banner .swiper-autoplay-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    aspect-ratio: 1 / 1;
    margin: 0;
    font-size: 3rem;
    color: #fff;
}

#main_banner .swiper-progress-bar-wrap {
    max-width: 22rem;
    width: 30vw;
    min-width: 18rem;
    height: 0.4rem;
    background: #ddd;
}

#main_banner .swiper-progress-bar {
    height: 100%;
    background: #00B7C6;
}

#main_banner .mb-slide-title {
    position: absolute;
    bottom: 10rem;
    right: 2.5%;
    z-index: -1;
    font-size: 2rem;
    font-weight: 500;
    color: #222;
}

#main_banner .mb-slide-title::before {
    content: '';
    position: absolute;
    bottom: -1.75rem;
    right: -5rem;
    width: 26rem;
    height: 2rem;
    background: url('./img/slide_name_tail.png') right bottom/contain no-repeat;
}

#main_banner #bo_btn {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    z-index: 2000;
}

#main_banner #bo_btn a {
    display: inline-block;
    font-size: 2.5rem;
    color: #999;
    transition: all .3s ease;
}

#main_banner #bo_btn a:hover {
    opacity: 0.7;
}


@media all and (max-width:1600px) {
    #main_banner .mb-title h2.mb-title-name {
        font-size: 8rem;
    }

    #main_banner .mb-title h3 {
        font-size: 2.8rem;
    }
}

@media all and (max-width:1440px) {
    #main_banner {
        padding-top: 11rem;
        height: calc(var(--vh, 1vh) * 100 - 6.6rem);
    }

    .mb-swiper {
        height: 100%;
    }

    #main_banner .mb-slide-title {
        font-size: 1.8rem;
    }

    #main_banner .mb-title h2.mb-title-name {
        font-size: 7rem;
    }

    #main_banner .mb-title h3 {
        font-size: 2.6rem;
    }
}

@media all and (max-width:1280px) {
    #main_banner {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-top: 10rem;
        height: auto !important;
        aspect-ratio: 1/0.7;
        min-height: 50rem;
    }

    .mb-swiper {
        flex: 1 1 auto;
        min-height: 0;
        align-self: stretch;
        height: auto !important;
        max-height: none;
        clip-path: none;
        -webkit-clip-path: none;
        width: 100%;
    }

    #main_banner .mb-title h2.mb-title-name {
        top: 55%;
        font-size: 6rem;
    }

    #main_banner .mb-title .mb-title-name__layer {
        gap: 35vw;
    }

    #main_banner .mb-title h3 {
        top: calc(14% + 13rem);
        font-size: 2.4rem;
    }

    #main_banner .swiper-pager {
        bottom: 5rem;
        left: 50%;
        transform: translateX(-50%);

    }

    #main_banner .swiper-progress-bar-wrap {
        background: rgba(255, 255, 255, .5);
    }

    #main_banner .swiper-progress-bar {
        background: #fff;
    }

    #main_banner .swiper-pagination-current {
        color: #fff;
    }

    #main_banner .swiper-pagination-total {
        color: rgba(255, 255, 255, .75);
    }
}

@media all and (max-width:1024px) {
    #main_banner .mb-title h2.mb-title-name {
        top: 58%;
        font-size: 5.4rem;
    }

    #main_banner .mb-title h3 {
        font-size: 2.2rem;
    }
}

@media all and (max-width:768px) {
    #main_banner .mb-title h2.mb-title-name {
        font-size: 4.4rem;
    }

    #main_banner .mb-title h3 {
        font-size: 2rem;
        top: auto;
        bottom: 65%;
    }

    #main_banner .swiper-pager {
        bottom: 3rem;

    }
}

@media all and (max-width:640px) {
    #main_banner {
        padding-top: 9rem;
    }

    #main_banner .swiper-pagination-current,
    #main_banner .swiper-pagination-total {
        font-size: 1.6rem;
    }

    #main_banner .mb-title h2.mb-title-name {
        top: auto;
        bottom: 6.5rem;
        transform: translateX(-50%);
    }

    #main_banner .mb-title .mb-title-name__layer {
        gap: 0;
    }

    #main_banner .swiper-progress-bar-wrap {
        min-width: 15rem;
    }

    #main_banner button {
        width: 3rem;
        font-size: 2rem;
    }

}

@media all and (max-width:480px) {
    #main_banner .mb-title h3 {
        font-size: 1.8rem;
        top: 16rem;
    }

    #main_banner .mb-title h2.mb-title-name {
        font-size: 3.6rem;
    }
}