.s_visual{position: relative; max-width: 1920px; margin: 0 auto; overflow: hidden;}
.s_visual .bar{
	position: absolute;
	width: 15px; height: 335px;
}
.s_visual .bar.n1{left: 0; top: 0;}
.s_visual .bar.n2{right: 0; bottom: 0;}

.s_visual .bar div{background-color: #000; width: 100%; height: 100%;}
.s_visual .bar.n1 div{transform-origin: center top;}
.s_visual .bar.n2 div{transform-origin: center bottom;}

@media screen and (max-width: 1680px) {
    .s_visual .bar {width: 10px;height: 30%;}
}
@media screen and (max-width: 1024px) {
    .s_visual .bar {display: none;}
}

.s_visual .flxBx{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100vh;
}

.s_visual .flxBx .left{width: 50%;max-width: 960px;height: 100%;flex-shrink: 0;}

.s_visual .flxBx .left .wrap{
    max-width: 800px;
    margin-left: auto;
    /* border: 1px solid #000; */
    padding-top: 80px;
    padding-bottom: 40px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.s_visual .flxBx .left .top{
	font-size: 13px; letter-spacing: -0.04em; line-height: calc(16/13); font-weight: 300;
    /* border: 1px solid #000; */
    margin-left: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.s_visual .flxBx .left .top > div{
    /* border: 1px solid #000; */
    overflow: hidden;
    width: 100%;
    max-width: 200px;
}
.s_visual .flxBx .left .top > div > p{color: #000;text-align: left;white-space: nowrap;}
.s_visual .flxBx .left .top > div > span{
    font-size: 40px;
    font-family: "articulat-cf";
    font-weight: 600;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: calc(18/40*1em);
    /* border: 1px solid #000; */
    text-align: left;
    opacity: 0;
}
.s_visual .flxBx .left .txtBx{}
.s_visual .flxBx .left .txtBx .txt{}
.s_visual .flxBx .left .txtBx .txt > div{overflow: hidden;}
.s_visual .flxBx .left .txtBx .txt h2{
    font-size: 110px;
    line-height: calc(110/110);
    font-weight: 500;
    letter-spacing: -0.04em;
    font-family: "articulat-cf";
    opacity: 0;

}
.s_visual .flxBx .left .txtBx .txt p{
    font-size: 17px;
    line-height: calc(22/17);
    font-weight: 400;
    letter-spacing: -0.04em;
    font-family: "articulat-cf";
    color: rgba(0, 0, 0, 0.8);
    margin-top: calc(40/17*1em);
    opacity: 0;
}

.s_visual .flxBx .left .txtBx .more{
    font-size: 17px;
    line-height: calc(22/17);
    font-weight: 400;
    letter-spacing: -0.02em;
    font-family: "articulat-cf";
    text-align: center;
    color: #fff;
    background-color: #000;
    padding: calc(14/17*1em) calc(24/17*1em);
    border-radius: 4px;
    margin-top: calc(90/17*1em);
    transition: background-color 0.3s ease;
    opacity: 0;
}

.s_visual .flxBx .left .txtBx .more:hover{background-color: var(--blue);}





.s_visual .flxBx .right{width: 100%;height: 100%;max-width: 960px;}

.s_visual .flxBx .right .imgBx{
    position: relative;
    width: 100%;height: 100%;
    overflow: hidden;
}
.s_visual .flxBx .right .imgBx::before{
    content: '';display: block;
    padding-bottom: calc(980/960*100%);
}
.s_visual .flxBx .right .imgBx img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}

@media screen and (max-width: 1680px) {
    .s_visual .flxBx .left .top > div > span{font-size: clamp(36px, 36/1440*100vw, 40px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(100px, 100/1440*100vw, 110px);}
}
@media screen and (max-width: 1440px) {
    .s_visual .flxBx .left .top > div > span{font-size: clamp(32px, 32/1280*100vw, 36px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(90px, 90/1280*100vw, 100px);}
}
@media screen and (max-width: 1280px) {
    .s_visual .flxBx .left .top > div > span{font-size: clamp(28px, 28/1024*100vw, 32px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(80px, 80/1024*100vw, 90px);}
}
@media screen and (max-width: 1024px) {
    .s_visual .flxBx{height: auto;flex-direction: column;align-items: center;}
    .s_visual .flxBx .left{width: 100%;}
    .s_visual .flxBx .left .wrap{max-width: unset;}
    .s_visual .flxBx .right{width: 100%;max-width: unset;}

    .s_visual .flxBx .left .top > div > span{font-size: clamp(24px, 24/820*100vw, 28px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(70px, 70/820*100vw, 80px);}

}
@media screen and (max-width: 820px) {
    .s_visual .flxBx .left .top > div > span {font-size: clamp(22px, 22/500*100vw, 24px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(60px, 60/500*100vw, 70px);margin-top: calc(30/70*1em);}
    .s_visual .flxBx .left .txtBx .txt p, .s_visual .flxBx .left .txtBx .more{font-size: clamp(15px, 15/500*100vw, 17px);}
}
@media screen and (max-width: 500px) {
    .s_visual .flxBx .left .top > div > span{font-size: clamp(20px, 20/360*100vw, 22px);}
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(50px, 50/360*100vw, 60px);}
    .s_visual .flxBx .left .txtBx .txt p br{display: none;}
}
@media screen and (max-width: 360px) {
    .s_visual .flxBx .left .txtBx .txt h2{font-size: clamp(40px, 40/280*100vw, 50px);}
}



.s_video{
    position: relative; max-width: 1920px; margin: 0 auto; overflow: hidden;
    /* height: 100vh; */
    padding-top: 120px;
    padding-bottom: 200px;
    box-sizing: border-box;
    background: #fff;
}
.s_video .wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.s_video .wrap .txtBx{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s_video .wrap .txtBx > div{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.s_video .wrap .txtBx p{
    font-size: 25px;
    font-family: "articulat-cf";
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #000;
}
.s_video .wrap .txtBx i{
    font-size: 24px;
    display: inline-block;
    animation: scrollHint 1.5s ease-in-out infinite;
}

@keyframes scrollHint{
    0%, 100%{transform: translateY(0);}
    50%{transform: translateY(4px);}
}

.s_video .videoBx{
    position: relative;
    width: 100%;margin-top: 20px;
    padding: 8px;box-sizing: border-box;
    border: 1px solid #000;
}
.s_video .videoBx::before{
    content: '';display: block;
    padding-bottom: calc(800/1420*100%);
}
.s_video .videoBx iframe{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    padding: 8px;
    box-sizing: border-box;
}

@media screen and (max-width: 1680px) {
    .s_video .wrap .txtBx p{font-size: clamp(23px, 23/1440*100vw, 25px);}
}
@media screen and (max-width: 1440px) {
    .s_video .wrap .txtBx p{font-size: clamp(21px, 21/1280*100vw, 23px);}
    .s_video .wrap .txtBx i{font-size: clamp(22px, 22/1280*100vw, 24px);}
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .s_video{padding: 80px 0;}
    .s_video .wrap .txtBx p{font-size: clamp(18px, 18/820*100vw, 21px);}
    .s_video .wrap .txtBx i{font-size: clamp(20px, 20/820*100vw, 22px);}
}
@media screen and (max-width: 820px) {
    .s_video{padding-bottom: 80px;}
    .s_video .wrap .txtBx p{font-size: clamp(16px, 16/500*100vw, 18px);}
    .s_video .wrap .txtBx i{font-size: clamp(18px, 18/500*100vw, 20px);}
}
@media screen and (max-width: 500px) {}
@media screen and (max-width: 360px) {
    .s_video .wrap .txtBx p{font-size: clamp(14px, 14/360*100vw, 16px);}
    .s_video .wrap .txtBx i{font-size: clamp(16px, 16/360*100vw, 18px);}
}



.s_what{
    position: relative; margin: 0 auto; overflow: hidden;
    /* height: 100vh; */
    padding-bottom: 200px;
    box-sizing: border-box;
    background: #fff;
}
.s_what .wrap{
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; */
    gap: 10px;
    position: absolute;
    left: 50%; transform: translateX(-50%);
}
.s_what .wrap .txtBx{}
.s_what .txtBx > div{
    overflow: hidden;
}
.s_what .txtBx p{
    font-size: 20px;
    font-family: "articulat-cf";
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #555555;
    font-style: italic;
}
/* .s_what .stairs{border: 1px solid #000;} */
.s_what .stairs > div{
    overflow: hidden;
}
.s_what .stairs p{
    font-size: 80px;
    font-family: "articulat-cf";
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #000;
    line-height: calc(118/80);
}
.s_what .stairs > div:nth-child(1) p{ padding-left: 0; }
.s_what .stairs > div:nth-child(2) p{padding-left: 8%;}
.s_what .stairs > div:nth-child(3) p{padding-left: 18%;}
.s_what .stairs > div:nth-child(4) p{padding-left: 28%;}
.s_what .imgBx{max-width: 1600px; margin: 0 auto;width: 95%;}
.s_what .imgBx .img_inn{
    width: 100%;
    display: flex;justify-content: space-between;align-items: flex-start;
    position: relative;
    top: 3.4vw;
}
.s_what .imgBx .img{
    max-width: 408px;
    width: 100%;
    position: relative;
}
.s_what .imgBx .img::before{
    content: '';
    display: block;
    padding-bottom: calc(790/408*100%);
}
.s_what .imgBx .img img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.s_what .imgBx .img:nth-child(1){ margin-top: 34vw;}
.s_what .imgBx .img:nth-child(2){ margin-top: 17vw;}
.s_what .imgBx .img:nth-child(3){ margin-top: 0;}

.s_what .txt{
    /* max-width: 1440px; */
    width: 100%;
    text-align: right;
    margin: 0 auto;
    font-size: 17px;
    font-family: 'GmarketSans';
    line-height: calc(30/17);
    font-weight: 300;
    position: relative;
    top: -2.8vw;
}

.s_what .txt > div{overflow: hidden;}

.s_what .txt span{display: inline-block;text-align: left; }


@media screen and (max-width: 1680px) {
    .s_what .stairs p{font-size: clamp(65px, 65/1440*100vw, 80px);}
}
@media screen and (max-width: 1440px) {
    .s_what .stairs p{font-size: clamp(60px, 60/1280*100vw, 65px);}
    .s_what .imgBx .img{max-width: clamp(390px, 390/1280*100vw, 408px);}
}
@media screen and (max-width: 1280px) {
    .s_what .stairs p{font-size: clamp(55px, 55/1024*100vw, 60px);}
    .s_what .imgBx .img{max-width: clamp(300px, 300/1024*100vw, 390px);}
}
@media screen and (max-width: 1024px) {
    .s_what{padding-bottom: 120px;}
    .s_what .stairs p{font-size: clamp(55px, 55/1024*100vw, 60px);}
    .s_what .txtBx p{font-size: clamp(18px, 18/820*100vw, 20px);}
    .s_what .imgBx .img{max-width: clamp(250px, 250/820*100vw, 300px);}
    .s_what .txt{font-size: clamp(15px, 15/820*100vw, 17px);}
}
@media screen and (max-width: 820px) {
    .s_what{padding-bottom: 80px;}
    .s_what .stairs p{width: 90%;font-size: clamp(40px, 40/500*100vw, 55px);}
    .s_what .wrap{position: unset;transform: unset;}
    .s_what .imgBx{margin-top: 40px;}
    .s_what .imgBx .img_inn{flex-direction: column;top: unset;gap: 60px;}
    .s_what .imgBx .img{max-width: unset;width: 95%;margin: 0 auto;}
    .s_what .imgBx .img:nth-child(1){ margin-top: 0;}
    .s_what .imgBx .img:nth-child(2){ margin-top: 0;}
    .s_what .imgBx .img:nth-child(3){ margin-top: 0;}
    .s_what .txt{top: unset;margin-top: 40px;width: 90%;}
}
@media screen and (max-width: 500px) {
    .s_what .txtBx p{font-size: clamp(16px, 16/360*100vw, 18px);}
    .s_what .stairs p{font-size: clamp(36px, 36/360*100vw, 40px);}
    .s_what .txt{font-size: 14px;}
    .s_what .txt br{display: none;}
}
@media screen and (max-width: 360px) {
    .s_what .stairs p{font-size: clamp(32px, 32/280*100vw, 36px);}
}


.s_video2 {
    position: relative; margin: 0 auto;
    overflow: hidden;box-sizing: border-box;
    background-color: #000;
}
.s_video2 .videoBx{position: relative;width: 100%;}
.s_video2 .videoBx::before{
    content: '';display: block;
    padding-bottom: calc(800/1420*100%);
}
.s_video2 .videoBx iframe{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.s_design{
    padding: 200px 0;box-sizing: border-box;background: #fff;
}
.s_design .row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}
.s_design .row.n3{margin-bottom: 0;}
.s_design .row.n3{
    justify-content: flex-end;
}
.s_design .row .txtBx{
    font-size: 20px;
    font-family: "articulat-cf";
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #555555;
    /* font-style: italic; */
}

@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1440px) {
    .s_design .row{flex-direction: column;gap: 40px;}
    .s_design .row img{width: 100%;}
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .s_design{padding: 120px 0;}
    .s_design .row .txtBx{font-size: clamp(18px, 18/820*100vw, 20px);}
}
@media screen and (max-width: 820px) {
    .s_design{padding: 80px 0;}
    .s_design .row{margin-bottom: 30px;}
}
@media screen and (max-width: 500px) {
    .s_design .row .txtBx{font-size: clamp(16px, 16/360*100vw, 18px);}
}
@media screen and (max-width: 360px) {}

.s_thumb{
    position: relative; margin: 0 auto; overflow: hidden;
    height: 100vh;
    background-image: url('/asset/img/sub/homepage/cmes/cmes_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
._dalmore .s_thumb{background-image: url('/asset/img/sub/homepage/dalmore/dalmore_bg.jpg');}
._sleep .s_thumb{background-image: url('/asset/img/sub/homepage/sleep/sleep_bg.jpg');}
._inmode .s_thumb{background-image: url('/asset/img/sub/homepage/inmode/inmode_bg.jpg');}

.s_thumb .wrap{}

.s_thumb .wrap .imgBx{
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: center;
}
.s_thumb .wrap .imgBx .row{
    width: calc((100% - (40px * 2)) / 3);
    position: relative;
}
.s_thumb .wrap .imgBx .row::before{
    content: '';
    display: block;
    padding-bottom: calc(700/560*100%);
}
.s_thumb .wrap .imgBx .row img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}


@media screen and (max-width: 1680px) {
    /* .s_thumb .wrap .imgBx .row{max-width: clamp(420px, 420/1440*100vw, 560px);} */
}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .s_thumb{height: 90vh;}
}
@media screen and (max-width: 820px) {
    .s_thumb {height: auto;padding: 140px 0px;}
    .s_thumb .wrap .imgBx{flex-direction: column;}
    .s_thumb .wrap .imgBx .row{width: 100%;max-width: 400px;}
}
@media screen and (max-width: 500px) {}
@media screen and (max-width: 360px) {}



.s_mockup{
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: 200px 0;
    overflow: hidden;
    background: #fff;
    --mockup-w: 304px;
}

.s_mockup .swiperBx{
    width: 100%;
    position: relative;
}

.s_mockup .swiperBx .swiper{
    width: 100%;
    /* clip-path: inset(0 calc(50% - var(--mockup-w) / 2) 0 0 round 25px); */
    clip-path: inset(0 calc(50% - var(--mockup-w) / 2) 0 -100px round 25px);

    background: #fff;
}

.s_mockup .swiperBx .swiper-wrapper{
    align-items: center;
}

.s_mockup .swiperBx .swiper-slide{
    width: calc(var(--mockup-w) - 14px);
}

.s_mockup .swiperBx .swiper-slide .img{
    position: relative;
    width: 100%;
    padding-bottom: calc(613/294*100%);
    overflow: hidden;
    border-radius: 25px;
}

.s_mockup .swiperBx .swiper-slide .img img{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s_mockup .mockupImg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--mockup-w);
    z-index: 2;
    pointer-events: none;
}

.s_mockup .mockupImg::before{
    content: '';
    display: block;
    padding-bottom: calc(613/304*100%);
}

.s_mockup .mockupImg img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

.marquee{
	white-space: nowrap; display: flex; align-items: center; justify-content: flex-start;
	transform: translateY(-8%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 0;
    pointer-events: none;
}
.marquee .txt{
	padding: 0 0.2em; box-sizing: border-box;
    font-size: 250px;
    color: rgba(0, 0, 0, 0.07);
    font-family: "articulat-cf";
    font-weight: 600;
    letter-spacing: -0.02em;

}
.marquee .txt{
	animation: marquee forwards infinite 14s linear;
}
.marquee._mob {display: none;}
.s_mockup .wrap{
    padding-top: 200px;
}
.s_mockup .txtBx {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
}
.s_mockup .txtBx .row{
    display: flex;
    padding: 25px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dddddd;
    width: 100%;
}
.s_mockup .txtBx .row em{
    font-size: 20px;
    color: rgba(0, 0, 0, 0.5);
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 500;
    min-width: 50px;
}
.s_mockup .txtBx .row .flxBx{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.s_mockup .txtBx .row .flxBx .tit{
    font-size: 20px;
    color: #000;
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 500;
}
.s_mockup .txtBx .row .flxBx ul{
    font-size: 17px;
    color: #000;
    font-family: "GmarketSans";
    letter-spacing: -0.025em;
    font-weight: 400;
    line-height: calc(22/17);
    display: flex;gap: 10px;
    flex-direction: column;
    max-width: 304px;width: 100%;
}
.s_mockup .txtBx .row .flxBx ul li{
    display: flex;gap: 10px;
}
.s_mockup .txtBx .row .flxBx ul li small{}


@media screen and (max-width: 1680px) {
    .s_mockup .marquee .txt{font-size: clamp(220px, 220/1440*100vw, 250px);}
}
@media screen and (max-width: 1440px) {
    .s_mockup{
        --mockup-w: clamp(280px, 280/1280*100vw, 304px);
    }
    .s_mockup .marquee .txt{font-size: clamp(200px, 200/1280*100vw, 220px);}
}
@media screen and (max-width: 1280px) {
    .s_mockup{
        --mockup-w: clamp(240px, 240/1024*100vw, 280px);
    }
    .s_mockup .wrap{padding-top: 120px;}
    .s_mockup .marquee .txt{font-size: clamp(180px, 180/1024*100vw, 200px);}
}
@media screen and (max-width: 1024px) {
    .s_mockup{
        --mockup-w: clamp(200px, 200/820*100vw, 240px);
        padding: 120px 0;
    }
    .s_mockup .swiperBx .swiper-slide{width: calc(var(--mockup-w) - 5px);}
    .s_mockup .wrap{padding-top: 80px;}
    .s_mockup .marquee .txt{font-size: clamp(140px, 140/820*100vw, 180px);}

    .s_mockup .txtBx .row .flxBx .tit, .s_mockup .txtBx .row em{font-size: clamp(18px, 18/820*100vw, 20px);}
    .s_mockup .txtBx .row .flxBx ul{font-size: 16px;}
}
@media screen and (max-width: 820px) {
    .s_mockup{
        --mockup-w: clamp(180px, 180/500*100vw, 200px);
        padding: 80px 0;
    }
    /* .s_mockup .marquee {bottom: -43%;top: unset;} */
    .s_mockup .marquee .txt{font-size: clamp(80px, 80/500*100vw, 140px);}
    .s_mockup .marquee{display: none;position: unset;transform: unset;}
    .s_mockup .marquee._mob {display: flex;margin-top: clamp(40px, 40/500*100vw, 60px);}


    .s_mockup .txtBx .row .flxBx .tit, .s_mockup .txtBx .row em{font-size: clamp(16px, 16/500*100vw, 18px);}
    .s_mockup .txtBx .row .flxBx ul {
        font-size: clamp(14px, 14/500*100vw, 16px);
        max-width: clamp(220px, 220/500*100vw, 280px);
    }
    ._sleep .s_mockup .txtBx .row .flxBx ul{
        max-width: clamp(240px, 240/500*100vw, 304px);
    }
}
@media screen and (max-width: 500px) {
    .s_mockup .txtBx .row .flxBx ul{
        max-width: unset !important;
    }
    .s_mockup .marquee .txt{font-size: clamp(60px, 60/360*100vw, 80px);}

    .s_mockup .txtBx .row, .s_mockup .txtBx .row .flxBx{
        flex-direction: column;
        gap: 12px;
        max-width: unset;
    }
}
@media screen and (max-width: 360px) {
    .s_mockup .marquee .txt{font-size: clamp(50px, 50/280*100vw, 60px);}

}


.s_color{
    position: relative; margin: 0 auto; overflow: hidden;
    padding-bottom: 200px;
    box-sizing: border-box;
    background: #fff;
}
.s_color .colorBx{
    display: flex;
    gap: 40px;
}
.s_color .colorBx .color{
    border: 1px solid #000;
    max-width: 560px;width: 100%;
    padding: 10px;box-sizing: border-box;
}

.s_color .colorBx .color .inn{
    position: relative;width: 100%;
}
.s_color .colorBx .color .inn::before{
    content: '';
    display: block;
    padding-bottom: calc(480/540*100%);
}
.s_color .colorBx .color .inn .txt{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.s_color .colorBx .color .inn .txt h3{
    font-size: 70px;
    color: #fff;
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 600;
}
.s_color .colorBx .color .inn .txt p{
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 400;
    position: absolute;
    bottom: 30px;
}
.s_color .colorBx .color .inn.n1{background-color: #3b0694;}
.s_color .colorBx .color .inn.n2{background-color: #009fe3;}
.s_color .colorBx .color .inn.n3{background-color: #000000;}

._dalmore .s_color .colorBx .color .inn.n1{background-color: #c63527;}
._dalmore .s_color .colorBx .color .inn.n2{background-color: #000000;}
._dalmore .s_color .colorBx .color .inn.n3{background-color: #000000;}

._sleep .s_color .colorBx .color .inn.n1{background-color: #f6ad3c;}
._sleep .s_color .colorBx .color .inn.n2{background-color: #000000;}
._sleep .s_color .colorBx .color .inn.n3{background-color: #000000;}

._inmode .s_color .colorBx .color .inn.n1{background-color: #59b7b3;}
._inmode .s_color .colorBx .color .inn.n2{background-color: #000000;}
._inmode .s_color .colorBx .color .inn.n3{background-color: #000000;}


@media screen and (max-width: 1680px) {
    .s_color .colorBx .color .inn .txt h3{font-size: clamp(60px, 60/1440*100vw, 70px);}
}
@media screen and (max-width: 1440px) {
    .s_color .colorBx .color .inn .txt h3{font-size: clamp(50px, 50/1280*100vw, 60px);}
    .s_color .colorBx .color .inn .txt p{font-size: clamp(18px, 18/1280*100vw, 20px);}
}
@media screen and (max-width: 1280px) {
    .s_color .colorBx {gap: 25px;}
    .s_color .colorBx .color .inn .txt h3{font-size: clamp(40px, 40/1024*100vw, 50px);}
    .s_color .colorBx .color .inn .txt p{font-size: clamp(16px, 16/1024*100vw, 18px);}

}
@media screen and (max-width: 1024px) {
    .s_color{padding-bottom: 120px;}
    .s_color .colorBx{gap: 12px;}
    .s_color .colorBx .color .inn .txt h3{font-size: clamp(30px, 30/820*100vw, 40px);}
}
@media screen and (max-width: 820px) {
    .s_color{padding-bottom: 80px;}
    .s_color .colorBx{flex-direction: column;gap: 40px;}
    .s_color .colorBx .color{max-width: unset;}
}
@media screen and (max-width: 500px) {}
@media screen and (max-width: 360px) {
    .s_color .colorBx .color .inn .txt h3{font-size: clamp(24px, 24/280*100vw, 30px);}
    .s_color .colorBx .color .inn .txt p{font-size: clamp(14px, 14/280*100vw, 16px);}
}


.s_more{
    position: relative; margin: 0 auto; overflow: hidden;
    padding-bottom: 100px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 1px;
}
.s_more .flxBx{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.s_more .flxBx .left{}
/* .s_more .flxBx .left > div{overflow: hidden;} */
.s_more .flxBx .left h3{
    font-size: 130px;
    font-family: "articulat-cf";
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000;
    line-height: calc(130/140);

}
.s_more .flxBx .left p{
    font-size: 18px;
    color: #555555;
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 500;
    line-height: calc(28/18);
    margin-top: calc(50/18*1em);
}
.s_more .flxBx .left p em{
    font-weight: 600;
    color: #000;
}

.s_more .flxBx .right{max-width: 420px;width: 100%;}
.s_more .flxBx .right > div{overflow: hidden;}
.s_more .flxBx .right p{
    font-size: 16px;
    color: #555555;
    font-family: "articulat-cf";
    letter-spacing: -0.02em;
    font-weight: 300;
    line-height: calc(20/16);
}
.s_more .flxBx .right .linkBx{position: relative;width: 100%;margin-top: 20px;}
.s_more .flxBx .right .linkBx::before{
    content: '';
    display: block;
    padding-bottom: calc(215/420*100%);
}
.s_more .flxBx .right .linkBx a{
	display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background-color: #000;
}
.s_more .flxBx .right .linkBx a img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1680px) {
    .s_more .flxBx .left h3{font-size: clamp(100px, 100/1440*100vw, 130px);}
}
@media screen and (max-width: 1440px) {
    .s_more .flxBx .left h3{font-size: clamp(85px, 85/1280*100vw, 100px);}
    .s_more .flxBx .left p{font-size: clamp(16px, 16/1280*100vw, 18px);}
}
@media screen and (max-width: 1280px) {
    .s_more .flxBx .left h3{font-size: clamp(70px, 70/1024*100vw, 85px);}
}
@media screen and (max-width: 1024px) {
    .s_more .flxBx .left h3{font-size: clamp(60px, 60/820*100vw, 70px);}
    .s_more .flxBx .right{max-width: clamp(320px, 320/820*100vw, 420px);}
}
@media screen and (max-width: 820px) {
    .s_more .flxBx{flex-direction: column;align-items: flex-start;gap: 40px;}
}
@media screen and (max-width: 500px) {
    .s_more .flxBx .left h3{font-size: clamp(40px, 40/360*100vw, 60px);}
}
@media screen and (max-width: 360px) {
    .s_more .flxBx .left p, .s_more .flxBx .right p{font-size: clamp(14px, 14/280*100vw, 16px);}
}


/* _dalmore */


._dalmore .s_dalmore{ position: relative; background-color: #fffcf5;overflow: hidden; }

._dalmore .s_dalmore .pin{ height: var(--vh100); height: 100dvh; position: relative; }

._dalmore .s_dalmore .bg{ position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; transform-origin: center; height: 100%; }
/* clip-path: inset(20% 38%); */
._dalmore .s_dalmore .bg .vidbx{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,0.5); background-image: url(/asset/img/sub/homepage/dalmore/se01_vidbg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }
/*  */
._dalmore .s_dalmore .bg .vidbx iframe{ width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
._dalmore .s_dalmore .bg img{ width: 100%;height: 100%; object-fit: cover; }

._dalmore .s_dalmore .pin .wrap{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
._dalmore .s_dalmore .mainTitle{ width: 100%; text-align: center; position: absolute; left: 50%; overflow: hidden; display: block; font-family: 'Gestura Display'; font-size: 3.125vw; color: #fff; letter-spacing: -0.03em; line-height: 1.3; transform: translateX(-50%); z-index: 5; }


._dalmore .s_dalmore .scene {
    width: 90%;
    z-index: 10;
    max-width: 970px;
    margin: 0 auto;
    height: 80vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid red; */
}

._dalmore .s_dalmore .text-wrapper {
    text-align: center;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

._dalmore .s_dalmore .text-line {
    display: flex;
    justify-content: center;
    line-height: 0.93;
    margin: 0.032em 0;
}

._dalmore .s_dalmore .char {
    display: inline-block;
    font-family: 'Cerapro';
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.03em;
    will-change: transform, opacity, filter;
    color: #bc3329;
    line-height: calc(29 / 20);
}

._dalmore .s_dalmore .char.space { /* 공백 */
    pointer-events: none;
    width: 0.28em;
}
/* 이거 추가 */
._dalmore .s_dalmore .dummybx{
    width: 100%;
}

._dalmore .s_dalmore .dummybx > div{
    height: 100vh;
}
@media screen and (max-width: 820px){
    ._dalmore .s_dalmore .mainTitle{ font-size: 6vw; }
    ._dalmore .s_dalmore .char{ font-size: 16px; }
}

@media screen and (max-width: 500px){
    ._dalmore .s_dalmore .mainTitle{ font-size: 7vw; width: 60%; }
    ._dalmore .s_dalmore .char{ font-size: clamp(12px, 12/280*100vw, 14px); }
}


._dalmore .s_dalmore2{
    position: relative;
    background-color: #fffcf5;
}
._dalmore .s_dalmore2 .wrap{
    max-width: 1720px;
    margin: 0 auto;
}
._dalmore .s_dalmore2 .wrap .txtBx{
    text-align: center;
    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(180/17*1em);
}
._dalmore .s_dalmore2 .wrap .txtBx div {overflow: hidden;}

@media screen and (max-width: 1680px) {
    ._dalmore .s_dalmore2 .wrap .txtBx{
        padding-top: 40px;
        padding-bottom: 100px;
        font-size: clamp(16px, 16/1440*100vw, 17px);
    }
}
@media screen and (max-width: 820px) {
    ._dalmore .s_dalmore2 .wrap .txtBx{
        padding-top: 0;
        font-size: clamp(14px, 14/500*100vw, 16px);
    }
    ._dalmore .s_dalmore2 .wrap .txtBx br{display: none;}
}

/* _ver2 공통 */
._ver2 .s_visual .flxBx .left{
    width: 100%;
    max-width: unset;
}
._ver2 .s_visual .flxBx .left .wrap{
    max-width: unset;
    height: 100vh;
}
._ver2 .s_visual .flxBx .left .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
._inmode .s_visual .flxBx .left .bg img{
    object-position: 80% center; /* 좌→우 이동, 얼굴 보이게 */
}
._ver2 .s_visual .flxBx .left .bg img{
    width: 100%;height: 100%;object-fit: cover;
    scale: 1.2;
}
._ver2 .s_visual .flxBx .left .top{
    align-items: flex-start;
}
._ver2 .s_visual .flxBx .left .top > div > p{color: #fff;z-index: 123123;
    position: relative;}
._ver2 .s_visual .flxBx .left .top > div > span{color: #fff;}
._ver2 .s_visual .flxBx .left .txtBx .txt h2{color: #fff;line-height: 1.3;}
._ver2 .s_visual .flxBx .left .txtBx .txt p{color: #fff;}
._ver2 .s_visual .flxBx .left .txtBx .more{background-color: #fff;color: #000;}
._ver2 .s_visual .flxBx .left .txtBx .more:hover{background-color: #000;color: #fff;}

._ver2 .s_visual .flxBx .left .txtBx{text-align: center;}
._ver2 .s_visual .flxBx .left .txtBx .txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
}
._ver2 .s_visual .flxBx .left .txtBx .more{max-width: 330px;margin: 0 auto;}

@media screen and (max-width: 820px) {
    ._ver2 .s_visual .flxBx .left .wrap{height: 80vh;}
    ._ver2 .s_visual .flxBx .left .txtBx .txt p br{display: none;}
}


/* _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;}
}

/* inmode */

/* s_inmode */
.s_inmode{background-color: #7b9190; background-color: #a5b1b0; position: relative; overflow: hidden;}
.s_inmode .wrap{margin-top: 160px;}
.s_inmode h2{color: #fff; font-size: 120px; letter-spacing: -0.03em; display: flex; justify-content: flex-end;}
.s_inmode h2 b{display: flex; font-weight: 500; margin-right: 0.2em;}
.s_inmode h2 p{display: flex; font-weight: 200;}
.s_inmode h2{}
.s_inmode .pinBx{
	/* border: 1px solid tomato; */
	width: 100%; height: calc( var(--vh, 1vh) * 100 ); position: relative;
	display: flex; justify-content: center; align-items: center;
}
.s_inmode .pinBx ._imgBx.bg{position: absolute;}
.s_inmode .pinBx ._imgBx.bg.n1{left: 0; bottom: 0; transform: translateY(10%);  height: calc(996/920* var(--vh, 1vh) * 100 );}
.s_inmode .pinBx ._imgBx.bg.n2{opacity: .07; height: calc(460/920* var(--vh, 1vh) * 100 );}
.s_inmode .cardBx{
	padding-top: 0px; transform: rotate(-90deg);
	width: 180%; width: calc(3000/920* var(--vh, 1vh) * 100 ); flex-shrink: 0;
	border-radius: 50%; position: absolute; top: calc(( (var(--vh, 1vh) * 100)  - (600/920* var(--vh, 1vh) * 100 )) / 2);
	display: flex; align-items: flex-start; justify-content: center;
}
.s_inmode .cardBx::before {
	content:''; display: block; padding-bottom: 100%;
}
.s_inmode .cardBx .card{
	position: absolute; width: calc((430/3000*100) * 1%); height: 50%;
	transform-origin: center bottom;
}


/* 외각선보기 */
/* .s_inmode .pinBx{border: 1px solid tomato; box-sizing: border-box;}
.s_inmode .cardBx{border: 1px solid tomato; box-sizing: border-box;}
.s_inmode .cardBx .card{border: 1px solid #000; box-sizing: border-box;} */



/* 각도 */
.s_inmode .cardBx .card:nth-child(1){transform: rotate(0deg);}
.s_inmode .cardBx .card:nth-child(2){transform: rotate(30deg);}
.s_inmode .cardBx .card:nth-child(3){transform: rotate(60deg);}
.s_inmode .cardBx .card:nth-child(4){transform: rotate(90deg);}

.s_inmode .cardBx .card > div{
	background-color: #fff; border-radius: var(--border-radius); position: relative;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.1); top: 0;
	display: flex; align-items: center; justify-content: center;
}
.s_inmode .cardBx .card:not(.last) > div{overflow: hidden; cursor: pointer;}

.s_inmode .cardBx .card:last-child > div{
	box-shadow: none; background-color: #262828;
}
.s_inmode .cardBx .card:last-child .bgBx{
	position: absolute; z-index: -1; background-color: #262828; border-radius: var(--border-radius);
	width: 100%; height: 100%; pointer-events: none;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.1);
}
.s_inmode .cardBx .card ._imgBx{
	position: relative; width: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s_inmode .cardBx .card ._imgBx::before {
	content:''; display: block; padding-bottom: calc(601/431*100%);
}
.s_inmode .cardBx .card ._imgBx img{position: absolute; width: 100%; height: 100%; object-fit: contain;}
.s_inmode .cardBx .card ._imgBx img.n2{opacity: 0; transition: opacity .3s;}
.s_inmode .cardBx .card ._imgBx img.maxWidth{max-width: min(220px,60%);}
html.pc .s_inmode .cardBx .card:hover ._imgBx.img img.n2{opacity: 1;}
.s_inmode .cardBx .card ._imgBx.txt{
	position: absolute; left: calc(40/920* var(--vh, 1vh) * 100 ); bottom: calc(30/920* var(--vh, 1vh) * 100 );  height: calc(40/920* var(--vh, 1vh) * 100 );
}
.s_inmode .cardBx .card ._imgBx.txt img{}


/* 로고 높이 개별 */
.s_inmode .cardBx .card:nth-child(3) ._imgBx.txt{height: calc(25/920* var(--vh, 1vh) * 100 );}
.s_inmode .cardBx .card:nth-child(4) ._imgBx.txt{height: calc(25/920* var(--vh, 1vh) * 100 ); left: unset; bottom: unset;}

.s_inmode .cardDesc{
    position: relative;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0 100px;
}
.s_inmode .cardDesc > div{overflow: hidden;}

.s_inmode .cardDesc p{
    font-size: 17px;
    line-height: calc(30/17);
    font-weight: 300;
    font-family: 'GmarketSans';
    letter-spacing: -0.025em;
    color: #000;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s_inmode h2{font-size: max(calc(120/1440*100vw),40px);}
	.s_inmode .pinBx ._imgBx.bg.n1{display: none;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s_inmode .wrap{margin-top: 100px;}
    .s_inmode .cardDesc p{font-size: clamp(14px, 14/820*100vw, 17px);}
}
@media screen and (max-width:820px) {
    .s_inmode .cardDesc{width: 90%;}
    .s_inmode .cardDesc p br{display: none;}
}
@media screen and (max-width:500px) {
	.s_inmode .wrap{margin-top: 80px;}

	/* .s_inmode .cardBx{transform: rotate(-114deg);}
	.s_inmode .cardBx .card:nth-child(2){transform: rotate(38deg);}
	.s_inmode .cardBx .card:nth-child(3){transform: rotate(76deg);}
	.s_inmode .cardBx .card:nth-child(4){transform: rotate(114deg);} */
}
@media screen and (max-width:320px) {}


/* 세로가 길경우 */
@media (orientation: Portrait){
	.s_inmode .cardBx{
		width: 400vw;
		top: calc(( (var(--vh, 1vh) * 100)  - (470/920* var(--vh, 1vh) * 100 )) / 2);
	}
}
@media (orientation: Portrait) and (max-width:1600px){}
@media (orientation: Portrait) and (max-width:1440px){}
@media (orientation: Portrait) and (max-width:1280px){
	/* .s_inmode .cardBx{top: calc((( var(--vh, 1vh) * 100 ) - (420/920* var(--vh, 1vh) * 100 )) / 2); width: calc(2100/920* var(--vh, 1vh) * 100 );} */
	/* .s_inmode .cardBx .card > div{width: calc(370/920* var(--vh, 1vh) * 100 ); max-width: 70vw;} */
}
@media (orientation: Portrait) and (max-width:1024px){
    .s_inmode .pinBx ._imgBx.bg.n2{height: auto; width: 80vw;}
}
@media (orientation: Portrait) and (max-width:820px){}
@media (orientation: Portrait) and (max-width:500px){
	.s_inmode .cardBx{
		width: 500vw;
		top: calc(( (var(--vh, 1vh) * 100)  - (380/920* var(--vh, 1vh) * 100 )) / 2);
	}
}



/* 세로가 길경우 */
@media (orientation: Portrait){
	.s_inmode .next ._imgBx.bg{height: 60%;}
    .s_inmode .hexagonBx {width: 95vw;}
    .s_inmode .hexagon .con{font-size: max(calc(38/1920*100vw),12px);}
}
@media (orientation: Portrait) and (max-width:1600px){}
@media (orientation: Portrait) and (max-width:1440px){}
@media (orientation: Portrait) and (max-width:1280px){}
@media (orientation: Portrait) and (max-width:1280px){}
@media (orientation: Portrait) and (max-width:1024px){}
@media (orientation: Portrait) and (max-width:820px){
    .s_inmode .hexagon{width: calc(350/850*100%);}

    .s_inmode .hexagon.n1{transform: translate(0%, -65%);}
    .s_inmode .hexagon.n2{transform: translate(72%, 64%);}
    .s_inmode .hexagon.n3{transform: translate(-72%, 64%);}

    .s_inmode .hexagonBx .line div{width: calc(14% - 20px);}
    .s_inmode .hexagonBx .line .n1{left: 30%;top: 49.6%;transform: rotate(-52deg);}
    .s_inmode .hexagonBx .line .n2{right: 30%;top: 49.6%;transform: rotate(52deg);}
    .s_inmode .hexagonBx .line .n3{bottom: 21.5%;width: calc(18% - 20px);}
	.s_inmode .hexagon .con p br{display: none;}
}
@media (orientation: Portrait) and (max-width:500px){
    .s_inmode .hexagonBx .line div{height: 1px;  background: repeating-linear-gradient(to right, #fff,#fff 2px,transparent 2px,transparent 4px);}
    .s_inmode .hexagon .con{font-size: max(calc(15/500*100vw),10px);}
    .s_inmode .hexagon .con img{height: 1.9em;margin-bottom: .4em;}
    .s_inmode .hexagon.n3 .con img{height: 1em; margin-bottom: 1em;}
}