@charset "utf-8";

/* ==========================================================================
    LAYOUT CUSTOM
    ========================================================================== */
header{
    & .marquee-slider{
        height: 51px;
        transition: var(--header-transition);
        & .item-marquee{color: rgba(255,255,255,.5);}
    }
    &.fixed .marquee-slider{height: 0}
}
.transparent-header:not(.fixed){
    @media (width <= 1200px) {
        & .marquee-container{height: 46px;}
    }
    @media (width <= 640px) {
        & .marquee-container{height: 40px;}
        & .marquee-container .marquee-event{font-size: 12px;}
    }
}

:root{
    --mvis-bottom-height: 64px;
}
@media (width <= 1024px) {
    :root {
        --mvis-bottom-height: 58px;
    }
}

.main-container {
    position: relative;
    &#content{padding-bottom: 0;}
}



/*메인비주얼 fix와 관련*/
.fixed-container::after{content: ""; display: block; width: 100%; height: 100vh;}
.cont-container{position: relative;}


/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual{
    position: fixed;
    width: 100%;
    color: #fff;
    overflow: hidden;
    & .main-vis{position: relative; width: 100%; height: 100vh; background-color: #fff; overflow: hidden}
    & .main-vis::after{content: ""; position: absolute; inset: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.15); pointer-events: none;}
    & .main-vis .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;}
    /*& .main-vis .move01{animation: move01 15s ease-in-out forwards;}*/
    /*& .main-vis .move02{animation: move02 15s ease-in-out forwards;}*/
    & .cont-area{position: relative; display: block; width: 100%; height: 100%;}
    & .vis-text{position: absolute; bottom: 0; width: 50%; padding: 0 var(--main-gap) 0;  letter-spacing: 0.25px;}
    & .vis-text .sub-text{font-family: "jaf-domus-titling-web", sans-serif; font-size: 14px; font-weight: bold; color: rgba(255,255,255,.7); letter-spacing: 0.25px; margin-bottom: 16px;}
    & .vis-text .title{position: relative; display: flex; align-items: center; height: var(--mvis-bottom-height); border-top: 1px solid rgba(255,255,255,.3);}
    & .vis-text .title strong{display: block; font-size: 18px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    & .static-text{position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center;  z-index: 1; user-select: none; pointer-events: none;}
    & .static-wrapper{position: relative; top: -10px;}
    & .main-copy{position: relative;}
    & .main-copy img{width: 295px;}
    & .btn-search{margin-top: 30px; pointer-events: initial;}
    & .btn-search > a{display: inline-flex; justify-content: center; align-items: center; width: 175px; height: 50px; border: 2px solid #fff; border-radius: 25px; transition: .1s;}
    & .btn-search span{font-size: 16px; font-weight: bold;  line-height: 20px; letter-spacing: 0; padding-left: 25px; background: url('/assets/site/img/common/ico_glass01w.png') no-repeat 0 center / 20px auto; transition: .1s;}
    & .btn-search > a:hover{color: #222; border-color: #222; background-color: #fff;}
    & .btn-search > a:hover span{background: url('/assets/site/img/common/ico_glass01.png') no-repeat 0 center / 20px auto;}
    & .main-copy{opacity: 0; animation: fadeUp .5s ease-in-out forwards .2s;}
    & .btn-search{opacity: 0; animation: fadeUp .5s ease-in-out forwards .5s;}
    /*& .move-mouse{position: absolute; bottom: 20px; left: 50%; translate: -50% 0; font-size: 14px; font-weight: 600;  text-align: center; padding-top: 44px; background: url('../img/common/ico_mouse01w.png') no-repeat center 0 / 22px auto; }*/
    & .move-mouse{position: absolute; bottom: 20px; left: 50%; translate: -50% 0; text-align: center; z-index: 5;}
    /*& .move-mouse .img-mouse{animation: bounce01 .3s linear infinite alternate;}*/
    & .move-mouse .img-mouse{position: relative;}
    & .move-mouse .img-mouse::after{content: ""; display: block; position: absolute; top: 9px; left: calc(50% - 3px); width: 6px; height: 6px; background-color: #fff; border-radius: 50%; animation: bounce01 .3s linear infinite alternate;}
    & .move-mouse .img-mouse img{width: 22px;}
    & .move-mouse .txt-scroll{ font-size: 14px; font-weight: 600; color: rgba(255,255,255,.5); margin-top: 8px;}
    & .sw-mvis  .swiper-wrapper{transition-timing-function: ease-in-out;}
    & .controls{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50%;
        padding: 0 var(--main-gap);
        z-index: 1;
        & .inner-controls{position: relative; height: var(--mvis-bottom-height);}
        & .swiper-horizontal>.swiper-pagination-progressbar,
        & .swiper-pagination-progressbar.swiper-pagination-horizontal{top: 0; height: 1px; background-color: rgba(255,255,255,.3);}
        & .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: rgba(255,255,255,1);}
        & .direction{position: absolute; bottom: 0; right: -6px; display: flex; align-items: center; width: 120px; height: 100%;}
        & .arr-sw{width: 8px;}
        & .sw-mvis-next,
        & .sw-mvis-prev{margin-top: 0; width: 20px; height: 100%; translate: 0 -50%; opacity: .3; transition: .3s ease-in-out;}
        & .sw-mvis-next{right: 0;}
        & .sw-mvis-prev{left: 0}
        & .sw-mvis-next:hover,
        & .sw-mvis-prev:hover{opacity: 1;}
        & .swiper-pagination-fraction{position: relative; left: auto; bottom: auto; display: flex; justify-content: center; align-items: center; gap: 19px; width: 100%; font-size: 16px; font-weight: bold; text-align: center;}
        & .swiper-pagination-fraction::before{content: ""; position: absolute; left: 50%; display: block; width: 1px; height: 14px; background-color: rgba(255,255,255,.2);}
        & .swiper-pagination-fraction .current{color: rgba(255,255,255,1); }
        & .swiper-pagination-fraction .total{color: rgba(255,255,255,.5);}
    }
    @media (width <= 1024px) {
        & .vis-text .sub-text{font-size: 13px; margin-bottom: 14px;}
        & .vis-text .title strong{font-size: 17px;}
        & .move-mouse .txt-scroll{font-size: 13px;}
        & .controls{
            & .swiper-pagination-fraction{gap: 15px;}
        }
    }
    @media (width <= 860px) {
        & .main-copy img{width: 268px;}
        & .controls{display: none;}
        & .vis-text{width: 100%; bottom: 90px; text-align: center;}
        & .vis-text .sub-text{margin-bottom: 12px;}
        & .vis-text .title{height: auto; border-top: 0; justify-content: center;}
        & .move-mouse{left: auto; translate: 0 0; width: 100%; padding: 0 var(--main-gap);}
        & .move-mouse > a{position: relative; display: block;}
        & .move-mouse > a::before,
        & .move-mouse > a::after{content: ""; display: block; position: absolute; top: 21px; width: calc(50% - 26px); height: 1px; background-color: rgba(255,255,255,.2);}
        & .move-mouse > a::before{left: 0;}
        & .move-mouse > a::after{right: 0;}
    }
    @media (width <= 640px) {
        & .main-vis{height: 100svh;}
        & .main-copy img{width: 235px;}
        & .btn-search{display: none;}
        & .btn-search > a{width: 146px; height: 42px; border-width: 1px; border-radius: 21px;}
        & .btn-search span{font-size: 14px; padding-left: 24px; background-size: 17px auto;}
        & .vis-text .sub-text{font-size: 12px;}
        & .vis-text .title strong{font-size: 16px;}
        & .move-mouse{bottom: 14px;}
        & .move-mouse .img-mouse img{width: 22px;}
        & .move-mouse > a::before,
        & .move-mouse > a::after{top: 18px;}
        & .move-mouse .txt-scroll{font-size: 12px;}
    }
}
/* ==========================================================================
    숙소 검색
  ========================================================================== */
.main-search{
    max-width: 780px;
    & .s-backdrop{display: none;}
    & .selection-bar {
        max-width: 370px;
        & .sel-info{padding: 5px;}
        & .btn-tab{padding: 0;}
        & .btn-tab:not(:last-child)::after{display: none;}
    }
    & .selection-container {
        max-height: 0;
        visibility: hidden;
        opacity: 0;
        margin-top: 30px;
        transition: opacity .7s ease-out;
        & .top-tab{display: flex;}
        & .cont-tab{z-index: 190;}
        & .tab-content{position: relative; top: auto; min-height: 100px; background: url('/assets/site/img/main/main_copy01.png') no-repeat center 10px / 295px auto;margin-top: 20px;}
    }
    & .enter-selection{
        margin-top: 16px;
        transition: .45s ease-out .08s;
        & .sel-friends{display: flex;}
        & .sel-info{display: none;}
        & .main-copy{display: block; margin-top: 40px;}
    }
    &.enter-search {
        & .obj-friends .sole{display: none;}
        & .enter-selection {
            margin-top: -37px;
            & .main-copy,
            & .sel-friends{display: none;}
            & .sel-info{display: flex;}
        }
        & .selection-container{visibility: visible; opacity: 1; max-height: 100%;}
        /*& .flash-effect {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; animation: flash01 0.5s steps(1, start) forwards; z-index: 4;}*/
        & .flash-effect {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; animation: flash01 0.4s cubic-bezier(1, 0, 0, 1)  forwards; z-index: 4;}
    }
    @media (width <= 860px) {
        & .selection-bar {max-width: 340px;}
        & .enter-selection{margin-top: 10px;}
        &.enter-search {
            & .enter-selection {
                margin-top: -33px;
                & .main-copy{margin-top: 34px}
                & .main-copy img{max-width: 268px;}
            }
        }
    }
    @media (width <= 640px) {
        & .s-backdrop{display: block;}
        & .selection-bar {max-width: 330px;}
        &.enter-search {
            & .enter-selection {
                margin-top: -28px;
                & .main-copy{margin-top: 30px;}
                & .main-copy img{max-width: 235px;}
            }
            & .selection-container {
                margin-top: 20px;
                & .cont-tab{z-index: 205;}
                & .tab-content{background-size: 280px auto;}
            }
        }
    }
}
.main-search-section{
    position: relative;
    min-height: 760px;
    scroll-margin-top: var(--header-height);
    padding-top: 180px;
    padding-bottom: 142px;
    background-color: var(--bg-color);
    transition: .3s ease-out;
    &:has(.enter-search){padding-top: 0;}
    @media (width <= 1280px) {
        padding-top: 140px;
        padding-bottom: 122px;
    }
    @media (width <= 1024px) {
        min-height: 640px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    @media (width <= 860px) {
        min-height: calc(100svh - 108px);
        padding-top: 80px;
        padding-bottom: 80px;
    }
}