body {
    overflow-x: hidden;
}


html.oshidden,
body.oshidden {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
}

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

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

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

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

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

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

.hw-os .active {
    color: #000;
}

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

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

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

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

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

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

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

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

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

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

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

.hw-os .showFlod {
    display: none;
}

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

.hw-os .povideo picture {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

/* flod */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .hideFold {
        display: none;
    }

    .hw-os .showFlod {
        display: inline-block;
    }
}

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

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

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

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

.hw-os .section-pic-center {
    position: relative;
    z-index: 10;
    text-align: center;
}

.hw-os .section-kv-pic {
    line-height: 1.25;
    margin-top: 3.125vw;
    font-size: 1.46vw;
    font-weight: 400;
    color: #000;
}

.hw-os .section-kv-pic a {
    color: initial;
}

.hw-os .section-kv-pic span {
    font-size: 0.6770833333vw;
    font-weight: 500;
}

.hw-os .section-slogan-botton {
    background-color: #000;
    color: #fff;
    font-size: 13px;
    border: 2px solid #000;
    display: inline-block;
    line-height: 24px;
    font-weight: 800;
    padding: 10px 26px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: .3s ease-out;
    margin-top: 24px;
}

@media (any-hover: hover) {
    .hw-os .section-slogan-botton:hover {
        opacity: .8;
    }
}

@media screen and (max-aspect-ratio:7/10) {
    .hw-os .section-kv-pic span {
        font-size: 3.6111111111vw;
    }

    .hw-os .section-kv-pic {
        font-size: 5.56vw;
        margin-top: 5.55555555555vw;
    }
}

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

.hw-os .last-section a {
    color: #1f71ff
}

.hw-os .last-section ol {
    width: 66.77083333333vw;
    margin: 12.5vw auto;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    list-style: decimal;
}

/* flod */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .last-section ol {
        width: 61.214285714vw;
        font-size: 1.57142857142vw;
        margin: 17.142857142vw auto;
    }
}

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

.hw-os .last-section .notmm {
    position: relative;
    list-style: none !important;
    margin: 0 0 1.04166666666vw 0;
}

.hw-os .last-section .mll {
    position: relative;
    list-style: none;
}

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

.hw-os .last-section .mll1 {
    position: relative;
    list-style: none;
}

.hw-os .last-section .mll1::before {
    content: "**";
    position: absolute;
    top: 0;
    left: -14px;
}

/* flod */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .last-section .mll::before {
        left: -1.285714285vw;
    }
}



@media screen and (max-aspect-ratio:7/10) {
    .hw-os .last-section .mll1::before {
        left: -4.1666666666vw;
    }

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

@media screen and (min-width: 1921px) {
    .hw-os .last-section .mll1::before {
        left: -0.8333333333vw;
    }
}


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

    .hw-os .last-section ol {
        width: 76.25vw;
        margin: 27.7777777777vw 0 27.7777777777vw 15.833333vw;
        font-size: 3.3333333333vw;
    }
}

.hw-os .os-speback {
    background-color: #fff;
}

/* section 1 pc */
.hw-os .os-sec1 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 11.3541666666vw 0;
}

.hw-os .os-sec1 .oskvksp {
    position: relative;
    width: 28.90625vw;
    margin: 4.9479166666vw 0 4.1666666666vw 0;
}

.hw-os .os-sec1 .oskvksp img {
    transform: translate3d(0, 12.5vw, 0) rotate(0deg);
    opacity: 0;
    transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.77, 0.49, 0.7, 1) 0.3s;
}

.hw-os .os-sec1.will-change .oskvksp img {
    will-change: transform, opacity;
}

.hw-os .os-sec1 .oskvcompu {
    position: relative;
    width: 52.5vw;
    transform: scale(1.5);
    transition: transform 1.8s cubic-bezier(0.77, 0.49, 0.7, 1);
    transform-origin: bottom center;
}

.hw-os .os-sec1.will-change .oskvcompu {
    will-change: transfrom;
}

.hw-os .os-sec1 .oskvoutcom {
    position: relative;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.77, 0.49, 0.7, 1) 0.2s;
}

.hw-os .os-sec1.will-change .oskvoutcom {
    will-change: opacity;
}

.hw-os .os-sec1 .oskvscreen {
    overflow: hidden;
    position: absolute;
    top: 0.67708333vw;
    left: 50%;
    width: 40.625vw;
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 0.52083333vw;
}

.hw-os .os-sec1.active .oskvoutcom {
    opacity: 1;
}

.hw-os .os-sec1.active .oskvksp img {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .os-sec1.active .oskvcompu {
    transform: scale(1);
}


/* section 1 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec1 {
        margin: 0 0 17.85714285vw 0;
    }

    .hw-os .os-sec1 .oskvksp {
        width: 50.71428571vw;
        margin: 17.14285714vw 0 11.42857142vw 0;
    }

    .hw-os .os-sec1 .oskvcompu {
        width: 72vw;
    }

    .hw-os .os-sec1 .oskvscreen {
        width: 55.71428571vw;
        height: 37.57142857vw;
        top: 0.92857142vw;
    }
}

/* section 1 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec1 {
        justify-content: center;
        height: 100vh;
        margin: 0;
    }
    
    .hw-os .os-sec1 .oskvksp {
        width: 78.472222222vw;
        height: auto;
        margin: 0 0 18.0555555555vw 0;
    }

    .hw-os .os-sec1 .oskvcompu {
        width: 91.11111111vw;
        height: 51.9444444444vw;
        transform: scale(1.899);
    }

    .hw-os .os-sec1 .oskvscreen {
        width: 70.55555555vw;
        top: 1.25vw;
        border-radius: 1.11111111vw;
    }

    .hw-os .os-sec1 .oskvksp img {
        transform: translateY(22.22222222vw);
    }

    .hw-os .os-sec1 .oskvoutcom {
        transition-delay: 1s;
    }
}


/* section 2 pc */
.hw-os .os-sec2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 10.416666666vw 0;
}

.hw-os .os-sec2 .pvimcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
    top: var(--pvstiposition);
}

.hw-os .os-sec2 .pvtrigger {
    position: absolute;
    top: var(--fupvstiposition);
}

.hw-os .os-sec2 .oscirclebelow {
    position: relative;
    width: 41.1458333333vw;
    height: 41.1458333333vw;
    margin: -31.145833333vw 0 0 0;
    filter: blur(12px);
    border-radius: 50%;
    box-shadow: 0px 0px 3.125vw rgba(0, 66, 108, 0.1);
}

.hw-os .os-sec2.will-change .oscirclebelow {
    will-change: transform;
}

.hw-os .os-sec2 .ospvbtn {
    display: flex;
    align-items: center;
    margin: 3.75vw 0 0 0; 
    padding: 0.83333333vw 0.83333333vw 0.83333333vw 1.66666666vw;
    background: #fff;
    color: #727272;
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 999px;
    cursor: pointer;
    transition: 0.3s ease;
}

@media (any-hover: hover) {
    .hw-os .os-sec2 .ospvbtn:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec2 .osinncircle {
    width: 41.1458333333vw;
    height: 41.1458333333vw;
    background: rgb(250, 253, 255, 0.5);
    border: 0.20833333vw solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(2.60416666vw);
    -webkit-backdrop-filter: blur(2.60416666vw);
    box-shadow: 0px 0px 3.125vw rgba(80, 142, 204, 0.05);
    opacity: 0.9;
}

.hw-os .os-sec2.will-change .ospvbtn img {
    will-change: transform;
}

.hw-os .os-sec2 .ospvbtn img {
    width: 1.66666666vw;
    height: 1.66666666vw;
    margin: 0 0 0 0.83333333vw;
}

.hw-os .os-sec2 .oscircleabove {
    z-index: 2;
}

.hw-os .os-sec2 .oscircleabove {
    transform: translateY(18.6458333333vw);
}

.hw-os .os-sec2 .pvcirclecon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-os .os-sec2.will-change .oscircleabove {
    will-change: transform;
}

.hw-os .os-sec2 .ospvtxtbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 7.8125vw;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.hw-os .os-sec2 .ospvtxt p {
    width: 41.66666666vw;
    color: transparent;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%,  rgba(0, 0, 0, 0.2) 77%);
    white-space: nowrap;
}

.hw-os .os-sec2 .ospvtxt p:not(:last-child) {
    margin: 0 0 1.04166666vw 0;
}

.hw-os .os-sec2 .s2space {
    height: 60vh;
}

/* section 2 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec2 {
        padding: 0 0 14.28571428vw 0;
    }

    .hw-os .os-sec2 .osinncircle {
        width: 62.85714285vw;
        height: 62.85714285vw;
    }

    .hw-os .os-sec2 .ospvtxt p {
        width: 57.14285714vw;
        font-size: 3.42857142vw;
    }

    .hw-os .os-sec2 .oscirclebelow {
        width: 65.57142857vw;
        height: 65.57142857vw;
        margin: -49.28571428vw 0 0 0;
    }

    .hw-os .os-sec2 .oscircleabove {
        transform: translateY(25.78571428vw)
    }

    .hw-os .os-sec2 .ospvbtn {
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec2 .ospvbtn img {
        width: 4.57142857vw;
        height: 4.57142857vw;
        margin: 0 0 0 1.64285714vw;
    }

    .hw-os .os-sec2 .ospvtxtbtn {
        top: 13.5vw;
        transform: translateX(-50%);
    }

    .hw-os .os-sec2 .ospvbtn {
        margin: 5.71428571vw 0 0 0;
        padding: 1.64285714vw 1.64285714vw 1.64285714vw 2.78571428vw;
    }

    .hw-os .os-sec2 .ospvtxt p:not(:last-child) {
        margin: 0 0 1.42857142vw 0;
    }
}

/* section 2 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec2 {
        margin: -13.8888888888vw 0 0 0;
        padding: 0;
    }
    
    .hw-os .os-sec2 .pvimcon {
        overflow: hidden;
        width: 100%;
        padding: 0 0 27.7777777777vw 0;
    }

    .hw-os .os-sec2 .pvcirclecon {
        width: 100%;
    }

    .hw-os .os-sec2 .ospvtxtbtn {
        top: 18.6111111111vw;
    }

    .hw-os .os-sec2 .oscirclebelow {
        width: 121.1111111111vw;
        height: 121.1111111111vw;
        margin: -95.2777777777vw 0 0 0;
        filter: blur(1.66666666vw);
        box-shadow: 0px 0px 8.33333333333vw rgba(0, 66, 108, 0.1);
    }

    .hw-os .os-sec2 .oscircleabove {
        transform: translateY(43.3333333333vw);
    }

    .hw-os .os-sec2 .osinncircle {
        width: 116.11111111vw;
        height: 116.11111111vw;
        border: 0.55555555vw solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6.94444444vw);
        box-shadow: 0vw 0vw 8.33333333vw rgba(80, 142, 204, 0.05);
    }

    .hw-os .os-sec2 .ospvtxt p {
        width: 91.11111111vw;
        color: rgba(0, 0, 0, 0.2);
        font-size: 6.94444444vw;
        font-weight: 500;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%,  rgba(0, 0, 0, 0.2) 100%);
    }

    .hw-os .os-sec2 .ospvbtn img {
        width: 8.88888888vw;
        height: 8.88888888vw;
        margin: 0 0 0 3.19444444vw;
    }

    .hw-os .os-sec2 .ospvbtn {
        margin: 11.11111111vw 0 0 0;
        padding: 3.19444444vw 3.19444444vw 3.19444444vw 5.27777777vw;
        font-size: 4.44444444vw;
        border-radius: 13.88888888vw;
    }

    .hw-os .os-sec2 .ospvtxt p:not(:last-child) {
        margin: 0 0 1.38888888vw 0;
    }

    .hw-os .os-sec2 .pvimcon.active .oscircleabove {
        transform: translate(-50%, -43.33333333vw);
    }
}


/* section 3 pc */
.hw-os .os-sec3 {
    position: relative;
    margin: 0 0 6.25vw 0;
}

.hw-os .os-sec3 .delicatecon {
    position: relative;
} 

.hw-os .os-sec3 .circlehidden {
    overflow: hidden;
}

.hw-os .os-sec3 .delicatetxtcon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-os .os-sec3 .delicateback {
    width: 100%;
    background-color: #fff;
}

.hw-os .os-sec3 .delicatecircle {
    position: relative;
    height: 12.5vw;
    transform: translate3d(0px,0px,0px) scale(1, 0);
    transform-origin: bottom center ;
}

.hw-os .os-sec3.will-change .delicatecircle {
    will-change: transform, opacity;
}

.hw-os .os-sec3 .delicatecircle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 248.4375vw;
    height: 248.4375vw;
    transform: translateX(-50%);
    background:linear-gradient(180deg,#c7d8f0 0%,#edeff4 4.29%,#f4f5f7 5.74%,#f4f5f7 100%);
    border-radius: 50%;
    z-index: 0;
}

.hw-os .os-sec3 .delicatesut {
    width: 10.41666666vw;
    margin: 2.44791666vw auto 0;
    color: #a3c1ef;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
} 

.hw-os .os-sec3 .delicatemat {
    width: 23.4375vw;
    margin: 1.45833333vw 0 7.13541666vw 0;
    color: #000;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec3 .delicatecontent {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 0;
    height: 100vh;
}

.hw-os .os-sec3 .delicatspace {
    height: 340vh;
}

.hw-os .os-sec3 .delihutxtcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.hw-os .os-sec3 .delihumat {
    width: 39.0625vw;
    color: #fff;
    font-size: 3.3333333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec3 .delihudes {
    width: 33.333333333vw;
    margin: 1.6666666666vw auto 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1458333333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec3 .delicatetit {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(15.625vw);
    opacity: 0;
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.77, 0.49, 0.7, 1);
}

.hw-os .os-sec3 .delicatransition {
    position: relative;
    transform: translateX(27.604166666vw);
    transition: transform .8s cubic-bezier(0.77, 0.49, 0.7, 1);
}

.hw-os .os-sec3 .delicaslide2video {
    position: absolute;
    top: 0.3125vw;
    left: 50%;
    width: 20.05208333vw;
    height: 13.48958333vw;
    transform: translateX(-50%);
    z-index: -1;
    background-color: #000;
}

.hw-os .os-sec3.will-change .delicaslide2video {
    will-change: transform;
}

.hw-os .os-sec3 .delicaslide2video::before {
    content: "";
    position: absolute;
    left: -1px;
    width: 2px;
    height: 100%;
    background-color: #000;
    z-index: 0;
}

.hw-os .os-sec3 .delicaslide2video::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    width: 100%;
    height: 2px;
    background-color: #000;
    z-index: 0;
}

.hw-os .os-sec3 .delicaslide2video video {
    position: relative;
    height: auto;
    z-index: 3;
}

.hw-os .os-sec3 .delicatransition>picture {
    position: relative;
    z-index: 3;
}

.hw-os .os-sec3 .delicatemovecom {
    position: relative;
    z-index: 5;
}

.hw-os .os-sec3 .active .delicatetit {
    transform: translateY(0);
    opacity: 1;
}

.hw-os .os-sec3 .active .delicatransition {
    transform: translateX(0);
}

