body {
    overflow-x: hidden;
}

.hw-lm {
    width: 100%;
    background-color: #000;
    color: #fff;
    font-weight: 500;
    border-bottom: 1px solid transparent;
}

.hw-lm * {
    box-sizing: border-box;
}

.hw-lm svg:not(:root) {
    overflow: visible;
}

.hw-lm .blur-up {
    filter: blur(20px);
    transition: filter .2s;
}

.hw-lm .blur-up.lazyloaded {
    filter: blur(0);
}

.hw-lm picture,
.hw-lm img,
.hw-lm video {
    display: block;
    width: 100%;
    border: 0;
}

.hw-lm video {
    height: 100%;
    object-fit: cover;
}

.hw-lm sup.ssup {
    font-size: .6em;
    cursor: pointer;
}

.hw-lm .videolazy {
    visibility: hidden;
}

.hw-lm .videolazy.videolazyloaded {
    visibility: visible;
}

.hw-lm a {
    text-decoration: none;
}

.hw-lm b {
    font-style: normal;
    font-weight: inherit;
}

.hw-lm .nr {
    white-space: nowrap;
    font-style: normal;
}

.hw-lm .nr1 {
    display: inline-block;
    white-space: nowrap;
    font-style: normal;
    text-decoration: underline;
}

.hw-lm .showPc {
    display: inline-block;
}

.hw-lm .showMob {
    display: none;
}

.hw-lm .showInWxUc {
    display: none;
}

.hw-lm .showie {
    display: none;
}

.hw-lm .hidden {
    display: none !important;
}

.hw-lm .povideo {
    position: relative;
    width: 100%;
    height: 100%;
}

