/* _sleepnomore */

.s_sleep {width: 100%; position: relative; overflow: hidden;background-color: #000;margin-top: -1px;padding-bottom: 200px;}
.s_sleep .maskImg {width: 121px; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-bottom: 50px; }
.s_sleep .maskImg img {width: 100%;}
.s_sleep .cont {opacity: 0;}
.s_sleep .cont .txt {display: flex; justify-content: center;}
.s_sleep .cont .txt svg {width: 1120px; overflow: visible;}
.s_sleep .cont .cardWrap {pointer-events: none; display: flex; justify-content: center; margin-top: 140px; position: relative;}
.s_sleep .cont .cardWrap_mo {display: none;}
.s_sleep .cont .cardWrap.act {pointer-events: auto;}
.s_sleep .cont .cardWrap .card {cursor: pointer;  border-radius: 14px; width: 257px; position: absolute; top: 0%; flex-shrink: 0; perspective: 1000px;}
.s_sleep .cont .cardWrap .card.act {z-index: 1;}
.s_sleep .cont .cardWrap .card:after {content: ''; padding-top: calc(411/294*100%); display: block;}
.s_sleep .cont .cardWrap .card .cardInner {border-radius: 14px; box-shadow: 0 0 30px #000; z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: transform 0.6s; transform-style: preserve-3d;  transform-style: preserve-3d;}
.s_sleep .cont .cardWrap .card:hover .cardInner {transform: scale(1.15);}
.s_sleep .cont .cardWrap .card.act .cardInner {transform: rotateY(180deg) scale(1.15);}
.s_sleep .cont .cardWrap .card .cardInner > div {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); backface-visibility: hidden;}
.s_sleep .cont .cardWrap .card .cardInner > div > img {width: 100%;}
.s_sleep .cont .cardWrap .card .cardInner > div.cardImg {position: relative; z-index: 1;}
.s_sleep .cont .cardWrap .card .cardInner > div.cardTxt {transform: translate(-50%, -50%) rotateY(180deg);}
.s_sleep .cont .cardWrap .card { transform: translateX(-500px) translateY(90px) rotate(-12deg);}
.s_sleep .cont .cardWrap .card:not(:nth-child(1)) {opacity: 0;}

.s_sleep .cont .cardWrap .card._3 {transform: translateX(-255px) translateY(30px) rotate(-5deg);}
.s_sleep .cont .cardWrap .card._4 {transform: translateX(0px) translateY(0px) rotate(0deg);}
.s_sleep .cont .cardWrap .card._5 {transform: translateX(255px) translateY(30px) rotate(5deg);}

.s_sleep .cont .cardWrap_mo {display: none; height: 0px; max-height: 0px; margin-top: 70px; position: relative; z-index: 1;}
.s_sleep .cont .cardWrap_mo .swiper {overflow: visible; width: 250px; max-width: 250px; margin: 0 auto;}
.s_sleep .cont .cardWrap_mo .swiper-slide {width: 100%; transform-origin: center 250%; filter: brightness(0.5); border-radius: 30px; overflow: visible; }
.s_sleep .cont .cardWrap_mo .swiper-slide .card {  border-radius: 30px; width: 100%; flex-shrink: 0; perspective: 1000px;}
.s_sleep .cont .cardWrap_mo .swiper-slide .card .cardInner {border-radius: 30px; box-shadow: 0 0 30px #000; z-index: 1; width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d;  transform-style: preserve-3d;}
.s_sleep .cont .cardWrap_mo .swiper-slide .card .cardInner > div {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); backface-visibility: hidden;}
.s_sleep .cont .cardWrap_mo .swiper-slide .card .cardInner > div > img {width: 100%;}
.s_sleep .cont .cardWrap_mo .swiper-slide .card .cardInner > div.cardImg {position: relative; left: 0; top: 0; transform: none;}
.s_sleep .cont .cardWrap_mo .swiper-slide .card .cardInner > div.cardTxt {transform: translate(-50%, -50%) rotateY(180deg);}
.s_sleep .cont .cardWrap_mo .swiper-slide.swiper-slide-active .card .cardInner {transform: rotateY(180deg);}
.s_sleep .cont .cardWrap_mo .swiper-slide.swiper-slide-active {filter: brightness(1);}
.s_sleep .cont .cardWrap_mo .swiper-pagination {position: relative; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 35px;}
.s_sleep .cont .cardWrap_mo .swiper-pagination {font-size: 18px; color: #fff; font-family: 'Roboto'; letter-spacing: -0.02em;}
.s_sleep .cont .cardWrap_mo .swiper-pagination span {padding: 0 10px;}

.s_sleep .desc{
    font-size: 17px;
    line-height: calc(30 / 17);
    font-weight: 300;
    font-family: 'GmarketSans';
    letter-spacing: -0.025em;
    padding-top: calc(100 / 17 * 1em);
    padding-bottom: calc(200 / 17 * 1em);
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90%;
}
.s_sleep .desc > div {overflow: hidden;}
@media screen and (max-width: 1680px) {
    .s_sleep .desc {padding-bottom: calc(120 / 17 * 1em);}
}

@media screen and (max-width: 1440px) {
    .s_sleep .cont .txt svg {width: 1000px;}
}
@media screen and (max-width: 1280px) {
    .s_sleep .cont .txt svg {width: clamp(800px, 1000/1280*100vw, 1000px);}

    .s_sleep .cont .cardWrap {transform: scale(0.8);}
}
@media screen and (max-width: 1024px) {
    .s_sleep .maskImg {width: clamp(80px, 121/1024*100vw, 121px); margin-bottom: 35px;}
    .s_sleep .cont .txt svg {width: clamp(600px, 800/1024*100vw, 800px);}

    .s_sleep .cont .cardWrap {transform: scale(0.6); margin-top: 70px;  padding-bottom: 100px;}

    .s_sleep .desc {font-size: clamp(14px, 14/820*100vw, 17px);}
}
@media screen and (max-width: 820px) {
    .s_sleep {padding-bottom: 100px;}
    .s_sleep .maskImg {width: clamp(60px, 80/480*100vw, 80px); max-width: 480px;}
    .s_sleep .cont .txt svg {width: clamp(300px, 400/480*100vw, 600px);}
    .s_sleep .cont .cardWrap {display: none;}
    .s_sleep .cont .cardWrap_mo {display: block; padding-bottom: 50px;}


    .s_sleep .desc{
        padding-bottom: calc(80 / 14 * 1em);
    }
    .s_sleep .desc br{display: none;}
}
@media screen and (max-width: 700px) {
    .s_sleep .cont .cardWrap_mo { padding-bottom: 120px;}
}
@media screen and (max-width: 600px) {
    .s_sleep .cont .cardWrap_mo { padding-bottom: 170px;}
}
@media screen and (max-width: 500px) {
    .s_sleep .maskImg {max-width: none; }
    .s_sleep .cont .cardWrap_mo { padding-bottom: 270px;}
    .s_sleep .desc{
        padding-bottom: calc(40 / 14 * 1em);
    }
}
@media screen and (max-width: 360px) {
    .s_sleep .maskImg { width: clamp(50px, 80/480*100vw, 80px); margin-bottom: 20px;}
    .s_sleep .cont .txt svg {width: clamp(200px, 300/360*100vw, 300px);}
    .s_sleep .cont .cardWrap_mo {margin-top: 30px;}
    /* .main .s_sleep .cont .cardWrap_mo .swiper {transform: scale(0.8);} */
    .s_sleep .cont .cardWrap_mo .swiper-slide {width: 180px;}
    .s_sleep .cont .cardWrap_mo .swiper-pagination {padding-top: 15px;}
}


.smoke {z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); min-width: 1920px; opacity: 0.5;}
.smoke:after {content: ''; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 15%; display: block; background: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);}
.smoke video {width: 100%;}
@media screen and (min-width: 1921px) {
    .smoke {min-width: 100%;}
}

@media screen and (max-width: 820px) {
    .smoke {min-width: 1280px;}
}