.hw-os .os-sec3 .decateusemat {
    width: 35.4166666666vw;
    color: #000;
    font-size: 3.333333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec3 .decateusedes {
    width: 33.3333333333vw;
    margin: 1.6666666666vw 0 5.208333333333vw 0;
    color: #999;
    font-size: 1.1458333333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec3 .delicateuses {
    display: flex;
    align-items: flex-end;
    width: 44.0625vw;
    height: 25.1041666666vw;
    margin: 0 auto;
} 

.hw-os .os-sec3 .delcomframcanvcon {
    position: relative;
    transform-origin: center 48.4%;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .os-sec3.will-change .delcomframcanvcon {
    will-change: transform;
}

.hw-os .os-sec3 .delicateuseSlide {
    position: relative;
    flex-shrink: 0;
    width: 25.7291666666vw;
    height: 14.635416666vw;
    transform-origin: bottom center;
    transition: transform .8s cubic-bezier(0.77, 0.49, 0.7, 1);
}

.hw-os .os-sec3 .delicateuseSlide>picture {
    position: relative;
    z-index: 9;
}

.hw-os .os-sec3.will-change .delicateuseSlide {
    will-change: transform;
} 

.hw-os .os-sec3 .delicacomputfram {
    position: relative;
    z-index: 9;
    opacity: 0;
}

.hw-os .os-sec3 .delicacanvascon {
    position: absolute;
    width: calc(34.1145833333vw + 1px);
    height: 23.0208333333vw;
    top: 0.57291666666vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    transform-origin: center center;
}

.hw-os .os-sec3 .delicacanvascon canvas {
    width: 100%;
    height: 100%;
}

.hw-os .os-sec3 .deliscreenim1 {
    position: absolute;
    width: 23.0208333333vw;
    top: 3.854166666666vw;
    right: 6.5625vw;
    transform: translate(41.666666666vw, 20.833333333vw);
    z-index: 12;
}

.hw-os .os-sec3 .deliscreenim2 {
    position: absolute;
    top: 5.52083333vw;
    left: 10.98958333vw;
    width: 18.22916666vw;
    z-index: 11;
    transform: translate(-41.666666666vw, 20.833333333vw);
}

.hw-os .os-sec3 .deliscreenim3 {
    position: absolute;
    top: 0.98958333vw;
    left: 5.41666666vw;
    width: 23.17708333vw;
    z-index: 10;
    transform: translate(-41.666666666vw, -20.833333333vw);
}

.hw-os .os-sec3 .deliscreenim1 img,
.hw-os .os-sec3 .deliscreenim2 img,
.hw-os .os-sec3 .deliscreenim3 img {
    transform: translate3d(0,0,0);
}

.hw-os .os-sec3 .delideskdock {
    position: absolute;
    bottom: 1.5625vw;
    left: 50%;
    width: 34.0625vw;
    height: 1.40625vw;
    transform: translate(-50%, 1.5625vw);
    z-index: 5;
    opacity: 0;
}

.hw-os .os-sec3 .delicateuseSlide:not(:last-child) {
    margin: 0 1.6666666666vw 0 0;
}

.hw-os .os-sec3 .delicateuseSlide.slideactive {
    width: 100%;
    height: 100%;
}


/* section 3 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec3 {
        margin: 0 0 -4.7142857142vw 0;
    }

    .hw-os .os-sec3 .delicatesut {
        margin: 2.28571428vw 0 0 0;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec3 .delicatemat {
        width: 42.85714285vw;
        margin: 2vw 0 8.57142857vw 0;
        font-size: 6.85714285vw;
    }

    .hw-os .os-sec3 .delihumat {
        width: 64.28571428vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec3 .delihudes {
        width: 64.28571428vw;
        margin: 2.85714285vw auto 0 ;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec3 .decateusemat {
        width: 64.28571428vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec3 .decateusedes {
        width: 64.28571428vw;
        font-size: 2.28571428vw;
        margin: 2.85714285vw 0 5.71428571vw 0;
    }

    .hw-os .os-sec3 .delicateuses {
        width: 60.42857142vw;
        height: 34.42857142vw;
    }

    .hw-os .os-sec3 .delicateuseSlide {
        width: 35.28571428vw;
        height: 20.07142857vw;
    }

    .hw-os .os-sec3 .delicacanvascon {
        width: 46.78571428vw;
        height: 31.5vw;
        top: 0.78571428vw;
    }

    .hw-os .os-sec3 .delicaslide2video {
        width: 27.35714285vw;
        height: 18.42857142vw;
        top: 0.42857142vw;
    }

    .hw-os .os-sec3 .delideskdock {
        width: 46.78571428vw;
        height: 1.85714285vw;
        bottom: 2.14285714vw;
    }

    .hw-os .os-sec3 .deliscreenim1 {
        width: 31.57142857vw;
        top: 5.28571428vw;
        right: 9vw;
    }

    .hw-os .os-sec3 .deliscreenim2 {
        width: 25vw;
        top: 7.57142857vw;
        left: 15.07142857vw;
    }

    .hw-os .os-sec3 .deliscreenim3 {
        width: 31.85714285vw;
        top: 1.35714285vw;
        left: 7.42857142vw;
    }

    .hw-os .os-sec3 .delicatetit {
        transform: translateY(21.42857142vw);
    }

    .hw-os .os-sec3 .delicateuseSlide:not(:last-child) {
        margin: 0 2.28571428vw 0 0;
    }
}

/* section 3 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec3 {
        margin: 0 0 27.7777777777vw 0;
    }
    
    .hw-os .os-sec3 .delicatecircle {
        height: 25vw;
    }
    
    .hw-os .os-sec3 .delicatecircle::after {
        width: 248.61111111vw;
        height: 248.61111111vw;
        background: linear-gradient(180deg,#c7d8f0 0%,#edeff4 4.89%,#f4f5f7 6.74%,#f4f5f7 100%);
    }

    .hw-os .os-sec3 .delicatesut {
        width: 41.66666666vw;
        margin: 3.05555555vw 0 0 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec3 .delicatemat {
        width: 83.33333333vw;
        margin: 3.88888888888vw 0 18.05555555555vw 0;
        font-size: 13.33333333vw;
    }

    .hw-os .os-sec3 .delihumat {
        width: 82.2222222222vw;
        font-size: 11.1111111111vw;
    }

    .hw-os .os-sec3 .delihumat {
        text-align: left;
    }

    .hw-os .os-sec3 .delihudes {
        width: 86.6666666666vw;
        margin: 5.5555555555vw 0 0 0;
        font-size: 4.444444444vw;
        text-align: left;
    }

    .hw-os .os-sec3 .delicamocomimmob {
        position: relative;
        width: 82.222222222vw;
        z-index: 9;
    }

    .hw-os .os-sec3 .delicamobcomfra {
        position: relative;
        transform-origin: center 47.5%;
    }

    .hw-os .os-sec3 .delicamobcanvas {
        position: absolute;
        left: 50%;
        top: 1.1111111111vw;
        width: 63.75vw;
        height: 42.916666666vw;
        transform: translateX(-50%);
    }

    .hw-os .os-sec3 .delicatransition {
        transform: none;
    }

    .hw-os .os-sec3 .delicamobcanvas canvas {
        width: 100%;
        height: 100%;
    }

    .hw-os .os-sec3 .delihutxtcon {
        overflow: hidden;
        justify-content: center;
        position: sticky;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100vh;
    }

    .hw-os .os-sec3 .delicaslide2video {
        top: 0.69444444vw;
        width: 47.36111111vw;
        height: 31.94444444vw;
    }

    .hw-os .os-sec3 .delicateSlideSec .delicaslide2video {
        top: 0.972222222222vw;
        width: 60.555555555vw;
        height: 40.41666666vw;
    }

    .hw-os .os-sec3 .delicateSlideSec .delicaslide2video::after {
        content: "";
        position: absolute;
        top: -2px;
        width: 100%;
        height: 3px;
        background-color: #000;
        z-index: 0;
    }

    .hw-os .os-sec3 .delispacetop {
        height: 100vh;
    }

    .hw-os .os-sec3 .delihuinnercon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .hw-os .os-sec3 .delicatecontent {
        position: relative;
    }

    .hw-os .os-sec3 .delicatetit {
        opacity: 1;
        transform: none;
    }

    .hw-os .os-sec3 .delicatemovecom {
        transform: none;
    }

    .hw-os .os-sec3 .decateusemat {
        width: 82.222222222vw;
        font-size: 11.111111111vw;
        text-align: left;
    }

    .hw-os .os-sec3 .decateusedes {
        width: 82.222222222vw;
        margin: 5.5555555555vw 0 11.111111111vw 0;
        font-size: 4.4444444444vw;
        text-align: left;
    }

    .hw-os .os-sec3 .delicatecontent {
        height: auto;
    }

    .hw-os .os-sec3 .delicateuseSlide {
        width: 60.972222222vw;
        height: 34.722222222vw;
    }

    .hw-os .os-sec3 .delicateuseSlide:nth-child(2) {
        width: 77.5vw;
        height: 44.166666666vw;
    }

    .hw-os .os-sec3 .delicateuses {
        width: 77.5vw;
        height: 44.166666666vw;
    }

    .hw-os .os-sec3 .delibottom {
        overflow: hidden;
        position: sticky;
        top: 0;
        top: var(--delistiposition);
    }

    .hw-os .os-sec3 .delispacemob {
        height: 200vh;
    }

    .hw-os .os-sec3 .delicatecontent {
        overflow: visible;
    }

    .hw-os .os-sec3 .delicateuseSlide:not(:last-child) {
        margin: 0 2.7777777777vw 0 0;
    }

    .hw-os .os-sec3 .deliscreenim1 {
        width: 43.05555555vw;
        top: 7.22222222vw;
        right: 12.22222222vw;
    }

    .hw-os .os-sec3 .deliscreenim2 {
        width: 34.02777777vw;
        top: 10.27777777vw;
        left: 20.55555555vw;
    }

    .hw-os .os-sec3 .deliscreenim3 {
        width: 43.33333333vw;
        top: 1.80555555vw;
        left: 10.13888888vw;
    }

    .hw-os .os-sec3 .delideskdock {
        width: 63.61111111vw;
        height: 2.63888888vw;
        bottom: 2.77777777777vw;
    }
}


/* section 4 pc */
.hw-os .os-sec4  {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 12.5vw 0;
}

.hw-os .os-sec4 .simfingermat {
    width: 40vw;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec4 .simfiswiper {
    width: 44.16666666vw;
    height: 30.7291666666vw;
    margin: 3.33333333vw 0 3.333333333333333vw 0;
}

.hw-os .os-sec4 .simfiswiper video {
    mix-blend-mode: darken;
}

.hw-os .os-sec4 .simfinernav {
    position: relative;
    padding: 0.41666666666vw;
    background:#eaeaea;
    box-shadow: 0vw 0.15625vw 0.41666666vw rgba(0, 0, 0, 0.1) inset;
    border-radius: 9999px;
}

.hw-os .os-sec4 .simovesqua {
    position: absolute;
    top: 50%;
    width: 6.6666666666vw;
    height: 100%;    
    background:linear-gradient(135deg,#b9dcff 0%,#7a8fd1 100%);
    transform: translateY(-50%);
    border-radius: 9999px;
    z-index: 0;
    transition: width 0.5s linear, transform .5s ease-out;
} 

.hw-os .os-sec4.will-change .simovesqua {
    will-change: transform, width;
}

.hw-os .os-sec4 .uloutcon {
    position: relative;
    display: flex;
    padding: 0.625vw 0;
}

.hw-os .os-sec4 .simfininav {
    position: relative;
    display: flex;
    z-index: 2;
}

.hw-os .os-sec4 .simfininav li p {
    margin: 0 1.25vw;
    color: #b5b5b5;
    font-size: 1.0416666666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: .5s ease-out;
}

.hw-os .os-sec4.will-change .simfininav li p {
    will-change: color, transform;
}

.hw-os .os-sec4 .simfininav li.active p {
    color: #fff;
    font-weight: 500;
}

.hw-os .os-sec4 .simfingertxt {
    display: flex;
    width: 25.46875vw;
    margin: 2.08333333vw 0 0 0;
}

.hw-os .os-sec4 .simfingertxt p {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    transition: opacity 0.8s ease-out;
    opacity: 0;
    z-index: 1;
}

.hw-os .os-sec4.will-change .simfingertxt p {
    will-change: transform, opacity;
}

.hw-os .os-sec4 .simfingertxt p.active {
    opacity: 1;
    z-index: 2;
}

.hw-os .os-sec4 .simfingertxt p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-os .os-sec4 .simfingertxt p:nth-child(3) {
    transform: translateX(-200%);
}

.hw-os .os-sec4 .simfininav li:not(:last-child) {
    margin: 0 0.416666666vw 0 0;
}


/* section 4 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec4 {
        margin: 0 0 17.14285714vw 0;
    }

    .hw-os .os-sec4 .simfingermat {
        width: 60vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec4 .simfiswiper {
        width: 60.57142857vw;
        height: 42.14285714vw;
        margin: 5.71428571vw auto 4.28571428vw;
    }

    .hw-os .os-sec4 .simfinernav {
        padding: 0.71428571vw;
        box-shadow: 0vw 0.21428571vw 0.57142857vw rgba(0, 0, 0, 0.1) inset;
    }

    .hw-os .os-sec4 .uloutcon {
        padding: 1.92857142vw 0;
    }

    .hw-os .os-sec4 .simfininav li p {
        margin: 0 2.85714285vw;
        font-size: 2.28571428vw;
        text-align: center;
    }

    .hw-os .os-sec4 .simfingertxt {
        width: 42.28571428vw;
        margin: 2.85714285vw 0 0 0;
    }

    .hw-os .os-sec4 .simfininav li:not(:last-child) {
        margin: 0;
    }

    .hw-os .os-sec4 .simfingertxt p {
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec4 .simovesqua {
        width: 14.85714285vw;
    }
}

/* section 4 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec4 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-os .os-sec4 .simfingermat {
        width: 82.22222222vw;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .os-sec4 .simfininav li p {
        margin: 0 5.55555555vw;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec4 .simfininav li:not(:last-child) {
        margin: 0;
    }

    .hw-os .os-sec4 .simovesqua {
        width: 28.88888888vw;
        background: linear-gradient(134.66deg,#b9dcff 0%,#7a8fd1 100%);
        border-radius: 27.77777777vw;
    }

    .hw-os .os-sec4 .uloutcon {
        padding: 3.61111111vw 0;
    }

    .hw-os .os-sec4 .simfinernav {
        padding: 1.38888888vw;
        border-radius: 14.208333vw;
        box-shadow: 0vw 0.41666666vw 1.11111111vw rgba(0, 0, 0, 0.1) inset;
    }
    
    .hw-os .os-sec4 .simfiswiper {
        overflow: hidden;
        width: 91.11111111vw;
        height: 63.33333333vw;   
        margin: 11.1111111111vw 0 8.33333333vw 0;
    }

    .hw-os .os-sec4 .simfingertxt {
        width: 82.22222222vw;
        margin: 5.55555555vw 0 0 0;
    }

    .hw-os .os-sec4 .simfingertxt p {
        font-size: 4.44444444vw;
    }
}

/* section 5 pc */
.hw-os .os-sec5 {
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1px;
    margin: 0 0 12.5vw 0;
}

.hw-os .os-sec5 .livemat {
    width: 33.85416666vw;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec5 .livedes {
    width: 31.25vw;
    margin: 1.66666666vw 0 3.33333333vw 0;
    color: #999;
    font-weight: 500;
    font-size: 1.14583333vw;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec5 .liveswiper {
    width: 67.5vw;
}

.hw-os .os-sec5 .swiper-wrapper {
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hw-os .os-sec5 .swiper-slide {
    overflow: hidden;
    position: relative;
    border-radius: 2.08333333vw;
    transition-property: opacity;
    transform: translate3d(0,0,0) rotate(0deg);
    cursor: pointer;
}

.hw-os .os-sec5 .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-os .os-sec5 .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec5 .swiper-slide .livevideo {
    height: 36.45833333vw;
    z-index: 2;
}

.hw-os .os-sec5 .swiper-slide:nth-child(2) .livesubt {
    color: #000;
}

.hw-os .os-sec5 .livesubt {
    position: absolute;
    top: 2.5vw;
    left: 2.5vw;
    width: 26.04166666vw;
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 700;
    line-height: 1.25;
    transform: translate3d(0,0,0) rotate(0deg);
    z-index: 99;
}

.hw-os .os-sec5 .liveplusbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 1.25vw;
    right: 1.25vw;
    width: 2.5vw;
    height: 2.5vw;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(1.09375vw);
    transition: 0.3s ease;
    transform: translate3d(0,0,0) rotate(0deg);
    cursor: pointer;
    z-index: 99;
} 

.hw-os .os-sec5 .swiper-slide:nth-child(1) .liveplusbtn {
    background: rgba(255, 255, 255, 0.2);
}

@media (any-hover: hover) {
    .hw-os .os-sec5 .swiper-slide:nth-child(1) .liveplusbtn:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .hw-os .os-sec5 .liveplusbtn:hover {
        background:rgba(0, 0, 0, 0.1);
    }
}

.hw-os .os-sec5 .liveplusbtn img {
    width: 1.25vw;
    height: 1.25vw;
}

.hw-os .os-sec5 .livenav {
    display: flex;
    justify-content: flex-end;
    margin: 2.5vw 0 0 0;
}

.hw-os .os-sec5 .livenav li {
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    background: linear-gradient(140deg,#b9dcff 0%,#7a8fd1 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
    transform: translate3d(0,0,0);
    outline: none;
}

.hw-os .os-sec5.will-change .livenav li {
    will-change: opacity;
}

@media (any-hover: hover) {
    .hw-os .os-sec5 .livenav li:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec5 .livenav li.swiper-button-disabled  {
    opacity: 0.5;
    cursor: default;
}

.hw-os .os-sec5 .livenav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec5 .livenav li:nth-child(1) {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-os .os-sec5 .livenav li img {
    width: 1.04166666vw;
    margin: 0 0 0 0.625vw;
}

/* section 5 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec5 {
        margin: 0 0 17.14285714vw 0;
    }
    
    .hw-os .os-sec5 .livemat {
        width: 38.35714285vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec5 .livedes {
        width: 52.85714285vw;
        margin: 2.85714285vw 0 4.2857142857vw 0;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec5 .livesubt {
        top: 3.42857142vw;
        left: 3.42857142vw;
        font-size: 2.85714285vw;
    }

    .hw-os .os-sec5 .liveswiper {
        width: 64.28571428vw;
    }

    .hw-os .os-sec5 .swiper-slide:not(:last-child) {
        margin: 0 2.28571428vw 0 0; 
    }

    .hw-os .os-sec5 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec5 .swiper-slide .livevideo {
        height: 46.42857142vw;
    }
    
    .hw-os .os-sec5 .liveplusbtn {
        width: 5.71428571vw;
        height: 5.71428571vw;
        bottom: 2.85714285vw;
        right: 2.85714285vw;
    }

    .hw-os .os-sec5 .liveplusbtn img {
        width: 2.85714285vw;
        height: 2.85714285vw;
    }

    .hw-os .os-sec5 .livenav li {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .os-sec5 .livenav li:not(:last-child) {
        margin: 0 2.85714285vw 0 0;
    }

    .hw-os .os-sec5 .livenav li img {
        width: 2.35714285vw;
        margin: 0 0 0 1.42857142vw;
    }

    .hw-os .os-sec5 .livenav {
        margin: 4.57142857vw 0 0 0;
    }

    .hw-os .os-sec5 .swiper-slide {
        border-radius: 2.85714285vw;
    }
}

/* section 5 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec5 {
        margin: 0 0 27.777777777vw 0;
    }

    .hw-os .os-sec5 .livemat {
        width: 82.22222222vw;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .os-sec5 .liveswipenav {
        overflow: hidden;
        width: 100%;
        padding: 0 0 0 4.44444444vw;
    }

    .hw-os .os-sec5 .liveswiper {
        width: 86.66666666vw;
    }

    .hw-os .os-sec5 .swiper-slide {
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec5 .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-os .os-sec5 .livedes {
        width: 82.22222222vw;
        margin: 5.55555555vw auto 8.88888888vw;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-os .os-sec5 .swiper-slide .livevideo {
        height: 97.22222222vw;
    }

    .hw-os .os-sec5 .livenav {
        width: 86.66666666vw;
        margin: 11.11111111vw 0 0 0;
    }

    .hw-os .os-sec5 .livesubt {
        top: 6.66666666vw;
        left: 6.66666666vw;
        width: 30.22222222vw;
        font-size: 5.55555555vw;
    }

    .hw-os .os-sec5 .liveplusbtn {
        width: 11.11111111vw;
        height: 11.11111111vw;
        bottom: 5.55555555vw;
        right: 5.55555555vw;
    }

    .hw-os .os-sec5 .liveplusbtn img {
        width: 5.55555555vw;
        height: 5.55555555vw;
    }

    .hw-os .os-sec5 .livenav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-os .os-sec5 .livenav li img {
        width: 4.58333333vw;
        margin: 0 0 0 2.77777777vw;
    }

    .hw-os .os-sec5 .livenav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-os .os-sec5 .swiper-wrapper {
        transition-timing-function: ease;
    }
}

/* section 6 pc */
.hw-os .os-sec6 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-os .os-sec6 .allaroundcon {
    overflow: hidden;
    width: 100%;
}

.hw-os .os-sec6 .allaroundtxtcon {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 0 6.25vw 0;
    transition: transform 1.2s cubic-bezier(0.77, 0.49, 0.7, 1);
    z-index: 2;
}

.hw-os .os-sec6.will-change .allaroundtxtcon {
    will-change: transform;
}

.hw-os .os-sec6 .allaroundsut {
    width: 10.41666666vw;
    margin: 2.44791666vw auto 1.45833333vw;
    color: #a3c1ef;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec6 .allaroundmat {
    margin: 0 auto;
    color: #000;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec6 .allaroundmat .allbackchan {
    display: inline-block;
    position: relative;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(90deg,#000 0%,#000 26.11%,#000 51.23%,#000 75.37%,#000 100%);
}

.hw-os .os-sec6 .alltxtcanv {
    position: relative;
}

.hw-os .os-sec6 .allabelcon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin: 0 0 0 9.42708333vw;
    transform-origin: center center;
}

.hw-os .os-sec6 .allabelcon.active .colorlabel {
    transform: scale(1);
}

.hw-os .os-sec6 .allabelcon.active .allaroundcanvas {
    transform: translate(0, -50%) scale(1) ;
    opacity: 1;
}

.hw-os .os-sec6.will-change .allabelcon {
    will-change: transform, opacity;
}

.hw-os .os-sec6 .colorlabel {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 78.69791666666667vw;
    margin: 0 auto;
    transform: scale(0);
    transform-origin: center center;
    transition: opacity 1.6s linear, transform 1.6s cubic-bezier(0.77, 0.49, 0.7, 1);
    z-index: 2;
}

.hw-os .os-sec6 .colorlabel p {
    padding: 0.96354166vw 1.35416666vw;
    background: linear-gradient(92deg,#cfecf6 0%,#d9e1f7 26.11%,#e5dbf5 48.35%,#f2dfe7 75.37%,#f3e7d8 100%);
    color: #2c2c2c;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.0456;
    border: 0.10416666vw solid #fff;
    border-radius: 1.25vw 0vw 1.25vw 1.25vw;
    box-shadow: 0vw 0.15625vw 1.04166666vw rgba(0, 0, 0, 0.06);
    transition: opacity 1.6s cubic-bezier(0.77, 0.49, 0.7, 1), transform 1.6s cubic-bezier(0.77, 0.49, 0.7, 1);
    opacity: 0;
}

.hw-os .os-sec6 .colorlabel p.alroundlabel0 {
    margin: 0 0 0 12.86458333vw;
    transform: translate(21.66666666vw, 14.0625vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel1 {
    margin: 0 11.5625vw 0 0;
    transform: translate(-21.66666666vw, 14.0625vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel2 {
    margin: 0 0 0 3.85416666vw;
    transform: translate(27.96875vw, 7.03125vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel3 {
    margin: 0 0 0 20.83333333vw;
    transform: translate(-27.96875vw, 7.03125vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel4 {
    margin: 0 0 0 3.64583333vw;
    transform: translate(32.29166666vw, 0vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel5 {
    margin: 0 8.33333333vw 0 20.25vw;
    transform: translate(-32.29166666vw, 0vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel6 {
    transform: translate(27.96875vw, -7.03125vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel7 {
    margin: 0 8.33333333vw 0 26.04166666vw;
    transform: translate(-27.96875vw, -7.03125vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel8 {
    margin: 0 0 0 16.30208333333vw;    
    transform: translate(21.66666666vw, -14.0625vw);
}

.hw-os .os-sec6 .colorlabel p.alroundlabel9 {
    margin: 0 11.5625vw 0 0;
    transform: translate(-21.66666666vw, -14.0625vw);
}

.hw-os .os-sec6 .colorlabel p:nth-child(-n + 8) {
    margin-bottom: 3.125vw;
}

.hw-os .os-sec6.will-change .colorlabel p {
    will-change: transform, opacity;
}

.hw-os .os-sec6 .allabelcon.active .colorlabel p {
    transform: translate(0,0);
    opacity: 1;
}

.hw-os .os-sec6 .colorlabel .paolabel:nth-child(2) {
    margin: 7.39583333vw 0 6.71875vw 0;
}

.hw-os .os-sec6 .paolabel:nth-child(1) {
    padding: 0 6.5625vw 0 5.52083333vw;
}

.hw-os .os-sec6 .paolabel:nth-child(3) {
    padding: 0 4.58333333vw 0 3.85416666vw;
}

.hw-os .os-sec6 .allaroundcircle {
    overflow: hidden;
    position: relative;
    height: 12.5vw;
    transform:  scale(1, 0);
    transform-origin: bottom center;
}

.hw-os .os-sec6.will-change .allaroundcircle {
    will-change: transform, opacity;
}

.hw-os .os-sec6 .allroundbcolor {
    position: relative;
    padding: 0 0 12.5vw 0;
    z-index: 6;
}

.hw-os .os-sec6 .allarouinncircle {
    overflow: hidden;
    position: absolute;
    width: 248.4375vw;
    height: 248.4375vw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: inset 0 0 0.52083333vw 3.125vw rgba(255,255,255,0.1);
    z-index: 0;
}

.hw-os .os-sec6 .allarouinncircle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(#fcaa62 0%,#fbbb4c 9.23%,#b08dd7 45.56%,#1568f4 49.44%,#b08dd7 53.81%,#fabb4d 59%,#fbbb4c 93.69%,#fcaa62 100%);
    transform: rotate(172deg);
    opacity: 30%;
    filter: blur(2.60416666vw);
    border-radius: 50%;
}

.hw-os .os-sec6 .allaroundcircle::before {
    content: "";
    position: absolute;
    top: 4.197917vw;
    left: 50%;
    width: 238.07291666vw;
    height: 111.77083333vw;
    background-color: #f4f5f7;
    transform: translateX(-50%);
    filter: blur(2.60416666vw);
    border-radius: 50%;
    z-index: 3;
}

.hw-os .os-sec6 .allaroundcanvas {
    position: absolute;
    top: 50%;
    left: 19.73958333vw;
    width: 41.66666666vw;
    height: 41.66666666vw;
    transform: translate(0, -50%) scale(0);
    z-index: 99;
    opacity: 0;
    transition: opacity 1.2s linear, transform 1.6s cubic-bezier(0.77, 0.49, 0.7, 1);
    transform-origin: center center;
}

.hw-os .os-sec6 .allaroundcanvas canvas {
    width: 100%;
    height: 100%;
}

/* section 6 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec6 .allroundbcolor {
        padding: 0 0 20.14285714vw 0;
    }

    .hw-os .os-sec6 .allaroundsut {
        margin: 2.28571428vw auto 2vw;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec6 .allaroundmat {
        width: 42.85714285vw;
        font-size: 6.85714285vw;
    }

    .hw-os .os-sec6 .allaroundtxtcon {
        margin: 0 0 11.571429vw 0;
    }

    .hw-os .os-sec6 .alltxtcanv {
        transform-origin: center;
        transform: translate3d(0,0,0) scale(1.185);
    }
}

/* section 6 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) and (max-width: 450px) {
    .hw-os .os-sec6 .colorlabel p.alroundlabel0 {
        margin: 0 0 0 6.86458333vw;
        transform: translate(21.66666666vw, 14.0625vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel1 {
        margin: 0 6.5625vw 0 0;
        transform: translate(-21.66666666vw, 14.0625vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel2 {
        margin: 0 0 0 2.85416666vw;
        transform: translate(27.96875vw, 7.03125vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel3 {
        margin: 0 0 0 3.83333333vw;
        transform: translate(-27.96875vw, 7.03125vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel4 {
        margin: 0 0 0 2.64583333vw;
        transform: translate(32.29166666vw, 0vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel5 {
        margin: 0 2.33333333vw 0 5.25vw;
        transform: translate(-32.29166666vw, 0vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel6 {
        transform: translate(27.96875vw, -7.03125vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel7 {
        margin: 0 8.33333333vw 0 10.04166666vw;
        transform: translate(-27.96875vw, -7.03125vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel8 {
        margin: 0 0 0 8.59375vw;    
        transform: translate(21.66666666vw, -14.0625vw);
    }
    
    .hw-os .os-sec6 .colorlabel p.alroundlabel9 {
        margin: 0 9.5625vw 0 0;
        transform: translate(-21.66666666vw, -14.0625vw);
    }

    .hw-os .os-sec6 .colorlabel p:nth-child(-n + 8) {
        margin-bottom: 3.125vw;
    }

    .hw-os .os-sec6 .allabelcon.active .colorlabel p {
        transform: translate(0,0) scale(0.8);
        opacity: 1;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel0,
    .hw-os .os-sec6 .colorlabel p.alroundlabel2,
    .hw-os .os-sec6 .colorlabel p.alroundlabel4,
    .hw-os .os-sec6 .colorlabel p.alroundlabel6,
    .hw-os .os-sec6 .colorlabel p.alroundlabel8 {
        transform-origin: left center;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel1,
    .hw-os .os-sec6 .colorlabel p.alroundlabel3,
    .hw-os .os-sec6 .colorlabel p.alroundlabel5,
    .hw-os .os-sec6 .colorlabel p.alroundlabel7,
    .hw-os .os-sec6 .colorlabel p.alroundlabel9 {
        transform-origin: right center;
    }
}

/* section 6 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec6 .allaroundsut {
        width: 41.66666666vw;
        margin: 3.05555555vw auto 3.88888888vw;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec6 .allroundbcolor {
        padding: 0 0 27.7777777777vw 0;
    }

    .hw-os .os-sec6 .allaroundcircle {
        height: 25vw;
    }

    .hw-os .os-sec6 .active .allabelcon {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .hw-os .os-sec6 .allaroundtxtcon {
        margin: 0;
    }

    .hw-os .os-sec6 .allaroundmat {
        font-size: 13.33333333vw;
    }

    .hw-os .os-sec6 .allaroundcanvas {
        position: relative;
        top: 0;
        left: 0;
        width: 111.11111111vw;
        height: 111.11111111vw;
        margin: -18.33333333vw 0 -17.63888888vw 0;
        align-self: center;
        transform: none;
        opacity: 1;
    }

    .hw-os .os-sec6 .colorlabel {
        width: 291.666666666vw;
        transform: none;
    }

    .hw-os .os-sec6 .allaroundcircle::before {
        filter: blur(6.604167vw);
    }

    .hw-os .os-sec6 .colorlabel p {
        padding: 3.05555555vw 7.08333333vw 3.05555555vw 4.30555555vw;
        background: linear-gradient(92deg,#cfecf6 0%,#d9e1f7 26.11%,#e5dbf5 48.35%,#f2dfe7 75.37%,#f3e7d8 100%);
        font-size: 3.47222222vw;
        border: 0.27777777vw solid #fff;
        border-radius:3.33333333vw 0vw 3.33333333vw 3.33333333vw;
        box-shadow: 0vw 0.41666666vw 2.77777777vw rgba(0, 0, 0, 0.06);
        opacity: 1;
        transition: none;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel0 {
        margin: 0 13.88888888vw 0 17.5vw;
        transform: translateX(var(--position0));
        order: 1;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel1 {
        margin: 0 13.88888888vw 0 0;
        transform: translateX(var(--position1));
        order: 2;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel4 {
        margin: 0;
        transform: translateX(var(--position4));
        order: 3;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel2 {
        margin: 0 13.88888888vw 0 0;
        transform: translateX(var(--position2));
        order: 4;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel3 {
        margin: 0 13.88888888vw 0 0;
        transform: translateX(var(--position3));
        order: 5;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel7 {
        margin: 0 13.88888888vw 0 0;
        transform: translateX(var(--position7));
        order: 6;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel5 {
        margin: 0;
        transform: translateX(var(--position5));
        order: 7;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel6 {
        margin: 0 13.88888888vw 0 17.5vw;
        transform: translateX(var(--position6));
        order: 8;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel8 {
        margin: 0 13.88888888vw 0 0;
        transform: translateX(var(--position8));
        order: 9;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel9 {
        margin: 0;
        transform: translateX(var(--position9));
        order: 10;
    }

    .hw-os .os-sec6 .colorlabel p {
        margin-bottom: 10.55555555vw!important;
    }

    .hw-os .os-sec6 .colorlabel p.alroundlabel6,
    .hw-os .os-sec6 .colorlabel p.alroundlabel8,
    .hw-os .os-sec6 .colorlabel p.alroundlabel9 {
        margin-bottom: 0!important;
    }

    .hw-os .os-sec6 .colorlabel {
        justify-content: flex-start;
        align-self: flex-start;
    }

    .hw-os .os-sec6 .paolabel:nth-child(1) {
        padding: 0;
    }

    .hw-os .os-sec6 .paolabel:nth-child(3) {
        padding: 0;
    }

    .hw-os .os-sec6 .allabelcon {
        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        transform: scale(1);
    }

    .hw-os .os-sec6 .alltxtcanv {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

}

/* section 7 pc */
.hw-os .os-sec7 {
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 12.5vw 0;
    z-index: 4;
}

.hw-os .os-sec7 .aixiaoyswicon {
    width: 67.5vw;
}

.hw-os .os-sec7 .aixiaoyswiper {
    height: 36.45833333vw;
}

.hw-os .os-sec7.will-change .aixiaoyswiper .swiper-wrapper {
    will-change: transform;
}

.hw-os .os-sec7 .aixiaoymat {
    width: 35.041667vw;
    margin: 0 auto 3.3333333333vw;
    color: #000;
    font-size: 2.91666666vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec7 .aicardmat {
    width: 16.41666666vw;
    color: #000;
    font-size: 1.66666666vw;
    font-weight: 700;
    line-height: 1.25;
}

.hw-os .os-sec7 .aicompuframe {
    overflow: hidden;
    position: relative;
    width: 44.01041666vw;
    margin: 8.85416666vw auto 0;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .os-sec7 .aicompuframe>picture {
    position: relative;
    z-index: 99;
}

.hw-os .os-sec7 .aicompuframe .povideo {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 0.52083333333vw;
    left: 50%;
    width: 34.375vw;
    height: 23.02083333333vw;
    transform: translate3d(-50%,0,0) rotate(0deg);
    z-index: -1;
    background-color: #000;
}

.hw-os .os-sec7 .aicompuframe .povideo video {
    height: auto;
}

.hw-os .os-sec7 .aicarddes {
    width: 35.41666666vw;
    margin: 0.83333333vw 0 0 0;
    color: #999;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-os .os-sec7 .swiper-slide {
    overflow: hidden;
    position: relative;
    border-radius: 2.08333333vw;
    transition-property: opacity;
    cursor: pointer;
}

.hw-os .os-sec7 .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-os .os-sec7 .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec7 .swiper-slide:nth-child(1) {
    background:linear-gradient(135.26deg,#efede9 0%,#f1f0f2 39.37%,#e5f0fc 58.18%,#f5e7e9 100%);
}

.hw-os .os-sec7 .swiper-slide:nth-child(2) {
    background:linear-gradient(135.26deg,#efede9 0%,#f1f0f2 39.37%,#e5f0fc 58.18%,#f5e7e9 100%);
}

.hw-os .os-sec7 .swiper-slide:nth-child(3) {
    background:linear-gradient(135.26deg,#efede9 0%,#f1f0f2 39.37%,#e5f0fc 58.18%,#f5e7e9 100%);
}

.hw-os .os-sec7 .aicardplaybtn {
    position: absolute;
    bottom: 1.25vw;
    right: 1.25vw;
    width: 2.5vw;
    height: 2.5vw;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
}

@media (any-hover: hover) {
    .hw-os .os-sec7 .aicardplaybtn:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.hw-os .os-sec7 .playbtn,
.hw-os .os-sec7 .pausebtn,
.hw-os .os-sec7 .replaybtn {
    display: none;
}

.hw-os .os-sec7 .btnshow {
    display: block;
}

.hw-os .os-sec7 .aicardtxtcon {
    position: absolute;
    top: 2.08333333vw;
    left: 2.08333333vw;
    z-index: 2;
}

.hw-os .os-sec7 .aixiaoynav {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 1px 0;
    margin: 2.5vw 0 0 0;
}

.hw-os .os-sec7 .aixiaoynav li {
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    background: linear-gradient(140.34deg, #b9dcff 0%, #7a8fd1 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
    transform: translate3d(0,0,0);
    outline: none;
}

.hw-os .os-sec7.will-change .aixiaoynav li {
    will-change: opacity;
}

@media (any-hover: hover) {
    .hw-os .os-sec7 .aixiaoynav li:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec7 .aixiaoynav li.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
}

.hw-os .os-sec7 .aixiaoynav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec7 .aixiaoynav li:nth-child(1) {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-os .os-sec7 .aixiaoynav li img {
    width: 1.04166666vw;
    margin: 0 0 0 0.625vw;
}

.hw-os .os-sec7 .swiper-wrapper {
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hw-os .os-sec7.will-change .swiper-wrapper {
    will-change: transform;
}


/* section 7 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec7 {
        margin: 0 0 17.14285714vw 0;
    }
    
    .hw-os .os-sec7 .aixiaoymat {
        width: 47.07142857vw;
        margin: 0 0 5.71428571vw 0;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec7 .aicardmat {
        width: 18.42857142vw;
        color: #000;
        font-size: 2.85714285vw;
    }

    .hw-os .os-sec7 .aicarddes {
        width: 45.71428571vw;
        margin: 1.42857142vw 0 0 0;
        font-size: 2vw;
    }

    .hw-os .os-sec7 .aicardtxtcon {
        top: 3.42857142vw;
        left: 3.42857142vw;
    }

    .hw-os .os-sec7 .aixiaoyswicon {
        width: 100%;
    }

    .hw-os .os-sec7 .aixiaoyswiper {
        width: 64.28571428vw;
        height: 50vw;
        margin: 0 auto;
    }

    .hw-os .os-sec7 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec7 .swiper-slide:not(:last-child) {
        margin: 0 2.28571428vw 0 0;
    }

    .hw-os .os-sec7 .aixiaoynav {
        width: 64.28571428vw;
        margin: 4.57142857vw auto 0;
    }

    .hw-os .os-sec7 .aicardplaybtn {
        width: 5.71428571vw;
        height: 5.71428571vw;
        right: 2.85714285vw;
        bottom: 2.85714285vw;
    }

    .hw-os .os-sec7 .aixiaoynav li {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .os-sec7 .aixiaoynav li img {
        width: 2.35714285vw;
        margin: 0 0 0 1.42857142vw;
    }

    .hw-os .os-sec7 .aixiaoynav li:not(:last-child) {
        margin: 0 2.85714285vw 0 0;
    }

    .hw-os .os-sec7 .aicompuframe {
        width: 45.14285714285714vw;
        margin: 18.35714285vw auto 0;
    }

    .hw-os .os-sec7 .aicompuframe .povideo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        top: 0.5vw;
        width: 35.35714285vw;
        height: 23.71428571vw;
    }
}


/* section 7 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec7 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-os .os-sec7 .aixiaoymat {
        width: 82.22222222vw;
        margin: 0 0 8.888888888vw 0;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .os-sec7 .aixiaoyswicon {
        overflow: hidden;
        width: 100%;
        padding: 0 0 0 4.44444444vw;
    }

    .hw-os .os-sec7 .aixiaoyswiper {
        width: 86.66666666vw;
        height: 111.11111111vw;
    }

    .hw-os .os-sec7 .aicardmat {
        width: 41.66666666vw;
        font-size: 5.55555555vw;
    }

    .hw-os .os-sec7 .aicarddes {
        width: 64.4444444444vw;
        margin: 2.77777777vw 0 0 0;
        font-size: 3.88888888vw;
    }

    .hw-os .os-sec7 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec7 .aicompuframe .povideo {
        top: 0.97222222vw;
        width: 63.75vw;
        height: 42.77777777vw;
    }

    .hw-os .os-sec7 .swiper-slide {
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec7 .aicompuframe {
        width: 81.66666666vw;
        margin: 40.194444vw auto 0;
    }

    .hw-os .os-sec7 .aicardtxtcon {
        top: 6.66666666vw;
        left: 6.66666666vw;
    }

    .hw-os .os-sec7 .aicardplaybtn {
        width: 11.11111111vw;
        height: 11.11111111vw;
        bottom: 5.55555555vw;
        right: 5.55555555vw;
        backdrop-filter: blur(11.11111111vw);
        -webkit-backdrop-filter: blur(11.11111111vw);
    }

    .hw-os .os-sec7 .aixiaoynav {
        width: 86.66666666vw;
        margin: 11.1111111111vw 0 0 0;
    }

    .hw-os .os-sec7 .aixiaoynav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-os .os-sec7 .aixiaoynav li img {
        width: 4.58333333vw;
        margin: 0 0 0 2.77777777vw;
    }

    .hw-os .os-sec7 .aixiaoynav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-os .os-sec7 .swiper-slide:not(:last-child) {
        margin: 0 4.4444444444vw 0 0;
    }
}

/* section 8 pc  */
.hw-os .os-sec8 {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0 auto 16.40625vw;
    background-color: #f4f5f7;
    z-index: 6;
}

.hw-os .os-sec8 .deepthinpartop {
    display: flex;
    align-items: center;
}

.hw-os .os-sec8 .deepthinkim {
    overflow: hidden;
    position: relative;
    width: 48.90625vw;
    height: 27.8645833333vw;
    margin: 0 6.92708333vw 0 0;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .os-sec8 .deepthinkim>picture {
    position: relative;
    z-index: 2;
}

.hw-os .os-sec8 .deepthinkim .povideo {
    position: absolute;
    width: 38.17708333vw;
    height: 25.52083333vw;
    top: 0.625vw;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    background-color: #000;
}

.hw-os .os-sec8 .deepthinkim .povideo::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    width: 100%;
    height: 2px;
    background-color: #000;
    z-index: 0;
}

.hw-os .os-sec8 .deepthinkim .povideo video {
    height: 100%;
}

.hw-os .os-sec8 .deepthinreplaybtn {
    display: flex;
    justify-content: center;
    width: 48.90625vw;
    margin: 2.08333333333vw 0 0 0;
}

.hw-os .os-sec8 .deepthinreplaybtn>div {
    display: none;
    align-items: center;
    cursor: pointer;
}

.hw-os .os-sec8 .deepthinreplaybtn>div.btnshow {
    display: flex;
}

.hw-os .os-sec8 .deepthinreplaybtn img {
    width: 1.45833333vw;
    height: 1.45833333vw;
    margin: 0 0.20833333vw 0 0;
}

.hw-os .os-sec8 .deepthinreplaybtn span {
    flex-shrink: 0;
    color: #6d6f72;
    font-size: 1.14583333333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec8 .deepthinkmat {
    color: #000;
    font-size: 2.91666666vw;
    font-weight: 700;
    line-height: 1.25;
}

.hw-os .os-sec8 .deepthinkdes {
    width: 25.41666666vw;
    margin: 1.66666666vw 0 0 0;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
}

/* section 8 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec8 {
        margin: 0 0 17.14285714vw 0;
    }

    .hw-os .os-sec8 .deepthinpartop {
        flex-direction: column-reverse;
    }
    
    .hw-os .os-sec8 .deepthinkmat {
        width: 64.28571428vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec8 .deepthinkdes {
        width: 64.28571428vw;
        margin: 2.85714285vw 0 5.71428571vw 0;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec8 .deepthinkim {
        width: 67.07142857vw;
        height: 38.21428571vw;
        margin: 0;
    }

    .hw-os .os-sec8 .deepthinreplaybtn {
        width: 67.07142857vw;
        margin: 4.28571428vw 0 0 0;
    }

    .hw-os .os-sec8 .deepthinreplaybtn span {
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec8 .deepthinreplaybtn img {
        width: 2.57142857vw;
        height: 2.57142857vw;
        margin: 0 0.42857142vw 0 0;
    }

    .hw-os .os-sec8 .deepthinkim .povideo {
        width: 52.35714285vw;
        height: 35vw;
        top: 0.85714285vw;
        left: 50%;
    }
}

/* section 8 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec8 {
        flex-direction: column-reverse;
        margin: 0 0 27.7777777777vw 0;
    }

    .hw-os .os-sec8 .deepthinkmat {
        width: 82.22222222vw;
        font-size: 11.11111111vw;
    }

    .hw-os .os-sec8 .deepthinkdes {
        width: 82.22222222vw;
        margin: 5.55555555vw 0 8.88888888vw 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec8 .deepthinkim {
        width: 82.22222222vw;
        height: 46.8055555555vw;
        margin: 0 auto;
    }

    .hw-os .os-sec8 .deepthinpartop {
        flex-direction: column-reverse;
    }

    .hw-os .os-sec8 .deepthinreplaybtn img {
        width: 4.86111111111vw;
        height: 4.86111111111vw;
        margin: 0 1.3888888888vw 0 0;
    }

    .hw-os .os-sec8 .deepthinreplaybtn span {
        font-size: 4.4444444444vw;
    }

    .hw-os .os-sec8 .deepthinkim .povideo {
        top: 1.11111111vw;
        width: 64.02777777vw;
        height: 42.77777777vw;
    }

    .hw-os .os-sec8 .deepthinreplaybtn {
        width: 82.222222222vw;
        margin: 5.55555555555vw auto 0;
    }

}

/* section 9 pc  */
.hw-os .os-sec9 {
    margin: 0 0 14.58333333vw 0;
}

.hw-os .os-sec9 .solsticky {
    width: 100%;
    position: sticky;
    display: flex;
    justify-content: center;
    top: 0;
    top: var(--cardcenter);
}

.hw-os .os-sec9 .soloutcon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-os .os-sec9 .solbtntoth {
    display: flex;
    justify-content: center;
    align-items: center;
} 

.hw-os .os-sec9 .solvrebtnout {
    display: flex;
    justify-content: flex-start;
    align-self: flex-end;
    width: 48.958333333vw;
    margin: 2.0833333333vw 0 0 0;
}

.hw-os .os-sec9 .solvrebtnout>div {
    position: relative;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
}

.hw-os .os-sec9 .solvrebtnout .slovslidefirbtns,
.hw-os .os-sec9 .solvrebtnout .slovslidesecbtns {
    opacity: 0;
    z-index: 1;
}

.hw-os .os-sec9 .solvrebtnout .slovslidesecbtns {
    transform: translateX(-100%);
}

.hw-os .os-sec9 .slovslidefirbtns>div,
.hw-os .os-sec9 .slovslidesecbtns>div {
    display: none;
    align-items: center;
    cursor: pointer;
}

.hw-os .os-sec9 .slovslidesecbtns.opashow,
.hw-os .os-sec9 .slovslidefirbtns.opashow {
    opacity: 1;
    z-index: 3;
}

.hw-os .os-sec9 .slovslidefirbtns>div.btnshow,
.hw-os .os-sec9 .slovslidesecbtns>div.btnshow {
    display: flex;
}

.hw-os .os-sec9 .slovslidefirbtns img,
.hw-os .os-sec9 .slovslidesecbtns img {
    width: 1.45833333vw;
    margin: 0 0.20833333vw 0 0;
}

.hw-os .os-sec9 .slovslidefirbtns span,
.hw-os .os-sec9 .slovslidesecbtns span {
    color: #6d6f72;
    font-size: 1.14583333333vw;
    font-weight: 500;
    line-height: 1.6;
}

.hw-os .os-sec9 .solvdifreplay {
    display: flex;
    align-items: center;
} 

.hw-os .os-sec9 .solvdifreplay span {
    color: #6d6f72;
    font-size: 1.1458333333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec9 .solvdifreplay img {
    width: 1.5104166666vw;
    height: 1.5104166666vw;
    margin: 0 0.052083333333vw 0 0;
}

.hw-os .os-sec9 .soldiftxt h3 {
    width: 20.83333333vw;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
}

.hw-os .os-sec9 .soldiftxt p {
    width: 25vw;
    margin: 1.66666666vw 0 0 0;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
}

.hw-os .os-sec9 .soldiffcultxtcon {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 7.34375vw 0 0;
    height: var(--firstHeight);
    transform: translateY(var(--modistance));
    transition: opacity 1s linear, transform 1s ease-out;
}

.hw-os .os-sec9.will-change .soldiffcultxtcon {
    will-change: transform, opacity;
}

.hw-os .os-sec9 .soldiffcultxtcon li:not(:last-child) {
    margin: 0 0 23.28125vw 0;
}

@media screen and (min-aspect-ratio:11/10) and (max-aspect-ratio:20/12 ) {
    .hw-os .os-sec9 .soldiffcultxtcon li:not(:last-child) {
        margin: 0 0 40.28125vw 0;
    }  
}

@media screen and (min-aspect-ratio:11/10) and (max-width: 1200px) {
    .hw-os .os-sec9 .soldiffcultxtcon li:not(:last-child) {
        margin: 0 0 40.28125vw 0;
    }  
}

.hw-os .os-sec9 .soldiffcultcomframe {
    position: relative;
    overflow: hidden;
    width: 48.95833333vw;
    height: 27.86458333vw;
}

.hw-os .os-sec9 .soldiffcultcomframe>picture {
    position: relative;
    z-index: 2;
}

.hw-os .os-sec9 .soldiffcultsiper {
    position: absolute;
    top: 0.625vw;
    left: 50%;
    width: 38.17708333vw;
    height: 25.57291666vw;
    background-color: #000;
    transform: translateX(calc(-50% + 0.5px));
    z-index: 1;
}

.hw-os .os-sec9 .soldiffcultsiper .povideo {
    display: flex;
    align-items: center;
}

.hw-os .os-sec9 .soldiffcultsiper video {
    position: relative;
    height: auto;
    z-index: 2;
}

.hw-os .os-sec9 .soldiffcultsiper .povideo::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 100%;
    height: 2px;
    background-color:#000;
    z-index: 1;
}

.hw-os .os-sec9 .soldiffcultsiper .swiper-slide>picture,
.hw-os .os-sec9 .soldiffcultsiper .swiper-slide>img {
    height: 100%;
}

.hw-os .os-sec9 .swiper-slide {
    overflow: hidden;
    position: relative;
}

.hw-os .os-sec9 .solspace {
    position: relative;
    height: 140vh;
    z-index: -1;
}

/* section 9 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec9 {
        margin: 0 0 17.14285714vw 0;
    }

    .hw-os .os-sec9 .soloutcon {
        width: 100%;
    }

    .hw-os .os-sec9 .soldiffcultxtcon {
        flex-direction: row;
        justify-content: flex-start;
        width: 64.28571428vw;
        margin: 0 auto;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:nth-child(2) {
        transform: translateX(-100%);
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:nth-child(3) {
        transform: translateX(-200%);
    }

    .hw-os .os-sec9 .solbtntoth {
        width: 100%;
    }

    .hw-os .os-sec9 .solbtntoth {
        flex-direction: column;
    }

    .hw-os .os-sec9 .soldiffcultcomframe {
        width: 67.07142857vw;
        height: 38.21428571vw;
    }

    .hw-os .os-sec9 .soldiffcultsiper {
        top: 0.85714285vw;
        width: 52.35714285vw;
        height: 35.0714285714vw;
    }

    .hw-os .os-sec9 .solvrebtnout {
        width: 100%;
        margin: 4.28571428vw 0 0 0;
    }

    .hw-os .os-sec9 .slovslidefirbtns span, 
    .hw-os .os-sec9 .slovslidesecbtns span {
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec9 .slovslidefirbtns img, 
    .hw-os .os-sec9 .slovslidesecbtns img {
        width: 2.57142857vw;
        height: 2.57142857vw;
        margin: 0 0.42857142vw 0 0;
    }

    .hw-os .os-sec9 .soldiftxt h3 {
        width: 100%;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec9 .soldiftxt p {
        width: 100%;
        margin: 2.85714285vw 0 5.71428571vw 0;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li {
        flex-shrink: 0;
        position: relative;
        width: 100%;
        opacity: 0;
        z-index: 1;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li.active {
        opacity: 1;
        z-index: 2;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:not(:last-child) {
        margin: 0;
    }
}

/* section 9 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec9 {
        margin: 0 0 27.777777777VW 0;
    }

    .hw-os .os-sec9 .soloutcon {
        width: 100%;
    }

    .hw-os .os-sec9 .soldiffcultxtcon {
        flex-direction: row;
        justify-content: flex-start;
        width: 82.222222222vw;
        margin: 0 auto;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:nth-child(2) {
        transform: translateX(-100%);
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:nth-child(3) {
        transform: translateX(-200%);
    }

    .hw-os .os-sec9 .solbtntoth {
        width: 100%;
    }

    .hw-os .os-sec9 .solbtntoth {
        flex-direction: column;
    }

    .hw-os .os-sec9 .soldiffcultcomframe {
        width: 82.22222222vw;
        height: 46.80555555vw;
    }

    .hw-os .os-sec9 .soldiffcultsiper {
        top: 1.11111111111vw;
        width: 64.0277777777vw;
        height: 43.055555555vw;
    }

    .hw-os .os-sec9 .soldiffcultsiper::before {
        content: "";
        position: absolute;
        top: -1px;
        width: 100%;
        height: 2px;
        background-color: #000;
    }

    .hw-os .os-sec9 .solvrebtnout {
        width: 100%;
        margin: 5.5555555555vw 0 0 0;
    }

    .hw-os .os-sec9 .slovslidefirbtns span, 
    .hw-os .os-sec9 .slovslidesecbtns span {
        font-size: 4.444444444vw;
    }

    .hw-os .os-sec9 .slovslidefirbtns img, 
    .hw-os .os-sec9 .slovslidesecbtns img {
        width: 4.8611111111vw;
        height: 4.8611111111vw;
        margin: 0 1.3888888888vw 0 0;
    }

    .hw-os .os-sec9 .soldiftxt h3 {
        width: 82.2222222222vw;
        font-size: 11.1111111111vw;
    }

    .hw-os .os-sec9 .soldiftxt p {
        width: 82.2222222222vw;
        margin: 5.55555555555vw 0 11.1111111111vw 0;
        font-size: 4.4444444444vw;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li {
        position: relative;
        opacity: 0;
        z-index: 1;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li.active {
        opacity: 1;
        z-index: 2;
    }

    .hw-os .os-sec9 .soldiffcultxtcon li:not(:last-child) {
        margin: 0;
    }
}

/* fold style */
@media screen and (max-aspect-ratio:7/10) and (min-aspect-ratio: 458/691) {
    .hw-os .os-sec9 .soldiftxt h3 {
        font-size: 8.3333333vw;
    }

    .hw-os .os-sec9 .soldiftxt p {
        margin: 3.5vw 0 5.5vw 0;
        font-size: 3.333333vw;
    }

    .hw-os .os-sec9 .solvrebtnout {
        margin: 3vw 0 0 0;
    }

    .hw-os .os-sec9 .slovslidefirbtns img, 
    .hw-os .os-sec9 .slovslidesecbtns img {
        width: 3.3333333vw;
        height: 3.3333333vw;
        margin: 0 1vw 0 0;
    }

    .hw-os .os-sec9 .slovslidefirbtns span, 
    .hw-os .os-sec9 .slovslidesecbtns span {
        font-size: 3.3333333vw;
    }
}

/* section 10 pc */
.hw-os .os-sec10 {
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 0 12.5vw 0;
    background-color: #f4f5f7;
}

.hw-os .os-sec10 .multifunctcon {
    width: 67.5vw;
}

.hw-os .os-sec10 .multifunctconswiper {
    width: 67.5vw;
    height: 36.45833333vw;
}

.hw-os .os-sec10 .swiper-wrapper {
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hw-os .os-sec10 .swiper-slide {
    overflow: hidden;
    transition-property: opacity;
    border-radius: 2.08333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
    cursor: pointer;
}

.hw-os .os-sec10 .swiper-slide img {
    border-radius: 2.08333333vw;
}

.hw-os .os-sec10 .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-os .os-sec10 .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec10 .multinavtxtcon {
    display: flex;
    justify-content: space-between;
    margin: 2.08333333vw 0 0 0;
}

.hw-os .os-sec10 .multifunctnav {
    display: flex;
    padding: 0 0 1px 0;
    margin: 0.41666666vw 0 0 0;
}

.hw-os .os-sec10 .multifunctnav li {
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    background: linear-gradient(140.34deg, #b9dcff 0%, #7a8fd1 100%);
    border-radius: 50%;
    cursor: pointer;
    transform: translate3d(0,0,0);
    transition: opacity 0.3s ease-out;
    outline: none;
}

.hw-os .os-sec10.will-change .multifunctnav li {
    will-change: opacity;
}

.hw-os .os-sec10 .multifunctnav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

@media (any-hover: hover) {
    .hw-os .os-sec10 .multifunctnav li:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec10 .multifunctnav li.swiper-button-disabled {
    opacity: 0.5;
}

.hw-os .os-sec10 .multifunctnav li img {
    width: 1.04166666vw;
    margin: 0 0 0 0.625vw;
}

.hw-os .os-sec10 .multifunctnav li:nth-child(1) {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-os .os-sec10 .multifunctxt {
    display: flex;
    width: 50.20833333vw;
}

.hw-os .os-sec10 .multifunctxt p {
    flex-shrink: 0;
    width: 100%;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.hw-os .os-sec10.will-change .multifunctxt p {
    will-change: transform;
}

.hw-os .os-sec10 .multifunctxt p .specolor {
    color: #000;
    font-weight: 700;
}

.hw-os .os-sec10 .multifunctxt p.active {
    position: relative;
    opacity: 1;
    z-index: 2;
}

.hw-os .os-sec10 .multifunctxt p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-os .os-sec10 .multifunctxt p:nth-child(3) {
    transform: translateX(-200%);
}

/* section 10 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec10 {
        margin: 0 0 17.14285714vw 0;
    }
    
    .hw-os .os-sec10 .multinavtxtcon {
        flex-direction: column;
        margin: 3.42857142vw 0 0 0;
    }

    .hw-os .os-sec10 .multifunctnav {
        align-self: flex-end;
        margin: 4.28571428vw 0 0 0;
    }

    .hw-os .os-sec10 .multifunctxt p {
        font-size: 2vw;
    }

    .hw-os .os-sec10 .multifunctxt {
        width: 57.42857142vw;
        margin: 0 auto;
    }

    .hw-os .os-sec10 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec10 .multifunctnav li {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .os-sec10 .multifunctnav li img {
        width: 2.35714285vw;
        margin: 0 0 0 1.42857142vw;
    }

    .hw-os .os-sec10 .multifunctcon {
        width: 64.28571428vw;
    }

    .hw-os .os-sec10 .multifunctconswiper {
        width: 64.28571428vw;
        height: 46.42857142vw;
    }

    .hw-os .os-sec10 .swiper-slide {
        border-radius: 2.8571428571vw;
        transform: translate3d(0,0,0) rotate(0deg);
    }

    .hw-os .os-sec10 .swiper-slide img {
        border-radius: 2.8571428571vw;
    }

    .hw-os .os-sec10 .swiper-slide:not(:last-child) {
        margin: 0 2.28571428vw 0 0;
    }

    .hw-os .os-sec10 .multifunctnav li:not(:last-child) {
        margin: 0 2.85714285vw 0 0;
    }
}

/* section 10 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec10 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-os .os-sec10 .multifunctcon {
        overflow: hidden;
        width: 100%;
        padding: 0 0 0 4.44444444vw;
    }

    .hw-os .os-sec10 .multifunctxt {
        width: 82.22222222vw;
        margin: 0 0 0 4.44444444vw;
    }

    .hw-os .os-sec10 .multifunctxt p {
        font-size: 3.88888888vw;
    }

    .hw-os .os-sec10 .multifunctnav {
        justify-content: flex-end;
        width: 86.66666666vw;
        margin: 6.66666666vw 0 0 0;
    }

    .hw-os .os-sec10 .multinavtxtcon {
        flex-direction: column;
        margin: 6.66666666vw 0 0 0;
    }

    .hw-os .os-sec10 .multifunctconswiper {
        width: 86.66666666vw;
        height: 86.66666666vw;
    }

    .hw-os .os-sec10 .multifunctnav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-os .os-sec10 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec10 .multifunctnav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-os .os-sec10 .multifunctnav li img {
        width: 4.58333333vw;
        margin: 0 0 0 2.77777777vw;
    }

    .hw-os .os-sec10 .swiper-slide {
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec10 .swiper-slide img {
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec10 .swiper-slide:not(:last-child) {
        margin: 0 4.444444444vw 0 0;
    }
}


/* section 11 pc  */
.hw-os .os-sec11 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 12.5vw 0;
}

.hw-os .os-sec11 .intevethincircle {
    position: relative;
    height: 12.5vw;
    transform: scale(1, 0);
    transform-origin: bottom center;
} 

.hw-os .os-sec11 .intevethincirclecon {
    width: 100%;
}

.hw-os .os-sec11.will-change .intevethincircle {
    will-change: transform;
}

.hw-os .os-sec11 .intevethincircle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 248.4375vw;
    height: 248.4375vw;
    background: linear-gradient(180deg,#c7d8f0 0%,#edeff4 4.89%,#f4f5f7 6.74%, #f4f5f7 100%);
    border-radius: 50%;
    z-index: 2;
}

.hw-os .os-sec11 .intevethincontent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.hw-os .os-sec11 .intevethinsut {
    width: 20.41666666vw;
    margin: 2.44791666vw 0 1.45833333vw 0;
    color: #a3c1ef;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec11 .intevethinmat {
    width: 23.4375vw;
    color: #000;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec11 .inteventhinimcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 5.2083333333vw 0 0 0;
}

.hw-os .os-sec11 .inteventhinlim {
    position: relative;
    width: 37.65625vw;
    height: 31.1979166666vw;
    transform-style: preserve-3d;
    perspective: 91.14583333vw;
}

.hw-os .os-sec11 .inteventhinlim .povideo {
    position: absolute;
    top: 0.52083333vw;
    left: 50%;
    width: 37.23958333vw;
    height: auto;
    transform: translateX(-50%) rotateX(-72.3deg);
    transform-origin: top;
}

.hw-os .os-sec11 .inteventhinrim {
    position: relative;
    width: 8.1770833333vw;
    height: 16.8229166666vw;
    margin: -2.8125vw 0 0 0;
    z-index: 2;
    transform: translateY(15.625vw);
    transition: transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-os .os-sec11 .inteventhinrim>picture {
    position: relative;
    z-index: 2;
}

.hw-os .os-sec11 .inteventhinrim .povideo {
    position: absolute;
    width: 7.60416666vw;
    height: 16.30208333vw;
    top: 0.26041666vw;
    left: 0.26041666vw;
    z-index: 1;
}

.hw-os .os-sec11.will-change .inteventhinrim {
    will-change: transform;
}

.hw-os .os-sec11 .inteventhinrim.active {
    transform: translateY(0);
}

/* section 11 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec11 {
        padding: 0 0 17.14285714vw 0;
    }

    .hw-os .os-sec11 .intevethinsut {
        margin: 2.28571428vw 0 2vw 0;
        font-size: 2.28571428vw;
        text-align: center;
    }

    .hw-os .os-sec11 .intevethinmat {
        width: 42.85714285vw;
        font-size: 6.85714285vw;
    }

    .hw-os .os-sec11 .inteventhinimcon {
        margin: 7.14285714vw 0 0 0;
    }

    .hw-os .os-sec11 .inteventhinlim {
        width: 51.64285714vw;
        height: 42.78571428vw;
        perspective: 127.14285714vw;
    }

    .hw-os .os-sec11 .inteventhinlim .povideo {
        width: 50.5vw;
        top: 0.78571428vw;
        left: 0.57142857vw;
        transform: rotateX(-72deg);
    }

    .hw-os .os-sec11 .inteventhinrim {
        width: 11.21428571vw;
        height: 23.07142857vw;
        margin: -3.85714285vw 0 0 0;
    }

    .hw-os .os-sec11 .inteventhinrim .povideo {
        overflow: hidden;
        width: 10.42857142vw;
        height: 22.42857142vw;
        top: 0.35714285vw;
        left: 0.35714285vw;
        border-radius: 0.71428571vw;
    }
}

/* section 11 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec11 {
        padding: 0 0 27.7777777777vw 0;
    }

    .hw-os .os-sec11 .intevethincircle {
        height: 25vw;
    }

    .hw-os .os-sec11 .intevethinsut {
        width: 27.77777777vw;
        margin: 3.05555555vw 0 3.88888888vw 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec11 .intevethinmat {
        width: 62.5vw;
        font-size: 13.33333333vw;
    }

    .hw-os .os-sec11 .inteventhinlim {
        width: 82.22222222vw;
        height: 68.19444444vw;
    }

    .hw-os .os-sec11 .inteventhinrim {
        width: 17.77777777vw;
        height: 36.66666666vw;
        margin: -6.11111111vw 0 0 0;
        transform: translateY(22.2222222222vw);
    }

    .hw-os .os-sec11 .inteventhinimcon {
        margin: 16.66666666vw 0 0 0;
    }

    .hw-os .os-sec11 .intevethincircle::after {
        width: 248.61111111vw;
        height: 248.61111111vw;
    }

    .hw-os .os-sec11 .inteventhinrim .povideo {
        overflow: hidden;
        width: 16.52777777vw;
        height: 35.5555555555vw;
        top: 0.55555555vw;
        left: 0.55555555vw;
        border-radius: 1.38888888vw;
    }

    .hw-os .os-sec11 .inteventhinlim {
        perspective: 208.33333333vw;
    }

    .hw-os .os-sec11 .inteventhinlim .povideo {
        top: 1.25vw;
        width: 80.37777777vw;
        transform: translateX(-50%) rotateX(-71.9deg);
    }
}

/* section 12 pc */
.hw-os .os-sec12 {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 12.5vw 0;
}

.hw-os .os-sec12 .eausemat {
    width: 28.64583333vw;
    margin: 0 0 3.33333333vw 0;
    color: #000;
    font-size: 2.91666666vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec12 .eauseoutcon {
    width: 100%;
}

.hw-os .os-sec12 .eauseswiper {
    width: 67.5vw;
    height: 36.45833333vw;
    margin: 0 auto;
}

.hw-os .os-sec12 .swiper-wrapper {
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hw-os .os-sec12.will-change .swiper-wrapper {
    will-change: transform;
}

.hw-os .os-sec12 .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition-property: opacity;
    border-radius: 2.08333333vw;
    cursor: pointer;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .os-sec12 .swiper-slide.swiper-slide-active {
    cursor: default;
}

.hw-os .os-sec12 .swiper-slide:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec12 .swiper-slide .eausebtns {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    right: 1.25vw;
    bottom: 1.25vw;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    z-index: 3;
    cursor: pointer;
    transition: 0.3s ease;
}

@media (any-hover: hover) {
    .hw-os .os-sec12 .swiper-slide .eausebtns:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.hw-os .os-sec12 .swiper-slide .eausebtns img {
    display: none;
}

.hw-os .os-sec12 .swiper-slide .eausebtns img.btnshow {
    display: block;
}

.hw-os .os-sec12 .eausetxt {
    display: flex;
    width: 50.20833333vw;
}

.hw-os .os-sec12 .eausetxt p {
    flex-shrink: 0;
    width: 100%;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.hw-os .os-sec12.will-change .eausetxt p {
    will-change: transform;
}

.hw-os .os-sec12 .eausetxt p.active {
    position: relative;
    opacity: 1;
    z-index: 2;
}

.hw-os .os-sec12 .eausetxt p .specolor {
    color: #000;
    font-weight: 700;
}

.hw-os .os-sec12 .eausetxt p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-os .os-sec12 .eausetxt p:nth-child(3) {
    transform: translateX(-200%);
}

.hw-os .os-sec12 .eausetxtnav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 67.5vw;
    margin: 2.08333333vw auto 0;
}

.hw-os .os-sec12 .eausenav {
    display: flex;
    align-items: center;
    padding: 0 0 1px 0;
    margin: 0.3125vw 0 0 0;
}

.hw-os .os-sec12 .eausenav li {
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    background: linear-gradient(140.34deg, #b9dcff 0%, #7a8fd1 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
    transform: translate3d(0,0,0);
    outline: none;
}

.hw-os .os-sec12.will-change .eausenav li {
    will-change: opacity;
}

@media (any-hover: hover) {
    .hw-os .os-sec12 .eausenav li:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec12 .eausenav li.swiper-button-disabled {
    opacity: 0.5;
}

.hw-os .os-sec12 .eausenav li:nth-child(1) {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-os .os-sec12 .eausenav li img {
    width: 1.04166666vw;
    margin: 0 0 0 0.625vw;
}

.hw-os .os-sec12 .eausenav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

/* section 12 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec12 {
        margin: 0 0 17.14285714vw 0;
    }
    
    .hw-os .os-sec12 .eausemat {
        width: 47.07142857vw;
        margin: 0 0 5.71428571vw 0;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec12 .swiper-slide {
        border-radius: 2.857142857142857vw;
    }

    .hw-os .os-sec12 .swiper-slide:not(:last-child) {
        margin: 0 2.28571428vw 0 0;
    }

    .hw-os .os-sec12 .eauseswiper {
        width: 64.28571428vw;
        height: 46.428571428vw;
    }

    .hw-os .os-sec12 .swiper-slide .povideo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .hw-os .os-sec12 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec12 .swiper-slide .povideo video {
        width: auto;
        height: 100%;
    }

    .hw-os .os-sec12 .eausetxtnav {
        flex-direction: column;
        width: 64.28571428vw;
        margin: 0 auto;
    }

    .hw-os .os-sec12 .eausetxt {
        width: 57.42857142vw;
        margin: 3.42857142vw auto 0;
    }

    .hw-os .os-sec12 .eausetxt p {
        font-size: 2vw;
    }

    .hw-os .os-sec12 .eausenav {
        align-self: flex-end;
        margin: 4.57142857vw 0 0 0;
    }

    .hw-os .os-sec12 .eausenav li {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .os-sec12 .eausenav li:not(:last-child) {
        margin: 0 2.85714285vw 0 0;
    }

    .hw-os .os-sec12 .eausenav li img {
        width: 2.35714285vw;
        margin: 0 0 0 1.42857142vw;
    }

    .hw-os .os-sec12 .swiper-slide .eausebtns {
        width: 5.71428571vw;
        height: 5.71428571vw;
        bottom: 2.85714285vw;
        right: 2.85714285vw;
    }
}

/* section 12 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec12 {
        margin: 0 0 27.77777777vw 0;
    }

    .hw-os .os-sec12 .eausemat {
        width: 82.22222222vw;
        margin: 0 0 8.88888888vw 0;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .os-sec12 .eauseoutcon {
        overflow: hidden;
        width: 100%;
        padding: 0 0 0 4.44444444vw;
    }

    .hw-os .os-sec12 .eauseswiper {
        width: 86.66666666vw;
        height: 86.66666666vw;
        margin: 0;
    }

    .hw-os .os-sec12 .swiper-slide {
        height: 86.66666666vw;
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec12 .swiper-slide:not(:last-child) {
        margin: 0 4.44444444vw 0 0;
    }

    .hw-os .os-sec12 .swiper-slide .povideo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .hw-os .os-sec12 .swiper-slide .povideo video {
        width: auto;
        height: 86.666666666vw;
    }

    .hw-os .os-sec12 .swiper-wrapper {
        transition-timing-function: ease;
    }

    .hw-os .os-sec12 .eausetxtnav {
        flex-direction: column;
        align-items: flex-end;
        width: 82.22222222vw;
        margin: 6.66666666vw 0 0 4.44444444vw;
    }

    .hw-os .os-sec12 .eausetxt {
        width: 100%;
    }

    .hw-os .os-sec12 .eausetxt p {
        font-size: 3.88888888vw;
    }

    .hw-os .os-sec12 .eausenav {
        margin: 6.66666666vw 0 0 0;
    }

    .hw-os .os-sec12 .eausenav li {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-os .os-sec12 .eausenav li:not(:last-child) {
        margin: 0 5.55555555vw 0 0;
    }

    .hw-os .os-sec12 .eausenav li img {
        width: 4.58333333vw;
        margin: 0 0 0 2.77777777vw;
    }

    .hw-os .os-sec12 .swiper-slide .eausebtns {
        width: 11.11111111vw;
        height: 11.11111111vw;
        right: 5.55555555vw;
        bottom: 5.55555555vw;
        backdrop-filter: blur(11.11111111vw);
        -webkit-backdrop-filter: blur(11.11111111vw);
    }
}


/* section 13 pc */
.hw-os .os-sec13 {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 12.5vw 0;
}

.hw-os .os-sec13 .safeprosut {
    margin: 2.44791666vw 0 1.45833333vw 0;
    color: #7a7c80;
    font-size: 1.25vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(135deg,#b7babf 0%,#ffffff 27.75%,#ffffff 73.98%,#b7babf 100%);
}

.hw-os .os-sec13 .safepromat {
    color: #fff;
    font-size: 6.25vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(138deg,#b7babf 8%,#ffffff 36.75%,#ffffff 61.98%,#b7babf 90%);
}

.hw-os .os-sec13 .safeprotectiioncon {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.hw-os .os-sec13 .safeprotxtcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hw-os .os-sec13 .safeproim {
    width: 90.625vw;
    margin: -2.44791666666vw auto 0;
}

.hw-os .os-sec13 .safeprotectioncircle {
    position: relative;
    height: 11.458333333vw;
    box-shadow: 1.5625vw 1.5625vw 3.125vw rgba(139, 155, 159, 0.07) inset;
    transform: scale(1, 0);
    transform-origin: bottom center;
}

.hw-os .os-sec13.will-change .safeprotectioncircle {
    will-change: transform;
}

.hw-os .os-sec13 .safeprotectioncircle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 248.4375vw;
    height: 248.4375vw;
    border-radius: 50%;
    background-color: #000;
}

.hw-os .os-sec13 .safeswicon {
    width: 67.5vw;
    margin: -18.22916666vw auto 0;
}

.hw-os .os-sec13 .safeprooutcon {
    position: relative;
}

.hw-os .os-sec13 .safecopyswiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    z-index: 9;
}

.hw-os .os-sec13 .safecopyswiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.hw-os .os-sec13 .slideinner {
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: 36.45833333vw;
    border-radius: 2.08333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
    background-color: #000;
}

.hw-os .os-sec13 .safeproswiper .swiper-slide {
    position: relative;
    border-radius: 2.08333333vw;
    background-color: #000;
    transform: translate3d(0,0,0) rotate(0deg);
} 

.hw-os .os-sec13 .safeproswiper .swiper-slide:nth-child(1) {
    z-index: 9;
}

.hw-os .os-sec13 .safeproswiper .swiper-slide:nth-child(2) {
    z-index: 8;
}

.hw-os .os-sec13 .safeproswiper .swiper-slide:nth-child(3) {
    z-index: 7;
}

.hw-os .os-sec13 .swiper-slide {
    position: relative;
    transform-style: preserve-3d;
    perspective: 36.45833333vw;
    transition: transform 0.5s cubic-bezier(0.77, 0.49, 0.7, 1), opacity 0.5s cubic-bezier(0.77, 0.49, 0.7, 1);
}

.hw-os .os-sec13 .safeproswiper .swiper-slide:nth-child(1) {
    transform: scale(1.001);
}

.hw-os .os-sec13 .safeproswiper .swiper-slide.active {
    transform: translate3d(0, 0, 26.0416666666vw) scale(1.6);
    opacity: 0;
    pointer-events: none;
}

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

@media (any-hover: hover) {
    .hw-os .os-sec13 .safeprobtns:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.hw-os .os-sec13 .safeprobtns img {
    display: none;
}

.hw-os .os-sec13 .safeprobtns img.btnshow {
    display: block;
}

.hw-os .os-sec13.will-change .swiper-slide {
    will-change: opacity, transform;
}

.hw-os .os-sec13 .swiper-slide:nth-child(2) {
    left: -100%;
}

.hw-os .os-sec13 .swiper-slide:nth-child(3) {
    left: -200%;
}

.hw-os .os-sec13 .safeprotxtslide {
    display: flex;
    width: 52.916666666vw;
}

.hw-os .os-sec13 .safeprotxtslide p {
    flex-shrink: 0;
    width: 100%;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.77, 0.49, 0.7, 1);
}

.hw-os .os-sec13.will-change .safeprotxtslide p {
    will-change: opacity;
}

.hw-os .os-sec13 .safeprotxtslide p.active {
    opacity: 1;
    z-index: 3;
}

.hw-os .os-sec13 .safeprotxtslide p .specolor {
    color: #fff;
    font-weight: 700;
}

.hw-os .os-sec13 .safeprotxtslide p:nth-child(2) {
    transform: translateX(-100%);
}

.hw-os .os-sec13 .safeprotxtslide p:nth-child(3) {
    transform: translateX(-200%);
}

.hw-os .os-sec13 .safeprotxtnav {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 2.08333333vw 0 0 0;
}

.hw-os .os-sec13 .safepronav {
    display: flex;
    margin: 0.41666666vw 0 0 0;
}

.hw-os .os-sec13 .safepronav li.disabled {
    opacity: 0.5!important;
}

.hw-os .os-sec13 .safepronav li {
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    background: linear-gradient(140.34deg, #b9dcff 0%, #7a8fd1 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-out;
    transform: translate3d(0,0,0);
    outline: none;
}

.hw-os .os-sec13.will-change .safepronav li {
    will-change: opacity;
}

@media (any-hover: hover) {
    .hw-os .os-sec13 .safepronav li:hover {
        opacity: 0.9;
    }
}

.hw-os .os-sec13 .safepronav li:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-os .os-sec13 .safepronav li img {
    width: 1.04166666vw;
    margin: 0 0 0 0.625vw;
}

.hw-os .os-sec13 .safepronav li:nth-child(1) {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-os .os-sec13 .safeproback {
    width: 100%;
    background-color: #000;
}


/* section 13 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec13 {
        padding: 0 0 17.14285714vw 0;
    }
    
    .hw-os .os-sec13 .safeprosut {
        margin: 0 0 2vw 0;
        font-size: 2.28571428vw;
        text-align: center;
    }

    .hw-os .os-sec13 .safeprotxtcon {
        top: 2.28571428vw;
    }

    .hw-os .os-sec13 .safepromat {
        width: 31.42857142vw;
        font-size: 6.85714285vw;
        line-height: 8.57142857vw;
        text-align: center;
    }

    .hw-os .os-sec13 .safeproim {
        width: 100%;
        margin: 0;
    }

    .hw-os .os-sec13 .safeswicon {
        width: 82.28571428vw;
        margin: -27.28571428vw auto 0; 
    }

    .hw-os .os-sec13 .slideinner {
        height: 46.42857142vw;
        border-radius: 2.8571428571vw;
    }

    .hw-os .os-sec13 .safeproswiper .swiper-slide {
        border-radius: 2.8571428571vw;
    }

    .hw-os .os-sec13 .safeprobtns {
        width: 5.71428571vw;
        height: 5.71428571vw;
        bottom: 2.85714285vw;
        right: 2.85714285vw;
    }

    .hw-os .os-sec13 .safeprotectioncircle {
        height: 12.2857142857vw;
    }

    .hw-os .os-sec13 .safepronav {
        align-self: flex-end;
        margin: 4.57142857vw 9vw 0 0;
    }

    .hw-os .os-sec13 .safeprotxtnav {
        flex-direction: column;
        margin: 3.4285714285vw 0 0 0;
    }

    .hw-os .os-sec13 .safeprotxtslide {
        width: 75.42857142vw;
        margin: 0 auto;
    }

    .hw-os .os-sec13 .safeprotxtslide p {
        font-size: 2vw;
    }

    .hw-os .os-sec13 .safepronav li {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .os-sec13 .safepronav li:not(:last-child) {
        margin: 0 2.85714285vw 0 0;
    }

    .hw-os .os-sec13 .safepronav li img {
        width: 2.35714285vw;
        margin: 0 0 0 1.42857142vw;
    }

    .hw-os .os-sec13 .slideinner .povideo {
        display: flex;
        justify-content: center;
    }

    .hw-os .os-sec13 .slideinner video {
        width: auto;
        height: 46.42857142857143vw;
    }
}

/* section 13 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec13 {
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .hw-os .os-sec13 .safeprotectiioncon {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 3.05555555vw 0 0 0;
    }

    .hw-os .os-sec13 .safeprosut {
        margin: 0 0 3.8888888888vw 0;
        font-size: 4.4444444444vw;
    }

    .hw-os .os-sec13 .safepromat {
        width: 69.4444444444vw;
        font-size: 13.3333333333vw;
    }

    .hw-os .os-sec13 .slideinner {
        height: 82.222222222vw;
        border-radius: 5.5555555555vw;
    }

    .hw-os .os-sec13 .safeproswiper .swiper-slide {
        border-radius: 5.5555555555vw;
    } 

    .hw-os .os-sec13 .slideinner .povideo {
        display: flex;
        justify-content: center;
    }

    .hw-os .os-sec13 .slideinner video {
        width: auto;
        height: 82.2222222222vw;
    }

    .hw-os .os-sec13 .safeswicon {
        width: 82.222222222vw;
        margin: -37.361111111vw auto 0;
    }

    .hw-os .os-sec13 .safeprotxtslide {
        width: 82.222222222vw;
    }

    .hw-os .os-sec13 .safeprotxtslide p {
        font-size: 3.8888888888vw;
    }

    .hw-os .os-sec13 .safeproim {
        width: 153.194444444vw;
        margin: 0;
    }

    .hw-os .os-sec13 .safeprotectioncircle {
        height: 25vw;
    }

    .hw-os .os-sec13 .safepronav li {
        width: 11.1111111111vw;
        height: 11.1111111111vw;
    }

    .hw-os .os-sec13 .safeprotectioncircle::after {
        width: 248.61111111vw;
        height: 248.61111111vw;
    }

    .hw-os .os-sec13 .safecopyswiper {
        height: 77%;
    }

    .hw-os .os-sec13 .safeprobtns {
        width: 11.11111111vw;
        height: 11.11111111vw;
        right: 5.55555555vw;
        bottom: 5.55555555vw;
        backdrop-filter: blur(11.11111111vw);
        -webkit-backdrop-filter: blur(11.11111111vw);
    }

    .hw-os .os-sec13 .safeproswiper .swiper-slide.active {
        transform: translate3d(0, 0, 27.777777777vw) scale(2.5);
    }

    .hw-os .os-sec13 .safepronav {
        justify-content: flex-end;
        margin: 6.6666666666vw 0 0 0;
    }

    .hw-os .os-sec13 .safepronav li img {
        width: 4.58333333vw;
        margin: 0 0 0 2.77777777vw;
    }

    .hw-os .os-sec13 .safeprotxtnav {
        flex-direction: column;
        margin: 6.666666666vw 0 27.7777777777vw 0;
    }

    .hw-os .os-sec13 .safepronav li:not(:last-child) {
        margin: 0 5.5555555555vw 0 0;
    }
}

/* section 14 px */
.hw-os .os-sec14 {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 12.5vw 0;
}

.hw-os .os-sec14 .promiumappoutback {
    width: 100%;
    background-color: #000;
}

.hw-os .os-sec14 .premiumappcircle {
    position: relative;
    width: 100%;
    height: 12.5vw;
    transform: scale(1, 0);
    transform-origin: bottom center;
}

.hw-os .os-sec14.will-change .premiumappcircle {
    will-change: transform;
}

.hw-os .os-sec14 .premiumappcircle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 248.4375vw;
    height: 248.4375vw;
    background:linear-gradient(180deg,#c7d8f0 0%,#edeff4 4.89%,#f4f5f7 6.74%,#f4f5f7 100%);
    border-radius: 50%;
}

.hw-os .os-sec14 .preminumapptxt {
    position: relative;
    z-index: 2;
}

.hw-os .os-sec14 .preminumappsut {
    width: 10.41666666vw;
    margin: 2.44791666vw auto 1.45833333vw;
    color: #a3c1ef;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec14 .preminumappmat {
    width: 21.875vw;
    margin: 0 auto 2.5vw;
    color: #000;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec14 .preminumtxtcon {
    width: 23.020833333vw;
    margin: 0 auto 6.25vw;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec14 .preminumappimcon {
    display: flex;
    flex-direction: column;
    position: relative;
    align-self: flex-start;
    width: 100%;
}

.hw-os .os-sec14 .premiumappfir,
.hw-os .os-sec14 .premiumappsec,
.hw-os .os-sec14 .premiumappthi {
    flex-shrink: 0;
    width: 137.8125vw;
    height: 7.8125vw;
    filter: drop-shadow(0 3.75px 7.5px rgba(0, 0, 0, 0.25));
}

.hw-os .os-sec14 .preminumappimcon img.blur-up {
    filter: blur(0);
}

.hw-os .os-sec14 .premiumappthi:nth-child(1),
.hw-os .os-sec14 .premiumappfir:nth-child(1) {
    margin: 0 2.1875vw 0 0;
}

.hw-os .os-sec14 .premiumappsec:nth-child(2) {
    margin: 0 0 0 2.1875vw;
}

.hw-os .os-sec14 .promiumappfircon,
.hw-os .os-sec14 .premiumappseccon,
.hw-os .os-sec14 .premiumappthicon {
    will-change: transform;
    display: flex;
}

.hw-os .os-sec14 .premiumappseccon {
    justify-content: flex-end;
}

.hw-os .os-sec14 .promiumappfircon,
.hw-os .os-sec14 .premiumappthicon {
    margin: 0 0 0 0.9375vw;
}

.hw-os .os-sec14 .premiumappseccon {
    margin: 3.125vw 0;
}

/* section 14 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec14 {
        padding: 0 0 17.14285714vw 0;
    }

    .hw-os .os-sec14 .preminumappsut {
        margin: 2.28571428vw auto 2vw;
        font-size: 2.28571428vw;
        text-align: center;
    }

    .hw-os .os-sec14 .preminumappmat {
        width: 35.71428571vw;
        margin: 0 auto 4.57142857vw;
        font-size: 6.85714285vw;
    }

    .hw-os .os-sec14 .preminumtxtcon {
        width: 64.28571428vw;
        margin: 0 0 8.57142857vw 0;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec14 .premiumappfir,
    .hw-os .os-sec14 .premiumappsec,
    .hw-os .os-sec14 .premiumappthi {
        width: 189vw;
        height: 10.71428571vw;
        filter: drop-shadow(0px 0.26785714vw 0.53571428vw rgba(0, 0, 0, 0.25));
    }

    .hw-os .os-sec14 .premiumappthi:nth-child(1), 
    .hw-os .os-sec14 .premiumappfir:nth-child(1) {
        margin: 0 3vw 0 0;
    }

    .hw-os .os-sec14 .premiumappsec:nth-child(2) {
        margin: 0 0 0 3vw;
    }

    .hw-os .os-sec14 .promiumappfircon, 
    .hw-os .os-sec14 .premiumappthicon {
        margin: 0 0 0 1.92857142vw;
    }

    .hw-os .os-sec14 .premiumappseccon {
        margin: 4.28571428vw 0;
    }
}

/* section 14 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec14 {
        margin: -1px 0 0 0;
        padding: 0 0 27.77777777vw 0;
    }

    .hw-os .os-sec14 .preminumappsut {
        width: 27.77777777vw;
        margin: 3.05555555vw auto 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec14 .preminumappmat {
        width: 55.55555555vw;
        margin: 3.88888888vw auto 8.33333333vw;
        font-size: 13.33333333vw;
    }

    .hw-os .os-sec14 .preminumtxtcon {
        width: 82.22222222vw;
        margin: 0 0 16.66666666vw 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec14 .premiumappfir,
    .hw-os .os-sec14 .premiumappsec,
    .hw-os .os-sec14 .premiumappthi {
        width: 367.5vw;
        height: 20.83333333vw;
    }

    .hw-os .os-sec14 .premiumappthi:nth-child(1), 
    .hw-os .os-sec14 .premiumappfir:nth-child(1) {
        margin: 0 5.8333333333vw 0 0;
    }

    .hw-os .os-sec14 .premiumappsec:nth-child(2) {
        margin: 0 0 0 5.8333333333vw;
    }

    .hw-os .os-sec14 .premiumappcircle {
        height: 25vw;
    }

    .hw-os .os-sec14 .premiumappseccon {
        margin: 8.33333333333vw 0;
    }
}

/* section 15 pc */
.hw-os .os-sec15 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-os .os-sec15 .havscreenswicon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hw-os .os-sec15 .havscreentxtcon {
    position: relative;
}

.hw-os .os-sec15 .havscreenmat {
    width: 33.95833333vw;
    margin: 0 auto;
    color: #000;
    font-size: 2.91666666vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec15 .havscreendes {
    width: 29.27083333vw;
    margin: 1.66666666vw auto 3.3333333333vw;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec15 .havscreenswiper {
    overflow: hidden;
    width: 48.90625vw;
    z-index: 2;
}

.hw-os .os-sec15 .havscreenav li p {
    margin: 0 1.25vw;
    color: #b5b5b5;
    font-size: 1.04166666vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: .5s ease-out;
}

.hw-os .os-sec15.will-change .havscreenav li p {
    will-change: color;
}

.hw-os .os-sec15 .havscreenav li.active p {
    color: #fff;
    font-weight: 500;
}

.hw-os .os-sec15 .havscreenav li:not(:last-child) {
    margin: 0 0.41666666vw 0 0;
}

.hw-os .os-sec15 .havscreennavcon {
    position: relative;
    display: flex;
    padding: 0.625vw 0;
}

.hw-os .os-sec15 .havscreenav {
    position: relative;
    display: flex;
    z-index: 2;
}

.hw-os .os-sec15 .havoutscreencon {
    position: relative;
    margin: 3.33333333vw 0 0 0;
    padding: 0.41666666vw;
    background: #eaeaea;
    box-shadow: 0vw 0.15625vw 0.41666666vw rgba(0, 0, 0, 0.1) inset;
    border-radius: 5.20833333vw;
}   

.hw-os .os-sec15 .havmovesquare {
    position: absolute;
    top: 50%;
    width: 6.66666666vw;
    height: 100%;
    background: linear-gradient(134.66deg, #b9dcff 0%, #7a8fd1 100%);
    transform: translateY(-50%);
    border-radius: 9999px;
    z-index: 0;
    transition: width 0.5s linear, transform .5s ease-out;
}

/* section 15 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec15 .havscreenmat {
        width: 64.28571428vw;
        font-size: 4.57142857vw;
    }

    .hw-os .os-sec15 .havscreendes {
        width: 64.28571428vw;
        margin: 2.85714285vw auto 5.71428571vw;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec15 .havscreenswiper {
        width: 67.071428571vw;
    }

    .hw-os .os-sec15 .havoutscreencon {
        margin: 5.71428571vw 0 0 0;
    }

    .hw-os .os-sec15 .havscreenav li p {
        margin: 0 2.85714285vw;
        font-size: 2.28571428vw;
    }

    .hw-os .os-sec15 .havscreennavcon {
        padding: 1.92857142vw 0;
    }

    .hw-os .os-sec15 .havoutscreencon {
        padding: 0.71428571vw;
        box-shadow: 0vw 0.21428571vw 0.57142857vw rgba(0, 0, 0, 0.1) inset;
    }

    .hw-os .os-sec15 .havmovesquare {
        width: 14.85714285vw;
    }

    .hw-os .os-sec15 .havscreenav li:not(:last-child) {
        margin: 0;
    }
}

/* section 15 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec15 .havscreenmat {
        width: 82.22222222vw;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .os-sec15 .havscreendes {
        width: 82.22222222vw;
        margin: 5.55555555vw 0 11.11111111vw 0;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-os .os-sec15 .havscreenswiper {
        width: 82.2222222222vw;
    }

    .hw-os .os-sec15 .havscreenav li:not(:last-child) {
        margin: 0;
    }

    .hw-os .os-sec15 .havscreenav li {
        flex-shrink: 0;
    }

    .hw-os .os-sec15 .havscreenav li p {
        margin: 0 5.55555555vw;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec15 .havscreennavcon {
        padding: 3.75vw 0;
    }

    .hw-os .os-sec15 .havmovesquare {
        width: 28.88888888vw;
        background: linear-gradient(134.66deg,#b9dcff 0%,#7a8fd1 100%);
        border-radius: 13.88888888vw;
    }

    .hw-os .os-sec15 .havoutscreencon {
        margin: 11.11111111vw 0 0 0;
        padding: 1.38888888vw;
        border-radius: 13.88888888vw;
        box-shadow: 0vw 0.41666666vw 1.11111111vw rgba(0, 0, 0, 0.1) inset;
    }
}


/* ostitlemodal  */
.hw-os .ostitlemodal {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(244, 244, 246, 0);
    backdrop-filter: blur(0);
    z-index: -1;
    transition: -webkit-backdrop-filter 0.6s cubic-bezier(0.65, 0.05, 0.36, 1), backdrop-filter 0.6s cubic-bezier(0.65, 0.05, 0.36, 1), background-color 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.hw-os .osoutcon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.hw-os .ostitlemodal.level {
    z-index: 9999;
    backdrop-filter: blur(2.60416666vw);
    background-color: rgba(244, 244, 246, 0.9);
}

.hw-os .ostitlemodal .ostitranel {
    transform: translate3d(0, 100vh, 0);
    transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
    will-change: transform;
}

.hw-os .ostitlemodal .ostitranel.active {
    transform: translate3d(0,0,0);
}

.hw-os .ostitlemodal .ostinnermodal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 81.25vw;
    margin: 6.25vw auto 6.25vw;
    background: #ffffff;
    border-radius: 2.08333333vw;
}

.hw-os .ostitlemodal .ostisubt {
    width: 10.41666666vw;
    margin: 2.5vw auto 1.25vw;
    color: #a3c1ef;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.hw-os .ostitlemodal .ostimat {
    width: 41.66666666vw;
    margin: 0 auto;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .ostitlemodal .ostides {
    width: 56.22916666vw;
    margin: 2.08333333vw auto 3.33333333vw;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .ostitlemodal .ostiswipercon {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 58.33333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .ostitlemodal .ostiswipercon>picture {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.hw-os .ostitlemodal .ostiswiper {
    overflow: hidden;
    position: absolute;
    top: 0.67708333333vw;
    left: 50%;
    width: 45.5729166666vw;
    height: 30.52083333333333vw;
    transform: translateX(-50%);
    z-index: -1;
}

.hw-os .ostitlemodal .ostiswiper .povideo {
    display: flex;
    align-items: center;
}

.hw-os .ostitlemodal .osecmodalim {
    position: relative;
    overflow: hidden;
    width: 58.33333333vw;
    height: 32.29166666vw;
    margin: 0 0 6.25vw 0;
    transform: translate3d(0,0,0) rotate(0deg);
    border-radius: 2.08333333vw;
}

.hw-os .ostitlemodal .osecmodalim .povideo {
    overflow: hidden;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-os .ostitlemodal .oscondragbtn {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    right: 1.66666666vw;
    bottom: 1.66666666vw;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(2.5vw);
    -webkit-backdrop-filter: blur(2.5vw);
    transition: 0.3s ease;
    z-index: 2;
}

@media (any-hover: hover) {
    .hw-os .ostitlemodal .oscondragbtn:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.hw-os .ostitlemodal .oscondragbtn img {
    display: none;
}

.hw-os .ostitlemodal .oscondragbtn img.btnshow {
    display: block;
}

.hw-os .ostitlemodal .osthrmodalim {
    overflow: hidden;
    width: 58.33333333vw;
    margin: 0 0 6.25vw 0;
    border-radius: 2.08333333vw;
}

.hw-os .ostitlemodal .ostinav li:not(:last-child) {
    margin: 0 0.41666666vw 0 0;
}

.hw-os .ostitlemodal .ostinavcon {
    margin: 3.33333333vw 0 6.25vw 0; 
    padding: 0.41666666vw;
    background:#f8f8f8;
    border-radius: 41.66666666vw;
    box-shadow: 0vw 0.15625vw 0.41666666vw rgba(0, 0, 0, 0.1) inset;
}

.hw-os .ostitlemodal .ostinav {
    flex-shrink: 0;
    position: relative;
    display: flex;
    z-index: 9;
}

.hw-os .ostitlemodal .ostinav p {
    padding: 0 1.25vw;
    color: #a7a7a7;
    font-size: 1.04166666vw;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: .5s ease-out;
}

.hw-os .ostitlemodal .ostinav .active p {
    color: #fff;
    font-weight: 500;
}

.hw-os .ostitlemodal .ostibsquacon {
    position: relative;
    padding: 0.625vw 0;
}

.hw-os .ostitlemodal .ostimovesqa {
    position: absolute;
    left: 0;
    top: 50%;
    width: 6.6666666666vw;
    height: 100%;
    background: linear-gradient(135deg,#b9dcff 0%,#7a8fd1 100%);
    border-radius: 41.66666666vw;
    transform: translate(0, -50%);
    z-index: 0;
    transition: width 0.5s linear, transform .5s ease-out;
}

.hw-os .ostitlemodal .ostioutcon {
    position: sticky;
    top: 7.91666666vw;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    margin: 1.66666666vw 1.66666666vw 0 0;
    cursor: pointer;
    transition: 0.3s ease;
    opacity: 0.8;
    z-index: 999;
}

.hw-os .ostitlemodal .osticlosebtn {
    overflow: hidden;
    width: 2.08333333vw;
    height: 2.08333333vw;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.6);
    backdrop-filter: blur(8px);
    transition: 0.3s ease;
}

.hw-os .ostitlemodal .ostiswiper .povideo {
    overflow: hidden;
    background-color: #000;
}

.hw-os .ostitlemodal .ostiswiper .swiper-slide {
    will-change: transform;
}

.hw-os .ostitlemodal .ostiswiper .povideo video {
    transform: translate3d(0,0,0) rotate(0deg);
} 

@media (any-hover: hover) {
    .hw-os .ostitlemodal .osticlosebtn:hover {
        background-color: rgba(128, 128, 128, 0.4);
    }
}


/* section 16 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .ostitlemodal .osticlosebtn {
        width: 5.71428571vw;
        height: 5.71428571vw;
    }

    .hw-os .ostitlemodal .ostioutcon {
        top: 9.4285714285vw;
        margin: 2.28571428vw 2.28571428vw 0 0;
    }

    .hw-os .ostitlemodal .ostinnermodal {
        width: 82.28571428vw;
        margin: 7.14285714285vw auto;
        border-radius: 2.8571428571vw;
    }

    .hw-os .ostitlemodal .ostisubt {
        width: 28.57142857vw;
        margin: -0.85714285vw auto 2vw;
        font-size: 2.28571428vw;
        font-weight: 500;
    }

    .hw-os .ostitlemodal .ostimat {
        width: 57.14285714vw;
        font-size: 4.57142857vw;
    }

    .hw-os .ostitlemodal .ostides {
        width: 45.57142857vw;
        margin: 2.85714285vw auto 5.71428571vw;
        font-size: 2.28571428vw;
        font-weight: 500;
    }

    .hw-os .ostitlemodal .ostiswipercon {
        width: 63.57142857vw;
    }

    .hw-os .ostitlemodal .ostiswiper {
        top: 0.71428571428vw;
        width: 49.642857142vw;
        height: 33.2857142857vw;
    }

    .hw-os .ostitlemodal .ostinav p {
        padding: 0 2.85714285vw;
        font-size: 2.28571428vw;
    }

    .hw-os .ostitlemodal .ostinav li {
        flex-shrink: 0;
    }

    .hw-os .ostitlemodal .oststibtn {
        width: auto;
        margin: 4.57142857vw auto 4.78571428vw;
    }

    .hw-os .ostitlemodal .ostinavcon {
        position: relative;
        margin: 0;
        padding: 0.71428571vw;
    }

    .hw-os .ostitlemodal .ostibsquacon {
        display: flex;
        padding: 1.9285714285vw 0;
        overflow-x: auto;
    }

    .hw-os .ostitlemodal .ostinav li:not(:last-child) {
        margin: 0 1.71428571vw 0 0;
    }

    .hw-os .ostitlemodal .ostibsquacon::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .hw-os .ostitlemodal .osthrmodalim {
        width: 64.28571428vw;
        border-radius: 2.85714285vw;
    }

    .hw-os .ostitlemodal .ostilarrow,
    .hw-os .ostitlemodal .ostirarrow {
        position: absolute;
        right: 0.97222222vw;
        top: 50%;
        width: 6.57142857vw;
        height: 6.57142857vw;
        transform: translateY(-50%);
        border-radius: 50%;
        z-index: 12;
        cursor: pointer;
    }

    .hw-os .ostitlemodal .ostilarrow {
        display: none;
        transform: translateY(-50%) rotate(180deg);
        left: 1.3888888888vw;
    }

    .hw-os .ostitlemodal .ostimovesqa {
        width: 14.8571428571vw;
    }

    .hw-os .osmodalsec .ostides {
        width: 58.42857142vw;
    }

    .hw-os .ostitlemodal .osecmodalim {
        width: 64.28571428vw;
        height: 46.42857142vw;
        margin: 0 0 7.14285714vw 0;
    }

    .hw-os .ostitlemodal .oscondragbtn {
        width: 5.71428571vw;
        height: 5.71428571vw;
        right: 2.85714285vw;
        bottom: 2.85714285vw;
    }
}

/* section 16 mob */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .ostitlemodal .ostinnermodal {
        width: 95.55555555vw;
        margin: 8.88888888vw auto;
        border-radius: 5.55555555vw;
    }

    .hw-os .ostitlemodal .ostitxtcon {
        align-self: flex-start;
        margin: -3.333333333333333vw 0 0 7.36111111vw;
    }

    .hw-os .ostitlemodal .ostisubt {
        width: 64.44444444vw;
        margin: 0;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-os .ostitlemodal .ostimat {
        width: 70.66666666vw;
        margin: 4.4444444444vw 0 8.8888888888vw 0;
        font-size: 11.11111111vw;
        text-align: left;
    }

    .hw-os .ostitlemodal .ostides {
        width: 80.97222222vw;
        margin: 0 0 13.8888888888vw 0;
        font-size: 4.44444444vw;
        text-align: left;
    }

    .hw-os .ostitlemodal .osticlosebtn {
        width: 11.11111111vw;
        height: 11.11111111vw;
        margin: 3.33333333vw 3.33333333vw 0 0;
    }

    .hw-os .ostitlemodal .ostiswipercon {
        width: 80.97222222vw;
    }

    .hw-os .ostitlemodal .ostiswiper {
        top: 0.833333333333vw;
        width: 63.1944444444vw;
        height: 42.638888888vw;
    }

    .hw-os .ostitlemodal .ostiswiper video {
        height: 42.222222222vw;
    }

    .hw-os .ostitlemodal .oststibtn {
        overflow: hidden;
        position: relative;
        margin: 5.27777777777vw auto 11.11111111vw;
        border-radius: 138.88888888vw;
    }

    .hw-os .ostitlemodal .ostinavcon {
        position: relative;
        display: flex;
        width: 80.97222222vw;
        margin: 0;
        padding: 1.38888888vw ;
        box-shadow: 0vw 0.41666666vw 1.11111111vw rgba(0, 0, 0, 0.1) inset;
        z-index: 1;
    }

    .hw-os .ostitlemodal .oscondragbtn {
        width: 11.11111111111vw;
        height: 11.11111111111vw;
        right: 5.55555555555vw;
        bottom: 5.55555555555vw;
    }

    .hw-os .ostitlemodal .ostioutcon {
        top: 8.3333333333vw;
        margin: 0;
    }

    .hw-os .ostitlemodal .ostinav p {
        padding: 0 5.55555555vw;
        font-size: 4.44444444vw;
    }

    .hw-os .ostitlemodal .ostinav li {
        flex-shrink: 0;
    }

    .hw-os .ostitlemodal .ostinav li:not(:last-child) {
        margin: 0;
    }

    .hw-os .ostitlemodal .ostimovesqa {
        width: 28.88888888vw;
    }

    .hw-os .ostitlemodal .ostibsquacon {
        display: flex;
        flex-shrink: 0;
        overflow-x: auto;
        width: 100%;
        padding: 3.75vw 0;
        border-radius: 999px;
        z-index: 5;
    }

    .hw-os .ostitlemodal .ostilarrow,
    .hw-os .ostitlemodal .ostirarrow {
        position: absolute;
        right: 0.97222222vw;
        top: 50%;
        width: 12.77777777vw;
        height: 12.77777777vw;
        transform: translateY(-50%);
        border-radius: 50%;
        z-index: 9;
        will-change: transform, opacity;
    }

    .hw-os .ostitlemodal .ostilarrow {
        display: none;
        transform: translateY(-50%) rotate(180deg);
        left: 1.3888888888vw;
    }

    .hw-os .ostitlemodal .ostishadow {
        position: absolute;
        left: 1.3888888888vw;
        top: 50%;
        width: calc( 100% - 2.7777777777vw );
        height: calc( 100% - 2.7777777777vw );
        transform: translateY(-50%);
        border-radius: 999px;
        background: linear-gradient(90deg, transparent 13%, transparent 30%, transparent 80%, rgb(248, 248, 248) 89%);
        z-index: 8;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .hw-os .ostitlemodal .ostibsquacon::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .hw-os .ostitlemodal .osecmodalim {
        width: 80.97222222vw;
        height: 80.97222222vw;
        margin: 0 0 11.11111111vw 0;
        border-radius: 5.55555555vw;
    }

    .hw-os .ostitlemodal .osthrmodalim {
        width: 80.97222222vw;
        margin: 0 0 11.11111111vw 0;
        border-radius: 5.55555555vw;
    }
}

.hw-os .os-sec16 {
    overflow: hidden;
    position: relative;
    width: 67.5vw;
    height: 26.04166666vw;
    margin: 12.5vw auto 0;
    border-radius: 2.08333333vw;
}

.hw-os .os-sec16 .manoutconndevicetxt {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 3.125vw;
    left: 50%;
    transform: translateX(-50%);
}

.hw-os .os-sec16 .manoumat {
    color: #fff;
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.hw-os .os-sec16 .manoutdes {
    width: 37.5vw;
    margin: 1.25vw auto 1.666666666666vw;
    color: #999;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.hw-os .os-sec16 .manouthre {
    display: flex;
    align-items: center;
    color: #1F69FE;
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.6;
    transition: 0.3s ease-out;
}

.hw-os .os-sec16 .manouthre img {
    width: 0.625vw;
    margin: 0 0 0 0.15625vw;
    transition: 0.3s ease-out;
}

@media (any-hover: hover) {
    .hw-os .os-sec16 .manouthre:hover {
        opacity: 0.8;
    }
    
    .hw-os .os-sec16 .manouthre:hover img {
        transform: translateX(4px);
    }
}

/* section 16 fold  */
@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec16 {
        width: 82.28571428vw;
        height: 35.71428571vw;
        margin: 17.14285714vw auto 0;
        border-radius: 2.85714285vw;    
    }

    .hw-os .os-sec16 .manoutconndevicetxt {
        top: 4.28571428571vw;
    }

    .hw-os .os-sec16 .manoumat {
        font-size: 3.42857142vw;
    }

    .hw-os .os-sec16 .manoutdes {
        width: 51.42857142vw;
        margin: 1.71428571vw 0 2.2857142857vw 0;
        font-size: 1.57142857vw;
    }

    .hw-os .os-sec16 .manouthre {
        font-size: 1.28571428vw;
    }

    .hw-os .os-sec16 .manouthre img {
        width: 0.85714285vw;
        margin: 0 0 0 0.21428571vw;
    }
}

/* section 16 mob  */
@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec16 {
        width: 82.22222222vw;
        height: 111.11111111vw;
        margin: 27.77777777vw auto 0;
        border-radius: 5.55555555vw;
    }

    .hw-os .os-sec16 .manoutconndevicetxt {
        top: 8.33333333vw;
    }

    .hw-os .os-sec16 .manoumat {
        font-size: 8.88888888vw;
    }

    .hw-os .os-sec16 .manoutdes {
        width: 72.22222222vw;
        margin: 4.444444444444444vw 0 5.55555555555vw 0;
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec16 .manouthre {
        font-size: 4.44444444vw;
    }

    .hw-os .os-sec16 .manouthre img {
        width: 3.88888888vw;
        margin: 0 0 0 1.11111111vw;
    }
}

.hw-os .os-sec14 .premiumappfir, 
.hw-os .os-sec14 .premiumappsec, 
.hw-os .os-sec14 .premiumappthi {
    width: 157.8125vw;
    height: 7.8125vw;
}

@media screen and (min-aspect-ratio:7/10) and (max-aspect-ratio: 11/10) {
    .hw-os .os-sec14 .premiumappfir, 
    .hw-os .os-sec14 .premiumappsec, 
    .hw-os .os-sec14 .premiumappthi {
        width: 216.428571428vw;
        height: 10.71428571428vw;
    }
}

@media screen and (max-aspect-ratio:7/10) {
    .hw-os .os-sec14 .premiumappfir, 
    .hw-os .os-sec14 .premiumappsec, 
    .hw-os .os-sec14 .premiumappthi {
        width: 420.833333333vw;
        height: 20.833333333vw;
    }
}