.hw-lm .txtani {
    transform: translate(0px, 80px);
    opacity: 0;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -webkit-transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -moz-transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -ms-transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -o-transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .txtani.active {
    transform: translate(0, 0);
    opacity: 1;
}

/* mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .showPc {
        display: none !important;
    }

    .hw-lm .showPcinline {
        display: none;
    }

    .hw-lm .showMob {
        display: inline-block;
    }

    .hw-lm .hideMob {
        display: none;
    }
}


/* sup  */
.hw-lm .last-section {
    position: relative;
    z-index: 20;
}

.hw-lm .last-section a {
    color: inherit;
    text-decoration: underline;
}

.hw-lm .last-section ol {
    width: 66.77083333333vw;
    margin: 10.416666666vw auto;
    color: #85858A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    list-style: decimal;
}

.hw-lm .last-section .active {
    color: #d5d5db;
}

.hw-lm .last-section .mll {
    position: relative;
    margin: 1.041666666666667vw 0 0 0;
    list-style: none;
}

.hw-lm .last-section .mll::before {
    content: "*";
    position: absolute;
    top: 0;
    left: -9px;
}

/* min-width 1920 */
@media screen and (min-width: 1921px) {
    .hw-lm .last-section ol {
        font-size: 0.625vw;
    }

    .hw-lm  .last-section .mll::before {
        left: -0.8333333333vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .last-section .notmm {
        margin: 0 0 2.777777777vw 0;
    }

    .hw-lm .last-section .mll {
        margin: 6.6666666666vw 0 0 0;
    }

    .hw-lm .last-section ol {
        width: 78.25vw;
        margin: 27.7777777777vw 0 27.7777777777vw 13.533333vw;
        font-size: 3.3333333333vw;
    }

    .hw-lm .last-section .mll::before {
        left: -2.7777777777vw;
    }
}

/* section 1 pc */
.hw-lm .lm-section1 {
    overflow: hidden;
    position: relative;
    display: flex;
    background: #fff;
}

.hw-lm .lm-section1 .ulmatekvim {
    width: 58.02083333vw;
    height: 52.1875vw;
    margin: 0 0 -1px 0;
}

.hw-lm .lm-section1 .ulmatekvtxt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-lm .lm-section1 .ulmateksp {
    width: 31.5625vw;
    margin: 17.29166666vw 0 0 0;
}

.hw-lm .lm-section1 .ulmateksp img {
    width: 100%;
}

.hw-lm .lm-section1 .ulmatekvmat {
    width: 26.04166666vw;
    margin: 1.04166666vw 0 1.66666666vw 0;
    color: #000;
    font-size: 2.5vw;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section1 .ulmatekvdes {
    width: 32.39583333vw;
    color: #000;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.hw-lm .lm-section1 .ulmatekvfullvideo {
    display: flex;
    align-items: center;
    max-width: 20.833333333vw;
    margin: 2.91666666vw 0 0 0;
}

.hw-lm .lm-section1 .ulmatekvfullvideo span {
    color: #000;
    font-size: 1.0416666666vw;
    font-weight: 500;
    line-height: 1.6;
}

.hw-lm .lm-section1 .ulmatekvfullvideo picture {
    width: auto;
    flex-shrink: 0;
}

.hw-lm .lm-section1 .ulmatekvfullvideo img {
    width: 1.666666666vw;
    height: 1.666666666vw;
    border: 0.1041666666666667vw solid rgba(0, 0, 0, 1);
    border-radius: 50%;
    margin: 0 0 0 0.4166666666vw;
    transition:  0.3s ease;
}

.hw-lm .lm-section1 .ulmatehoricon {
    display: flex;
    position: absolute;
    bottom: 8.33333333vw;
    right: 5.05208333vw;
    width: 8.59375vw;
    height: 2.55208333vw;
    z-index: 2;
}

.hw-lm .lm-section1 .ulmatehoricon a {
    display: flex;
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section1 .ulmatehoricon svg {
    width: 100%;
    height: 100%;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section1 .ulmatekvfullvideo:hover {
        cursor: pointer;
    }

    .hw-lm .lm-section1 .ulmatekvfullvideo:hover img {
        border-color: rgba(0, 0, 0, 0.6);
    }
}

/* section 1 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section1 {
        flex-direction: column;
     }
 
     .hw-lm .lm-section1 .ulmatekvim {
         width: 100%;
         height: 105.555555555vw;
         margin: 0;
     }
 
     .hw-lm .lm-section1 .ulmateksp {
        width: 84.44444444vw;
        height: 5.13888888vw;
        margin: 22.22222222vw 0 0 0;
     }
 
     .hw-lm .lm-section1 .ulmatekvmat {
         width: 83.33333333vw;
         margin: 3.3333333333vw 0 4.44444444vw 0;
         font-size: 6.66666666vw;
     }
 
     .hw-lm .lm-section1 .ulmatekvdes {
         width: 86.33333333vw;
         font-size: 3.3333333333vw;
     } 
 
     .hw-lm .lm-section1 .ulmatekvtxt {
        margin: 0 0 27.77777777vw 0;
     }

     .hw-lm .lm-section1 .ulmatekvfullvideo {
        max-width: 48.611111111vw;
        margin: 7.77777777777vw 0 0 0;
     }
 
     .hw-lm .lm-section1 .ulmatekvfullvideo span {
         font-size: 3.88888888vw;
     }
 
     .hw-lm .lm-section1 .ulmatekvfullvideo img {
         width: 6.66666666vw;
         height: 6.66666666vw;
         margin: 0 0 0 2.22222222vw;
     }

     .hw-lm .lm-section1 .ulmatekvfullvideo:hover img {
        border-color: #000;
        cursor: default;
     }

     .hw-lm .lm-section1 .ulmatekvfullvideo img {
        border: 0px;
     }
}

/* section 2 */
.hw-lm .lm-section2 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 10.41666666vw 0;
    background:linear-gradient(180deg,#001b4d 0%,#000000 100%);
}

.hw-lm .lm-section2 .reasonswiper {
    width: 67.5vw;
    margin: 10.4166666666vw 0 0;
}

.hw-lm .lm-section2 .reasonswiper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 38.02083333vw;
    border-radius: 0.83333333vw;
    cursor: pointer;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide:not(:last-child) {
    margin: 0 3.3333333333vw 0 0;
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide .reanim {
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section2 .reasonswiper .reashaow {
    position: absolute;
    width: 100%;
    height: 330px;
    top: -1px;
    left: 50%;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    transform: translateX(-50%);
    z-index: 2;
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide .reanim picture, 
.hw-lm .lm-section2 .reasonswiper .swiper-slide .reanim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide h2 {
    position: absolute;
    top: 2.5vw;
    left: 2.5vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 700;
    line-height: 1.25;
    transition-timing-function: cubic-bezier(0.63, 0.01, 0.29, 1);
    opacity: 0;
    z-index: 6;
}

.hw-lm .will-change .swiper-slide h2 {
    will-change: transform, opacity;
}

.hw-lm .will-change .reasonswiper .swiper-wrapper {
    will-change: transform, opacity;
}

.hw-lm .lm-section2 .reasonswiper .swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section2 .reasongation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5vw 0 0 0;
    padding: 0.625vw 1.0416666666vw;
    background: rgba(36, 64, 127, 0.3);
    border-radius: 999px
}

.hw-lm .lm-section2 .realbtn,
.hw-lm .lm-section2 .rearbtn {
    width: 2.08333333vw;
    height: 2.08333333vw;
    cursor: pointer;
    transition: 0.3s ease;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section2 .realbtn.down,
.hw-lm .lm-section2 .rearbtn.down {
    opacity: 1!important;
}

.hw-lm .lm-section2 .realbtn svg,
.hw-lm .lm-section2 .rearbtn svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section2 .realbtn svg {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-lm .lm-section2 .reapoints {
    display: flex;
    margin: 0 0.9375vw;
}

.hw-lm .lm-section2 .reapoints li {
    width: 0.52083333vw;
    height: 0.52083333vw;
    background: #D7E2FA;
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.hw-lm .lm-section2 .reapoints li.active {
    opacity: 0.8;
}

.hw-lm .lm-section2 .reapoints li:not(:last-child) {
    margin: 0 0.52083333vw 0 0;
}

.hw-lm .lm-section2 .realbtn.disabled,
.hw-lm .lm-section2 .rearbtn.disabled {
    opacity: 0.3!important;
    cursor: default;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section2 .realbtn:hover, 
    .hw-lm .lm-section2 .rearbtn:hover {
        opacity: 0.6;
    }

    .hw-lm .lm-section2 .reapoints li:hover {
        opacity: 0.7;
    }
}

/* section 2 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section2 {
        margin: 0 0 27.77777777vw 0;
    }
    
    .hw-lm .lm-section2 .reasonswiper {
        width: 82.22222222vw;
        margin: 27.777777777vw 0 0 0;
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide {
        height: auto;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide .povideo {
        overflow: hidden;
        height: 111.11111111vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide h2 {
        position: relative;
        top: 0;
        left: 0;
        width: 77.777777777vw;
        margin: 6.6666666666vw auto 0;
        font-size: 5.55555555vw;
        text-align: center;
    }

    .hw-lm .lm-section2 .reasongation {
        padding: 2.5vw 4.166666666vw;
        margin: 8.88888888vw 0 0 0;
    }

    .hw-lm .lm-section2 .reapoints li {
        width: 2.22222222vw;
        height: 2.22222222vw;
    }

    .hw-lm .lm-section2 .reapoints li:not(:last-child) {
        margin: 0 3.33333333vw 0 0;
    }

    .hw-lm .lm-section2 .realbtn, 
    .hw-lm .lm-section2 .rearbtn {
        width: 8.33333333vw;
        height: 8.33333333vw;
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide .reanim {
        overflow: hidden;
        height: 109.722222222vw;
        border-radius: 2.2222222222vw;
    }

    .hw-lm .lm-section2 .reapoints {
        margin: 0 3.61111111vw;
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide h2 {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }

    .hw-lm .lm-section2 .reasonswiper .swiper-slide:not(:last-child) {
        margin: 0 4.4444444444vw 0 0;
    }

    .hw-lm .lm-section2 .realbtn:hover, 
    .hw-lm .lm-section2 .rearbtn:hover {
        opacity: 1;
    }

    .hw-lm .lm-section2 .reapoints li:hover {
        opacity: 1;
    }
}


/* section 3 */
.hw-lm .lm-section3 {
    margin: 0 0 10.4166666666vw 0;
}

.hw-lm .lm-section3 .ulmatedesign {
    overflow: hidden;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
}

.hw-lm .lm-section3 .ulmatedeshadow1 {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 110%;
    height: 37.03703703%;
    transform: translate(-50%, 0);
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%,#000 100%);
    z-index: 2;
}

.hw-lm .lm-section3 .ulmatedeshadow2 {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 110%;
    height: 37.03703703%;
    transform: translate(-50%, 0);
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,#000 100%);
    z-index: 2;
}

.hw-lm .lm-section3 .ulmatedetxtcon {
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translateY(var(--trandesign));
}

.hw-lm .lm-section3 .ulmatedetxtcon.active {
    transform: translateY(0px);
}

.hw-lm .lm-section3 .ulmatedetxtcon.active h3 {
    opacity: 0;
}

.hw-lm .lm-section3 .ulmatedetxtcon.active .ulmatededes {
    opacity: 1;
}

.hw-lm .lm-section3 .ulmatetxtshow {
    position: absolute;
    bottom: 14.8148148%;
    left: 16.25vw;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0px);
    opacity: 0;
    z-index: 3;
}

.hw-lm .lm-section3 .povideo {
    overflow: hidden;
}

.hw-lm .lm-section3 .ulmatetxtshow.show {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.hw-lm .lm-section3 .ulmatedemat {
    display: inline-block;
    position: relative;
    width: 46.875vw;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #fff 0vw, #ebebeb 3.125vw, #8b98ab 6.25vw, #fff 6.77083333vw, #ebebeb 8.85416666vw, #8b98ab 12.23958333vw, #8b98ab 12.5vw, #fff 12.5vw, #ebebeb 15.625vw, #8b98ab 18.75vw,#fff 19.27083333vw, #ebebeb 21.875vw, #8b98ab 23.4375vw);
    -webkit-background-clip: text;
    background-clip: text;
    transition: opacity .6s linear;
}


.hw-lm .lm-section3.will-change .ulaclockani .clock1,
.hw-lm .lm-section3.will-change .ulmatededes,
.hw-lm .lm-section3.will-change .ulmatedemat {
    will-change: transform, opacity;
}


.hw-lm .lm-section3 .ulaclockani {
    position: absolute;
    left: 23.14375vw;
    top: 2.91666666vw;
    width: 1.19791666vw;
    z-index: 3;
} 

@keyframes clockRotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hw-lm .lm-section3 .ulaclockani .clock1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 44% 36%;
    animation: clockRotate 60s linear 0s infinite;
}

.hw-lm .lm-section3 .ulmatededes {
    width: 43.1875vw;
    margin: 1.666666666vw 0 0 0;
    color: #fff;
    font-size: 1.1458333333vw;
    font-weight: 400;
    line-height: 1.6;
    transition: opacity .6s linear;
    opacity: 0;
}

.hw-lm .lm-section3 .ulmatedespace {
    height: 80vh;
}

/* section 3 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section3 {
        margin: 0 0 27.777777777vw 0;
    }

    .hw-lm .lm-section3 .ulmatetxtshow {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        opacity: 1;
    }

    .hw-lm .lm-section3 .ulmatededes {
        opacity: 1;
    }

    .hw-lm .lm-section3 .ulmatedesign {
        height: auto;
    }

    .hw-lm .lm-section3 .ulmatedesign .povideo {
        width: 100%;
        height: 150vw;
    }

    .hw-lm .lm-section3 .ulmatedemat {
        width: 77.77777777vw;
        font-size: 13.33333333vw;
        background: linear-gradient(180deg,#fff 0,#ebebeb 6.94444444vw,#8b98ab 13.88888888vw, #8b98ab 16.25vw, #fff 17.36111111vw,#ebebeb 26.194444vw,#8b98ab 33.5vw, #fff 33.88888888vw,#ebebeb 40.444444vw,#8b98ab 50.75vw, #fff 50.13888888vw,#ebebeb 57.694444vw,#8b98ab 68.388889vw, #fff 66.38888888vw,#ebebeb 73.944444vw,#8b98ab 84.027778vw, #fff 84.02777777vw,#ebebeb 92.194444vw,#8b98ab 100.888889vw, #fff 98.88888888vw,#ebebeb 107.75vw,#8b98ab 115.444444vw );
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hw-lm .lm-section3 .ulmatededes {
        width: 77.77777777vw;
        margin: 4.44444444vw 0 8.88888888vw 0;
        color: #6d6f72;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section3 .ulmatedespace {
        display: none;
    }

    .hw-lm .lm-section3 .ulmatedetxtcon {
        margin: 0 0 0 11.11111111vw;
        transform: translate3d(0px, 80px, 0px);
        opacity: 0;
    }

    .hw-lm .lm-section3 .ulmatedetxtcon.tactive {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }

    .hw-lm .lm-section3 .ulaclockani {
        left: 3.33333333vw;
        top: 24.72222222vw;
        width: 3.05555555vw;
    }
 
}   

/* section 4 pc */
.hw-lm .lm-section4 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 10.41666666vw 0;
    background: #000;
    z-index: 9;
}

.hw-lm .lm-section4 .xtreDoutcon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 67.5vw;
    margin: 0 auto;
}

.hw-lm .lm-section4 .xtremDesSiwper {
    width: 100%;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section4 .xtremDesSiwper.isend .swiper-slide:last-child {
    cursor: default;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide {
    overflow: hidden;
    display: flex;
    height: 34.375vw;
    border-radius: 0.83333333vw;
    cursor: pointer;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide>div {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide>div {
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide>div.current {
    z-index: 3;
    opacity: 1;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide>div:nth-child(2) {
    transform: translateX(-100%);
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:nth-child(1) {
    width: 67.5vw;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:nth-child(2) {
    width: 41.666666666vw;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:nth-child(3) {
    width: 24.583333333vw;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:nth-child(4) {
    width: 33.125vw;
}

.hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:nth-child(5) {
    width: 33.125vw;
}

.hw-lm .lm-section4 .xdestxt {
    display: flex;
    width: 43.75vw;
    margin: 2.5vw 0 2.5vw 0.83333333vw;
}

.hw-lm .lm-section4 .xdestxt p {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0;
} 

.hw-lm .lm-section4 .xdestxt p.current {
    z-index: 2;
    opacity: 1;
}

.hw-lm .lm-section4 .xdestxt p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-lm .lm-section4 .xdesnav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 16.20833333vw;
}

.hw-lm .lm-section4 .xdesnav li {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
}

.hw-lm .lm-section4 .xdesnav li.swiper-button-disabled {
    opacity: 0.3;
    transition: none;
}

.hw-lm .lm-section4 .xdesnav li.swiper-button-disabled .cirbubble,
.hw-lm .lm-section4 .xdesnav li.swiper-button-disabled .rwater,
.hw-lm .lm-section4 .xdesnav li.swiper-button-disabled .lwater {
    opacity: 0!important;
}

.hw-lm .lm-section4 .xdesnav li.swiper-button-disabled .borshadow {
    opacity: 1!important;
    transition: none;
}

.hw-lm .lm-section4 .xdesnav li .borshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #24407f;
    transform: translate(-50%,-50%);
    transition: opacity 0.6s ease;
}

.hw-lm .lm-section4 .xdesnav li .rwater,
.hw-lm .lm-section4 .xdesnav li .lwater {
    position: absolute;
    width: 8.9583333333vw;
    height: 3.6458333333vw;
    top: 2.6041666666vw;
}

.hw-lm .lm-section4 .xdesnav li .rwater svg,
.hw-lm .lm-section4 .xdesnav li .lwater svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section4 .xdesnav li .lwater {
    right: -2.2916666666vw;
    transition: top 0.6s ease-out, right 0.6s ease-out;
}

.hw-lm .lm-section4 .xdesnav li .rwater {
    left: -0.10416666666vw;
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.hw-lm .lm-section4 .xdesnav li .cirbubble {
    position: absolute;
    right: 0.3125vw;
    bottom: -1.1458333333vw;
    width: 0.2083333333vw;
    height: 0.2083333333vw;
    background-color: #fff;
    border-radius: 50%;
    transition: bottom 0.3s ease-out, opacity 0.3s ease-in;
    z-index: 2;
}

.hw-lm .lm-section4 .xdesnav li.xdeslarrow .cirbubble {
    left: 0.3125vw;
    right: auto;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section4 .xdesnav li:hover .borshadow {
        opacity: 0;
    }

    .hw-lm .lm-section4 .xdesnav li:hover .lwater {
        top: -0.3125vw;
        right: -5.78125vw;
    }
    
    .hw-lm .lm-section4 .xdesnav li:hover .rwater {
        top: -0.5208333333vw;
        left: -5.572916666vw;
    }
    
    .hw-lm .lm-section4 .xdesnav li:hover .cirbubble {
        bottom: 1.041666666vw;
        opacity: 0;
    }

    .hw-lm .lm-section4 .xdesnav li:hover {
        cursor: pointer;
    }
    
    .hw-lm .lm-section4 .xdesnav li.swiper-button-disabled:hover {
        cursor: default;
    }
    
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-lm .lm-section4 .xdesnav li .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section4 .xdesnav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section4 .xdesnav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section4 .xdesnav li .cirbubble {
        display: none;
    }
}

.hw-lm .lm-section4 .xdesnav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section4 .xdesnav .xdearricon {
    position: relative;
    display: flex;
    width: 1.04166666vw;
    height: 1.04166666vw;
    margin: 0 0 0 0.625vw;
    z-index: 2;
}

.hw-lm .lm-section4 .xdesnav li:nth-child(1) .xdearricon {
    margin: 0 0 0 0.8333333333vw;
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-lm .lm-section4 .xdesnav .xdearricon svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section4 .xdescoto {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0.8333333333vw 2.03125vw 0.8333333333vw 1.25vw;
    background: rgba(36, 64, 127, 0.3);
    border-radius: 9999px;
}

.hw-lm .lm-section4 .iconpart {
    display: flex;
}

.hw-lm .lm-section4 .iconpart>div {
    position: relative;
    width: 1.25vw;
    height: 1.25vw;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section4 .iconpart>div:hover {
        cursor: pointer;
    }
}

.hw-lm .lm-section4 .iconpart>div .color1,
.hw-lm .lm-section4 .iconpart>div .color2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.77vw;
    height: 1.77vw;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
    opacity: 0;
}

.hw-lm .lm-section4 .iconpart>div .color1 {
    border: 2px solid #24407f;
}

.hw-lm .lm-section4 .iconpart>div .color2 {
    border: 2px solid #525252;
}

.hw-lm .lm-section4 .iconpart>div.current .lightcircle {
    opacity: 1;
}

.hw-lm .lm-section4 .iconpart>div:not(:last-child) {
    margin: 0 1.45833333vw 0 0;
}

.hw-lm .lm-section4 .txtpart {
    position: relative;
    display: flex;
    margin: 0 0 0 1.25vw;
}

.hw-lm .lm-section4 .txtpart span {
    position: relative;
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.25;
    opacity: 0;
}

.hw-lm .lm-section4 .txtpart span.color1 {
    color: #d7e2fa;
}

.hw-lm .lm-section4 .txtpart span.color2 {
    color: #999;
}

.hw-lm .lm-section4 .txtpart span.current {
    opacity: 1;
    z-index: 9;
}

.hw-lm .lm-section4 .txtpart span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
}


.hw-lm .lm-section4.will-change .iconpart>div.current img,
.hw-lm .lm-section4.will-change .xdestxt p,
.hw-lm .lm-section4.will-change .xdesnav li .lwater,
.hw-lm .lm-section4.will-change .xdesnav li .rwater,
.hw-lm .lm-section4.will-change .xdesnav li .cirbubble,
.hw-lm .lm-section4.will-change .xdesnav li .borshadow,
.hw-lm .lm-section4.will-change .xtremDesSiwper .swiper-wrapper {
    will-change: transform, opacity;
}

/* section 4 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section4 {
        padding: 0 0 27.777777777vw 0;
    }

    .hw-lm .lm-section4 .xtreDoutcon {
        width: 82.222222222vw;
    }

    .hw-lm .lm-section4 .xtremDesSiwper .swiper-slide {
        width: 100%!important;
        height: 109.722222222vw!important;
        border-radius: 2.2222222222vw;
    }

    .hw-lm .lm-section4 .xdestxt {
        order: -1;
        width: 77.7777777777vw;
        margin: 0 0 8.8888888888vw 2.222222222vw;
    }

    .hw-lm .lm-section4 .xtremDesSiwper {
        margin: 0 0 11.11111111vw 0;
        order: 0;
    }

    .hw-lm .lm-section4 .xdescoto {
        padding: 3.88888888vw 5.555555555vw 3.88888888vw  4.02777777vw;
        order: 1;
    }

    .hw-lm .lm-section4 .xdesnav {
        order: 2;
    }

    .hw-lm .lm-section4 .txtpart span {
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section4 .xdestxt p {
        font-size: 4.4444444444vw;
    }

    .hw-lm .lm-section4 .xdesnav li {
        width: 11.1111111111vw;
        height: 11.1111111111vw
    }

    .hw-lm .lm-section4 .iconpart>div {
        width: 5.55555555vw;
        height: 5.55555555vw;
    }

    .hw-lm .lm-section4 .xdescoto {
        margin: 0;
    }

    .hw-lm .lm-section4 .iconpart>div .color1, 
    .hw-lm .lm-section4 .iconpart>div .color2 {
        width: 7.77777777vw;
        height: 7.77777777vw;
    }

    .hw-lm .lm-section4 .xdesnav .xdearricon {
        width: 4.72222222vw;
        height: 4.72222222vw;
        margin: 0 0 0 2.63888888vw;
    }

    .hw-lm .lm-section4 .iconpart>div:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section4 .txtpart {
        margin: 0 0 0 4.44444444vw;
    }

    .hw-lm .lm-section4 .xdesnav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section4 .xdesnav li:nth-child(1) .xdearricon {
        margin: 0 0 0 3.75vw;
    }

    .hw-lm .lm-section4 .xtremDesSiwper .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section4 .xdesnav li:hover .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section4 .xdesnav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section4 .xdesnav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section4 .xdesnav li .cirbubble {
        display: none;
    }
}

/* section 5 pc */
.hw-lm .lm-section5 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9;
    background: #000;
    margin: -1px 0 0 0;
}

.hw-lm .lm-section5 .ulmaterialmat {
    position: relative;
    width: 26.041666666vw;
    color: #fff;
    font-size: 3.3333333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    z-index: 2;
}

.hw-lm .lm-section5 .ulmaterialdes {
    position: relative;
    width: 44.375vw;
    margin: 1.666666666vw 0 3.333333333vw 0;
    color: #6d6f72;
    font-size: 1.145833333333333vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    z-index: 2;
}

.hw-lm .lm-section5 .ulmaterivideo {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 55.78125vw;
}

.hw-lm .lm-section5 .ulmaterivideo .ulmatersha {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 110%;
    height: 20.833333333vw;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
    transform: translateX(-50%);
    z-index: 9;
}

.hw-lm .lm-section5 .ulmaterivideo .ulmatersha1 {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 110%;
    height: 20.833333333vw;
    background: linear-gradient(0, rgba(0,0,0,0) 0%, #000 100%);
    transform: translateX(-50%);
    z-index: 9;
}

/* section 5 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section5 {
        margin: -1px 0 27.777777777vw 0;
    }

    .hw-lm .lm-section5 .ulmaterialmat {
        align-self: flex-start;
        width: 77.77777777vw;
        margin: 0 0 0 11.11111111vw;
        font-size: 8.88888888vw;
        text-align: left;
    }

    .hw-lm .lm-section5 .ulmaterialdes {
        align-self: flex-start;
        width: 77.77777777vw;
        margin: 4.44444444vw 0 8.88888888vw 11.11111111vw;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-lm .lm-section5 .ulmaterivideo {
        height: 150vw;
    }

    .hw-lm .lm-section5 .ulmaterivideo .ulmatersha,
    .hw-lm .lm-section5 .ulmaterivideo .ulmatersha1 {
        height: 55.555555555vw;
    }
}

/* section 6 pc */
.hw-lm .lm-section6 {
    position: relative;
    width: 100%;
}

.hw-lm .lm-outsti .divoutsti {
    overflow: hidden;
    position: sticky;
    top: 0;
    margin-top: -100vh;
} 

.hw-lm .lm-section6 .divingsha {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 101%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 52%,rgba(0, 0, 0, 0.91) 100%);
}

.hw-lm .lm-outsti .divspace {
    height: 180vh;
}

.hw-lm .lm-section6 .divingtxt {
    position: absolute;
    bottom: 79.791667vw;
    left: 16.25vw;
    width: 100%;
    transform-origin: left;
    transform: translate3d(-0.260416666vw, -10.9375vw, 0vw) scale(2.083333333333);
    transition: opacity .5s ease, transform 0.6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    z-index: 9;
}

.hw-lm .lm-section6 .divingtxt .hidetxt {
    opacity: 0;
}

.hw-lm .lm-section6 .divides {
    position: absolute;
    bottom: 79.791667vw;
    left: 16.25vw;
    transform: translate3d(0px, calc( 100% + 1.666666666vw ), 0px) rotate(0deg);
    transition: opacity .6s linear, transform 0.6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    opacity: 0;
}

.hw-lm .divingimout.current .divides {
    opacity: 1;
    z-index: 99;
    transform: translate3d(0px, 0px, 0px) rotate(0deg);
}

.hw-lm .lm-section6 .divides .divsmatxt,
.hw-lm .lm-section6 .divides .divtopdes {
    width: 36.45833333vw;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section6 .divides .divsmatxt {
    opacity: 0;
    transform: translate3d(0px, 4.166666666vw, 0px);
    transition: opacity .6s linear 0.3s, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91) 0.3s;
}

.hw-lm .divingimout.current .divides .divsmatxt {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.hw-lm .lm-section6 .divides .divtopdes {
    width: 36.45833333vw;
    margin: 0 0 1.14583333vw 0;
}

.hw-lm .lm-section6 .divides .divsmatxtdis {
    margin: 0 0 0.72916666vw 0;
}

.hw-lm .lm-section6 .divides .divsmatxt {
    width: 20.83333333vw;
}

.hw-lm .lm-section6 .divides .divanitxt {
    width: 26.04166666vw;
    color: #fff;
    font-size: 4.16666666vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg,#fff 0%,#c4e7fb 100%);;
    -webkit-background-clip: text;
    background-clip: text;
    transform: translate3d(0, 4.166666666vw, 0vw);
    transition: opacity .6s linear 0.3s, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91) 0.3s;
    opacity: 0;
}

.hw-lm .lm-section6 .divingtxt span {
    display: inline-block;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg,#fff 0%,#c4e7fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .divingimout.current .divides .divanitxt {
    transform: translate3d(0vw, 0vw, 0vw);
    opacity: 1;
}

.hw-lm .lm-section6 .divingtxt .divibotmat {
    transition: transform .6s ease-out;
    transform: translate3d(4.070833vw, 0px, 0px);
}

.hw-lm .lm-section6 .divingtxt .divibotmat span,
.hw-lm .lm-section6 .divingtxt .divitopmat span {
    transform: translate3d(0px, 30px, 0px);
}

.hw-lm .lm-section6 .divingim {
    width: 104.27083333vw;
    height: 133.229166666vw;
    margin: -11.35416666vw 0 0 0;
    transition: opacity .6s linear, transform .6s ease-out;
}

.hw-lm .lm-section6 .divswimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 104.27083333vw;
    transition: opacity .3s ease, transform .6s ease-out;
    z-index: 10;
} 

.hw-lm .lm-section6 .divingim,
.hw-lm .lm-section6 .divswimmer {
    transform: scale(1.563936);
    transform-origin: 40% 54%;
}

.hw-lm .lm-section6 .divingim img,
.hw-lm .lm-section6 .divswimmer img {
    transform: translate3d(0, 60px, 0);
}

.hw-lm .divstitri {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
}

.hw-lm .divstitri1 {
    position: absolute;
    top: 200vh;
    left: 0;
    width: 100%;
}

.hw-lm .divingimout.active .divswimmer,
.hw-lm .divingimout.active .divingim {
    transform: scale(1);
}

.hw-lm .divingimout.active .divswimmer {
    opacity: 0;
}

.hw-lm .divingimout.active .divingtxt {
    transform: translate3d(0vw, 0vw, 0vw) scale(1);
}

.hw-lm .divingimout.current .divingtxt {
    opacity: 0;
    transform: translateY(calc(var(--divimatran)));
}

.hw-lm .divingimout.active .divingtxt .divibotmat {
    transform: translate(0vw, 0vw);
}

.hw-lm .lm-section6 .divingtxt1 {
    z-index: 11;
} 

.hw-lm .lm-section6.will-change .divingim,
.hw-lm .lm-section6.will-change .divswimmer,
.hw-lm .lm-section6.will-change .divingtxt,
.hw-lm .lm-section6.will-change .divides .divanitxt,
.hw-lm .lm-section6.will-change .divingtxt h3,
.hw-lm .lm-section6.will-change .divingtxt span,
.hw-lm .lm-section6.will-change .divingim img,
.hw-lm .lm-section6.will-change .divswimmer img {
    will-change: transform;
}

@media screen and (min-aspect-ratio:11/10) and (max-aspect-ratio: 1400/953) {
    .hw-lm .lm-section6 .divingtxt,
    .hw-lm .lm-section6 .divides {
        bottom: 70.791667vw;
    }
    
    .hw-lm .lm-section6 .divingtxt {
        transform: translate3d(-0.260416666vw, -12.9375vw, 0vw) scale(2.083333333333);
    }

    .hw-lm .lm-section6 .divingim,
    .hw-lm .lm-section6 .divswimmer {
        transform-origin: 40% 45%;
    }
}


/* section 6 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-outsti .divoutsti {
        margin: 0;
    }

    .hw-lm .lm-section6 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section6 .divingim,
    .hw-lm .lm-section6 .divswimmer {
        width: 100%;
        transform: scale(1);
    }

    .hw-lm .lm-section6 .divingim {
        height: 355.277777777vw;
    }

    .hw-lm .lm-section6 .divingtxt {
        position: relative;
        bottom: 0;
        left: 0;
        transform: translate3d(0,80px,0);
        transition: opacity 0.6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
        opacity: 0;
    }

    .hw-lm .lm-section6 .divingtxt .hidetxt {
        opacity: 1;
    }

    .hw-lm .lm-section6 .divingtxt .divibotmat {
        transform: none;
    }

    .hw-lm .lm-section6 .divides {
        position: relative;
        bottom: 0;
        left: 0;
        transform: translate3d(0,80px,0);
        opacity: 0;
        transition: opacity 0.6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
    }

    .hw-lm .lm-section6 .tactive .divingtxt,
    .hw-lm .lm-section6 .tactive .divides {
        transform: translate3d(0px,0px,0px);
        opacity: 1;
    }

    .hw-lm .lm-section6 .divides .divanitxt {
        transform: translate3d(0vw, 0vw, 0vw);
        opacity: 1;
    }

    .hw-lm .lm-section6 .divingtxt h3 span {
        width: 86.111111111vw;
        font-size: 13.33333333vw;
    }

    .hw-lm .lm-section6 .divingtxt .divibotmat span, 
    .hw-lm .lm-section6 .divingtxt .divitopmat span {
        transform: none;
    }

    .hw-lm .lm-section6 .divingim img, 
    .hw-lm .lm-section6 .divswimmer img {
        transform: none;
    }

    .hw-lm .lm-section6 .divides .divtopdes {
        width: 77.77777777vw;
        margin: 4.44444444vw 0 5.5555555555vw 0;
        color: #a9aeb0;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section6 .divides .divanitxt {
        width: 77.77777777vw;
        font-size: 11.11111111vw;
    }

    .hw-lm .lm-section6 .divides .divsmatxt {
        width: 41.66666666vw;
        margin: 0 0 2.22222222vw 0;
        font-size: 3.33333333vw;
        opacity: 1;
        transform: none;
    }

    .hw-lm .lm-section6 .divingsha {
        top: auto;
        bottom: -0.13888888vw;
        left: 0vw;
        height: 73.05555555vw;
        background: linear-gradient(180deg, rgba(0,0,0,0), #000 100%);
    }

    .hw-lm .lm-section6 .divides {
        margin: 0 0 0 11.11111111vw;
    }

    .hw-lm .lm-section6 .divingtxt {
        margin: -194.44444444vw 0 0 11.11111111vw;
    }
}

/* section 7 pc */
.hw-lm .lm-section7 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -55.208333333vw 0 10.41666666vw 0;
    transition: opacity 0.3s linear;
    z-index: 10;
    opacity: 0;
}

.hw-lm .lm-section7.fadein {
    opacity: 1;
}

.hw-lm .lm-section7 .contmat {
    width: 41.66666666vw;
    color: #fff;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section7 .contdes {
    width: 51.14583333vw;
    margin: 1.66666666vw 0 3.33333333vw;
    color: #a9aeb0;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.hw-lm .lm-section7 .convideo {
    overflow: hidden;
    position: relative;
    width: 81.14583333vw;
    height: 39.58333333vw;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}


/* section 7 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section7 {
        align-items: flex-start;
        margin: 0 0 27.777777777vw 0;
        opacity: 1;
    }

    .hw-lm .lm-section7 .contmat {
        width: 77.777777777vw;
        margin: 0 0 0 11.111111111vw; 
        font-size: 8.8888888888vw;
        text-align: left;
    }

    .hw-lm .lm-section7 .contdes {
        width: 77.777777777vw;
        margin: 4.4444444444vw 0 8.8888888888vw 11.111111111vw;
        color: #a9aeb0;
        font-size: 4.4444444444vw;
        text-align: left;
    }

    .hw-lm .lm-section7 .convideo {
        align-self: center;
        width: 91.111111111vw;
        height: 109.72222222vw;
        border-radius: 2.222222222vw;   
    }
}

/* section 8 pc */
.hw-lm .lm-section8 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 10.41666666vw 0;
}

.hw-lm .lm-section8 .advanassmat {
    width: 20.83333333vw;
    color: #fff;
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section8 .advancon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-lm .lm-section8 .advanaswiper {
    overflow: hidden;
    width: 67.5vw;
    margin: 3.33333333vw 0 2.5vw;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section8 .advanaswiper .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 38.54166666vw;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section8 .advanounav {
    padding: 0.20833333vw;
    background: rgba(36, 64, 127, 0.3);
    border-radius: 52.03125vw;
}

.hw-lm .lm-section8 .advanasnav {
    position: relative;
    display: flex;
    justify-content: center;
}

.hw-lm .lm-section8 .advanmoline {
    overflow: hidden;
    position: absolute;
    left: var(--ldistance);
    top: 0;
    width: var(--swidth);
    height: 100%;
    transition: 0.3s ease;
    transform: translate3d(0,0,0) rotate(0deg);
    border: 2px solid #24407f;
    border-radius: 9999px;
    z-index: 0;
    will-change: transform;
}

@media screen and (max-width: 1300px) {
    .hw-lm .lm-section8 .advanmoline {
        border-width: 1px;
    }
}

.hw-lm .lm-section8 .rwater,
.hw-lm .lm-section8 .lwater {
    position: absolute;
    width: 30.520833333vw;
    z-index: -1;
}

.hw-lm .lm-section8 .lwater {
    top: 110%;
    right: 0;
    transform: translate3d(0, 0, 0);
}

.hw-lm .lm-section8 .rwater {
    top: 110%;
    left: 0;
    transform: translate3d(0, 0, 0);
}

.hw-lm .lm-section8 .cirbubble {
    position: absolute;
    width: 0.20833333vw;
    height: 0.20833333vw;
    top: calc(100% + 1.5625vw);
    right: 3.38541666vw;
    background-color: #fff;
    border-radius: 50%;
}

.hw-lm .lm-section8 .current .cirbubble {
    top: -1.30208333vw;
    opacity: 0;
    transition: top 1s ease-in 0.3s, opacity 0.8s ease-in 0.3s;
}

.hw-lm .lm-section8 .current .lwater {
    top: -0.5208333333vw;
    transform: translateX(10.416666666vw);
    transition: top 0.8s ease-in 0.3s, transform 0.8s ease-in 0.3s;
}

.hw-lm .lm-section8 .current .rwater {
    top:-0.5208333333vw;
    transform: translateX(-10.416666666vw);
    transition: top 0.8s ease-in 0.3s, transform 0.8s ease-in 0.3s;
}

.hw-lm .lm-section8 .advanasnav li {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    max-width: 18.229166666vw;
    padding: 0.625vw 1.25vw;
    border-radius: 52.03125vw;
    transform: translate3d(0,0,0) rotate(0deg);
    z-index: 2;
}

.hw-lm .lm-section8 .advanasnav li span {
    color: rgba(215, 226, 250, 0.6);
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    transition: 0.6s ease;
}

.hw-lm .lm-section8 .advanasnav li.current span {
    color: rgba(215, 226, 250, 1);
}

@media (any-hover: hover)  {
    .hw-lm .lm-section8 .advanasnav span:hover {
        cursor: pointer;
        color: rgba(215, 226, 250, 1);
    }

    .hw-lm .lm-section8 .advanasnav li.current:hover {
        cursor: default;
    }
}

.hw-lm .lm-section8 .advanasnav .current span {
    cursor: default;
}

.hw-lm .lm-section8 .advanstxt {
    display: flex;
    width: 41.083333333vw;
    margin: 2.08333333vw 0 0 0;
}

.hw-lm .lm-section8 .advanstxt p {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hw-lm .lm-section8 .advanstxt p.current {
    opacity: 1;
    transition-delay: 0.2s;
    z-index: 10;
}

.hw-lm .lm-section8 .advanstxt p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-lm .lm-section8 .advanstxt p:nth-child(3) {
    transform: translateX(-200%);
}

.hw-lm .lm-section8.will-change .advanstxt p,
.hw-lm .lm-section8.will-change .rwater, 
.hw-lm .lm-section8.will-change .advanmoline, 
.hw-lm .lm-section8.will-change .cirbubble,     
.hw-lm .lm-section8.will-change .lwater,
.hw-lm .lm-section8.will-change .advanaswiper .swiper-slide {
    will-change: transform, opacity;
}

/* section 8 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section8 {
        align-items: flex-start;
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section8 .advanassmat {
        width: 50vw;
        margin: 0 0 0 10vw;
        font-size: 6.66666666vw;
        text-align: left;
    }

    .hw-lm .lm-section8 .advancon {
        align-self: center;
        width: 100%;
    }

    .hw-lm .lm-section8 .advanaswiper {
        width: 82.22222222vw;
        margin: 8.88888888vw 0 11.11111111vw 0;
    }

    .hw-lm .lm-section8 .advanaswiper .swiper-slide {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section8 .advanstxt {
        width: 77.77777777vw;
        margin: 8.88888888vw 0 0 0;
    }

    .hw-lm .lm-section8 .advanstxt p {
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-lm .lm-section8 .advanounav {
        overflow: auto;
        display: flex;
        border-radius: 0;
        padding: 0 11.11111111vw;
    }

    .hw-lm .lm-section8 .advanounav::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .hw-lm .lm-section8 .advanasnav li {
        max-width: 58.55555555vw;
        overflow: visible;
        padding: 0;
    }

    .hw-lm .lm-section8 .advanasnav li:not(:last-of-type) {
        margin: 0 11.11111111vw 0 0;
    }

    .hw-lm .lm-section8 .advanasnav {
        flex-shrink: 0;
        justify-content: flex-start;
        padding: 0 0 4.16666666vw 0;
        border-bottom: 0.27777777vw solid rgba(215, 226, 250, 0.3);
    }

    .hw-lm .lm-section8 .advanmoline {
        top: auto;
        bottom: -0.2777777777vw;
        height: 0.27777777vw;
        background-color: #24407F;
        border: 0;
        z-index: 2;
        border-radius: 0;
    }
    
    .hw-lm .lm-section8 .advanasnav li span {
        font-size: 5.55555555vw;
    }

    .hw-lm .lm-section8 .advanounav {
        align-self: flex-start;
        background: none;
    }

    .hw-lm .lm-section8 .advanounav {
        width: 100%;
    }

    .hw-lm .lm-section8 .cirbubble,
    .hw-lm .lm-section8 .lwater,
    .hw-lm .lm-section8 .rwater {
        display: none;
    }

    .hw-lm .lm-section8 .opevideobtn {
        bottom: 4.4444444444vw;
        right: 4.4444444444vw;
        width: 8.888888888vw;
        height: 8.888888888vw;
    }
}



/* section 9 pc */
.hw-lm .lm-section9 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 10.41666666vw 0;
    background: #000;
    z-index: 9;
}

.hw-lm .lm-section9 .dedivingmat {
    width: 20.83333333vw;
    color: #fff;
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section9 .devioutcon {
    width: 67.5vw;
}

.hw-lm .lm-section9 .deviswiper {
    overflow: hidden;
    width: 100%;
    margin: 3.33333333vw 0 2.08333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section9 .opevideobtn {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 9;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section9 .opevideobtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
}

.hw-lm .lm-section9 .opevideobtn img {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hw-lm .lm-section9 .opevideobtn img.active {
    display: block;
}   

.hw-lm .lm-section9 .deviswiper .swiper-slide {
    overflow: hidden;
    position: relative;
    height: 38.54166666vw;
    transform: translate3d(0,0,0) rotate(0deg);
}


.hw-lm .lm-section9 .deviswiper .devbosha,
.hw-lm .lm-section9 .deviswiper .devtosha {
    position: absolute;
    left: 50%;
    width: 110%;
    height: 19.270833333vw;
    transform: translateX(-50%);
    z-index: 3;
}

.hw-lm .lm-section9 .deviswiper .devtosha {
    top: -1px;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, #000 100%);
}

.hw-lm .lm-section9 .deviswiper .devbosha {
    bottom: -1px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, #000 100%);
}

.hw-lm .lm-section9 .deviswiper .swiper-slide .povideo {
    overflow: hidden;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section9 .devitxto {
    display: flex;
    justify-content: space-between;
}

.hw-lm .lm-section9 .devitxtcon {
    display: flex;
    width: 26.04166666vw;
    margin: 0 0 0 0.83333333vw;
}

.hw-lm .lm-section9 .devitxtcon p {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hw-lm .lm-section9 .devitxtcon p.current {
    opacity: 1;
    z-index: 2;
}

.hw-lm .lm-section9 .devitxtcon p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-lm .lm-section9 .devitxtcon p:nth-child(3) {
    transform: translateX(-200%);
}

.hw-lm .lm-section9 .devitxtcon p:nth-child(4) {
    transform: translateX(-300%);
}

.hw-lm .lm-section9 .devitxtcon p span {
    display: inline-block;
    color: #fff;
    font-weight: 700;
}

.hw-lm .lm-section9 .devislito {
    display: flex;
}

.hw-lm .lm-section9 .devislito li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 7.70833333vw;
    height: 5.20833333vw;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section9 .devislito li:hover {
        cursor: pointer;
    }

    .hw-lm .lm-section9 .devislito li:hover .deviconsha {
        opacity: 0;
    }
}

.hw-lm .lm-section9 .devislito li.current {
    cursor: default;
}

.hw-lm .lm-section9 .devislito li .linefabotom {
    opacity: 0;
}

.hw-lm .lm-section9 .devislito li.current .linefabotom {
    opacity: 1;
}

.hw-lm .lm-section9 .devislito li .linefaout path {
    stroke-dasharray: 456px;
    stroke-dashoffset: 456px;
}

.hw-lm .lm-section9 .devislito .linefaout {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7.70833333vw;
    height: 5.20833333vw;
    transform: translate(-50%, -50%);
    z-index: 9;
    opacity: 0;
}

.hw-lm .lm-section9 .devislito .current .linefaout {
    opacity: 1;
}

.hw-lm .lm-section9 .devislito .linefabotom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7.70833333vw;
    height: 5.20833333vw;
    transform: translate(-50%, -50%);
    z-index: 8;
}

.hw-lm .lm-section9 .devislito .linefaout svg,
.hw-lm .lm-section9 .devislito .linefabotom svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section9 .devislito li:not(:last-child) {
    margin: 0 0.83333333vw 0 0;
}

.hw-lm .lm-section9 .deviconim {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7.083333333vw;
    height: 4.583333333vw;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section9 .deviconim img {
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section9 .deviconsha {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110%;
    height: 110%;
    transform: translate3d(-50%, -50%, 0);
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
} 

.hw-lm .lm-section9 li.current .deviconsha {
    opacity: 0;
}

.hw-lm .lm-section9 .devislito li span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    color: #fff;
    font-size: 0.88541666vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    transform: translate(-50%,-50%);
    text-shadow: 0vw 0.15625vw 0.10416666vw rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hw-lm .lm-section9.will-change .devislito li .linefaout path,
.hw-lm .lm-section9.will-change .devitxtcon p,
.hw-lm .lm-section9.will-change .deviconsha,
.hw-lm .lm-section9.will-change .deviswiper .swiper-slide {
    will-change: transform, opacity;
}


/* section 9 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section9 {
        padding: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section9 .dedivingmat {
        align-self: flex-start;
        width: 69.44444444vw;
        margin: 0 0 0 11.11111111vw;
        font-size: 6.66666666vw;
        text-align: left;
    }

    .hw-lm .lm-section9 .devioutcon {
        width: 82.22222222vw;
    }

    .hw-lm .lm-section9 .deviswiper {
        margin: 8.88888888vw 0 11.9444444444vw;
    }

    .hw-lm .lm-section9 .deviswiper .swiper-slide {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section9 .deviswiper .swiper-slide .povideo {
        border-radius: 0;
    }

    .hw-lm .lm-section9 .devitxto {
        flex-direction: column-reverse;
        align-items: center;
    }

    .hw-lm .lm-section9 .devislito li {
        width: 18.88888888vw;
        height: 12.22222222vw;
    }

    .hw-lm .lm-section9 .devislito li:not(:last-child) {
        margin: 0 2.22222222vw 0 0;
    }

    .hw-lm .lm-section9 .devitxtcon {
        width: 77.77777777vw;
        margin: 9.72222222vw 0 0 0;
    }

    .hw-lm .lm-section9 .devitxtcon p {
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section9 .deviconim {
        width: 100%;
        height: 100%;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section9 .deviconim img {
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section9 .devislito .linefaout {
        width: 20.55555555vw;
        height: 13.88888888vw;
    }

    .hw-lm .lm-section9 .devislito .linefabotom {
        width: 20.55555555vw;
        height: 13.88888888vw;
    }

    .hw-lm .lm-section9 .devislito li span {
        opacity: 0;
    }

    .hw-lm .lm-section9 .opevideobtn {
        bottom: 4.44444444vw;
        right: 4.44444444vw;
        width: 8.88888888vw;
        height: 8.88888888vw;
    }

    .hw-lm .lm-section9 .deviswiper .devbosha,
    .hw-lm .lm-section9 .deviswiper .devtosha {
        height: 54.861111111vw;
    }
}

/* section 10 pc */
.hw-lm .lm-section10 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
    margin: -1px 0 0 0;
    padding: 0 0 10.416666666vw 0;
    z-index: 10;
    background: #000;
}

.hw-lm .lm-section10 .dvsharemat {
    width: 20.83333333vw;
    color: #fff;
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0px);
    opacity: 0;
}

.hw-lm .lm-section10 .dvsharevideo {
    position: relative;
    width: 67.5vw;
    height: 38.54166666vw;
    margin: 3.33333333vw 0 2.08333333vw;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0px);
    opacity: 0;
}

.hw-lm .lm-section10 .dvshamainim {
    overflow: hidden;
    border-radius: 0.8333333333vw;
}

.hw-lm .lm-section10.active .dvsharevideo,
.hw-lm .lm-section10.active .dvsharemat {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.hw-lm .lm-section10 .dvsharevideo .povideo {
    overflow: hidden;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section10 .dvshareim {
    position: absolute;
    bottom: -7.1875vw;
    right: 2.08333333vw;
    width: 25.72916666vw;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0px);
    opacity: 0;
}

.hw-lm .lm-section10 .dvshareswiper {
    overflow: hidden;
    position: absolute;
    bottom: 4.63541666vw;
    left: 1.51041666vw;
    width: 9.58333333vw;
    height: 9.58333333vw;
    background: #000;
    border-radius: 50%;
    z-index: 2;
}

.hw-lm .lm-section10 .dvsharedes {
    width: 33.854166666vw;
    margin: 0 0 0 0.83333333vw;
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0px);
    opacity: 0;
}

.hw-lm .lm-section10 .dvshareoutcon.active .dvsharedes,
.hw-lm .lm-section10 .dvshareoutcon.active .dvshareim {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}


.hw-lm .lm-section10.will-change .dvshareoutcon .dvsharedes, 
.hw-lm .lm-section10.will-change .dvshareoutcon .dvshareim,
.hw-lm .lm-section10.will-change .dvsharevideo {
    will-change: transform, opacity;
}

/* section 10 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section10 {
        padding: 0 0 27.77777777vw 0; 
    }

    .hw-lm .lm-section10 .dvsharemat {
        align-self: flex-start;
        width: 69.44444444vw;
        margin: 0 0 0 11.11111111vw;
        font-size: 6.66666666vw;
        text-align: left;
    }

    .hw-lm .lm-section10 .dvsharevideo {
        width: 82.22222222vw;
        height: 109.72222222vw;
        margin: 8.88888888vw 0 49.58333333vw 0;
    }

    .hw-lm .lm-section10 .dvsharevideo .povideo {
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section10 .dvsharedes {
        width: 77.77777777vw;
        margin: 0 auto;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section10 .dvshareim {
        width: 68.61111111vw;
        right: 0;
        left: 0;
        margin: auto;
        bottom: -38.333333333vw;
    }

    .hw-lm .lm-section10 .dvshareswiper {
        bottom: 12.083333333vw;
        left: 4.027777777vw;
        width: 25.555555555vw;
        height: 25.555555555vw;
    }

    .hw-lm .lm-section10 .dvshamainim {
        border-radius: 2.222222222vw;
    }
}

/* section 11 pc */
.hw-lm .lm-outsti0 {
    position: relative;
    z-index: 8;
}

.hw-lm .outstiinner {
    overflow: hidden;
    position: sticky;
    top: 0;
    margin: -100vh 0 0 0;
}

.hw-lm .ulmatesti0space {
    height: 180vh;
}

.hw-lm .lm-section11 {
    position: relative;
}

.hw-lm .sti0tri {
    position: absolute;
    top: 200vh;
    left: 0;
}

.hw-lm .sti0tri1 {
    position: absolute;
    top: 100vh;
    left: 0;
}

.hw-lm .lm-section11 .ulmateoutmain {
    margin: -11.25vw 0 0 0;
}

.hw-lm .lm-section11 .ulmatepeople {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
} 

.hw-lm .lm-section11 .ulmateoutmain,
.hw-lm .lm-section11 .ulmatepeople {
    width: 149.0625vw;
    height: 83.854166666vw;
    transform: scale(1.428022);
    transform-origin: 60.8% 86.1%;
    transition: opacity .3s ease, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .lm-section11 .hideTxt {
    opacity: 0;
}

.hw-lm .lm-section11 .ulmateoutxt1,
.hw-lm .lm-section11 .ulmateoutxt2 {
    position: absolute;
    left: 16.25vw;
    bottom: 30.385417vw;
    z-index: 9;
    transform: translate3d(0vw, -10.520833vw, 0vw) scale(2.08333333);
    transform-origin: left;
    transition: opacity .5s ease, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .lm-section11 .ulmateoutxt1 h3 span,
.hw-lm .lm-section11 .ulmateoutxt2 h3 span {
    display: inline-block;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg,#ffffff 0%,#fff2e8 49.08%,#b99576 100%);
    -webkit-background-clip: text;
    background-clip: text;
    transform: translate3d(0px, 30px, 0px);
}

.hw-lm .lm-section11 .ulmateoutmain img,
.hw-lm .lm-section11 .ulmatepeople img {
    transform: translate3d(0px, 65px, 0px);
}

.hw-lm .lm-section11 .ulmateoudes {
    position: absolute;
    left: 16.25vw;
    bottom: 30.385417vw;
    width: 35.41666666vw;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translateY(calc(100% + 1.666666666vw));
    opacity: 0;
}

@media screen and (min-aspect-ratio:11/10) and (max-aspect-ratio: 1400/953) {
    .hw-lm .lm-section11 .ulmateoutxt1,
    .hw-lm .lm-section11 .ulmateoutxt2 {
        bottom: 21.385417vw;
        transform: translate3d(0vw, -12.520833vw, 0vw) scale(2.08333333);
    }

    .hw-lm .lm-section11 .ulmateoutmain,
    .hw-lm .lm-section11 .ulmatepeople {
        transform-origin: 62.8% 66.9%;
    }

    .hw-lm .lm-section11 .ulmateoudes {
        bottom: 21.385417vw;
    }
}

.hw-lm .lm-section11 .ulmateoutxt2 {
    z-index: 11;
}

.hw-lm .lm-section11 .ulmalitran {
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(13.28125vw, -0.52083333vw, 0vw);
}

.hw-lm .lm-section11 .active .ulmateoutxt1,
.hw-lm .lm-section11 .active .ulmateoutxt2 {
    transform: translate3d(0px, 0px, 0px) scale(1);
}

.hw-lm .lm-section11 .active .ulmalitran {
    transform: translate3d(0px, 0px, 0px);
}

.hw-lm .lm-section11 .active .ulmateoutmain,
.hw-lm .lm-section11 .active .ulmatepeople {
    transform: scale(1);
}

.hw-lm .lm-section11 .active .ulmatepeople {
    opacity: 0;
}

.hw-lm .lm-section11 .current .ulmateoutxt1,
.hw-lm .lm-section11 .current .ulmateoutxt2 {
    opacity: 0;
    transform: translateY(calc(var(--outtran)));
}

.hw-lm .lm-section11 .current .ulmateoudes {
    opacity: 1;
    transform: translateY(0px);
}

.hw-lm .lm-section11 .ulmateoutsha {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.hw-lm .lm-section11 .ulmateoutsha1 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20.8333333333vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
    z-index: 10;
}

.hw-lm .lm-section11.will-change .ulmateoutxt1, 
.hw-lm .lm-section11.will-change .ulmateoutxt2,
.hw-lm .lm-section11.will-change .ulmalitran,
.hw-lm .lm-section11.will-change .ulmatepeople,
.hw-lm .lm-section11.will-change .ulmateoutmain,
.hw-lm .lm-section11.will-change .ulmateoutxt1 h3 span,
.hw-lm .lm-section11.will-change .ulmateoutxt2 h3 span,
.hw-lm .lm-section11.will-change .ulmateoutmain img, 
.hw-lm .lm-section11.will-change .ulmatepeople img {
    will-change: transform, opacity;
}

/* section 11 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .outstiinner {
        margin: 0 0 0 0;
    }

    .hw-lm .lm-section11 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section11 .ulmateoutmain {
        width: 100%;
        height: 216.66666666vw;
        transform: scale(1);
    }

    .hw-lm .lm-section11 .ulmateoutsha1 {
        height: 55.555555555vw;
    }

    .hw-lm .lm-section11 .ulmateoutxt1, 
    .hw-lm .lm-section11 .ulmateoutxt2 {
        position: relative;
        left: 0;
        bottom: 0;
        margin: -52.722222vw 0 0 11.11111111vw;
        transform: none;
        z-index: 9;
    }

    .hw-lm .lm-section11 .hideTxt {
        opacity: 1;
    }

    .hw-lm .lm-section11 .ulmateoutxt1 h3 span {
        width: 86.111111111vw;
        transform: none;
        font-size: 13.33333333vw;
    }

    .hw-lm .lm-section11 .ulmateoutmain img, 
    .hw-lm .lm-section11 .ulmatepeople img {
        transform: none;
    }

    .hw-lm .lm-section11 .ulmateoudes {
        position: relative;
        left: 0;
        bottom: 0;
        transform: none;
        width: 77.77777777vw;
        margin: 4.44444444vw 0 0 11.11111111vw;
        color: #6D6F72;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section11 .ulmateoudes,
    .hw-lm .lm-section11 .ulmateoutxt1 {
        transform: translate3d(0px, 80px, 0px);
        opacity: 0;
        transition: opacity 0.6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
    }

    .hw-lm .lm-section11 .tactive .ulmateoutxt1,
    .hw-lm .lm-section11 .tactive .ulmateoudes {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }
}


/* section 12 pc */
.hw-lm .lm-section12 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 10.41666666vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 18%, #000 18%);
    transition: opacity 0.3s linear;
    opacity: 0;
    z-index: 9;
}

.hw-lm .lm-section12.fadein {
    opacity: 1;
}

.hw-lm .lm-section12 .staconout {
    margin: -5.2083333333vw 0 0 0;
}

.hw-lm .lm-section12 .staconim {
    overflow: hidden;
    position: relative;
    width: 81.25vw;
    height: 39.58333333vw;
    border-radius: 0.8333333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section12 .staconmat {
    width: 41.666666666vw;
    margin: 0 auto;
    color: #fff;
    font-size: 3.3333333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section12 .stacondes {
    width: 53.447916666vw;
    margin: 1.6666666666vw auto 3.3333333333vw;
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

/* section 12 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section12 {
        margin: 0;
        padding: 0 0 27.77777777vw 0;
        opacity: 1;
    }

    .hw-lm .lm-section12 .staconim {
        width: 91.11111111vw;
        height: 109.72222222vw;
        margin: 0 0 6.66666666vw 0;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section12 .staconmat {
        width: 77.77777777vw;
        font-size: 8.88888888vw;
        text-align: left;
    }

    .hw-lm .lm-section12 .stacondes {
        width: 77.77777777vw;
        margin: 4.44444444vw auto 8.88888888vw;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-lm .lm-section12 .staconout {
        margin: 0;
    }
}


/* section 13 pc */
.hw-lm .lm-section13 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -1px 0 0 0;
    padding: 0 0 10.41666666vw 0;
    background: #000;
    z-index: 8;
}

.hw-lm .lm-section13 .manfunout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67.5vw;
}

.hw-lm .lm-section13 .manfunswiper {
    width: 100%;
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide {
    cursor: pointer;
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section13 .manfunswiper.isend .swiper-slide:nth-child(n+1) {
    cursor: default;
}

.hw-lm .lm-section13 .manfunswiper.isend .swiper-slide:first-child {
    cursor: pointer;
}

.hw-lm .lm-section13 .manfunswiper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section13 .manfunav {
    display: flex;
    align-self: flex-end;
    margin: 2.5vw 0 0 0;
}

.hw-lm .lm-section13 .manfunav li {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section13 .manfunav li:hover {
        cursor: pointer;
    }
}

.hw-lm .lm-section13 .manfunav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section13 .manfunav .manflarrow .manfarricon {
    margin: 0 0 0 0.83333333vw;
    transform: translate3d(0, 0, 0) rotate(180deg);
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide {
    width: 44.58333333vw;
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide .mancardim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 26.04166666vw;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section13 .manfunswiper .mancadtxt {
    margin: 0 0 0 0.8333333333vw;
}

.hw-lm .lm-section13 .manfunswiper .opevideobtn {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.083333333vw;
    height: 2.083333333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 9;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section13 .manfunswiper .opevideobtn:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.12);
    } 
}

.hw-lm .lm-section13 .manfunswiper .opevideobtn img {
    display: none;
}

.hw-lm .lm-section13 .manfunswiper .opevideobtn img.active {
    display: block;
}

.hw-lm .lm-section13 .manfunswiper .swiper-slide:nth-child(2),
.hw-lm .lm-section13 .manfunswiper .swiper-slide:nth-child(3) {
    width: 21.666666666vw;
}

.hw-lm .lm-section13 .mancamat {
    width: 21.22916666vw;
    margin: 2.08333333vw 0 0.83333333vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-lm .lm-section13 .mancades {
    width: 17.5vw;
    color: #6d6f72;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section13 .swiper-slide:nth-child(1) .mancades {
    width: 29.635416666vw;
}

.hw-lm .lm-section13 .manfunav .manfarricon {
    display: flex;
    position: relative;
    width: 1.04166666vw;
    height: 1.04166666vw;
    margin: 0 0 0 0.625vw;
    z-index: 3;
}

.hw-lm .lm-section13 .manfunav .manfarricon svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section13 .manfunav li .rwater, 
.hw-lm .lm-section13 .manfunav li .lwater {
    display: flex;
    position: absolute;
    width: 8.9583333333vw;
    height: 3.6458333333vw;
    top: 2.6041666666vw;
}

.hw-lm .lm-section13 .manfunav li .rwater svg,
.hw-lm .lm-section13 .manfunav li .lwater svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section13 .manfunav li .lwater {
    right: -2.2916666666vw;
    transition: top 0.6s ease-out, right 0.6s ease-out;
}

.hw-lm .lm-section13 .manfunav li .rwater {
    left: -0.10416666666vw;
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.hw-lm .lm-section13 .manfunav li .cirbubble {
    position: absolute;
    right: 0.3125vw;
    bottom: -1.1458333333vw;
    width: 0.2083333333vw;
    height: 0.2083333333vw;
    background-color: #fff;
    border-radius: 50%;
    transition: bottom 0.3s ease-out, opacity 0.3s ease-in;
    z-index: 2;
}

.hw-lm .lm-section13 .manfunav li.manflarrow .cirbubble {
    left: 0.3125vw;
    right: auto;
}

.hw-lm .lm-section13 .manfunav li .borshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #24407f;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section13 .manfunav li:hover .lwater {
        top: -0.3125vw;
        right: -5.78125vw;
    }

    .hw-lm .lm-section13 .manfunav li:hover .cirbubble {
        bottom: 1.041666666vw;
        opacity: 0;
    }

    .hw-lm .lm-section13 .manfunav li:hover .borshadow {
        opacity: 0;
    }

    .hw-lm .lm-section13 .manfunav li:hover .rwater {
        top: -0.5208333333vw;
        left: -5.572916666vw;
    }
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-lm .lm-section13 .manfunav li .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section13 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section13 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section13 .manfunav li .cirbubble {
        display: none;
    }
}

.hw-lm .lm-section13 .manfunav li.swiper-button-disabled .cirbubble,
.hw-lm .lm-section13 .manfunav li.swiper-button-disabled .rwater,
.hw-lm .lm-section13 .manfunav li.swiper-button-disabled .lwater {
    display: none;
}

.hw-lm .lm-section13 .manfunav li.swiper-button-disabled .borshadow {
    opacity: 1!important;
    transition: none;
}

.hw-lm .lm-section13 .manfunav li.swiper-button-disabled {
    opacity: 0.3;
    transition: none;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section13 .manfunav li.swiper-button-disabled:hover {
        cursor: default;
    }
}

.hw-lm .lm-section13.will-change .manfunav li .cirbubble,
.hw-lm .lm-section13.will-change .manfunav li .rwater, 
.hw-lm .lm-section13.will-change .manfunav li .lwater
.hw-lm .lm-section13.will-change .manfunswiper {
    will-change: transform, opacity;
}

/* section 13 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section13 {
        padding: 0 0 1px 0;
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section13 .manfunout {
        width: 82.22222222vw;
    }

    .hw-lm .lm-section13 .manfunswiper .swiper-slide {
        width: 82.22222222vw!important;
    }

    .hw-lm .lm-section13 .manfunswiper .swiper-slide .mancardim {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section13 .mancamat {
        width: 77.77777777vw;
        margin: 6.6666666666vw 0 2.77777777vw 0;
        font-size: 5.55555555vw;
    }

    .hw-lm .lm-section13 .mancades {
        width: 77.77777777vw!important;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section13 .swiper-slide:nth-child(3) .mancades, 
    .hw-lm .lm-section13 .swiper-slide:nth-child(4) .mancades {
        width: 77.77777777vw;
    }

    .hw-lm .lm-section13 .mancadtxt {
        margin: 0 0 0 2.22222222vw;
    }

    .hw-lm .lm-section13 .manfunav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-lm .lm-section13 .manfunav .manfarricon {
        width: 5vw;
        height: 5vw;
        margin: 0 0 0 2.36111111vw;
    }

    .hw-lm .lm-section13 .manfunav {
        margin: 11.11111111vw 0 0 0;
    }

    .hw-lm .lm-section13 .manfunav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section13 .manfunav .manflarrow .manfarricon {
        margin: 0 0 0 3.47222222vw;
    }

    .hw-lm .lm-section13 .manfunswiper .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section13 .manfunswiper .mancadtxt {
        margin: 0 0 0 2.22222222vw;
        transition: opacity 0.6s ease;
        opacity: 0;
    }

    .hw-lm .lm-section13 .manfunswiper .swiper-slide-active .mancadtxt {
        opacity: 1;
    }

    .hw-lm .lm-section13 .manfunswiper .opevideobtn {
        width: 8.888888888888889vw;
        height: 8.888888888888889vw;
        right: 4.44444444444vw;
        bottom: 4.44444444444vw;
    }

    .hw-lm .lm-section13 .manfunav li:hover .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section13 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section13 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section13 .manfunav li .cirbubble {
        display: none;
    }
}


/* section 14 pc */
.hw-lm .stitotal {
    overflow: hidden;
    position: sticky;
    top: 0;
    margin: -100vh 0 0 0;
}

.hw-lm .lm-section14 {
    position: relative;
}

.hw-lm .ulmategolfspace {
    position: relative;
    height: 180vh;
    pointer-events: none;
}

.hw-lm .golftri {
    position: absolute;
    top: 100vh;
    left: 0;
}

.hw-lm .golftri1 {
    position: absolute;
    top: 200vh;
    left: 0;
}

.hw-lm .lm-section14 .ulmategolfmain {
    position: relative;
}

.hw-lm .lm-section14 .ulmategolfim {
    position: relative;
    width: 112.76041666vw;
    height: 84.5833333333vw;
    margin: -10.677083333vw 0 0 -5.3125vw;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .lm-section14 .ulmasinwatch {
    position: absolute;
    top: 0;
    left: 0;
    width: 112.76041666vw;
    margin: 0 0 0 -5.3125vw;
    transition: opacity .3s ease, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    z-index: 12;
}

.hw-lm .lm-section14 .ulmategolfim,
.hw-lm .lm-section14 .ulmasinwatch {
    transform: translate3d(0,0,0) scale(3.8293);
    transform-origin: 28.5% 54.8%;
}

.hw-lm .lm-section14 .ulmasinwatch img,
.hw-lm .lm-section14 .ulmategolfim img {
    transform: translate3d(0px, 25px, 0px);
}

.hw-lm .lm-section14 .ulmategolftxt {
    position: absolute;
    top: 10.416666666vw;
    left: 16.25vw;
    z-index: 9;
}

.hw-lm .lm-section14 .ulmategolfsha {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 8;
}

.hw-lm .lm-section14 .ulmategolfsha1 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20.8333333333vw;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0% , #000 100%);
    z-index: 10;
}

.hw-lm .lm-section14 .hideTxt {
    opacity: 0;
}

.hw-lm .lm-section14 .ulmategolftxt1,
.hw-lm .lm-section14 .ulmategolftxt2 {
    position: absolute;
    left: 16.25vw;
    bottom: 31.77083333vw;
    transform: translate3d(0, -11.19791666vw, 0vw) scale(2.0833333);
    transform-origin: left;
    transition: opacity .5s ease, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    z-index: 9;
}

.hw-lm .lm-section14 .ulmategolftxt2 {
    z-index: 13;
}

.hw-lm .lm-section14 .ulmategolftxt1 h3 span,
.hw-lm .lm-section14 .ulmategolftxt2 h3 span {
    display: inline-block;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg,#fff 0%,#f3fff8 50%,#b2e0cb 90%);;
    -webkit-background-clip: text;
    background-clip: text;
    transform: translate3d(0px, 30px, 0px);
}

.hw-lm .lm-section14 .ulmategolftxt1 h3 span {
    padding: 0 0 3px 0;
}

.hw-lm .lm-section14 .ulmategodes {
    position: absolute;
    left: 16.25vw;
    bottom: 31.77083333vw;
    width: 43.54166666vw;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translateY(calc(100% + 1.666666666vw));
    opacity: 0;
    z-index: 2;
} 

.hw-lm .lm-section14 .ulmategolftxt2 .ulmasecond {
    transform: translate3d(10.15625vw, -0.52083333vw, 0);
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .lm-section14 .active .ulmasinwatch {
    transform: translate3d(0px, 0px, 0px) scale(1);
    opacity: 0;
}

.hw-lm .lm-section14 .active .ulmategolfim {
    transform: translate3d(0px, 0px, 0px) scale(1);
}

.hw-lm .lm-section14 .active .ulmategolftxt1,
.hw-lm .lm-section14 .active .ulmategolftxt2 {
    transform: translate3d(0px, 0px, 0px) scale(1);
}

.hw-lm .lm-section14 .active .ulmategolftxt2 .ulmasecond {
    transform: translate3d(0px, 0px, 0px);
}

.hw-lm .lm-section14 .current .ulmategolftxt1,
.hw-lm .lm-section14 .current .ulmategolftxt2 {
    opacity: 0;
    transform: translateY(var(--goltran));
}

.hw-lm .lm-section14 .current .ulmategodes {
    opacity: 1;
    z-index: 9999;
    transform: translateY(0px);
}


.hw-lm .lm-section14.will-change .ulmategolftxt2 .ulmasecond,
.hw-lm .lm-section14.will-change .ulmasinwatch,
.hw-lm .lm-section14.will-change .ulmategolftxt1,
.hw-lm .lm-section14.will-change .ulmategolftxt2,
.hw-lm .lm-section14.will-change .ulmategolfim,
.hw-lm .lm-section14.will-change .ulmategolftxt1 h3 span,
.hw-lm .lm-section14.will-change .ulmategolftxt2 h3 span,
.hw-lm .lm-section14.will-change .ulmasinwatch img, 
.hw-lm .lm-section14.will-change .ulmategolfim img {
    will-change: transform, opacity;
}

@media screen and (min-aspect-ratio:11/10) and (max-aspect-ratio: 1400/953) {
    .hw-lm .lm-section14 .ulmategolftxt1,
    .hw-lm .lm-section14 .ulmategolftxt2 {
        bottom: 22.77083333vw;
        transform: translate3d(0, -10.197917vw, 0vw) scale(2.0833333);
    }

    .hw-lm .lm-section14 .ulmategodes {
        bottom: 22.77083333vw;
    }

    .hw-lm .lm-section14 .ulmasinwatch,
    .hw-lm .lm-section14 .ulmategolfim {
        transform-origin: 28.5% 50.8%;
    }
}


/* section 14 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .stitotal {
        margin: 0;
    }

    .hw-lm .lm-section14 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section14 .ulmategolfim {
        width: 100%;
        height: 216.66666666vw;
        margin: 0;
        transform: scale(1);
    }

    .hw-lm .lm-section14 .ulmategolfim picture {
        opacity: 0.8;
    }

    .hw-lm .lm-section14 .ulmategolftxt1 {
        position: relative;
        left: 0;
        bottom: 0;
        margin: -52.22222vw 0 0 11.11111111vw;
        transform: none;
    }

    .hw-lm .lm-section14 .ulmategolftxt1 h3 span {
        width: 86.111111111vw;
        font-size: 13.33333333vw;
        transform: none;
    }

    .hw-lm .lm-section14 .ulmasinwatch img, 
    .hw-lm .lm-section14 .ulmategolfim img {
        transform: none;
    }

    .hw-lm .lm-section14 .ulmategodes {
        position: relative;
        left: 0;
        bottom: 0;
        transform: none;
        width: 77.77777777vw;
        margin: 4.44444444vw 0 0 11.11111111vw;
        color: #6D6F72;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section14 .ulmategolftxt1,
    .hw-lm .lm-section14 .ulmategodes {
        transform: translate3d(0,80px,0);
        opacity: 0;
        transition: opacity 0.6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
    }

    .hw-lm .lm-section14 .tactive .ulmategolftxt1,
    .hw-lm .lm-section14 .tactive .ulmategodes {
        transform: translate3d(0px,0px,0px);
        opacity: 1;
    }

    .hw-lm .lm-section14 .ulmategolfsha1 {
        height: 55.55555555vw;
    }

    .hw-lm .lm-section14 .ulmategolftxt1 .ulmasecond {
        transform: none;
    }

    .hw-lm .lm-section14 .hideTxt {
        opacity: 1;
    }
}

/* section 15 pc */
.hw-lm .lm-section15 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -5.875vw 0 10.41666666vw;
    padding: 0 0 1px 0;
    transition: opacity 0.3s linear;
    opacity: 0;
    z-index: 10;
}

.hw-lm .lm-section15.fadein {
    opacity: 1;
}

.hw-lm .lm-section15 .manfunout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67.5vw;
}

.hw-lm .lm-section15 .manfunswiper {
    width: 100%;
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide {
    cursor: pointer;
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section15 .manfunswiper.isend .swiper-slide:nth-child(n+1) {
    cursor: default;
}

.hw-lm .lm-section15 .manfunswiper.isend .swiper-slide:first-child {
    cursor: pointer;
}

.hw-lm .lm-section15 .manfunswiper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section15 .manfunav {
    display: flex;
    align-self: flex-end;
    margin: 2.5vw 0 0 0;
}

.hw-lm .lm-section15 .manfunav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section15 .manfunav .manfarricon {
    display: flex;
    position: relative;
    width: 1.04166666vw;
    height: 1.04166666vw;
    margin: 0 0 0 0.625vw;
    z-index: 9;
}

.hw-lm .lm-section15 .manfunav .manfarricon svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section15 .manfunav .manflarrow .manfarricon {
    margin: 0 0 0 0.83333333vw;
    transform: translate3d(0, 0, 0) rotate(180deg);
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide {
    width: 21.66666666vw;
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide:nth-child(1) {
    width: 44.58333333vw;
}

.hw-lm .lm-section15 .manfunswiper .swiper-slide .mancardim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 26.04166666vw;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-lm .lm-section15 .mancardim1 .povideo {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 16.875vw;
    width: 10.67708333vw;
    height: 10.67708333vw;
    border-radius: 50%;
    transform: translate3d(0px, -50%, 0px) rotate(0deg);
    z-index: 9;
}

.hw-lm .lm-section15 .mancardim .povideo video {
    width: calc(100% + 0.10416666vw);
    height: calc(100% + 0.10416666vw);
}

.hw-lm .lm-section15 .manfunswiper .opevideobtn {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 9;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section15 .manfunswiper .opevideobtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
}

.hw-lm .lm-section15 .manfunswiper .opevideobtn img {
    display: none;
}

.hw-lm .lm-section15 .manfunswiper .opevideobtn img.active {
    display: block;
}

.hw-lm .lm-section15 .mancamat {
    width: 20.229167vw;
    margin: 2.08333333vw 0 0.83333333vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-lm .lm-section15 .mancadtxt {
    margin: 0 0 0 0.83333333333vw;
}

.hw-lm .lm-section15 .mancades {
    width: 29.6875vw;
    color: #6d6f72;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section15 .swiper-slide:nth-child(2) .mancades,
.hw-lm .lm-section15 .swiper-slide:nth-child(3) .mancades {
    width: 17.5vw;
}

.hw-lm .lm-section15 .manfunav li {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section15 .manfunav li:hover {
        cursor: pointer;
    }
}

.hw-lm .lm-section15 .manfunav li .rwater, 
.hw-lm .lm-section15 .manfunav li .lwater {
    position: absolute;
    width: 8.9583333333vw;
    height: 3.6458333333vw;
    top: 2.6041666666vw;
}

.hw-lm .lm-section15 .manfunav li .rwater svg, 
.hw-lm .lm-section15 .manfunav li .lwater svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section15 .manfunav li .lwater {
    right: -2.2916666666vw;
    transition: top 0.6s ease-out, right 0.6s ease-out;
}

.hw-lm .lm-section15 .manfunav li .rwater {
    left: -0.10416666666vw;
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.hw-lm .lm-section15 .manfunav li .cirbubble {
    position: absolute;
    right: 0.3125vw;
    bottom: -1.1458333333vw;
    width: 0.2083333333vw;
    height: 0.2083333333vw;
    background-color: #fff;
    border-radius: 50%;
    transition: bottom 0.3s ease-out, opacity 0.3s ease-in;
    z-index: 2;
}

.hw-lm .lm-section15 .manfunav li.manflarrow .cirbubble {
    left: 0.3125vw;
    right: auto;
}

.hw-lm .lm-section15 .manfunav li .borshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #24407f;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
}

.hw-lm .lm-section15 .manfunav li.swiper-button-disabled .cirbubble,
.hw-lm .lm-section15 .manfunav li.swiper-button-disabled .rwater,
.hw-lm .lm-section15 .manfunav li.swiper-button-disabled .lwater {
    display: none;
}

.hw-lm .lm-section15 .manfunav li.swiper-button-disabled .borshadow {
    opacity: 1!important;
    transition: none;
}

.hw-lm .lm-section15 .manfunav li.swiper-button-disabled {
    opacity: 0.3;
    transition: none;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section15 .manfunav li:hover .lwater {
        top: -0.3125vw;
        right: -5.78125vw;
    }

    .hw-lm .lm-section15 .manfunav li:hover .cirbubble {
        bottom: 1.041666666vw;
        opacity: 0;
    }

    .hw-lm .lm-section15 .manfunav li:hover .borshadow {
        opacity: 0;
    }

    .hw-lm .lm-section15 .manfunav li:hover .rwater {
        top: -0.5208333333vw;
        left: -5.572916666vw;
    }

    .hw-lm .lm-section15 .manfunav li.swiper-button-disabled:hover {
        cursor: default;
    }
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-lm .lm-section15 .manfunav li .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section15 .manfunav li .rwater {
        display: none;
    }

    .hw-lm .lm-section15 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section15 .manfunav li .cirbubble {
        display: none;
    }
}

.hw-lm .lm-section15.will-change .manfunav li .rwater, 
.hw-lm .lm-section15.will-change .manfunav li .lwater,
.hw-lm .lm-section15.will-change .manfunav li .cirbubble,
.hw-lm .lm-section15.will-change .manfunswiper .swiper-wrapper {
    will-change: transform, opacity;
}

/* section 15 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section15 {
        margin: 0 0 27.77777777vw 0;
        opacity: 1;
    }

    .hw-lm .lm-section15 .manfunout {
        width: 82.22222222vw;
    }

    .hw-lm .lm-section15 .manfunswiper .swiper-slide {
        width: 82.22222222vw!important;
    }

    .hw-lm .lm-section15 .manfunswiper .swiper-slide .mancardim {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section15 .mancamat {
        width: 77.77777777vw;
        margin: 6.666666666vw 0 2.77777777vw 0;
        font-size: 5.55555555vw;
    }

    .hw-lm .lm-section15 .mancades {
        width: 77.77777777vw!important;
        margin: 0;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section15 .swiper-slide:nth-child(3) .mancades, 
    .hw-lm .lm-section15 .swiper-slide:nth-child(4) .mancades {
        width: 77.77777777vw;
    }

    .hw-lm .lm-section15 .mancadtxt {
        margin: 0 0 0 2.22222222vw;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .hw-lm .lm-section15 .swiper-slide.swiper-slide-active .mancadtxt {
        opacity: 1;
    }

    .hw-lm .lm-section15 .manfunav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-lm .lm-section15 .manfunav .manfarricon {
        width: 5vw;
        height: 5vw;
        margin: 0 0 0 2.36111111vw;
    }

    .hw-lm .lm-section15 .manfunswiper .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section15 .manfunav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section15 .manfunav .manflarrow .manfarricon {
        margin: 0 0 0 3.47222222vw;
    }

    .hw-lm .lm-section15 .manfunav {
        margin: 11.11111111vw 0 0 0;
    }

    .hw-lm .lm-section15 .mancardim1 .povideo {
        width: 44.72222222vw;
        height: 44.72222222vw;
        left: 18.33333333vw;
    }

    .hw-lm .lm-section15 .manfunav li:hover .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section15 .manfunav li .rwater {
        display: none;
    }

    .hw-lm .lm-section15 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section15 .manfunav li .cirbubble {
        display: none;
    }

    .hw-lm .lm-section15 .manfunswiper .opevideobtn {
        width: 8.88888888vw;
        height: 8.88888888vw;
        bottom: 4.44444444vw;
        right: 4.44444444vw;
    }
}



/* section 16 pc */
.hw-lm .lm-section16 {
    overflow: hidden;
    position: relative;
    margin: 0 0 10.41666666vw 0;
}

.hw-lm .lm-section16 .smartlishadow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 110%;
    height: 28.125vw;
    transform: translate(-50%,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
    z-index: 2;
}

.hw-lm .lm-section16 .smartlichan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 16.25vw;
    bottom: 8.333333333vw;
    z-index: 10;
}

.hw-lm .lm-section16 .smartlisubt {
    position: relative;
    display: inline-block;
    color: #fff;
    color: transparent;
    margin: 0 0 1.04166666vw 0;
    padding: 0.3125vw 0.83333333vw;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 49.65%, #8b98ab 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .lm-section16 .smartlisubt .txtback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section16 .smartlisubt .txtback svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section16 .smartlimat1 {
    display: inline-block;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0vw, #ebebeb 3.125vw, #8b98ab 6.25vw, #ffffff 6.77083333vw, #ebebeb 8.85416666vw, #8b98ab 11.45833333vw, #8b98ab 12.5vw,#ffffff 12.5vw, #ebebeb 15.625vw, #8b98ab 17.70833333vw);
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .lm-section16.will-change .smartlimat1 {
    will-change: transform, opacity;
}

.hw-lm .lm-section16 .samrtimcon {
    overflow: hidden;
    position: relative;
}

/* section 16 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section16 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section16 .smartlichan {
        position: relative;
        left: 0;
        bottom: 0; 
    }

    .hw-lm .lm-section16 .smartlimat2,
    .hw-lm .lm-section16 .smartlimat1 {
        font-size: 13.33333333vw;
    }

    .hw-lm .lm-section16 .smartlisubt {
        margin: 0 0 0 11.11111111vw;
        padding: 0.69444444vw 2.22222222vw;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section16 .smartlimat1 {
        margin: 0 0 8.88888888vw 11.11111111vw;
        background: linear-gradient(180deg,#fff 0,#ebebeb 6.94444444vw,#8b98ab 13.88888888vw, #8b98ab 16.25vw, #fff 17.36111111vw,#ebebeb 23.19444444vw,#8b98ab 35.5vw, #fff 35.888889vw,#ebebeb 39.44444444vw,#8b98ab 48.75vw, #fff 50.13888888vw,#ebebeb 55.69444444vw,#8b98ab 66.38888888vw, #fff 66.38888888vw,#ebebeb 71.94444444vw,#8b98ab 84.02777777vw, #fff 84.02777777vw,#ebebeb 88.19444444vw,#8b98ab 98.88888888vw );
        -webkit-background-clip: text;
        background-clip: text;
    }
    
    .hw-lm .lm-section16 .smartlishadow {
        height: 75vw;
    }

    .hw-lm .lm-section16 .smartlimat2 {
        margin: 0 0 8.88888888vw 11.11111111vw;
    }
}


/* section 17 pc */
.hw-lm .lm-section17 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 81.25vw;
    margin: 0 auto 10.41666666vw;
} 

.hw-lm .lm-section17 .esmvideo {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 39.58333333vw;
    margin: 0 0 2.0833333333vw 0;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section17 .esmmat {
    width: 41.6666666666vw;
    margin: 0 auto 3.3333333333vw;
    color: #fff;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-lm .lm-section17 .esmbonote {
    width: 27.708333333vw;
    margin: 0 15.520833333vw 0 0;
    color: #6d6f72;
    font-size: 1.1458333333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section17 .esmboicon {
    display: flex;
    align-items: center;
}

.hw-lm .lm-section17 .esmiconim {
    width: 4.1666666666vw;
    height: 4.1666666666vw;
    margin: 0 0.8333333333vw 0 0;
}

.hw-lm .lm-section17 .esmstarcon {
    display: flex;
    max-width: 20.833333333vw;
    color: #fff;
    font-size: 1.666666666vw;
    font-weight: 400;
    line-height: 1.25;
}

.hw-lm .lm-section17 .esmstartt {
    display: flex;
    flex-direction: column;
}

.hw-lm .lm-section17 .esmlides {
    max-width: 26.0416666666vw;
    margin: 0.208333333vw 0 0 0;
    color: #6d6f72;
    font-size: 1.1458333333vw;
    font-weight: 400;
    line-height: 1.6;
}

/* section 17 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section17 {
        flex-direction: column;
        width: 91.11111111vw;
        margin: 0 auto 27.77777777vw;
    }

    .hw-lm .lm-section17 .esmmat {
        align-self: flex-start;
        width: 77.77777777vw;
        margin: 0 0 0 6.66666666vw;
        font-size: 8.88888888vw;
        text-align: left;
        order: 1;
    }

    .hw-lm .lm-section17 .esmbonote {
        width: 77.77777777vw;
        margin: 4.44444444vw 0 8.88888888vw 6.66666666vw;
        font-size: 4.44444444vw;
        order: 2;
    }

    .hw-lm .lm-section17 .esmvideo {
        width: 91.11111111vw;
        height: 109.72222222vw;
        margin: 0 0 6.66666666vw 0;
        border-radius: 2.22222222vw;
        order: 3;
    }

    .hw-lm .lm-section17 .esmiconim {
        width: 17.22222222vw;
        height: 17.22222222vw;
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section17 .esmstarcon {
        max-width: 52.777777777vw;
        font-size: 5.555555555vw;
    }

    .hw-lm .lm-section17 .esmlides {
        max-width: none;
        width: 52.77777777vw;
        margin: 1.3888888888vw 0 0 0;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section17 .esmboicon {
        margin: 0 0 0 4.444444444vw;
        order: 4;
    }
}

/* section 18 pc */
.hw-lm .lm-section18 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 10.41666666vw;
    padding: 0 0 1px 0;
}

.hw-lm .lm-section18 .manfunout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67.5vw;
}

.hw-lm .lm-section18 .manfunswiper {
    width: 100%;
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide {
    cursor: pointer;
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section18 .manfunswiper.isend .swiper-slide:nth-last-child(-n + 2) {
    cursor: default;
}

.hw-lm .lm-section18 .manfunswiper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section18 .manfunav {
    display: flex;
    align-self: flex-end;
    margin: 2.5vw 0 0 0;
}

.hw-lm .lm-section18 .manfunav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section18 .manfunav .manfarricon {
    display: flex;
    position: relative;
    width: 1.04166666vw;
    height: 1.04166666vw;
    margin: 0 0 0 0.625vw;
    z-index: 2;
}

.hw-lm .lm-section18 .manfunav .manfarricon svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section18 .manfunav .manflarrow .manfarricon {
    margin: 0 0 0 0.8333333333333333vw;
    transform: translate3d(0, 0, 0) rotate(180deg);
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide {
    width: 21.66666666vw;
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide .mancardim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 26.04166666vw;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section18 .manfunswiper .swiper-slide .mancadtxt {
    margin: 0 0 0 0.8333333333vw;
}

.hw-lm .lm-section18 .manfunswiper .opevideobtn {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.08333333vw;
    height: 2.08333333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 9;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section18 .manfunswiper .opevideobtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
}

.hw-lm .lm-section18 .manfunswiper .opevideobtn img {
    display: none;
}

.hw-lm .lm-section18 .manfunswiper .opevideobtn img.active {
    display: block;
}

.hw-lm .lm-section18 .mancamat {
    width: 21.22916666vw;
    margin: 2.08333333vw 0 0.83333333vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-lm .lm-section18 .mancades {
    width: 17.5vw;
    color: #6d6f72;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section18 .swiper-slide:nth-child(4) .mancades {
    width: 19.0625vw;
}

.hw-lm .lm-section18 .swiper-slide:nth-child(5) .mancades {
    width: 19.53125vw;
}

.hw-lm .lm-section18 .manfunav li {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section18 .manfunav li:hover {
        cursor: pointer;
    }
}

.hw-lm .lm-section18 .manfunav li .rwater, 
.hw-lm .lm-section18 .manfunav li .lwater {
    display: flex;
    position: absolute;
    width: 8.9583333333vw;
    height: 3.6458333333vw;
    top: 2.6041666666vw;
}

.hw-lm .lm-section18 .manfunav li .rwater svg,
.hw-lm .lm-section18 .manfunav li .lwater svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section18 .manfunav li .lwater {
    right: -2.2916666666vw;
    transition: top 0.6s ease-out, right 0.6s ease-out;
}

.hw-lm .lm-section18 .manfunav li .rwater {
    left: -0.10416666666vw;
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.hw-lm .lm-section18 .manfunav li .cirbubble {
    position: absolute;
    right: 0.3125vw;
    bottom: -1.1458333333vw;
    width: 0.2083333333vw;
    height: 0.2083333333vw;
    background-color: #fff;
    border-radius: 50%;
    transition: bottom 0.3s ease-out, opacity 0.3s ease-in;
    z-index: 2;
}

.hw-lm .lm-section18 .manfunav li.manflarrow .cirbubble {
    left: 0.3125vw;
    right: auto;
}

.hw-lm .lm-section18 .manfunav li.swiper-button-disabled .cirbubble,
.hw-lm .lm-section18 .manfunav li.swiper-button-disabled .rwater,
.hw-lm .lm-section18 .manfunav li.swiper-button-disabled .lwater {
    display: none;
}

.hw-lm .lm-section18 .manfunav li.swiper-button-disabled .borshadow {
    opacity: 1!important;
    transition: none;
}

.hw-lm .lm-section18 .manfunav li.swiper-button-disabled {
    opacity: 0.3;
    transition: none;
}

.hw-lm .lm-section18 .manfunav li .borshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #24407f;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section18 .manfunav li:hover .lwater {
        top: -0.3125vw;
        right: -5.78125vw;
    }

    .hw-lm .lm-section18 .manfunav li:hover .cirbubble {
        bottom: 1.041666666vw;
        opacity: 0;
    }

    .hw-lm .lm-section18 .manfunav li:hover .borshadow {
        opacity: 0;
    }

    .hw-lm .lm-section18 .manfunav li:hover .rwater {
        top: -0.5208333333vw;
        left: -5.572916666vw;
    }

    .hw-lm .lm-section18 .manfunav li.swiper-button-disabled:hover {
        cursor: default;
    }
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-lm .lm-section18 .manfunav li .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section18 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section18 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section18 .manfunav li .cirbubble {
        display: none;
    }
}

.hw-lm .lm-section18.will-change .manfunav li .rwater, 
.hw-lm .lm-section18.will-change .manfunav li .lwater,
.hw-lm .lm-section18.will-change .manfunav li .cirbubble,
.hw-lm .lm-section18.will-change .manfunswiper .swiper-wrapper {
    will-change: transform, opacity;
}

/* section 18 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section18 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section18 .manfunout {
        width: 82.22222222vw;
    }

    .hw-lm .lm-section18 .manfunswiper .swiper-slide {
        width: 82.22222222vw!important;
    }

    .hw-lm .lm-section18 .manfunswiper .swiper-slide .mancardim {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section18 .mancamat {
        width: 69.44444444vw;
        margin: 6.66666666vw 0 2.77777777vw 0;
        font-size: 5.55555555vw;
    }

    .hw-lm .lm-section18 .mancades {
        width: 77.77777777vw!important;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section18 .swiper-slide:nth-child(3) .mancades, 
    .hw-lm .lm-section18 .swiper-slide:nth-child(4) .mancades {
        width: 77.77777777vw;
    }

    .hw-lm .lm-section18 .mancadtxt {
        margin: 0 0 0 2.22222222vw;
    }

    .hw-lm .lm-section18 .manfunav {
        margin: 11.111111111vw 0 0 0;
    } 

    .hw-lm .lm-section18 .manfunav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-lm .lm-section18 .manfunav .manfarricon {
        width: 5vw;
        height: 5vw;
        margin: 0 0 0 2.36111111vw;
    }

    .hw-lm .lm-section18 .manfunav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section18 .manfunav .manflarrow .manfarricon {
        margin: 0 0 0 3.47222222vw;
    }

    .hw-lm .lm-section18 .manfunswiper .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section18 .manfunswiper .swiper-slide .mancadtxt {
        margin: 0 0 0 2.22222222vw;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .hw-lm .lm-section18 .manfunav li:hover .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section18 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section18 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section18 .manfunav li .cirbubble {
        display: none;
    }

    .hw-lm .lm-section18 .manfunswiper .swiper-slide.swiper-slide-active .mancadtxt {
        opacity: 1;
    }
}



/* section 19 pc */
.hw-lm .lm-section19 {
    position: relative;
    margin: 0 0 10.41666666vw 0;
}

.hw-lm .lm-section19 .xtapvcon {
    position: sticky;
    top: 0;
    height: 100vh;
}

.hw-lm .lm-section19 .xtapvcon .povideo::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,#000000 100%);
    z-index: 1;
}

.hw-lm .lm-section19 .ulmatextap {
    height: 80vh;
}

.hw-lm .lm-section19 .xtatxtchan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(var(--tapY));
    transition: transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.hw-lm .lm-section19 .xtatxtchan.active {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}

.hw-lm .lm-section19 .xtatxtchan.active .xtmat1 {
    opacity: 0;
}

.hw-lm .lm-section19 .xtatxtchan.active .xtdes {
    opacity: 1;
}

.hw-lm .lm-section19 .xtapshow {
    position: absolute;
    left: 16.25vw;
    bottom: 14.8148148%;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, 80px, 0);
    opacity: 0;
    z-index: 2;
}

.hw-lm .lm-section19 .xtapshow.show {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}

.hw-lm .lm-section19 .xtsubt {
    position: relative;
    display: inline-block;
    color: #fff;
    color: transparent;
    margin: 0 0 1.04166666vw 0;
    padding: 0.3125vw 0.83333333vw;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 49.65%, #8b98ab 100%);
    -webkit-background-clip: text;
    background-clip: text;
}   

.hw-lm .lm-section19 .xtsubt .txtback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section19 .xtsubt .txtback svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section19 .xtmat1 {
    display: inline-block;
    width: 62.5vw;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0vw, #ebebeb 3.125vw, #8b98ab 6.25vw, #ffffff 6.77083333vw, #ebebeb 8.85416666vw, #8b98ab 11.45833333vw, #8b98ab 12.5vw,#ffffff 12.5vw, #ebebeb 15.625vw, #8b98ab 17.70833333vw);
    -webkit-background-clip: text;
    background-clip: text;
    transition: opacity .6s linear;
}

.hw-lm .lm-section19 .xtdes {
    width: 35.72916666vw;
    margin: 1.666666666vw 0 0 0;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0;
    transition: opacity .6s linear;
}

.hw-lm .lm-section19 .xtdes span {
    color: #fff;
    font-weight: 700;
}

.hw-lm .lm-section19.will-change .xtmat1,
.hw-lm .lm-section19.will-change .xtdes,
.hw-lm .lm-section19.will-change .xtatxtchan {
    will-change: transform, opacity;
}

/* section 19 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section19 {
        overflow: hidden;
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section19 .xtapvcon {
        height: auto;
    }

    .hw-lm .lm-section19 .xtapshow {
        position: relative;
        left: 0;
        bottom: 0;
        opacity: 1;
    }

    .hw-lm .lm-section19 .povideo {
        height: 150vw;
    }

    .hw-lm .lm-section19 .xtsubt {
        margin: 0 0 1.38888888vw 0;
        padding: 0.69444444vw 2.22222222vw;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section19 .xtatxtchan {
        margin: 0 0 0 11.11111111vw;
        transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
        transform: translate3d(0, 80px, 0);
        opacity: 0;
    }

    .hw-lm .lm-section19 .xtatxtchan.tactive {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }

    .hw-lm .lm-section19 .xtmat1 {
        width: 86.1111111111vw;
        font-size: 13.33333333vw;
        background: linear-gradient(180deg,#fff 0,#ebebeb 6.94444444vw,#8b98ab 15.888889vw, #8b98ab 16.25vw, #fff 17.36111111vw,#ebebeb 23.19444444vw,#8b98ab 30.5vw, #fff 33.88888888vw,#ebebeb 39.44444444vw,#8b98ab 46.75vw, #fff 50.13888888vw,#ebebeb 55.69444444vw,#8b98ab 66.38888888vw, #fff 66.38888888vw,#ebebeb 71.94444444vw,#8b98ab 84.02777777vw, #fff 84.02777777vw,#ebebeb 88.19444444vw,#8b98ab 98.88888888vw, #fff 98.88888888vw,#ebebeb 103.75vw,#8b98ab 114.44444444vw);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hw-lm .lm-section19 .xtapshow {
        transform: none;
    }

    .hw-lm .lm-section19 .xtdes {
        width: 77.77777777vw;
        margin: 4.44444444vw 0 8.88888888vw 0;
        color: #6d6f72;
        font-size: 4.44444444vw;
        opacity: 1;
    }
}


/* section 20 pc */
.hw-lm .lm-section20 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 10.416666666vw 0;
    padding: 0 0 1px 0;
}

.hw-lm .lm-section20 .manfunout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67.5vw;
}

.hw-lm .lm-section20 .manfunswiper {
    width: 100%;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide {
    cursor: pointer;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-lm .lm-section20 .manfunswiper.isend .swiper-slide:nth-last-child(-n + 2) {
    cursor: default;
}

.hw-lm .lm-section20 .manfunswiper .swiper-wrapper.current {
    transition-timing-function: ease;
}

.hw-lm .lm-section20 .manfunav {
    display: flex;
    align-self: flex-end;
    margin: 2.5vw 0 0 0;
}

.hw-lm .lm-section20 .manfunav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section20 .manfunav .manfarricon {
    display: flex;
    position: relative;
    width: 1.04166666vw;
    height: 1.04166666vw;
    margin: 0 0 0 0.625vw;
    z-index: 9;
}

.hw-lm .lm-section20 .manfunav .manfarricon svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section20 .manfunav .manflarrow .manfarricon {
    margin: 0 0 0 0.8333333333vw;
    transform: translate3d(0, 0, 0) rotate(180deg);
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide {
    width: 21.66666666vw;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide .mancardim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 26.04166666vw;
    border-radius: 0.83333333vw;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide .povideo {
    overflow: hidden;
    position: absolute;
    top: 7.7604166666vw;
    left: 5.416666666vw;
    width: 10.625vw;
    height: 10.625vw;
    background: #000;
    border-radius: 50%;
    z-index: 3;
}   

.hw-lm .lm-section20 .manfunswiper .opevideobtn {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 9;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section20 .manfunswiper .opevideobtn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }
}

.hw-lm .lm-section20 .manfunswiper .opevideobtn img {
    display: none;
}

.hw-lm .lm-section20 .manfunswiper .opevideobtn img.active {
    display: block;
}

.hw-lm .lm-section20 .manfunswiper .swiper-slide .mancadtxt {
    margin: 0 0 0 0.833333333vw;
}

.hw-lm .lm-section20 .mancamat {
    width: 19.79166666vw;
    margin: 2.08333333vw 0 0.83333333vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-lm .lm-section20 .mancades {
    width: 18.4375vw;
    color: #6d6f72;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section20 .manfunav li {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section20 .manfunav li:hover {
        cursor: pointer;
    } 
}

.hw-lm .lm-section20 .manfunav li .rwater, 
.hw-lm .lm-section20 .manfunav li .lwater {
    display: flex;
    position: absolute;
    width: 8.9583333333vw;
    height: 3.6458333333vw;
    top: 2.6041666666vw;
}

.hw-lm .lm-section20 .manfunav li .lwater svg,
.hw-lm .lm-section20 .manfunav li .rwater svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section20 .manfunav li .lwater {
    right: -2.2916666666vw;
    transition: top 0.6s ease-out, right 0.6s ease-out;
}

.hw-lm .lm-section20 .manfunav li .rwater {
    left: -0.10416666666vw;
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.hw-lm .lm-section20 .manfunav li .cirbubble {
    position: absolute;
    right: 0.3125vw;
    bottom: -1.1458333333vw;
    width: 0.2083333333vw;
    height: 0.2083333333vw;
    background-color: #fff;
    border-radius: 50%;
    transition: bottom 0.3s ease-out, opacity 0.3s ease-in;
    z-index: 2;
}

.hw-lm .lm-section20 .manfunav li.manflarrow .cirbubble {
    left: 0.3125vw;
    right: auto;
}

.hw-lm .lm-section20 .manfunav li .borshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #24407f;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease;
}

.hw-lm .lm-section20 .manfunav li.swiper-button-disabled .cirbubble,
.hw-lm .lm-section20 .manfunav li.swiper-button-disabled .rwater,
.hw-lm .lm-section20 .manfunav li.swiper-button-disabled .lwater {
    display: none;
}

.hw-lm .lm-section20 .manfunav li.swiper-button-disabled .borshadow {
    opacity: 1!important;
    transition: none;
}

.hw-lm .lm-section20 .manfunav li.swiper-button-disabled {
    opacity: 0.3;
    transition: none;
}

@media (any-hover: hover)  {
    .hw-lm .lm-section20 .manfunav li:hover .lwater {
        top: -0.3125vw;
        right: -5.78125vw;
    }

    .hw-lm .lm-section20 .manfunav li:hover .cirbubble {
        bottom: 1.041666666vw;
        opacity: 0;
    }

    .hw-lm .lm-section20 .manfunav li:hover .borshadow {
        opacity: 0;
    }

    .hw-lm .lm-section20 .manfunav li:hover .rwater {
        top: -0.5208333333vw;
        left: -5.572916666vw;
    }

    .hw-lm .lm-section20 .manfunav li.swiper-button-disabled:hover {
        cursor: default;
    }
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-lm .lm-section20 .manfunav li .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section20 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section20 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section20 .manfunav li .cirbubble {
        display: none;
    }
}

.hw-lm .lm-section20.will-change .manfunav li .rwater, 
.hw-lm .lm-section20.will-change .manfunav li .lwater,
.hw-lm .lm-section20.will-change .manfunav li .cirbubble,
.hw-lm .lm-section20.will-change .manfunswiper .swiper-wrapper {
    will-change: transform, opacity;
}

/* section 20 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section20 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-lm .lm-section20 .manfunout {
        width: 82.22222222vw;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide {
        width: 82.22222222vw!important;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide .mancardim {
        height: 109.72222222vw;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section20 .mancamat {
        width: 55.55555555vw;
        margin: 6.66666666vw 0 2.77777777vw 0;
        font-size: 5.55555555vw;
    }

    .hw-lm .lm-section20 .mancades {
        width: 77.77777777vw;
        font-size: 4.44444444vw;
    }

    .hw-lm .lm-section20 .swiper-slide:nth-child(3) .mancades, 
    .hw-lm .lm-section20 .swiper-slide:nth-child(4) .mancades {
        width: 77.77777777vw;
    }

    .hw-lm .lm-section20 .manfunav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide .mancadtxt {
        margin: 0 0 0 2.222222222vw;
        transition: opacity 0.6s ease;
        opacity: 0;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide.swiper-slide-active .mancadtxt {
        opacity: 1;
    }

    .hw-lm .lm-section20 .manfunav .manfarricon {
        width: 5vw;
        height: 5vw;
        margin: 0 0 0 2.36111111vw;
    }

    .hw-lm .lm-section20 .manfunav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-lm .lm-section20 .manfunav .manflarrow .manfarricon {
        margin: 0 0 0 3.47222222vw;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-lm .lm-section20 .manfunav {
        margin: 11.11111111vw 0 0 0;
    }

    .hw-lm .lm-section20 .manfunswiper .swiper-slide .povideo {
        width: 44.861111111vw;
        height: 44.861111111vw;
        top: 32.63888888vw;
        left: 18.194444444vw;
    }

    .hw-lm .lm-section20 .manfunav li:hover .borshadow {
        opacity: 1;
    }

    .hw-lm .lm-section20 .manfunav li .lwater {
        display: none;
    }
    
    .hw-lm .lm-section20 .manfunav li .rwater {
        display: none;
    }
    
    .hw-lm .lm-section20 .manfunav li .cirbubble {
        display: none;
    }

    .hw-lm .lm-section20 .manfunswiper .opevideobtn {
        width: 8.88888888vw;
        height: 8.88888888vw;
        bottom: 4.44444444vw;
        right: 4.44444444vw;
    }
}


/* section 21 pc */
.hw-lm .lm-section21 {
    position: relative;
    margin: 3.64583333vw 0;
}

.hw-lm .lm-section21 .barrtoptxt {
    position: absolute;
    bottom: 4.6875vw;
    left: 16.25vw;
    width: 41.66666666vw;
    transition: opacity .5s ease, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    z-index: 9;
}

.hw-lm .lm-section21 .barsut {
    position: relative;
    display: inline-block;
    color: #fff;
    color: transparent;
    margin: 0 0 1.04166666vw 0;
    padding: 0.3125vw 0.83333333vw;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(105.86deg,#ffffff 0%,#ebebeb 49.65%,#8b98ab 100%);;
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .lm-section21 .txtback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section21 .txtback svg {
    width: 100%;
    height: 100%;
}

.hw-lm .lm-section21 .barmat1 {
    display: inline-block;
    color: #fff;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #fff 0vw, #ebebeb 3.125vw, #8b98ab 6.25vw, #fff 6.77083333vw, #ebebeb 8.85416666vw, #8b98ab 12.23958333vw, #8b98ab 13.5vw, #fff 13.5vw, #ebebeb 15.625vw, #8b98ab 18.75vw,#fff 19.27083333vw, #ebebeb 21.875vw, #8b98ab 23.4375vw);
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .lm-section21 .barsavebottom {
    position: relative;
    margin: 0 0 4.6875vw 0;
    transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    transform: translate3d(0px, calc(100% + 2.5vw), 0px);
    opacity: 0;
    z-index: -1;
}

.hw-lm .lm-section21 .show .barrtoptxt {
    transform: translate3d(0px, var(--barmovedistance), 0px);
    opacity: 0;
    z-index: -1;
}

.hw-lm .lm-section21 .show .barsavebottom {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
    z-index: 1;
}

.hw-lm .lm-section21 .barrbottxt {
    display: flex;
    align-items: flex-end;
    margin: 0 0 0 16.25vw;
}

.hw-lm .lm-section21 .barsatwopart {
    display: flex;
    width: 30.20833333vw;
}

.hw-lm .lm-section21 .barsatwopart>div {
    flex-shrink: 0;
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hw-lm .lm-section21 .barsatwopart>div.current {
    opacity: 1;
    z-index: 2;
}

.hw-lm .lm-section21 .barsatwopart>div.sapart2 {
    transform: translateX(-100%);
}

.hw-lm .lm-section21 .barsavenote {
    width: 39.20833333vw;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section21 .bartogray {
    width: 20.83333333vw;
    margin: 0.8333333333vw 0 2.5vw 0;
    color: #6d6f72;
    font-size: 0.83333333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section21 .sapart1 {
    flex-direction: column;
}

.hw-lm .lm-section21 .sapart1 .itemli {
    display: flex;
}

.hw-lm .lm-section21 .sapart1 .itemli .charltxt {
    margin: 1.5625vw 0 0 0;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section21 .sapart1 .itemli picture {
    width: auto;
}

.hw-lm .lm-section21 .sapart1 .itemli .charcline {
    width: 0.10416666vw;
    height: 6.25vw;
    margin: 0 1.25vw;
}

.hw-lm .lm-section21 .sapart1 .charrtxt {
    margin: -1.145833333vw 0 0 0;
}

.hw-lm .lm-section21 .sapart1 .itemli p.white {
    color: #fff;
    font-size: 1.14583333vw;
    line-height: 1.6;
}

.hw-lm .lm-section21 .sapart1 .itemli p.white span {
    display: inline-block;
    color: #fff;
    font-size: 4.16666666vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 49.65%, #8b98ab 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hw-lm .lm-section21 .sapart1 .itemli:not(:last-child) {
    margin: 0 0 1.25vw 0;
}

.hw-lm .lm-section21 .sapart1 .itemli p.gray {
    color: #6d6f72;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section21 .sapart2 {
    display: flex;
    flex-direction: column;
}

.hw-lm .lm-section21 .sapart2 p {
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-lm .lm-section21 .sapart2 .itemli:first-child {
    margin: -1.1458333333vw 0 0  0;
}

.hw-lm .lm-section21 .sapart2 p span {
    display: inline-block;
    color: #fff;
    font-size: 4.16666666vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 49.65%, #8b98ab 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.hw-lm .lm-section21 .bartoutcon {
    display: inline-flex;
    padding: 0.20833333vw;
    margin: 2.5vw 0 0 0;
    background: rgba(36, 64, 127, 0.3);
    border-radius: 52.03125vw;
}

.hw-lm .lm-section21 .bartonav {
    position: relative;
    display: inline-flex;
}

.hw-lm .lm-section21 .bartonav li {
    display: flex;
    overflow: hidden;
    position: relative;
    max-width: 18.229166666vw;
    padding: 0.67708333vw 1.25vw 0.65104166vw;
    border-radius: 999px;
    text-align: center;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

.hw-lm .lm-section21 .bartonav li span {
    display: block;
    position: relative;
    color: rgba(215, 226, 250, 0.6);
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.25;
    transition: color 0.3s ease;
    z-index: 2;
}

.hw-lm .lm-section21 .bartonav li.current span {
    color: rgba(215, 226, 250, 1);
}

@media (any-hover: hover)  {
    .hw-lm .lm-section21 .bartonav li:hover span {
        color: rgba(215, 226, 250, 1);
        cursor: pointer;
    }

    .hw-lm .lm-section21 .bartonav li.current:hover span {
        cursor: default;
    }
}

.hw-lm .lm-section21 .rwater, 
.hw-lm .lm-section21 .lwater {
    display: flex;
    position: absolute;
    width: 30.520833333vw;
    z-index: 0;
}


.hw-lm .lm-section21 .lwater {
    top: 110%;
    right: 0;
    transform: translate3d(0, 0, 0);
}

.hw-lm .lm-section21 .rwater {
    top: 110%;
    left: 0;
    transform: translate3d(0, 0, 0);
}

.hw-lm .lm-section21 .cirbubble {
    position: absolute;
    width: 0.20833333vw;
    height: 0.20833333vw;
    top: calc(100% + 1.5625vw);
    right: 3.38541666vw;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
}

.hw-lm .lm-section21 .current .lwater {
    top: -0.5208333333vw;
    transform: translate3d(10.416666666vw, 0, 0) rotate(0deg);
    transition: top 0.8s ease-in 0.3s, transform 0.8s ease-in 0.3s;
}

.hw-lm .lm-section21 .current .rwater {
    top: -0.5208333333vw;
    transform: translate3d(-10.416666666vw, 0, 0) rotate(0deg);
    transition: top 0.8s ease-in 0.3s, transform 0.8s ease-in 0.3s;
}

.hw-lm .lm-section21 .current .cirbubble {
    top: -1.30208333vw;
    opacity: 0;
    transition: top 0.9s ease-in 0.3s, opacity 0.6s ease-in 0.3s;
}

.hw-lm .lm-section21 .barsquare {
    overflow: hidden;
    position: absolute;
    left: var(--chaleft);
    top: 0;
    width: var(--chawidth);
    height: 100%;
    transition: width 0.3s ease, left 0.3s ease;
    border: 2px solid #24407f;
    border-radius: 99999px;
    z-index: 0;
    opacity: 0;
}

@media screen and (max-width: 1300px) {
    .hw-lm .lm-section21 .barsquare {
        border-width: 1px;
    }
}

.hw-lm .lm-section21 .barswicon {
    overflow: hidden;
    position: relative;
    left: -9.8vw;
}

.hw-lm .lm-section21 .barbackwatch {
    width: 48.95833333vw;
    height: 48.95833333vw;
}

.hw-lm .lm-section21 .barrmodeswiper {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 14.27083333vw;
    width: 20.10416666vw;
    height: 20.10416666vw;
    border-radius: 50%;
    transform: translate(0, -50%);
}

.hw-lm .lm-section21 .barrchatxt {
    position: sticky;
    top: 0;
    top: var(--barPosition);
}

.hw-lm .lm-section21 .bartri {
    position: absolute;
    top: 30vh;
}

.hw-lm .lm-section21 .bartrispace {
    height: 60vh;
}

.hw-lm .lm-section21.will-change .lwater, 
.hw-lm .lm-section21.will-change .rwater, 
.hw-lm .lm-section21.will-change .cirbubble, 
.hw-lm .lm-section21.will-change .barsquare,
.hw-lm .lm-section21.will-change .barsatwopart>div,
.hw-lm .lm-section21.will-change .barrtoptxt,
.hw-lm .lm-section21.will-change .show .barsavebottom,
.hw-lm .lm-section21.will-change .barrmodeswiper .swiper-slide {
    will-change: transform, opacity;
}

/* section 21 mob */
@media screen and (max-aspect-ratio:11/10) {
    .hw-lm .lm-section21 {
        overflow: hidden;
        margin: 0 0 22.22222222vw 0;
    }

    .hw-lm .lm-section21 .barsavebottom {
        align-items: center;
        margin: 0;
        transform: none;
        opacity: 1;
        z-index: 2;
    }

    .hw-lm .lm-section21 .barrmodeswiper {
        width: 53.61111111vw;
        height: 53.61111111vw;
        left: 38.05555555vw;
    }

    .hw-lm .lm-section21 .barsabtndes {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
    }

    .hw-lm .lm-section21 .barnotetwo {
        margin: 0 0 0 11.111111111vw;
    }

    .hw-lm .lm-section21 .barrtoptxt {
        position: relative;
        left: 0;
        bottom: 0;
        width: 77.77777777vw;
        margin: 0 0 0 11.11111111vw;
        transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
        transform: translate3d(0px, 80px, 0px);
        opacity: 0;
    }

    .hw-lm .lm-section21 .barsavenote {
        width: 77.77777777vw;
        margin: 4.444444444vw 0 0 0;
        color: #6d6f72;
        font-size: 4.44444444vw;
        transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
        transform: translate3d(0px, 80px, 0px);
        opacity: 0;
    }

    .hw-lm .lm-section21 .bartogray {
        width: 80.55555555vw;
        margin: 3.333333333vw 0 8.88888888vw 0;
        color: #6d6f72;
        font-size: 3.33333333vw;
        transition: opacity .6s linear, transform .6s cubic-bezier(0.26, 0.67, 0.48, 0.91);
        transform: translate3d(0px, 80px, 0px);
        opacity: 0;
    }

    .hw-lm .lm-section21 .tactive .barrtoptxt,
    .hw-lm .lm-section21 .tactive .barsavenote,
    .hw-lm .lm-section21 .tactive .bartogray {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }

    .hw-lm .lm-section21 .barrbottxt {
        flex-direction: column-reverse;
        align-items: center;
        margin: 0;
    }

    .hw-lm .lm-section21 .barsut {
        margin: 0 0 2.77777777vw 0;
        padding: 0.69444444vw 2.08333333vw;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section21 .barmat1 {
        font-size: 13.33333333vw;
        background: linear-gradient(180deg,#fff 0,#ebebeb 6.94444444vw,#8b98ab 13.88888888vw, #8b98ab 16.25vw, #fff 17.36111111vw,#ebebeb 23.19444444vw,#8b98ab 32.5vw, #FFF 33.88888888vw,#ebebeb 39.444444vw,#8b98ab 46.75vw, #fff 50.13888888vw,#ebebeb 55.69444444vw,#8b98ab 66.38888888vw, #fff 66.38888888vw,#ebebeb 71.94444444vw,#8b98ab 84.02777777vw, #fff 84.02777777vw,#ebebeb 88.19444444vw,#8b98ab 98.88888888vw, #fff 98.88888888vw,#ebebeb 103.75vw,#8b98ab 114.44444444vw);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hw-lm .lm-section21 .bartonav li span {
        color: rgb(215, 226, 250, 0.6);
        font-size: 3.88888888vw;
    }

    .hw-lm .lm-section21 .bartoutcon {
        margin: 11.11111111vw 0 8.88888888vw 0;
        padding: 1.11111111vw;
    }

    .hw-lm .lm-section21 .bartonav li {
        max-width: 48.666666666vw;
        padding: 3.19444444vw 5.55555555vw 3.05555555vw;
    }

    .hw-lm .lm-section21 .barsatwopart {
        width: 82.22222222vw;
        margin: 0 auto;
    }

    .hw-lm .lm-section21 .barsatwopart>div {
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
    }

    .hw-lm .lm-section21 .sapart1 .itemli:not(:last-child) {
        margin: 0 0 4.44444444vw 0;
    }

    .hw-lm .lm-section21 .sapart2 .itemli:not(:last-child) {
        margin: 0 0 4.44444444vw 0;
    }

    .hw-lm .lm-section21 .sapart1 .itemli {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 82.22222222vw;
        padding: 6.66666666vw 0 6.66666666vw 6.66666666vw;
        background: #151515;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section21 .sapart2 .itemli {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 82.22222222vw;
        padding: 3.47222222vw 0 4.16666666vw 6.66666666vw;
        background: #151515;
        border-radius: 2.22222222vw;
    }

    .hw-lm .lm-section21 .sapart2 p {
        width: 72.222222222vw;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section21 .sapart2 p span {
        font-size: 11.11111111vw;
    }

    .hw-lm .lm-section21 .sapart1 .itemli .charltxt {
        margin: 0 0 3.33333333vw 0;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section21 .sapart1 .itemli .charcline {
        width: 16.66666666vw;
        height: 0.27777777vw;
    }

    .hw-lm .lm-section21 .sapart1 .itemli p.white {
        width: 72.222222222vw;
        margin: 0;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section21 .sapart1 .itemli p.gray {
        width: 72.222222222vw;
        margin: -0.555555555vw 0 0 0;
        font-size: 3.33333333vw;
    }

    .hw-lm .lm-section21 .sapart1 .itemli p.white span {
        font-size: 11.11111111vw;
    }

    .hw-lm .lm-section21 .rwater, 
    .hw-lm .lm-section21 .lwater {
        width: 90.388889vw;
    }

    .hw-lm .lm-section21 .current .lwater {
        top: -1.388888888vw;
        transform: translateX(27.77777777vw);
    }

    .hw-lm .lm-section21 .current .rwater {
        top: -1.388888888vw;
        transform: translateX(-27.77777777vw);
    }

    .hw-lm .lm-section21 .current .cirbubble {
        top: -3.47222222vw;
        transition: top 1.1s ease-in 0.3s, opacity 0.7s ease-in 0.3s;
    }

    .hw-lm .lm-section21 .cirbubble {
        width: 0.55555555vw;
        height: 0.55555555vw;
        right: 8.88888888vw;
    }

    .hw-lm .lm-section21 .barswicon {
        align-self: center;
        left: 0;
    }

    .hw-lm .lm-section21 .sapart1 .charrtxt {
        margin: 0.41666666vw 0 0 0;
    }

    .hw-lm .lm-section21 .barbackwatch {
        width: 130.55555555vw;
        height: 130.55555555vw;
    }

    .hw-lm .lm-section21 .barsquare {
        border-width: 0.2777777777vw;
    }
}