@charset "utf-8";

/* 메인 공통 */
.main-container {
    position: relative;

    & .sec {position: relative;
        & .slide-fix {position: absolute; top: 100px; left: 0; width: 100%; z-index: 2;
            & .inner-lg {display: flex; justify-content: space-between; align-items: center;
                & p {font-size: 15px; font-weight: 500;}
                & a {font-size: 14px; font-weight: 500; text-transform: uppercase;
                    & span {color: #999;}
                    & i {margin: 0 0 0 4px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sec {
            & .slide-fix {top: 30px;
                & .inner-lg {
                    & p {font-size: 12px;}
                    & a {font-size: 12px;}
                }
            }
        }
    }

    @media (orientation: landscape) and (max-width: 920px) and (min-aspect-ratio: 16/9) {
        /* 폰이면서 가로모드 대응 */
        & .sec{
            height: 800px !important;
            min-height: 800px !important;
        }
    }
}

/* 모델 알아보기 - (재활용) */
.more-arr{
    position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; font-weight: 400; color: #111; padding: 0 0 6px;
    &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,0.5);}
    &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: rgba(0,0,0,0.5);}
    
    & span{}
    & .arr{
        position: relative; display: inline-block; width: 7px; height: auto; aspect-ratio: 1 / 1; border-radius: 0; transition: all 0.3s ease; 
        border: none; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg) !important;
        &:before{display: none;}
    }

    &:hover {
        /* &:before{opacity: 0; transition: 0.1s;}
        &:after{width: 100%; transition: 0.2s ease; transition-delay: 0.15s;} */
        &:before{opacity: 0; transition: 0.3s;}
        &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
    }

    &.white{
        color: #fff;
        &:before{background-color: rgba(255,255,255,0.5);}
        &:after{background-color: rgba(255,255,255,0.5);}

        & .arr{
            border-color: #fff;
            &:before{border-color: #fff;}
        }
    }
}

/*  모델 알아보기 그룹핑 - (재활용) */
.more-arr-wrap{
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}

/* 각 메인섹션 상단 타이틀 + 링크 (재활용) */
.sec-tit{
    position: absolute; z-index: 2; top: 0; left: 0; width: 100%; padding: 76px 0 0;
    & .inner-lg{
        display: flex; align-items: center;
    }
    & .title{
        position: relative; display: block; font-size: 14px; font-weight: 400; padding: 0 0 5px;
        &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,0.5);}
        &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: rgba(0,0,0,0.5);}
        &:hover{
            &:before{opacity: 0; transition: 0.3s;}
            &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
        }
    }
    & .view-link{
        display: inline-flex; flex-wrap: wrap; align-items: center; margin-left: auto; font-size: 14px; font-weight: 500; text-transform: uppercase;
        &:after{content: ""; display: inline-block; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 1px solid #111; border-right: 1px solid #111; transform: rotate(45deg); margin: 0 0 0 10px;}

        & span{color: #999;}
        & span + span{}
        & span + span:before{content: "-"; color: #999; margin: 0 0.3em;}
        & span:last-child{color: #111;}
    }

    &.white{
        color: #fff;
        & .title{
            &:before{background: rgba(255,255,255,0.5);}
            &:after{background: rgba(255,255,255,0.5);}
        }
    }

    @media (width <= 1400px){
        padding: 3.5% 0 0;
    }
    @media (width <= 860px){
        padding: 30px 0 0;
    }
    @media (width <= 640px){
        & .title{font-size: 13px;}
        & .view-link{
            font-size: 12px;
            &:after{margin: 0 0 0 6px;}
        }
    }
}

/* 가운데 정렬 - 섹션 상단 타이틀 */
.sec-tit-center{
    text-align: center; padding: 74px 0 56px;
    & .title{font-size: 32px; font-weight: 400; line-height: 1.2;}
    & .title.small{font-size: 26px;}
    & .des{font-size: 16px; font-weight: 400; padding: 29px 0 0; text-wrap: balance;}

    @media (width <= 860px){
        padding: 65px 0 30px;
        & .title{font-size: 30px;}
        & .title.small{font-size: 22px;}
    }
    @media (width <= 640px){
        padding: 50px 0 30px;
        & .title{font-size: 24px;}
        & .title.small{font-size: 20px;}
        & .des{font-size: 15px;}
    }
}

/* 슬라이드 프로그레스 (재활용) */
.main-container .swiper .dots,
.main-container .sec > .dots{
    position: absolute; z-index: 1; top: auto; bottom: 73px; left: 0; width: 100%; display: flex; justify-content: center; gap: 20px;

    & li{
        width: auto; height: auto; background: none; opacity: initial; margin: 0;

        & button{
            position: relative; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #333;
            &:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #222;}

            & .title{display: none;}
            & svg.ring{
                width: 14px; height: 14px; transform: rotate(-90deg); border-radius: 50%; box-shadow: inset 0 0 0 2px transparent;

                & circle{fill: none; stroke-width: 4; opacity: 0;}
                & circle.ring-bg{stroke: transparent;}
                & circle.ring-progress{stroke: #000; stroke-dasharray: 100.5; stroke-dashoffset: 100.5;}
            }
        }

        &.swiper-pagination-bullet-active{

            & button{
                &:before{opacity: 0;}
                & svg.ring{
                    box-shadow: inset 0 0 0 2px rgba(0,0,0,0);
                    & circle{opacity: 1;}
                    & circle.ring-progress{animation: ring 4.0s linear forwards;}
                    & circle.ring-progress.pause{animation-play-state: paused !important;}
                }
            }
        }
    }

    &.white{
        & li{
            & button{
                &:before{background-color: #fff;}
                & svg.ring{
                    & circle.ring-progress{stroke: #fff;}
                }
            }
            &.swiper-pagination-bullet-active{
                & button{
                    & svg.ring{
                        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.0);
                    }
                }
            }
        }
    }

    &[data-dot-time="5.0"] li.swiper-pagination-bullet-active button svg.ring circle.ring-progress{animation: ring 5.0s linear forwards;}

    @media (width <= 860px){
        bottom: 40px;
    }
}

/* 애니메이션 나가기 */
.leave-anim {
    animation: slideLeave 0.7s ease forwards;
}

/* 애니메이션 들어오기 */
.enter-anim {
    animation: slideEnter 0.8s ease forwards;
}


/***************************************************/
/* 메인 각 섹션별 처리 ▼ */
/***************************************************/

/* 메인 섹션 - visual */
.visual {
    width: 100%; overflow: hidden; height: var(--view-height);
    @media (hover: hover) and (pointer: fine) {
        /* 터치가 아닌 장치에서만 적용 */
        /* min-height: 800px; */
    }

    & .visual-swiper{
        position: relative; width: 100%; height: 100%; overflow: hidden;

        & .list{}
        & .item{
            position: relative; overflow: hidden; height: 100%;
            
            & .visual-bg{
                position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 1920px; height: auto; aspect-ratio: 16 / 9;
                
                & img{display: block; width: 100%; height: 100%; object-fit: cover;}
                & iframe{width: 100%; height: 100%; object-fit: cover;}

                &.white{
                    &:after{content: ""; pointer-events: none; position: absolute; inset: 0; background: rgba(0,0,0,0.3);}
                }
            }
            & .visual-txt{
                position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0 0 127px;

                & h2{
                    margin: 0 0 30px; letter-spacing: -0.15em;

                    & span{font-size: 36px; line-height: 1; font-weight: 400; opacity: 0; transition: all 1.0s; filter: blur(10px);}
                    & span:nth-child(1) {animation-delay: 0ms !important;     transition-delay: 0ms;}
                    & span:nth-child(2) {animation-delay: 100ms !important;   transition-delay: 100ms;}
                    & span:nth-child(3) {animation-delay: 200ms !important;   transition-delay: 200ms;}
                    & span:nth-child(4) {animation-delay: 300ms !important;   transition-delay: 300ms;}
                    & span:nth-child(5) {animation-delay: 400ms !important;   transition-delay: 400ms;}
                    & span:nth-child(6) {animation-delay: 500ms !important;   transition-delay: 500ms;}
                    & span:nth-child(7) {animation-delay: 600ms !important;   transition-delay: 600ms;}
                    & span:nth-child(8) {animation-delay: 700ms !important;   transition-delay: 700ms;}
                    & span:nth-child(9) {animation-delay: 800ms !important;   transition-delay: 800ms;}
                    & span:nth-child(10){animation-delay: 900ms !important;   transition-delay: 900ms;}
                    & span:nth-child(11){animation-delay: 1000ms !important;  transition-delay: 1000ms;}
                    & span:nth-child(12){animation-delay: 1100ms !important;  transition-delay: 1100ms;}
                    & span:nth-child(13){animation-delay: 1200ms !important;  transition-delay: 1200ms;}
                    & span:nth-child(14){animation-delay: 1300ms !important;  transition-delay: 1300ms;}
                }
                & .more-arr{
                    transform: translateY(30%); opacity: 0;
                }

                &.white{
                    color: #fff;
                }
            }
            &.swiper-slide-active {
                & .visual-txt {
                    & h2 {
                        & span {/* animation: textBlur 1s both; */ opacity: 1; filter: blur(0);}
                    }
                    & .more-arr {
                        animation: textClip 1s both; animation: textFadeup 1s both; animation-delay: 850ms !important;
                    }
                }
            }
        }
        & .visual-txt{
            position: absolute; z-index: 1; bottom: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center;

            & h2{
                margin: 0 0 31px; letter-spacing: -0.15em;

                & span{font-size: 32px; line-height: 1; font-weight: 400; transition: all 1.0s; opacity: 0; filter: blur(10px); animation: textBlur2 1s both;}
                & span:nth-child(1) {animation-delay: 0ms !important;     transition-delay: 0ms;}
                & span:nth-child(2) {animation-delay: 100ms !important;   transition-delay: 100ms;}
                & span:nth-child(3) {animation-delay: 200ms !important;   transition-delay: 200ms;}
                & span:nth-child(4) {animation-delay: 300ms !important;   transition-delay: 300ms;}
                & span:nth-child(5) {animation-delay: 400ms !important;   transition-delay: 400ms;}
                & span:nth-child(6) {animation-delay: 500ms !important;   transition-delay: 500ms;}
                & span:nth-child(7) {animation-delay: 600ms !important;   transition-delay: 600ms;}
                & span:nth-child(8) {animation-delay: 700ms !important;   transition-delay: 700ms;}
                & span:nth-child(9) {animation-delay: 800ms !important;   transition-delay: 800ms;}
                & span:nth-child(10){animation-delay: 900ms !important;   transition-delay: 900ms;}
                & span:nth-child(11){animation-delay: 1000ms !important;  transition-delay: 1000ms;}
                & span:nth-child(12){animation-delay: 1100ms !important;  transition-delay: 1100ms;}
                & span:nth-child(13){animation-delay: 1200ms !important;  transition-delay: 1200ms;}
                & span:nth-child(14){animation-delay: 1300ms !important;  transition-delay: 1300ms;}
            }
            & .more-arr{
                transform: translateY(30%); opacity: 0;
                animation: textClip 1s both; animation: textFadeup 1s both; animation-delay: 850ms !important;
            }

            &.white{
                color: #fff;
            }
        }
        & .control{
            position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: 0; width: 100%; padding: 0 70px; display: flex; flex-wrap: wrap; justify-content: space-between;
            & .btn-visual{
                position: relative; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 0; background: rgba(17,17,17,0.2);
                &:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: auto; aspect-ratio: 1;}
                &.btn-visual-prev:before{transform: translate(-50%, -50%) rotate(-45deg); border-top: 2px solid #fff; border-left: 2px solid #fff;}
                &.btn-visual-next:before{transform: translate(-50%, -50%) rotate(45deg); border-top: 2px solid #fff; border-right: 2px solid #fff;}

                &:hover{
                    background: rgba(17,17,17,0.6);
                }
            }
        }
    }
    @media (width <= 1800px){
        & .visual-swiper{
            & .control{
                padding: 0 20px;
            }
        }
    }
    @media (width <= 1400px){

    }
    @media (width <= 1280px){
        height: 900px;
        & .visual-swiper {
            & .item {
                & .visual-bg {width: 1720px; min-width: auto;}
            }
        }
    }
    @media (width <= 860px){
        height: 760px;
        & .visual-swiper {
            & .item {
                & .visual-bg {width: 1580px; min-width: auto;}
                & .visual-txt {
                    padding: 0 0 70px;
                    & h2{
                        & span {font-size: 30px;}
                    }
                }
            }
            & .control{display: none;}
            & .visual-txt {
                bottom: 80px;
                & h2{
                    margin: 0 0 25px;
                    & span {font-size: 28px;}
                }
            }
        }
    }
    @media (width <= 640px){
        height: 620px;
        & .visual-swiper {
            & .item {
                & .visual-txt {
                    padding: 0 0 60px;
                    & h2{
                        margin: 0 0 10px;
                        & span {font-size: 24px;}
                    }
                }
            }
            & .visual-txt {
                
                & h2{
                    margin: 0 0 10px;
                    & span {font-size: 22px;}
                }
            }
        }
    }
}

/* 메인 섹션 - collection */
.collection{
    position: relative;

    & .collection-swiper{
        position: relative; overflow: hidden; height: 100%;

        & > .list{

            & > .item{
                overflow: hidden;

                &:nth-child(1){}
                &:nth-child(2){}
                &:nth-child(3){}
                &:nth-child(4){}
                &:nth-child(5){}
                &:nth-child(6){}

                & .collection-nested-swiper{
                    position: relative;

                    & > .list-nested{

                        & > .item-nested{
                            height: var(--view-height); overflow: hidden; background-color: #ddd;
                            @media (hover: hover) and (pointer: fine) {
                                /* 터치가 아닌 장치에서만 적용 */
                                /* min-height: 800px; */
                            }
                            
                            & .img{
                                width: 100%; height: 100%;

                                & img{width: 100%; height: 100%; object-fit: cover;}
                                & img.m{display: none;}
                            }
                            & .more-arr{
                                opacity: 0; visibility: hidden; pointer-events: none;
                                position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
                            }
                        }
                    }
                }
            }
        }
        & > .dots-collection{
            position: absolute; z-index: 2; top: auto; bottom: 204px; left: 50%; right: auto; transform: translateX(-50%); display: flex; flex-wrap: wrap; width: auto; justify-content: center; gap: 0;

            & > li{
                opacity: 1; margin: 0; width: auto; height: auto; display: block; border-radius: 0; background: none;

                & button{
                    display: block; text-align: center;
                    & .title{display: inline-block; margin: 0 auto; font-size: 32px; font-weight: 400; line-height: 1;}
                }
            }
            & > li:not(.swiper-pagination-bullet-active){display: none;}
            & > li.swiper-pagination-bullet-active{}
        }
        & > .control{
            position: absolute; z-index: 2; bottom: 204px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 820px; justify-content: center; width: 100%;

            & .btn-collection{position: relative; display: block; width: 36px; height: auto; aspect-ratio: 1 / 1; background-color: transparent; font-size: 0;}
            & .btn-collection:before{content: ""; position: absolute; width: 7px; height: auto; aspect-ratio: 1 / 1; border-top: 2px solid #111; top: 50%; left: 50%;}
            & .btn-collection.btn-collection-prev:before{border-left: 2px solid #111; transform: translate(-30%, -50%) rotate(-45deg);}
            & .btn-collection.btn-collection-next:before{border-right: 2px solid #111; transform: translate(-70%, -50%) rotate(45deg);}
        }
        & .nested-dots-wrap{
            position: absolute; z-index: 2; bottom: 144px; left: 0; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;

            & > div{
                width: auto; display: flex; flex-wrap: wrap; gap: 34px; top: auto; bottom: auto; left: auto; right: auto;

                & > li{
                    margin: 0; opacity: 1; background: none; width: auto; height: auto; display: block; border-radius: 0;

                    & button{

                        & .title{position: relative; display: block; font-size: 16px; font-weight: 400; line-height: 1; color: #a6a6a7; padding: 11px 0; transition: 0.3s ease;}
                        & .title:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: rgba(0,0,0,0.5); transition: 0.4s ease;}
                        & .title:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: rgba(0,0,0,0.5);}

                        &:hover{
                            & .title{color: #686868;}
                            & .title:before{width: 100%;}
                        }
                    }

                    &.swiper-pagination-bullet-active{
                        & button{
                            & .title{color: #000;}
                            & .title:before{width: 100%;}
                            &:hover{
                                & .title:before{opacity: 0; transition: 0.3s;}
                                & .title:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
                            }
                        }
                    }
                }
            }
            & > div:not(.active){display: none;}
        }
        & .get-current-slide-link{
            z-index: 1; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
        }
    }

    @media (width <= 1280px){
        & .collection-swiper{
            & > .control{gap: 400px;}
            & > .list{
                & > .item{
                    & .collection-nested-swiper{
                        & > .list-nested{
                            & > .item-nested{height: 900px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px){
        & .collection-swiper {
            & > .list {
                & > .item {
                    & .collection-nested-swiper {
                        & > .list-nested {
                            & > .item-nested {
                                /* min-height: 90svh; */ height: 760px;
                                & .img{
                                    & img:not(.m){display: none;}
                                    & img.m{display: block;}
                                }
                                & .more-arr{
                                    bottom: 55px;
                                }
                            }
                        }
                    }
                }
            }
            & > .dots-collection {
                & > li {
                    & button {
                        & .title {font-size: 28px;}
                    }
                }
            }
            & > .control{
                gap: 240px; bottom: 160px;
                & .btn-collection{width: 30px;}
            }
            & > .dots-collection{
                bottom: 160px;
            }
            & .nested-dots-wrap{
                bottom: 100px;
                & > div{
                    & > li{
                        & button{
                            & .title{font-size: 15px;}
                        }
                    }
                }
            }
            & .get-current-slide-link{
                bottom: 55px;
            }
        }
    }
    @media (width <= 640px){

        & .collection-swiper {
            & > .list {
                & > .item {
                    & .collection-nested-swiper {
                        & > .list-nested {
                            & > .item-nested {
                                height: 620px; min-height: auto;
                            }
                        }
                    }
                }
            }
            & > .dots-collection{
                bottom: 145px;
                & > li {
                    & button{
                        & .title{font-size: 22px;}
                    }
                }
            }
            & .nested-dots-wrap {
                bottom: 100px;
                & > div {
                    gap: 20px;
                    & > li{position: relative;}
                    & > li + li{}
                    & > li + li:before{content: ""; position: absolute; top: 18px; left: -11px; width: 2px; height: 2px; border-radius: 50%; background-color: #b1b1b1;}
                }
            }
            & > .control{
                bottom: 143px; gap: 200px;
            }
        }
    }
    @media (width <= 460px){
        & .collection-swiper {
            & .nested-dots-wrap {
                & > div {
                    gap: 14px;

                    & > li{

                        & button{
                            .title{font-size: 13px;}
                        }
                    }
                    & > li + li{}
                    & > li + li:before{left: -8px; top: 17px;}
                }
            }
        }
    }
}

/* 메인 섹션 - custom */
.custom {
    width: 100%; overflow: hidden; height: var(--view-height);
    @media (hover: hover) and (pointer: fine) {
        /* 터치가 아닌 장치에서만 적용 */
        /* min-height: 800px; */
    }

    & .custom-swiper {
        position: relative; width: 100%; height: 100%; overflow: hidden;

        & > .list{}
        & .item {
            position: relative; overflow: hidden; height: 100%;

            & .custom-bg {
                position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 1920px; height: auto; aspect-ratio: 16 / 9;
                
                & img{display: block; width: 100%; height: 100%; object-fit: cover;}
                & iframe{width: 100%; height: 100%; object-fit: cover;}

                &.white{
                    &:after{content: ""; pointer-events: none; position: absolute; inset: 0; background: rgba(0,0,0,0.3);}
                }
            }
            & .custom-txt {
                position: absolute; z-index: 1; bottom: 80px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%;

                & > .inner-sm{height: 100%; display: flex; flex-direction: column; justify-content: center;}

                & .txt {

                    & .title {font-size: 32px; line-height: 1.2; font-weight: 400; margin: 0 0 26px;}                    
                    & .sub {font-size: 16px; font-weight: 300;}
                    & .more-arr-wrap{
                        padding: 33px 0 0; justify-content: center;
                        & .more-arr{}
                    }
                }

                &.white{
                    color: #fff;
                }
            }
        }
    }
    @media (width <= 1280px){
        height: 900px;
        & .custom-swiper {
            & .item {
                & .custom-bg {width: 1650px; min-width: auto;}
            }
        }
    }
    @media (width <= 860px){
        height: 90svh; height: 760px;
        & .custom-swiper {
            & .item {
                & .custom-bg {width: 1580px; min-width: auto;}
                & .custom-txt {
                    bottom: 55px;
                    & > .inner-sm{justify-content: flex-end;} height: calc(100% - 70px);
                    & .txt{
                        text-align: center;
                        & .title{font-size: 28px;}
                        & .sub{font-size: 15px;}
                        & .more-arr-wrap{justify-content: center;}
                    }
                }
            }
        }
    }
    @media (width <= 640px){
        height: 620px;
        & .custom-swiper {
            & .item {
                
                & .custom-txt {
                    
                    & .txt{
                        
                        & .title{font-size: 22px; margin: 0 0 10px;}
                        & .sub{font-size: 14px;}
                        & .more-arr-wrap{padding: 20px 0 0;}
                    }
                }
            }
        }
    }
}

/* 메인 섹션 - room */
.room {
    width: 100%; overflow: hidden; /* height: var(--view-height); */ align-content: center; height: auto; padding: 160px 0;

    .inner-sm{max-width: 1500px;}

    @media (hover: hover) and (pointer: fine) {
        /* 터치가 아닌 장치에서만 적용 */
        /* min-height: 800px; */
    }

    @media (width <= 1460px) {
        
    }
    @media (width <= 1280px){
        
    }
    @media (width <= 1024px) {
        
    }
    @media (width <= 860px) {
        height: auto; padding: 50px 0 90px;
    }
    @media (width <= 640px){
        height: auto; padding: 50px 0 90px;
    }
}

/* 메인 섹션 - social */
.social {
    padding: 0 0 80px; background: #f5f5f5; overflow: hidden;

    & .sec-tit{padding: 60px 0 0;}
    & .overflow-swiper{}
    @media (width <= 1280px){
        & .sec-tit{padding: 50px 0 0;}
        & .overflow-swiper{/* margin-top: 110px; */}
    }
    @media (width <= 860px){
        & .sec-tit{padding: 40px 0 0;}
        & .overflow-swiper{/* margin-top: 95px; */}
    }
    @media (width <= 640px) {
        padding: 0 0 55px;
    }
}