@charset "utf-8";


/*
.layout_header .nav .respCategoryList {margin-top: 8rem; padding: 0 60px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem 4rem;}
.layout_header .nav .respCategoryList .li  > a {font-size: 2.2rem; font-weight: 600}
.layout_header .nav .respCategoryList .li + .li {margin-top: 5rem}
.layout_header .nav .respCategoryList .categoryAllSub {padding-top: 1rem}
.layout_header .nav .respCategoryList .categoryAllSub li {display: flex; flex-direction: column; align-items: flex-start}
.layout_header .nav .respCategoryList .categoryAllSub li + li {margin-top: 1rem}
.layout_header .nav .respCategoryList .categoryAllSub li a {position: relative;display: inline-block; font-size: 14px; font-weight: 500}
.layout_header .nav .respCategoryList .categoryAllSub li a:before {content: "";position: absolute; left: 50%; bottom: -2px; transform: translate(-50%,100%); width: 0%; height: 1px; background-color: #000; transition: all .3s}
.layout_header .nav .respCategoryList .categoryAllSub li a:hover:before {width: 100%}
.layout_header .nav .respCategoryList .categoryAllSub li a + a {margin-top: 1rem}
.layout_header .nav .respCategoryList .categoryAllSub .categorySub {padding-left: 15px; margin-top: 10px; display: none}
.layout_header .nav .respCategoryList .categoryAllSub .categorySub li + li {margin-top: 5px}
*/



/* 화면전환 효과
.hd_overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; pointer-events: none; }
.hd_overlay.show { pointer-events: visible; }
.hd_overlay.show .bar { transform: scale(1, 1) translate3d(0,0,0); }

.hd_overlay .bar { position: absolute; width: 10.1vw; background: #000; top: 0; bottom: 0; transform: scale(0, 1) translate3d(0,0,0); transform-origin: 100% 100%; transition: transform 0.5s ease-in-out; }
.hd_overlay .bar:first-of-type { border-left: none; }
.hd_overlay .bar:nth-of-type(1) { left: 0; transition-delay: 0.05s; }
.hd_overlay .bar:nth-of-type(2) { left: 10vw; transition-delay: 0.1s; }
.hd_overlay .bar:nth-of-type(3) { left: 20vw; transition-delay: 0.15s; }
.hd_overlay .bar:nth-of-type(4) { left: 30vw; transition-delay: 0.2s; }
.hd_overlay .bar:nth-of-type(5) { left: 40vw; transition-delay: 0.25s; }
.hd_overlay .bar:nth-of-type(6) { left: 50vw; transition-delay: 0.3s; }
.hd_overlay .bar:nth-of-type(7) { left: 60vw; transition-delay: 0.35s; }
.hd_overlay .bar:nth-of-type(8) { left: 70vw; transition-delay: 0.4s; }
.hd_overlay .bar:nth-of-type(9) { left: 80vw; transition-delay: 0.45s; }
.hd_overlay .bar:nth-of-type(10) { left: 90vw; transition-delay: 0.5s; }

.sub .hd_overlay.show .bar { transition: unset; }

.cover_bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; pointer-events: none; }
.cover_bg.on { opacity: 0; }
.main .cover_bg { display: none; }
*/






.ms-preloader {width: 100%;height: 100%;position: fixed;z-index: 9999999;top: 0;left: 0;opacity: 1;visibility: visible;background-color: #000; transition: 0.3s;}
.ms-preloader img { width: 8rem; height: 8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3}
.ms-preloader.on {opacity: 0; visibility: hidden}



.main_btn {overflow: hidden; position: relative;display: inline-flex;align-items: center;padding: 1rem 2rem;background-color: #fff;color: #000; font-weight: 500;transition: opacity 1s ease-in-out, transform 1s ease-in-out;}
.main_btn::before {content: '';position: absolute;left: -1px;bottom: -1px; z-index: 0; width: calc(100% + 2px);height: calc(100% + 2px);background: transparent;box-shadow: inset 0px 0px 0px #000;
    display: block;-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);transition: all 0.75s ;}

.main_btn span {position: relative; z-index: 1; font-size: max(1.4rem, 12px); transition: 0.7s}
.main_btn svg {position: relative; z-index: 1; height: 14px;margin-left: 20px; transition: 0.7s}
.main_btn .ico { position: relative; width: 2rem; height: 2rem; margin-left: 20px; background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; transition: background 0.7s; z-index: 1; }

.main_btn.line {border:1px solid #000}
.main_btn.line2 {background: none; border:1px solid #fff; color: #fff;}
.main_btn.line2:before {box-shadow: inset 0px 0px 0px #fff;}
.main_btn.line2 .ico{background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat;}


.main_btn.line3 {background: none; border:1px solid #fff; color: #fff;}
.main_btn.line3::before { box-shadow: inset 0 0 0 #fff; }
.main_btn.line3 .ico{background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat;}
.main_btn.line3.en { font-family: 'CormorantGaramond22',serif; }
.main_btn.line3.en span { font-size: max(2rem, 14px); }

.main_btn.bk { background-color: #000; color: #fff; }
.main_btn.bk::before { background: transparent;box-shadow: inset 0px 0px 0px #fff; }
.main_btn.bk svg { fill: #fff; }
.main_btn.bk .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat; }



.main .resp_wrap {position: relative}


/*비주얼 섹션*/

.main1 .visual_sect {position: relative; width: 100%;background-color: #000; }
.main1 .visual_sect .swiper-slide { height: 100vh;}
.main1 .visual_sect .logo {display: flex; align-items: flex-end; position: fixed; left: 50%; top: calc(var(--header_Height) + 10rem); transform: translate(-50%,0); display: none}
.main1 .visual_sect .logo svg + svg {margin-left: 1.5rem}
.main1 .visual_sect .video {position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; opacity: 1; transition: opacity 1s}
.main1 .visual_sect .video video {width: 100%; height: 100%; object-fit: cover; object-position: center}
.main1 .visual_sect.active .video{opacity: 1}

.main1 .visual_sect .visual_txt {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); color: #fff}
.main1 .visual_sect .visual_txt p {font-size: 3rem;color: #fff;font-weight: 600; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; display: none}
.main1 .visual_sect .visual_txt .btn {position: relative; display: inline-flex;align-items: center;padding: 1rem 2rem;background-color: #fff; color: #000; margin-top: 2rem;  opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out}
.main1 .visual_sect .visual_txt .btn::before {content: '';position: absolute;left: -1px;bottom: -1px; z-index: 0; width: calc(100% + 2px);height: calc(100% + 2px);background: transparent;box-shadow: inset 0px 0px 0px #000;
    display: block;-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);transition: all 0.75s ;}

.main1 .visual_sect .visual_txt .btn span {position: relative; z-index: 1; font-size: 14px; transition: 0.7s}
.main1 .visual_sect .visual_txt .btn svg {position: relative; z-index: 1; height: 14px;margin-left: 20px; transition: 0.7s}
.main1 .visual_sect .visual_txt .btn .ico { position: relative; width: 2rem; height: 2rem; margin-left: 20px; background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; transition: background 0.7s; z-index: 1; }

.main1 .visual_sect.active .visual_txt p,
.main1 .visual_sect.active .visual_txt .btn {opacity: 1; transform: unset}
.main1 .visual_sect .slide_move { position: absolute; left: 6rem; bottom: 5rem;}

.main1 .slide_move {display: flex; align-items: center; justify-content: flex-start; width: 50px; z-index: 20; color: #fff; }
.main1 .slide_move .swiper-pagination { display: flex; justify-content: flex-end; width: 100%; font-size: 13px; font-weight: 600; text-align: left; position: static }
.main1 .slide_move .swiper-pagination .slash { margin: 0 10px; }
.main1 .slide_move .arr { display: flex; align-items: center; justify-content: flex-start; font-size: 13px; fill: #fff; z-index: 10; cursor: pointer; margin-left: 20px;}
.main1 .slide_move .arr .swiper_btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.main1 .slide_move .arr .swiper_btn + .swiper_btn { margin-left: 13px; }
.main1 .slide_move .arr .swiper_btn .ico { width: 1.8rem; height: 1.8rem;  }
.main1 .slide_move .arr .swiper_btn.prev .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="91.51 27.03 48.49 70.05 91.4 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }
.main1 .slide_move .arr .swiper_btn.next .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="48.49 27.03 91.51 70.05 48.59 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }
.main1 .slide_move .arr .swiper_btn.prev.swiper-button-disabled .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23bdbdbd; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="91.51 27.03 48.49 70.05 91.4 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }
.main1 .slide_move .arr .swiper_btn.next.swiper-button-disabled .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23bdbdbd; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="48.49 27.03 91.51 70.05 48.59 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }



.type_sect {padding-top: 20rem}
.type_sect .in{width: 100%;}
.type_sect .sect_tit .tit {text-align: center}
.type_sect .cont_box {display: grid; grid-template-columns: 1fr 1fr ; gap: 8px; margin-top: 4rem}
.type_sect .cont_box .cont { position: relative; background-color: #000}
/*.type_sect .cont_box .cont:nth-child(1) img {opacity: 1 !important;}*/
.type_sect .cont_box .cont .img {overflow: hidden; position: relative; padding-top: 100%; background-color: #000;}
.type_sect .cont_box .cont .img:before {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.1); z-index: 5}
.type_sect .cont_box .cont .img img {position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; object-fit: cover; object-position: center; transform: translate(-50%,-50%) scale(1.2);opacity: 0.9; transition: transform 1s ease-in-out, opacity 0.8s cubic-bezier(.4,0,.2,1);}
.type_sect .cont_box .cont .img img + img {z-index: 2; opacity: 0}

/*.type_sect .cont_box .cont:hover .img img:nth-child(1) {opacity: 0;}*/

.type_sect .cont_box .cont .txt_box {position: absolute; left: 5rem; bottom: 5rem; z-index: 5}
.type_sect .cont_box .cont .txt_box .tit {font-size: 3rem; color: #fff; font-weight: 600}
.type_sect .cont_box .cont .txt_box .main_btn {margin-top: 2rem}


.img.animated video,
.img.animated img  {transform: translate(-50%,-50%) scale(1.025) !important;}


.service_sect {margin-top: 20rem}
.service_sect .in {width: 100%;}
.service_sect .sect_tit {text-align: center}
.service_sect .cont_box {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4rem}
.service_sect .cont_box .cont .img {position: relative; width: 100%; padding-top: 100%; overflow: hidden}
.service_sect .cont_box .cont .img img,
.service_sect .cont_box .cont .img video {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.2); width: 100%; height: 100%; object-position: center; object-fit: cover;  transition: transform 1s ease-in-out, opacity 0.8s cubic-bezier(.4,0,.2,1);}
.service_sect .cont_box .cont .tit { display: block; margin-top: 15px; margin-left: 20px; font-size: 2rem; font-weight: 600; }
.service_sect .cont_box .cont .video_btn {display: flex; align-items: center; justify-content: center; position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background-color: #fff; border-radius: 50%;  opacity: 0; transition:opacity 0.5s ease-in-out 1s , box-shadow 0.3s}
.service_sect .cont_box .cont .video_btn svg {fill: #000; width: auto; height: 17px}
.service_sect .cont_box .cont .video_btn svg .play {display: none}
.service_sect .cont_box .cont .video_btn.play svg .play {display: block}
.service_sect .cont_box .cont .video_btn.play svg .pause {display: none}

.service_sect .cont_box .cont .img.animated .video_btn {opacity: 1;}


.news_sect {margin-top: 26rem}
.news_sect .resp_wrap {width: 164rem;}
.news_sect .slide_box {padding-left: max(20px, calc((100% - 164rem) / 2 + 2rem)); margin-top: 30px}
.news_sect .swiper-container { position: relative }
.news_sect .slide_box .swiper-wrapper {  }
.news_sect .slide_box .swiper-slide { display: flex;justify-content: flex-start; width: 50%; height: auto; color: #343434; font-weight: 600; transform: translateX(-52%); transform-origin: bottom; transition: 0.7s; transition-delay: 0.1s; }
.news_sect .slide_box .swiper-slide .img { position: relative; width: 45%; padding-top: 36%; }
.news_sect .slide_box .swiper-slide .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.news_sect .slide_box .swiper-slide .txt_box { display: flex; flex-direction: column; justify-content: flex-start; width: 47%; height: 100%; padding-top: 4rem; margin-left: 5rem; opacity: 0; transform: translateX(-10%); transition-delay: 1s; transition: opacity 0.7s, transform 0.7s; word-break: keep-all }
.news_sect .slide_box .swiper-slide .txt_box .vol { font-size: 2rem; font-weight: 700;}
.news_sect .slide_box .swiper-slide .txt_box .tit { margin-top: 20px; font-size: 3.5rem; font-weight: 700;}
.news_sect .slide_box .swiper-slide .txt_box .txt { margin-top: 10px; font-size: 1.8rem; font-weight: 500}
.news_sect .slide_box .swiper-slide .txt_box .btn_box { margin-top: auto; }
.news_sect .slide_box .swiper-slide .txt_box .btn_box .btn {display: flex; align-items: center; font-size: 15px}
.news_sect .slide_box .swiper-slide .txt_box .btn_box .btn svg {margin-left: 20px; height: 18px; transition: all .3s}


.news_sect .slide_box .swiper-slide[class$=-active] { filter: none; opacity: 1; transform: scale(1); transition: all 0.7s; transition-delay: 0s; }
.news_sect .slide_box .swiper-slide[class$=-active] .txt_box { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.news_sect .slide_box .swiper-slide[class$=-next] { transform:  translateX(0); }
.news_sect .slide_box .swiper-slide[class$=-next] + .swiper-slide + .swiper-slide { transform: translateX(-100%); }

.news_sect .paging { position: absolute; right: 0%; bottom: 0; }
.news_sect .paging .swiper-pagination-bullet { width: 2px; height: 2rem; background: #000; border-radius: 0; opacity: 1; transform-origin: center; transition: transform 0.3s; }
.news_sect .paging .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 3rem; }
.news_sect .paging .swiper-pagination-bullet-active { transform: rotate(90deg); }






.layout_body .main { margin-bottom: calc((var(--layout_body_pd) * -1) - 2px); }

.lounge_sect { margin-top: 20rem }
.lounge_sect .sec_tit_wrap {padding: 0 20px; text-align: center}
.lounge_sect .sec_tit_wrap .tit { font-size: 5rem; font-weight: 700; }
.lounge_sect .sec_tit_wrap .txt { margin-top: 15px; font-size: 18px;}
.lounge_sect .btn_wrap {position: absolute; left: 50%; transform: translateX(-50%); bottom: 5rem; z-index: 3}
.lounge_sect .btn_wrap .main_btn + .main_btn {margin-left: 20px}

.lounge_sect .img_wrap { position: relative; margin-top: 4rem; }
.lounge_sect .img_wrap:before {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.05); z-index: 2}
.lounge_sect .img_wrap .img { position: relative; width: 100%; padding-top: min(50%,72vh); }
.lounge_sect .img_wrap .img img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); }

/*.lounge_sect .img_wrap .btn_wrap .main_btn .txt { white-space: nowrap; font-size: 1.5rem; font-weight: 500; }*/
/*.lounge_sect .img_wrap .btn_wrap .main_btn .ico { display: flex; align-items: center; justify-content: center; }*/

.lounge_sect .slide_move {position: absolute; left: 6rem; bottom: 5rem;}

.lounge_sect .program_wrap { width: 80%; margin: 14rem auto 0; }

.lounge_sect .program_wrap .cont { display: flex; align-items: stretch; justify-content: flex-start; }

.lounge_sect .program_wrap .cont > .left { width: 35%; flex-shrink: 0; margin-right: 5rem; }
.lounge_sect .program_wrap .cont > .left .tit_wrap {  }
.lounge_sect .program_wrap .cont > .left .tit_wrap .tit { font-size: 4rem; font-weight: 600; }
.lounge_sect .program_wrap .cont > .left .tit_wrap .txt { margin-top: 4rem; font-size: 1.8rem; line-height: 2; }


.lounge_sect .program_wrap .cont > .right { width: 100%; }
.lounge_sect .program_wrap .cont > .right .cir_wrap { display: flex; align-items: center; justify-content: flex-start; }
.lounge_sect .program_wrap .cont > .right .cir_wrap .cir { position: relative; width: calc(100%/3); padding-top: calc(100%/3); border-radius: 100%; background-color: #fff; }
.lounge_sect .program_wrap .cont > .right .cir_wrap .cir .txt_box { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.lounge_sect .program_wrap .cont > .right .cir_wrap .cir .txt_box .tit { font-size: 3.5rem; font-weight: 600; }
.lounge_sect .program_wrap .cont > .right .cir_wrap .cir .txt_box .txt { margin-top: 2rem; font-size: 1.8rem; }

.lounge_sect .program_wrap .cont > .right .pro_li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 9rem; margin-top: 9rem; }
.lounge_sect .program_wrap .cont > .right .pro_li li { padding-bottom: 1.5rem; border-bottom: 1px solid #000; font-size: 2rem; font-weight: 500; text-align: left; }

@media only screen and (min-width:1280px) {

    .type_sect .cont_box .cont:hover .main_btn::before { box-shadow: inset 300px 0px 0px #000;}
    .type_sect .cont_box .cont:hover .main_btn span { color: #fff}
    .type_sect .cont_box .cont:hover .main_btn svg { fill: #fff}
    .type_sect .cont_box .cont:hover .main_btn .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat; }

    .main_btn:hover::before  { box-shadow: inset 300px 0px 0px #000;}
    .main_btn:hover span {color: #fff}
    .main_btn:hover svg {fill: #fff}
    .main_btn:hover .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat; }

    .main_btn.line2:hover::before  { box-shadow: inset 300px 0px 0px #fff;}
    .main_btn.line2:hover span {color: #000}
    .main_btn.line2:hover svg {fill: #000}
    .main_btn.line2:hover .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; }

    .main_btn.bk:hover::before  { box-shadow: inset 300px 0px 0px #fff;}
    .main_btn.bk:hover span { color: #000 }
    .main_btn.bk:hover svg { fill: #000 }
    .main_btn.bk:hover .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; }

    .main_btn.line3:hover::before { box-shadow: inset 300px 0 0 #fff; }
    .main_btn.line3:hover span { color: #000; }
    .main_btn.line3:hover .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; }

    .visual_sect .visual_txt .btn:hover span {color: #fff}
    .visual_sect .visual_txt .btn:hover .ico { background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat; }
    .visual_sect .visual_txt .btn:hover::before  {box-shadow: inset 300px 0px 0px #000;}
    .type_sect .cont_box .cont:hover .img img + img {opacity: 1}
    .service_sect .cont_box .cont .video_btn:hover {box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.4)}
    .news_sect .slide_box .swiper-slide .txt_box .btn_box .btn:hover svg {transform: translateX(10px)}
    .genuine_sect .cont_box .btn:hover svg {transform: translateX(10px)}

    .main4 .info_sect .btn_wrap > div:hover .btn {opacity: 1}
    .main4 .info_sect .btn_wrap .prev_btn:hover .prev { transform: translateX(-10px)}
    .main4 .info_sect .btn_wrap .next_btn:hover .next { transform: translateX(10px)}
}



/*메인2*/

/*.main4 {margin-bottom: calc(var(--layout_body_pd) * -1)}Z*/

    /*비주얼 섹션*/

.main4 { transition: background-color 1s ease-in-out}
.main4.bk {background-color: #000;}
.main4 .sect_en_tit2 {font-size: 5rem; font-weight: 600; line-height: 1}
.main4 .sect_sm_txt2 {font-size: 1.8rem;}
.main4 .sect_en_tit2 + .sect_sm_txt2 {margin-top: 2.5rem}


.main2 .visual_sect {position: relative; width: 100%;background-color: #000; }
.main2 .visual_sect .swiper-slide { height: 100vh;}
.main2 .visual_sect .logo {display: flex; align-items: flex-end; position: fixed; left: 50%; top: calc(var(--header_Height) + 10rem); transform: translate(-50%,0); display: none}
.main2 .visual_sect .logo svg + svg {margin-left: 1.5rem}
.main2 .visual_sect .video {position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; opacity: 1; transition: opacity 1s}
.main2 .visual_sect .video * {width: 100%; height: 100%; object-fit: cover; object-position: center}
.main2 .visual_sect .video.type2 {left: auto; right: 0; width: 50%; }
.main2 .visual_sect .video.type3 {left: 50%; transform: translateX(-50%); width: 184rem; display: flex; align-items: flex-end; justify-content: flex-end}
.main2 .visual_sect .video.type3 img {width: 45%; height: auto}
.main2 .visual_sect.active .video{opacity: 1}

.main2 .visual_sect .visual_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; width: 100%; z-index: 1}
.main2 .visual_sect .visual_txt .resp_wrap {width: 184rem}
.main2 .visual_sect .visual_txt p { opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out;}
.main2 .visual_sect .visual_txt .desc {font-size: var(--banner_desc); font-weight: 500}
.main2 .visual_sect .visual_txt .tit {font-size: var(--banner_tit); font-weight: 700}
.main2 .visual_sect .visual_txt .desc + .tit {margin-top: var(--banner_tit_mt)}
.main2 .visual_sect .visual_txt .txt {font-size: var(--banner_txt)}
.main2 .visual_sect .visual_txt .tit + .txt {margin-top: var(--banner_txt_mt)}

.main2 .visual_sect .main_btn { position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%);}

.main2 .visual_sect.active .visual_txt p,
.main2 .visual_sect.active .visual_txt .btn {opacity: 1; transform: unset}
.main2 .visual_sect .slide_move { position: absolute; left: 6rem; bottom: 5rem;}


.main2 .visual_sect.active .swiper-slide .visual_txt  p {opacity: 0; transform: translateY(50px);}

.main2 .visual_sect.active .swiper-slide-duplicate-active .visual_txt p ,
.main2 .visual_sect.active .swiper-slide-active .visual_txt p {opacity: 1; transform: unset}



.main4 .slide_move {display: flex; align-items: center; justify-content: flex-start; z-index: 20; color: #fff; }
.main4 .slide_move .swiper-pagination { display: flex; justify-content: flex-end; align-items: center; width: 100%; font-size: 13px; font-weight: 600; text-align: left; position: static }
.main4 .slide_move .swiper-pagination .slash { margin: 0 10px; }
.main4 .slide_move .arr { display: flex; align-items: center; justify-content: flex-start; font-size: 13px; fill: #fff; z-index: 10; cursor: pointer; margin-left: 20px;}
.main4 .slide_move .arr .swiper_btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.main4 .slide_move .arr .swiper_btn + .swiper_btn { margin-left: 13px; }
.main4 .slide_move .arr .swiper_btn .ico { width: 1.8rem; height: 1.8rem;  }
.main4 .slide_move .arr .swiper_btn svg .cls-1 { stroke-width: 0px; fill: none}
.main4 .slide_move .arr .swiper_btn svg .cls-2 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 10px; transition: stroke .3s}
.main4 .slide_move .swiper-pagination-current {min-width: 18px}

/*.main4 .slide_move .arr .swiper_btn.prev .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="91.51 27.03 48.49 70.05 91.4 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }*/
/*.main4 .slide_move .arr .swiper_btn.next .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="48.49 27.03 91.51 70.05 48.59 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }*/
/*.main4 .slide_move .arr .swiper_btn.prev.swiper-button-disabled .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23bdbdbd; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="91.51 27.03 48.49 70.05 91.4 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }*/
/*.main4 .slide_move .arr .swiper_btn.next.swiper-button-disabled .ico { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23bdbdbd; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="48.49 27.03 91.51 70.05 48.59 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>')center/contain no-repeat; }*/

.main4 .swiper-progress-bar{display: block; position: relative; z-index: 1; width: 15rem; height: 2px; margin-left: 20px}
.main4 .swiper-progress-bar .slide_progress-bar {position: absolute; height: 2px;  width: auto; clear: both;  left: 0; right: 0; transition: background .3s}
.main4 .swiper-progress-bar .slide_progress-bar.bg {background: #fff; opacity: 0.2}
.main4 .swiper-progress-bar .slide_progress-bar.loading { left: 0; right: auto; background: #fff; height: 100%; width: 0; transition: 0s 0.1s width linear;}
/*.main4 .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}*/
.main4 .swiper-progress-bar.animate .slide_progress-bar.loading {width: 100%; transition-delay: unset; transition: width var(--transition-duration, 0s) linear;}

.main4 .sect_tit_box {text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 7rem}
.main4 .sect_tit_box .logo {width: 12rem; transform: translateY(50px); transition: transform 1s ease-in-out , filter 1s ease-in-out , opacity 1s ease-in-out ; opacity: 0; display: none}
.main4 .sect_tit_box .desc {font-size: 2.2rem; font-weight: 600; transform: translateY(50px); transition: transform 1s ease-in-out , opacity 1s ease-in-out ; opacity: 0;}
.main4 .sect_tit_box .tit {font-size: var(--en_tit); font-family: 'CormorantGaramond22'; font-weight: 600; margin-top: 10px; overflow: hidden; transition: color 1s ease-in-out;}
.main4.bk .sect_tit_box .tit{color: #fff;}
.main4 .sect_tit_box .tit span {transform: translateY(100%); transition: transfoqrm 1s ease-in-out ,  opacity 1s ease-in-out ; display: inline-block; opacity: 0}
.main4 .sect_tit_box .txt {font-size: 1.8rem; margin-top: 1rem; transform: translateY(50px); transition: transform 1s ease-in-out , filter 1s ease-in-out , opacity 1s ease-in-out ; filter: blur(20px); opacity: 0; transition-delay: 1s}
.main4 .sect_tit_box .main_btn {margin-top: 3rem; transform: translateY(50px); transition: transform 1s ,opacity 1s ; opacity: 0; transition-delay: 1.5s}

.main4 .sect_tit_box.animated .logo {transform: unset;  opacity: 1}
.main4 .sect_tit_box.animated .tit span {transform: unset; opacity: 1}
.main4 .sect_tit_box.animated .txt {transform: unset; filter: blur(0px); opacity: 1}
.main4 .sect_tit_box.animated .desc {transform: unset; filter: blur(0px); opacity: 1}
.main4 .sect_tit_box.animated .main_btn {transform: unset; opacity: 1}


.main4 .beauty_sect {margin-top: var(--main_mt);}
.main4 .beauty_sect .slide_box { padding-left: max(20px, calc((100% - 184rem) / 2 + 2rem));}
.main4 .beauty_sect .slide_box .swiper-slide {display: flex; }

.main4 .beauty_sect .slide_box .img_box {width: 55%;}
.main4 .beauty_sect .slide_box .img_box .img {width: 100%; padding-top: 100%; position: relative}
.main4 .beauty_sect .slide_box .img * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box {width: 45%; margin-left: 12rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; padding-top: 8rem}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .slide_paging_box {display: flex; align-items: flex-end; position: absolute; left: 0; top: 20px}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .slide_paging_box .arr {margin-bottom: 0.5rem; cursor: pointer;}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .slide_paging_box .arr svg {width: 1.6rem; transition: all .3s}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .swiper-pagination {font-family: 'CormorantGaramond22'; position: static; font-size: 3.2rem;  text-align: left; margin: 0 20px}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .swiper-pagination span {opacity: 0.2}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .swiper-pagination .swiper-pagination-current {opacity: 1}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .swiper-pagination .barSpace {margin: 0 10px; font-family: 'Pretendard Variable33'; font-size: 1.8rem;}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .en_tit {font-size: 7rem; font-weight: 600; font-family: 'CormorantGaramond22'; line-height: 1.2}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .ko_tit {margin-top: 5rem; font-size: 3.5rem; font-weight: 700; word-break: keep-all}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .txt {font-size: 1.8rem; margin-top: 3rem}
.main4 .beauty_sect .slide_box .swiper-slide .txt_box .main_btn {margin-top: 10rem}

.main4 .beauty_sect .slide_box .swiper-slide .txt_box .scroll_box {overflow-y: auto; max-height: 74rem; padding-bottom: 20px}

.main4 .type_sect2 {margin-top: calc(var(--main_mt)*0.5);}
.main4 .type_sect2 .in{width: 100%; padding: 0 var(--resp_wrap_pd)}
.main4 .type_sect2 .sect_tit .tit {text-align: center}
.main4 .type_sect2 .cont_box .line {display: flex;}
.main4 .type_sect2 .cont_box .line + .line {margin-top: var(--resp_wrap_pd);}
.main4 .type_sect2 .cont_box .cont { position: relative; flex: 1;transition: opacity 1s}
.main4 .type_sect2 .cont_box .cont + .cont {margin-left: var(--resp_wrap_pd)}
.main4 .type_sect2 .cont_box .cont:first-child:nth-last-child(1) .img {padding-top: 35%;}
.main4 .type_sect2 .cont_box .cont ~ .cont .img{padding-top: 100%;}
.main4 .type_sect2 .cont_box .cont .img {overflow: hidden; position: relative; width: 100%; padding-top: 100%; background-color: rgba(0, 0, 0, 0.65); }
.main4 .type_sect2 .cont_box .cont .img:before {display: none; content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.2); z-index: 5}
.main4 .type_sect2 .cont_box .cont .img img {position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; object-fit: cover; object-position: center; transform: translate(-50%,-50%) scale(1.2); opacity: 0.85; transition: transform 1s ease-in-out, opacity 0.8s cubic-bezier(.4,0,.2,1);}
.main4 .type_sect2 .cont_box .cont .img img + img {z-index: 2; opacity: 0}
.main4 .type_sect2 .cont_box .cont .txt_box {position: absolute; left: 0; bottom: 0; z-index: 5; padding: 4rem}
.main4 .type_sect2 .cont_box .cont .txt_box .tit {font-size: 2.5rem; color: #fff; font-weight: 600; overflow: hidden;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.main4 .type_sect2 .cont_box .cont .txt_box .main_btn {margin-top: 2rem}

.main4.bk .type_sect2 .cont_box .cont {opacity: 0}

.main4 .type_sect2 .cont_box .cont:hover .main_btn::before {box-shadow: inset 300px 0px 0px #000;}
.main4 .type_sect2 .cont_box .cont:hover .main_btn span {color: #fff}
.main4 .type_sect2 .cont_box .cont:hover .main_btn .ico {background: url('/data/skin/dualsonic/images/common/dual_ico_arrow_w.svg')center/contain no-repeat;}


.main4 .info_sect {position: relative; width: 100%; height: calc(100vh + 1000px) ;transition: color 1s ease-in-out , background-color 1s ease-in-out; color: #000; margin-top: -2px; z-index: 2;}
.main4 .info_sect .sect_cont {height: 100vh; position: sticky; top: 0}
.main4 .info_sect .in {height: 100%; display: flex; flex-direction: column;}
.main4 .info_sect .sect_tit_box {margin-top: calc(var(--header_total) + 6rem); text-align: left; align-items: flex-start}

.main4 .info_sect.bk { color: #fff}
.main4 .info_sect.bk .txt_wrap .txt_box .face_txt { color: rgba(255,255,255,0.6);}
.main4 .info_sect.bk .txt_wrap .txt_box .face_txt span {color: #FFF; text-decoration-color: #fff;}


.main4 .info_sect .cont_box {flex: 1; position: relative; margin-top: var(--header_Height)}
.main4 .info_sect .cont_box:before {position: absolute; content: ""; right: 0; width: 200px; height: 200px; background-color: #fff; border-radius: 50%; top: 0; transition: 3s ease-in; opacity: 0}
.main4 .info_sect .scroll {position: absolute; width: 100%; height: 100%; opacity: 0; left: 0; top: 0; z-index: 10; }
.main4 .info_sect .img_wrap {position: relative; width: 100%; height: 100%;}
.main4 .info_sect .img_wrap .img {display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%) !important; opacity: 0}

.main4 .info_sect .img_wrap .img .main_img {width: 100%; height: 100%; object-position: center; object-fit: contain; z-index: 3}

.main4 .info_sect .img_wrap .img.cartridge .sub_img {position: absolute; top: 0%; right: 0; height: 100%; object-position: center; object-fit: contain; opacity: 0;}
.main4 .info_sect .img_wrap .img.cartridge .sub_img.img1 { z-index: 3;}
.main4 .info_sect .img_wrap .img.cartridge .sub_img.img2 { transform: translateX(20%); z-index: 2;}
.main4 .info_sect .img_wrap .img.cartridge .sub_img.img3 { transform: translateX(60%); z-index: 1;}

.main4 .info_sect .img_wrap .img.light .sub_img {position: absolute; top: 0%; right: 0; height: 100%; object-position: center; object-fit: contain; }
/*.main4 .info_sect .img_wrap .img:nth-child(3) .sub_img {position: absolute; top: 0%; right: 0; height: 100%; object-position: center; object-fit: contain; opacity: 0; z-index: 4}*/

.main4 .info_sect .img_wrap .img.face .sub_img {position: absolute; top: 0%; right: 0; height: 100%; object-position: center; object-fit: contain; opacity: 0; z-index: 4; width: 100%}
.main4 .info_sect .img_wrap .img.face .sub_img img {height: 100%}
.main4 .info_sect .img_wrap .img.face .sub_img .cir_line {position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%;}
.main4 .info_sect .img_wrap .img.face .sub_img .cir_line .cir {position: absolute; left: 50%;bottom: 35.5%; transform: translate(-50%, -50%); width: 5px; height: 5px; background-color: #65D227; border-radius: 50%; opacity: 0.8}
/*.main4 .info_sect .img_wrap .img.face .sub_img .cir_line .cir {17/19/36}*/
.main4 .info_sect .img_wrap .img.face .oled {display: flex;flex-direction: column-reverse;justify-content: flex-start;position: absolute; bottom: 33%;left: 0%;transform: translate(-30%,0%);width: 30%;height: 69%;}
.main4 .info_sect .img_wrap .img.face .oled .oled_img {transform: translateY(10px); opacity: 0}
.main4 .info_sect .img_wrap .img.face .oled .oled_img + .oled_img {margin-bottom: 10px}
.main4 .info_sect .img_wrap .img.face .line {position: absolute;right: 51%;bottom: 36%;transform: translate(0%, -50%);width: 0%;height: 1px;background-color: #999;z-index: 5;}
.main4 .info_sect .img_wrap .img.face .line .cir { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background-color: #999; border-radius: 50%; opacity: 0}
.main4 .info_sect .img_wrap .img.face.type2 .line {bottom: 20%}
.main4 .info_sect .img_wrap .img.face.type2 .sub_img .cir_line .cir {bottom: 19.5%}
.main4 .info_sect .img_wrap .img.face.type2 .oled {bottom: 17%}
.main4 .info_sect .img_wrap .img:nth-child(1) {z-index: 10}
.main4 .info_sect .img_wrap .img:nth-child(2) {z-index: 9;}
.main4 .info_sect .img_wrap .img:nth-child(3) {z-index: 8;}
.main4 .info_sect .img_wrap .img:nth-child(4) {z-index: 7;}
.main4 .info_sect .img_wrap .img:nth-child(5) {z-index: 6;}
.main4 .info_sect .img_wrap .img:nth-child(6) {z-index: 5;}
.main4 .info_sect .img_wrap .img:nth-child(7) {z-index: 4;}
.main4 .info_sect .img_wrap .img:nth-child(8) {z-index: 3;}
.main4 .info_sect .img_wrap .img:nth-child(9) {z-index: 2;}
.main4 .info_sect .img_wrap .img:nth-child(10) {z-index:1;}

.main4 .info_sect .txt_wrap {overflow: hidden; position: absolute;width: 65%; height: 50rem; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main4 .info_sect .txt_wrap .txt_box {position: absolute;left: 0;top: 50%;word-break: keep-all;transform: translateY(-50%);font-size: 2rem;font-weight: 500;margin-top: 100px;opacity: 0; width: 40%}
.main4 .info_sect .txt_wrap .txt_box.right {left: auto;right: 0}
.main4 .info_sect .txt_wrap .txt_box .desc {margin-bottom: 10px}
.main4 .info_sect .txt_wrap .txt_box .tit {font-size: 3.2rem; font-weight: 700; }
.main4 .info_sect .txt_wrap .txt_box .tit span {}
.main4 .info_sect .txt_wrap .txt_box .txt {font-size: 1.7rem; font-weight: 400;margin-top: 1rem; line-height: 1.6}
.main4 .info_sect .txt_wrap .txt_box .face_txt {margin-top: 20px; font-size: 1.5rem; color: rgba(0,0,0,0.6); transition: color 1s ease-in-out}
.main4 .info_sect .txt_wrap .txt_box .face_txt p + p {margin-top: 7px}
.main4 .info_sect .txt_wrap .txt_box .face_txt span {font-size: 1.8rem; color: #000; text-decoration-line: underline;text-decoration-color: #000;text-decoration-style: solid;text-underline-position: under;text-decoration-thickness: 1px; display: inline-block; margin-bottom: 2px;  transition: 1s ease-in-out}

.main4 .info_sect .btn_wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90%; display: flex; justify-content: space-between; z-index: 11; opacity: 0; transition: 1s}
.main4 .info_sect .btn_wrap > div{cursor: pointer;}
.main4 .info_sect .btn_wrap .btn {cursor: pointer; width: 8rem; height: 8rem; box-shadow: 0 0 0 1px #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%;  opacity: 0.6; transition: all .3s;}
.main4 .info_sect .btn_wrap .btn .ico {width: 1.5rem;height: 2.5rem; display: inline-block}
.main4 .info_sect .btn_wrap .prev .ico{background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 0px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="91.51 27.03 48.49 70.05 91.4 112.97"/><rect class="cls-1" width="140" height="140"/></g></g></svg>') center/cover no-repeat;}
.main4 .info_sect .btn_wrap .next .ico{background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 9px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-1" points="48.6 27.03 91.61 70.05 48.7 112.97"/><rect class="cls-2" width="140" height="140"/></g></g></svg>') center/cover no-repeat;}


.main4 .info_sect.bk .btn_wrap {opacity: 1}

.main4 .lounge_sect2 {margin-top: 23rem;}
.main4 .lounge_sect2 .roman_tit{font-family: 'CormorantGaramond22'; font-size: 23rem; text-align: center; color: #F5F5F5; line-height: 1; font-style: italic}
.main4 .lounge_sect2 .roman_tit span {transform: translate(60px) skewX(50deg);filter: blur(30px);opacity: 0;transition: 1s; display: inline-block; min-width: 0.2em}
.main4 .lounge_sect2 .img_wrap {position: relative;  max-width: 100%; width: 100%}
.main4 .lounge_sect2 .img_wrap .img { overflow: hidden; display: block}
.main4 .lounge_sect2 .img_wrap .swiper-slide {position: relative; padding-top: 52.5%;}
.main4 .lounge_sect2 .img_wrap .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}
.main4 .lounge_sect2 .img_wrap .slide_move {position: absolute; left: 50%; bottom: -3rem; transform: translate(-50%,100%)}
.main4 .lounge_sect2 .img_wrap .slide_move .swiper-pagination-bullet {width: 1.1rem; height: 1.1rem; border-radius: 6rem; background-color: #9B8066; opacity: 1; transition: all .3s}
.main4 .lounge_sect2 .img_wrap .slide_move .swiper-pagination span + span {margin-left: 10px}
.main4 .lounge_sect2 .img_wrap .slide_move .swiper-pagination-bullet-active {width: 2.4rem; background-color: #fff}
.main4 .lounge_sect2 .bg_box {color: #fff; background: linear-gradient(107deg, rgba(78,49,38,1) 0%, rgba(194,153,112,1) 100%); text-align: center; padding-top: 36rem; padding-bottom: 8rem; margin-top: -28rem}

.main4 .lounge_sect2 .roman_tit.animated span {
    transform: translate(0) skewX(0deg);
    filter: blur(0);
    opacity: 1;
}
.main4 .lounge_sect2 .roman_tit.animated.ani_end span {transition: none !important;}
.main4 .lounge_sect2 .bg_box .txt {color: #CCB2A4}



.main4 .service_sect .in {width: 164rem}
.main4 .service_sect .cont_box {gap: 3rem}
.main4 .service_sect .cont_box .cont .tit {margin-left: 0}

.main4 .genuine_sect2 {padding-top: 15rem}
.main4 .genuine_sect2 .cont_box {overflow: hidden; display: flex; border-radius: 20px; }
.main4 .genuine_sect2 .cont_box .txt_box {flex: 1; padding: 35px 85px; background-color: #F5F5F5}
.main4 .genuine_sect2 .cont_box .txt_box .tit1 {font-size: 2.5rem; font-weight: 700}
.main4 .genuine_sect2 .cont_box .txt_box .tit2 {margin-top: 20px; font-size: 3.5rem; font-weight: 700}
.main4 .genuine_sect2 .cont_box .txt_box .txt {margin-top: 5px; font-size: 1.8rem; font-weight: 500}
.main4 .genuine_sect2 .cont_box .btn {display: flex; align-items: center; justify-content: center; padding: 0 7rem; background-color: #000; color: #fff}
.main4 .genuine_sect2 .cont_box .btn span {font-size: 2rem; font-weight: 500}
.main4 .genuine_sect2 .cont_box .btn svg {height: 2.5rem; margin-left: 10px; fill: #fff; transition: all .3s}
.main4 .genuine_sect2 .cont_box .btn:hover svg {transform: translateX(10px)}

.main4 .genuine_sect {margin-top: var(--main_mt)}
.main4 .genuine_sect .in {background-color: #F5F5F5; border-radius: 2rem; width:  calc(164rem - var(--resp_wrap_pd))}
.main4 .genuine_sect .cont_box {position: relative; padding: 6rem 0;  width: 114rem; margin: 0 auto; max-width: 100%}
.main4 .genuine_sect .cont_box .sect_tit_box {align-items: flex-start; margin-bottom: 0}
.main4 .genuine_sect .cont_box .sect_tit_box .main_btn {margin-top: 6rem}
.main4 .genuine_sect .cont_box .img {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 37%}
.main4 .genuine_sect .cont_box .img img {width: 100%}


.main4 .service_sect2 {margin-top: var(--main_mt)}
.main4 .service_sect2 .in {width: 164rem}
.main4 .service_sect2 .sect_tit {text-align: center}
.main4 .service_sect2 .slide_box {position: relative;}
.main4 .service_sect2 .slide_arr {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 110%; display: flex; justify-content: space-between; }


.main4 .service_sect2 a.no_link {cursor: default}
.main4 .service_sect2 .cont {}
.main4 .service_sect2 .cont .img {position: relative; width: 100%; padding-top: 100%; overflow: hidden}
.main4 .service_sect2 .cont .img img,
.main4 .service_sect2 .cont .img video {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.2); width: 100%; height: 100%; object-position: center; object-fit: cover;  transition: transform 1s ease-in-out, opacity 0.8s cubic-bezier(.4,0,.2,1); cursor: pointer; pointer-events: none}
.main4 .service_sect2 .cont .img a {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1}
.main4 .service_sect2 .cont .tit { display: block; margin-top: 15px; font-size: 2rem; font-weight: 600; }
.main4 .service_sect2 .video_btn {display: flex; align-items: center; justify-content: center; position: absolute; right: 2rem; top: 2rem; width: 3rem; height: 3rem; background-color: #fff; border-radius: 50%;  opacity: 0; transition:opacity 0.5s ease-in-out 1s , box-shadow 0.3s; z-index: 2}
.main4 .service_sect2 .video_btn svg {fill: #000; width: auto; height: 1.8rem}
.main4 .service_sect2 .video_btn svg .play {display: none}
.main4 .service_sect2 .video_btn.play svg .play {display: block}
.main4 .service_sect2 .video_btn.play svg .pause {display: none}
.main4 .service_sect2.animated .cont + .video_btn {opacity: 1;}
.main4 .service_sect2.animated .cont .img video,
.main4 .service_sect2.animated .cont .img img {transform: translate(-50%,-50%) scale(1);}
.main4 .service_sect2 .swiper-button-prev .ico  {background: url("/data/skin/dualsonic/images/common/dual_ico_prev.svg")center/cover no-repeat; width: 100%; height: 100%; opacity: 0.3; transition: opacity 0.3s , transform 0.3s;}
.main4 .service_sect2 .swiper-button-next .ico  {background: url("/data/skin/dualsonic/images/common/dual_ico_next.svg")center/cover no-repeat;width: 100%; height: 100%; opacity: 0.3; transition: opacity 0.3s , transform 0.3s;}
.main4 .service_sect2 .swiper-button-prev,
.main4 .service_sect2 .swiper-button-next {width: 2.5rem; height: 4.5rem; background: none}






/*.main4 .news_sect2 {margin-top: 26rem}
.main4 .news_sect2 .slide_box {padding-left: max(20px, calc((100% - 164rem) / 2 + 2rem)); margin-top: 30px}
.main4 .news_sect2 .swiper-container { position: relative }
.main4 .news_sect2 .slide_box .swiper-wrapper {  }
.main4 .news_sect2 .slide_box .swiper-slide { display: flex;justify-content: flex-start; width: 50%; height: auto; color: #343434; font-weight: 600; transform: translateX(-52%); transform-origin: bottom; transition: 0.7s; transition-delay: 0.1s; }
.main4 .news_sect2 .slide_box .swiper-slide .img { position: relative; width: 45%; padding-top: 36%; }
.main4 .news_sect2 .slide_box .swiper-slide .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.main4 .news_sect2 .slide_box .swiper-slide .txt_box { display: flex; flex-direction: column; justify-content: flex-start; width: 47%; height: 100%; padding-top: 4rem; margin-left: 5rem; opacity: 0; transform: translateX(-10%); transition-delay: 1s; transition: opacity 0.7s, transform 0.7s; word-break: keep-all }
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .vol { font-size: 2rem; font-weight: 700;}
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .tit { margin-top: 20px; font-size: 3.5rem; font-weight: 700;}
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .txt { margin-top: 10px; font-size: 1.8rem; font-weight: 500}
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .btn_box { margin-top: auto; }
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .btn_box .btn {display: flex; align-items: center; font-size: 15px}
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .btn_box .btn svg {margin-left: 20px; height: 18px; transition: all .3s}
.main4 .news_sect2 .slide_box .swiper-slide .txt_box .btn_box .btn:hover svg {transform: translateX(10px)}
.main4 .news_sect2 .slide_box .swiper-slide[class$=-active] { filter: none; opacity: 1; transform: scale(1); transition: all 0.7s; transition-delay: 0s; }
.main4 .news_sect2 .slide_box .swiper-slide[class$=-active] .txt_box { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.main4 .news_sect2 .slide_box .swiper-slide[class$=-next] { transform:  translateX(0); }
.main4 .news_sect2 .slide_box .swiper-slide[class$=-next] + .swiper-slide + .swiper-slide { transform: translateX(-100%); }
.main4 .news_sect2 .paging { position: absolute; right: 0%; bottom: 0; }
.main4 .news_sect2 .paging .swiper-pagination-bullet { width: 2px; height: 2rem; background: #000; border-radius: 0; opacity: 1; transform-origin: center; transition: transform 0.3s; }
.main4 .news_sect2 .paging .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 3rem; }
.main4 .news_sect2 .paging .swiper-pagination-bullet-active { transform: rotate(90deg); }*/

.main4 .modal_3d .device_sect .device_3d {height: calc(100vh - var(--header_Height)); max-height: 100rem;}
.main4 .howTo3D .resp_wrap {width: 184rem}

.main4 .banner_sect {position: relative; display: flex; justify-content: center; padding: 18rem 0; overflow: hidden; opacity: 1; transition: 1s ease-in-out}
.main4.bk .banner_sect:before ,
.main4.bk .banner_sect:after { width: calc(50% + 4px); background-color: #000; transition: width 1s ease-in-out, background-color 1s ease-in-out;}

.main4 .banner_sect:before {left: -2px}
.main4 .banner_sect:after {right: -2px}
.main4 .banner_sect .bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 200%; height: 100% ;background: linear-gradient(90deg, rgba(28,28,27,1) 20%, rgba(168,115,79,1) 110%); transition: 1s ease-in-out; transition-delay: 0.5s}
.main4 .banner_sect .logo {position: relative; z-index: 3}
.main4 .banner_sect .logo svg {width:auto; height: 12rem; }
.main4 .banner_sect .logo svg + svg {margin-left: 10px; transition: margin-left 1.2s ease-in-out 1s;}
.main4 .banner_sect .txt_box {display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) skewX(50deg) ; z-index: 2; color: #fff; font-size: 6.5rem; font-weight: 600;
    filter: blur(30px); opacity: 0; transition: opacity 1.2s ease-in , filter 1.2s ease-in , transform 1.2s ease-in; transition-delay: .2s}

.main4 .banner_sect.active .logo svg + svg {margin-left: 12rem}
.main4 .banner_sect.active .txt_box {opacity: 1; filter: blur(0); transform: translate(-50%,-50%) skewX(0deg)}
.main4 .banner_sect.active .bg {transform: translate(-75%,-50%);}
.main4 .banner_sect:before ,
.main4 .banner_sect:after {content: ""; position: absolute; top: -2px;  height: calc(100% + 4px);  z-index: 4; width: 0%; background-color: #fff; transition: width 1s ease-in-out 1s ,  background-color 1s ease-in-out; transition-delay: 0s}

.main4.bk .banner_sect {opacity: 0}
.main4.bk .banner_sect:after,
.main4.bk .banner_sect:before {background-color: #000}


/* ==================== 241029 innerBeauty ==================== */
.main4 .main_top_banner{position: relative;}
.main4 .main_top_banner .txt_box{overflow: hidden; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); width: min(144rem, 70%); min-width: 650px; height: 100%; pointer-events: none;}
.main4 .main_top_banner .txt_box .item{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px;}
.main4 .main_top_banner .txt_box .tit_box{width: 60%;}
.main4 .main_top_banner .txt_box .tit{opacity: 0; transform: translateY(30%); color: var(--color); font-size: clamp(6rem, 4.3571vw + -.8571rem, 12rem); font-weight: 600; font-family: 'CormorantGaramond22'; line-height: 1.2em;}
.main4 .main_top_banner .txt_box .tit span{position: relative; padding-right: 1em;}
.main4 .main_top_banner .txt_box .tit span::after{content: '\f178'; display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% - 1.25em); right: 0; width: 3em; height: 3em; border: 1px solid var(--color); font-size: 0.2em; font-family: "Font Awesome 6 Pro"; font-weight: 300; border-radius: 50%; transition: background 0.3s, color 0.3s;}
.main4 .main_top_banner .txt_box .sub_tit{opacity: 0; transform: translateY(50%); color: var(--color); font-size: 2rem; font-weight: 500;}

.main4 .main_top_banner .txt_box .img{position: relative; opacity: 0; transform: translateY(10%); width: 22%; height: 100%;}
.main4 .main_top_banner .txt_box .img img{position: absolute; top: 0; left: 50%; transform: translate(-50%, -12%); height: 140%; object-fit: contain;}
.main4 .main_top_banner .txt_box .gummy .img img {transform: translate(-50%, 6%);height: 110%;}
.main4 .main_top_banner .txt_box .stick .img img {transform: translate(-50%, -1%);height: 120%;}

.main4 .main_top_banner .txt_box .item.on{display: flex; align-items: center; justify-content: center;}
.main4 .main_top_banner .txt_box .item.on .tit{opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s;}
.main4 .main_top_banner .txt_box .item.on .sub_tit{opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s;}
.main4 .main_top_banner .txt_box .item.on .img{opacity: 1; transform: translateY(0); transition: opacity 0.75s 0.25s, transform 0.75s 0.25s;}

.main4 .main_top_banner .banner_slide .swiper-slide{}
.main4 .main_top_banner .banner_slide a{display: block; position: relative;}
.main4 .main_top_banner .banner_slide .img{position: relative; top: 0; left: 0; width: 100%; padding-top: max(12.5%, 200px);}
.main4 .main_top_banner .banner_slide .img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.main4 .main_top_banner a.no_link{cursor: default; pointer-events: none;}
.main4 .main_top_banner a.no_link .txt_box .tit span::before{display: none;}
.main4 .main_top_banner a.no_link .txt_box .tit span::after{display: none;}

.main4 .category_sect{}
.main4 .category_sect .item_wrapper{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.main4 .category_sect .item{position: relative;}
.main4 .category_sect .item a{display: block;}
.main4 .category_sect .item .img{overflow: hidden;}
.main4 .category_sect .item .img img{transform: scale(1.2); transition: transform 1s ease-in-out, opacity 0.8s cubic-bezier(.4,0,.2,1)}
.main4 .category_sect .item .txt_box{display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding-bottom: 9rem; color: #fff;}
.main4 .category_sect .item .txt_box .tit{font-size: 6rem; font-weight: 600; font-family: 'CormorantGaramond22';}
.main4 .category_sect .item .txt_box .sub_tit{margin-top: 4rem; font-size: 2.2rem; font-weight: 700;}
.main4 .category_sect .item .txt_box .desc{margin-top: 2rem; font-size: 1.6rem;}
.main4 .category_sect .item .txt_box .main_btn{margin-top: 6rem; font-family: 'CormorantGaramond22';}
.main4 .category_sect .item .txt_box .main_btn::before{box-shadow: inset 0px 0px 0px #fff;}
.main4 .category_sect .item .txt_box .main_btn span{font-size: max(2.2rem, 12px);}
.main4 .category_sect.animated .item .img img{transform: scale(1.025) !important}

.main4 .type_sect2.new .cont_box{padding: 0 var(--resp_wrap_pd);}

.main4 .routine_sect{overflow: hidden; margin-top: var(--main_mt); }
.main4 .routine_sect .tit_box{align-items: flex-start; position: relative; width: 214rem; margin-bottom: 0;}
.main4 .routine_sect .tit_box .tit{font-size: clamp(9rem, 5vw + 2rem, 15rem); font-weight: 600; font-family: 'CormorantGaramond22'; line-height: 1.2em;}
.main4 .routine_sect .tit_box .sub_tit{margin-top: 4rem; font-size: 2.5rem; font-weight: 700;}
.main4 .routine_sect .tit_box .symbol { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; right: 0; z-index: 1; transform: translate(0, 45%); width: 30rem; height: 30rem; border-radius: 100%; }
.main4 .routine_sect .tit_box .symbol .spin_txt { position: absolute; top: 0; left: 0; animation: symbolSpin 20s infinite linear; }
.main4 .routine_sect .tit_box .symbol .ico { position: absolute; top: 50%; left: 50%; width: 67.5%; height: 67.5%; transform: translate(-50%, -50%); transform-origin: center; }
.main4 .routine_sect .tit_box .symbol .ico img { width: 100%; height: 100%; object-fit: contain; }
@keyframes symbolSpin {
    to {rotate: -360deg;}
}

.main4 .routine_sect .routine_img_wrap{display: flex; justify-content: center; overflow: hidden; }
.main4 .routine_sect .img_list{display: flex; align-items: flex-start; justify-content: center; position: relative; width: 100%; height: calc(100vh - var(--header_Height)); margin-right: -5%;}
.main4 .routine_sect .img_list .item{flex-shrink: 0; width: 22.4vw;}
.main4 .routine_sect .img_list .item + .item{margin-left: 40px;}
.main4 .routine_sect .img_list .item .img{overflow: hidden; position: relative; height: 0; border-radius: 20px;}
.main4 .routine_sect .img_list .item .img img{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; object-fit: contain;}
.main4 .routine_sect .img_list .item:first-child{margin-top: 13.5vw;}
.main4 .routine_sect .img_list .item:first-child .img{padding-top: 33.6vw;}
.main4 .routine_sect .img_list .item:nth-child(2){margin-top: 8.5vw;}
.main4 .routine_sect .img_list .item:nth-child(2) .img{padding-top: 22.4vw;}
.main4 .routine_sect .img_list .item:nth-child(2) .img + .img{margin-top: 40px;}
.main4 .routine_sect .img_list .item:nth-child(3) .img{padding-top: 33.6vw; margin-top: 4vw; background: #000;}
.main4 .routine_sect .img_list .item:nth-child(3) .img img{transform: translateX(-75%); width: auto; max-width: none;}
.main4 .routine_sect .img_list .item:nth-child(4){margin-top: 11vw;}
.main4 .routine_sect .img_list .item:nth-child(4) .img{padding-top: 32.48vw;}
.main4 .routine_sect .img_list .item:nth-child(5){}
.main4 .routine_sect .img_list .item:nth-child(5) .img{padding-top: 30.688vw;}
.main4 .routine_sect .txt_wrap{display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; color: #fff; pointer-events: all;}
.main4 .routine_sect .txt_wrap svg{height: 3rem; fill: #fff;}
.main4 .routine_sect .txt_wrap .tit{margin-top: 7rem; font-size: 5.5rem; font-weight: 700; text-align: center;}
.main4 .routine_sect .txt_wrap .sub_tit{margin-top: 3rem; font-size: 1.6rem;}
.main4 .routine_sect .txt_wrap .main_btn{margin-top: 9rem; font-family: 'CormorantGaramond22';}
.main4 .routine_sect .txt_wrap .main_btn::before{box-shadow: inset 0px 0px 0px #fff;}
.main4 .routine_sect .txt_wrap .main_btn span{font-size: max(2.2rem, 12px);}


.info_banner_sect{transition: background-color 1s ease-in-out;}
.info_banner_sect.bk{background: #000;}

.main4 .banner_sect.new .bg{background: none;}
.main4 .banner_sect.new.bk.active{opacity: 1;}
.main4 .banner_sect.new.bk:before, .main4.bk .banner_sect.new:after{width: calc(50% + 4px);}
.main4 .banner_sect.new.bk.active:before, .main4.bk .banner_sect.new.active:after{width: 0;}
.main4 .banner_sect.new .txt_box{transition: opacity 0.8s ease-in, filter 0.8s ease-in, transform 0.8s ease-in; transition-delay: 0s;}
.main4 .banner_sect.new .logo svg path{fill: #eee;}
.main4 .banner_sect.new .logo svg + svg{transition: margin-left 0.8s ease-in-out 0.5s;}

.main4 .lounge_sect2.new{}
.main4 .lounge_sect2.new .img_wrap .slide_move .swiper-pagination-bullet{background: rgba(0, 0, 0, 0.2);}
.main4 .lounge_sect2.new .img_wrap .slide_move .swiper-pagination-bullet-active{background: #000;}
.main4 .lounge_sect2.new .bg_box{background: none; color: #000;}
.main4 .lounge_sect2.new .bg_box .txt{color: #000;}

@media only screen and (min-width:1280px) {
    .main4 .main_top_banner:hover .txt_box .item.on .tit span::after{background: var(--color); color: #000;}

    .main4 .category_sect .item a:hover .txt_box .main_btn{}
    .main4 .category_sect .item a:hover .txt_box .main_btn::before{box-shadow: inset 300px 0px 0px #fff;}
    .main4 .category_sect .item a:hover .txt_box .main_btn span{color: #000;}
    .main4 .category_sect .item a:hover .txt_box .main_btn .ico {background: url(/data/skin/dualsonic/images/common/dual_ico_arrow.svg) center / contain no-repeat;}

    .main4 .routine_sect .txt_wrap .main_btn:hover{}
    .main4 .routine_sect .txt_wrap .main_btn:hover::before{box-shadow: inset 300px 0px 0px #fff;}
    .main4 .routine_sect .txt_wrap .main_btn:hover span{color: #000;}
    .main4 .routine_sect .txt_wrap .main_btn:hover .ico {background: url(/data/skin/dualsonic/images/common/dual_ico_arrow.svg) center / contain no-repeat;}
}
/* ==================== //241029 innerBeauty ==================== */