html.noscroll {
    overflow: hidden;
}

.harden-main {
    font-weight: 400;
    line-height: 1.6;
    position: relative;
    background-color: #000;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

.harden-main * {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

.harden-main sup {
    font-size: 0.6em;
}

.harden-main sup.yes-click {
    cursor: pointer;
}

.harden-main a {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

.harden-main ul,
.harden-main ol {
    list-style: none;
    list-style-image: none;
}

.harden-main button {
    border: 0;
    font-size: 0;
    line-height: 0;
}

.harden-main .nr {
    white-space: nowrap;
    display: inline-block;
}


.harden-main img,
.harden-main picture {
    border: 0;
    width: 100%;
    display: block;
}

.harden-main svg {
    width: 100%;
    display: block;
    overflow: visible;
}

.harden-main video {
    border: 0;
    width: 100%;
    display: block;
    object-fit: cover;
}

.harden-main canvas {
    display: block;
}

.harden-main .is-ucwx {
    display: none;
}

.harden-main .blur-up {
    filter: blur(20px);
    -webkit-filter: blur(20px);
    transition: filter 0.2s;
    -webkit-transition: filter 0.2s;
    -moz-transition: filter 0.2s;
    will-change: filter;
}

.harden-main .blur-up.lazyloaded {
    filter: blur(0);
    -webkit-filter: blur(0);
}

.harden-main br {
    line-height: 0;
}

.harden-main .show-mob,
.harden-main .show-mob-inline,
.harden-main .show-fold,
.harden-main .show-fold-inline {
    display: none;
}

.harden-main .show-pc {
    display: block;
}

.harden-main .show-pc-inline {
    display: inline-block;
}

.harden-main .will-change .will-tfoc {
    will-change: transform, opacity;
}

.harden-main .will-change .will-tf {
    will-change: transform;
}

.harden-main .will-change .will-oc {
    will-change: opacity;
}

.harden-main .sub-title {
    color: #fff;
    font-size: 3.333333vw;
    font-weight: 500;
    line-height: 1.25;
}

.harden-main .desc-text {
    color: #86868A;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.6;
}

.harden-main .desc-text .white-color {
    color: #fff;
}


/* title style start */
.harden-main .big-title-wrap {
    --bgx: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.1s, opacity 0.1s;
    -webkit-transition: transform 0.1s, opacity 0.1s;
    -moz-transition: transform 0.1s, opacity 0.1s;
    position: relative;
    z-index: 1;
}


.harden-main .big-title {
    display: inline-block;
    color: #95AFE1;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.25;
    -webkit-background-clip: text;
    background-clip: text;
}

.harden-main .title-bg-color {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(225.36deg, #4975bc 0%, #bdcef4 23.71%, #3660a5 37.93%, #ffffff 51.53%, #3560a5 66.75%, #9fc2fa 83.67%, #3765af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 300% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-position-x: var(--bgx);
}

.harden-main .title-bg-ani.animated {
    --bgx: 100%;
}

.harden-main .title-bg-ani.animated .title-bg-color {
    transition: background-position-x 1.2s cubic-bezier(0, 0, 0.2, 1);
    -webkit-transition: background-position-x 1.2s cubic-bezier(0, 0, 0.2, 1);
    -moz-transition: background-position-x 1.2s cubic-bezier(0, 0, 0.2, 1);
}

/* title style end */

/* learn-btn start */
.harden-main .shine-button {
    margin-top: 2.5vw;
    display: flex;
    justify-content: center;
}

.harden-main .shine-button .shine-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0.8333334vw 0;
    border-radius: 999px;
    background-color: rgba(245, 245, 247, 0.2);
}

@media (any-hover:hover) {
    .harden-main .shine-button .shine-wrapper:hover {
        cursor: pointer;
    }
}


.harden-main .shine-button .shine-item,
.harden-main .shine-button .shine-inside {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 999px;
}

.harden-main .shine-button .shine-item {
    pointer-events: none;
}

.harden-main .shine-button .shine-item::before,
.harden-main .shine-button .shine-item::after {
    display: block;
    content: "";
}

.harden-main .shine-button .shine-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 60%;
    height: 4.6875vw;
    background-color: #ebebeb;
    transition: width 0.2s, transform 0.2s;
    transform: translate3d(33.333333%, -50%, 0);
    -webkit-transform: translate3d(33.333333%, -50%, 0);
    -moz-transform: translate3d(33.333333%, -50%, 0);
    will-change: width, transform;
    filter: blur(10px);
}

.harden-main .shine-button .shine-item::after {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background-color: #000;
}

.harden-main .shine-button .shine-inside {
    z-index: 2;
}

.harden-main .shine-button .shine-inside::before,
.harden-main .shine-button .shine-inside::after {
    position: absolute;
    display: block;
    content: "";
    border-radius: 100%;
    background-color: #ebebeb;
    filter: blur(24px);
    will-change: width, transform;
}

.harden-main .shine-button .shine-top-bottom::before,
.harden-main .shine-button .shine-top-bottom::after {
    left: 0;
    width: 60%;
    height: 0.9375vw;
    transition: width 0.2s, transform 0.2s;
    transform: translate3d(33.333333%, 0, 0);
}

.harden-main .shine-button .shine-top-bottom::before {
    top: -0.9375vw;
}

.harden-main .shine-button .shine-top-bottom::after {
    bottom: -0.9375vw;
}

.harden-main .shine-button .shine-left-right {
    transition: opacity 0.2s;
    opacity: 0;
}

.harden-main .shine-button .shine-left-right::before,
.harden-main .shine-button .shine-left-right::after {
    top: 50%;
    width: 1.770833vw;
    height: 5.625vw;
    transform: translateY(-50%);
}

.harden-main .shine-button .shine-left-right::before {
    left: -1.666667vw;
    opacity: var(--shine-opacity-left, 0);
}

.harden-main .shine-button .shine-left-right::after {
    right: -1.666667vw;
    opacity: var(--shine-opacity-right, 0);
}

.harden-main .shine-button .mouse-enter .shine-item::before {
    width: 4.166667vw;
    transform: translate3d(calc(var(--shine-x, 0px) - 50%), -50%, 0);
}

.harden-main .shine-button .mouse-enter .shine-top-bottom::before,
.harden-main .shine-button .mouse-enter .shine-top-bottom::after {
    width: 4.166667vw;
    transform: translate3d(calc(var(--shine-x, 0px) - 50%), 0, 0);
}

.harden-main .shine-button .mouse-enter .shine-left-right {
    opacity: 1;
}

.harden-main .shine-button .no-transition .shine-item::before,
.harden-main .shine-button .no-transition .shine-top-bottom::before,
.harden-main .shine-button .no-transition .shine-top-bottom::after {
    transition: none;
}

.harden-main .shine-button .button-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-right: 0.833333vw;
    padding-left: 1.666667vw;
}

.harden-main .shine-button .button-copy {
    color: #fff;
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1.25;
}

.harden-main .shine-button .button-icon {
    margin-left: 0.833333vw;
}

.harden-main .shine-button .button-icon svg {
    width: 1.666667vw;
    height: 1.666667vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .shine-button {
        margin-top: 4.571428571428571vw;
    }

    .harden-main .shine-button .shine-wrapper {
        padding: 1.714286vw 0;
    }

    .harden-main .shine-button .button-item {
        padding-right: 1.714286vw;
        padding-left: 3.428571vw;
    }

    .harden-main .shine-button .shine-item::before {
        height: 8.714286vw;
    }

    .harden-main .shine-button .shine-top-bottom::before,
    .harden-main .shine-button .shine-top-bottom::after {
        height: 2.714286vw;
        width: 40%;
        transform: translate3d(70%, 0, 0);
    }

    .harden-main .shine-button .shine-top-bottom::before {
        top: -1.714286vw;
    }

    .harden-main .shine-button .shine-top-bottom::after {
        bottom: -1.714286vw;
    }

    .harden-main .shine-button .button-copy {
        font-size: 2vw;
    }

    .harden-main .shine-button .button-icon {
        margin-left: 2.285714vw;
    }

    .harden-main .shine-button .button-icon svg {
        width: 3.428571vw;
        height: 3.428571vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .shine-button {
        margin-top: 8.888888888888889vw;
    }

    .harden-main .shine-button .shine-wrapper {
        padding: 3.3333333333333334vw 0;
    }

    .harden-main .shine-button .button-item {
        padding-right: 3.333333vw;
        padding-left: 6.666667vw;
    }

    .harden-main .shine-button .shine-item::before {
        height: 16.944444vw;
    }

    .harden-main .shine-button .shine-top-bottom::before,
    .harden-main .shine-button .shine-top-bottom::after {
        height: 5.333333vw;
        width: 32%;
        transform: translate(100%, 0);
    }

    .harden-main .shine-button .shine-top-bottom::before {
        top: -3.333333vw;
    }

    .harden-main .shine-button .shine-top-bottom::after {
        bottom: -3.333333vw;
    }

    .harden-main .shine-button .button-copy {
        font-size: 3.888889vw;
    }

    .harden-main .shine-button .button-icon {
        margin-left: 3.333333vw;
    }

    .harden-main .shine-button .button-icon svg {
        width: 6.666667vw;
        height: 6.666667vw;
    }
}

/* learn-btn end */

/* text move start */
.harden-main .text-move {
    opacity: 0;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    transition: all 1s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -webkit-transition: all 1s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -moz-transition: all 1s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}

.harden-main .text-move.animated {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
}

/* text move end */

/* kv-start */
.harden-main .harden-kv {
    width: 100%;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

.harden-main .harden-kv .kv-video {
    position: relative;
}

.harden-main .harden-kv .kv-video video {
    width: 100vw;
    height: 50vw;
}

.harden-main .harden-kv .product-name {
    width: 26.25vw;
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 16.40625vw;
    left: 10.15625vw;
    transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -webkit-transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -moz-transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    text-align: center;
    pointer-events: none;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
}

.harden-main .harden-kv.animated .product-name {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
}

.harden-main .harden-kv .product-logo {
    width: 26.25vw;
    margin: 0 auto;
}

.harden-main .harden-kv .slogan-text {
    color: #000;
    font-size: 1.875vw;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 1.041667vw;
    letter-spacing: 0.520833vw;
    text-indent: 0.520833vw;
    transform: translate3d(0, 0, 0) rotate(0deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    -moz-transform: translate3d(0, 0, 0) rotate(0deg);
}

.harden-main .harden-kv .play-video {
    color: #000;
    font-size: 1.041667vw;
    line-height: 1.6;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.291667vw;
    transform: translate3d(0, 0, 0) rotate(0deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    -moz-transform: translate3d(0, 0, 0) rotate(0deg);
}

.harden-main .harden-kv .play-video img {
    width: 1.666667vw;
    margin-left: 0.416667vw;
}

.harden-main .harden-kv .section-pic-center * {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

.harden-main .harden-kv .section-pic-center {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family: "Manrope", Arial, Helvetica Neue, Helvetica, sans-serif;
    padding: 4.166667vw 0 6.25vw;
    opacity: 0;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -webkit-transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    -moz-transition: all 2.2s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    pointer-events: none;
}

.harden-main .harden-kv.animated .section-pic-center {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    pointer-events: all;
}

.harden-main .harden-kv .section-kv-pic {
    color: #000;
    font-size: 1.458333vw;
    font-weight: 400;
    line-height: 1.25;
}

.section-kv-pic .price_btn {
    color: inherit;
}

.harden-main .harden-kv .section-kv-pic span {
    font-size: 0.677083vw;
    font-weight: 400;
}

.harden-main .harden-kv .section-slogan-botton {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1428571429;
    margin-top: 24px;
    padding: 12px 20px;
    text-align: center;
    display: inline-block;
    background-color: #000;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    transition: opacity .3s cubic-bezier(0, 0, .5, 1);
    -webkit-transition: opacity .3s cubic-bezier(0, 0, .5, 1);
    -moz-transition: opacity .3s cubic-bezier(0, 0, .5, 1);
}

.harden-main .harden-kv .section-slogan-botton:hover {
    opacity: .8;
}



/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-kv .kv-video video {
        height: 67.85714285714286vw;
    }

    .harden-main .harden-kv .product-name {
        position: static;
        margin: 0 auto;
        width: 42.071429vw;
        padding: 8.571429vw 0 5.714285714285714vw;
    }

    .harden-main .harden-kv .section-pic-center {
        padding: 0 0 11.42857142857143vw;
    }

    .harden-main .harden-kv .product-logo {
        width: 42.071429vw;
    }

    .harden-main .harden-kv .slogan-text {
        font-size: 2.785714vw;
        margin-top: 1.571428571428571vw;
        letter-spacing: 0.7142857142857143vw;
        text-indent: 0.7142857142857143vw;
    }

    .harden-main .harden-kv .play-video {
        font-size: 2vw;
        margin-top: 4vw;
    }

    .harden-main .harden-kv .play-video img {
        width: 3.428571vw;
        margin-left: 0.714286vw;
    }

    .harden-main .harden-kv .section-kv-pic {
        font-size: 2.857143vw;
    }

    .harden-main .harden-kv .section-kv-pic span {
        font-size: 1.857142857142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-kv .product-name {
        opacity: 1;
        position: static;
        width: 79.166667vw;
        margin: 0 auto;
        padding: 11.1111111112vw 0 11.111111vw;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        pointer-events: all;
    }

    .harden-main .harden-kv .product-logo {
        width: 79.166667vw;
    }

    .harden-main .harden-kv .slogan-text {
        font-size: 5.277778vw;
        margin-top: 3.055556vw;
        letter-spacing: 1.111111vw;
        text-indent: 1.11111111vw;
    }

    .harden-main .harden-kv .play-video {
        font-size: 3.888889vw;
        margin-top: 7.777778vw;
    }

    .harden-main .harden-kv .play-video img {
        width: 6.666667vw;
        margin-left: 2.222222vw;
    }

    .harden-main .harden-kv .section-pic-center {
        padding: 0 0 22.22222222222222vw;
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        pointer-events: all;
    }

    .harden-main .harden-kv .section-kv-pic {
        font-size: 5.55555556vw;
    }

    .harden-main .harden-kv .section-kv-pic span {
        font-size: 3.611111111111111vw;
    }

}

/* kv-end */

/* s2-start */
.harden-main .harden-s2 {
    padding-top: 10.416667vw;
    overflow: hidden;
}

.harden-main .harden-s2 .s2-preamble {
    position: relative;
    z-index: 1;
}

.harden-main .harden-s2 .preamble-desc {
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    transition: opacity 1s linear, transform 1s cubic-bezier(0, 0, 0.2, 1);
    -webkit-transition: opacity 1s linear, transform 1s cubic-bezier(0, 0, 0.2, 1);
    -moz-transition: opacity 1s linear, transform 1s cubic-bezier(0, 0, 0.2, 1);
}

.harden-main .harden-s2 .preamble-desc.animated {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);

}

.harden-main .harden-s2 .preamble-txt {
    display: inline-block;
    color: #95AFE1;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.6;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(225.36deg, #4975bc 0%, #bdcef4 23.71%, #3660a5 37.93%, #ffffff 51.53%, #3560a5 66.75%, #9fc2fa 83.67%, #3765af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 300% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.harden-main .harden-s2 .preamble-desc.animated .preamble-txt {
    background-position-x: 100%;
    transition: background-position-x 1.5s cubic-bezier(0, 0, 0.2, 1);
    -webkit-transition: background-position-x 1.5s cubic-bezier(0, 0, 0.2, 1);
    -moz-transition: background-position-x 1.5s cubic-bezier(0, 0, 0.2, 1);
    transition-delay: .3s;
}

.harden-main .harden-s2 .preamble-desc .preamble-txt-copy {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    text-shadow: 0 0 20px #6d83b0, 0 0 30px #6d83b0;
    opacity: 0;
}

.harden-main .harden-s2 .preamble-shadow {
    position: relative;
    opacity: 0;
    z-index: 1;
    transform-origin: bottom;
    transition-duration: 1.5s;
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
}

.harden-main .harden-s2 .preamble-shadow.animated {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

.harden-main .harden-s2 .preamble-shadow .shadow-bg1 {
    position: relative;
    z-index: 1;
}

.harden-main .harden-s2 .preamble-shadow .shadow-light {
    width: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
    opacity: 0;
    transform-origin: bottom;
    transition-duration: 1.5s;
}

.harden-main .harden-s2 .preamble-shadow.animated .shadow-light {
    opacity: 1;
    transition-delay: 0.6s;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s2 {
        padding-top: 11.42857142857143vw;
    }

    .harden-main .harden-s2 .preamble-txt {
        font-size: 3.428571vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s2 {
        padding-top: 22.22222222222222vw;
    }

    .harden-main .harden-s2 .preamble-txt {
        font-size: 6.666666666666667vw;
    }

    .harden-main .harden-s2 .preamble-shadow .shadow-bg1 {
        margin-top: -0.6944444444444444vw;
    }
}


/* s2-end */
/* s3-start */
.harden-main .harden-s3 {
    width: 100%;
    margin-top: 10.416667vw;
    overflow: hidden;
}

.harden-main .harden-s3 .heart-container {
    width: 67.5vw;
    margin: 0 auto;
    overflow: visible;
}

.harden-main .harden-s3 .heart-content {
    position: relative;
    height: 100%;
}

.harden-main .harden-s3 .heart-content .heart-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    background-color: #0D1119;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.harden-main .harden-s3 .heart1-content .heart-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.harden-main .harden-s3 .heart1-content .heart-img video {
    width: 38.020833vw;
    height: 38.020833vw;
    mix-blend-mode: lighten;
}

.harden-main .harden-s3 .heart5-content .border-img {
    width: 44.010417vw;
    margin: 7.96875vw auto 5vw;
    position: relative;
    z-index: 1;
}

.harden-main .harden-s3 .heart5-content .border-img video {
    width: 34.375vw;
    height: 22.916667vw;
    top: 0.572917vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    z-index: -1;
}

.harden-main .harden-s3 .heart-title {
    position: absolute;
    z-index: 2;
    top: 2.291667vw;
    left: 2.5vw;
    color: #fff;
    font-size: 1.666667vw;
    line-height: 1.25;
    font-weight: 500;
    opacity: 0;
    transform: translate3d(10.416667vw, 0, 0);
    -webkit-transform: translate3d(10.416667vw, 0, 0);
    -moz-transform: translate3d(10.416667vw, 0, 0);
    transition: opacity 0.4s ease-in-out 0.2s, transform 0.6s ease-in-out 0.2s;
    -webkit-transition: opacity 0.4s ease-in-out 0.2s, transform 0.6s ease-in-out 0.2s;
    -moz-transition: opacity 0.4s ease-in-out 0.2s, transform 0.6s ease-in-out 0.2s;
}

.harden-main .harden-s3 .heart-title h3 {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.harden-main .harden-s3 .heart-container .swiper-slide {
    height: auto;
}

@media (any-hover:hover) {
    .harden-main .harden-s3 .heart-container .swiper-slide:hover {
        cursor: pointer;
    }

    .harden-main .harden-s3 .heart-container .swiper-slide-active:hover {
        cursor: default;
    }
}

.harden-main .harden-s3 .heart-container .swiper-slide:not(:last-child) {
    margin-right: 3.3333334vw;
}

.harden-main .harden-s3 .heart-container .swiper-slide-active .heart-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
}

.harden-main .harden-s3 .heart-swiper-controller {
    display: flex;
    justify-content: center;
    margin: 2.5vw auto 0;
}

.harden-main .harden-s3 .controller-wrap {
    padding: 0.625vw 1.041667vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.harden-main .harden-s3 .controller-wrap .button-item {
    flex-shrink: 0;
    width: 2.0833334vw;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

@media (any-hover:hover) {
    .harden-main .harden-s3 .controller-wrap .button-item:hover {
        cursor: pointer;
        opacity: 0.6;
    }
}

.harden-main .harden-s3 .controller-wrap .button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.harden-main .harden-s3 .controller-wrap .button-prev {
    transform: translate3d(0, 0, 0) rotate(180deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
    -moz-transform: translate3d(0, 0, 0) rotate(180deg);
}

.harden-main .harden-s3 .controller-wrap .swiper-pagination {
    position: static;
    margin: 0 0.9375vw;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet {
    margin: 0;
    cursor: default;
    flex-shrink: 0;
    width: 0.5208334vw;
    height: 0.5208334vw;
    background-color: #fff;
    opacity: 0.2;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
}

.harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet:nth-child(n+2) {
    margin-left: 0.5208334vw;
}

.harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet-active {
    opacity: .8;
    pointer-events: none;
}

@media (any-hover:hover) {
    .harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet:hover {
        cursor: pointer;
        opacity: .6;
    }
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s3 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s3 .heart-container {
        width: 84.571429vw;
    }

    .harden-main .harden-s3 .heart-container .swiper-slide:not(:last-child) {
        margin-right: 3.428571428571429vw;
    }

    .harden-main .harden-s3 .heart-content .heart-img {
        border-radius: 2.285714285714286vw;
        -webkit-border-radius: 2.285714285714286vw;
        -moz-border-radius: 2.285714285714286vw;
    }

    .harden-main .harden-s3 .heart1-content .heart-img {
        align-items: flex-start;
    }

    .harden-main .harden-s3 .heart1-content .heart-img video {
        width: 66.857143vw;
        height: 66.857143vw;
        margin: 7.857143vw auto 5.285714285714286vw;
    }

    .harden-main .harden-s3 .heart5-content .border-img {
        width: 75.5vw;
        margin: 20.571429vw auto 16.5vw;
    }

    .harden-main .harden-s3 .heart5-content .border-img video {
        width: 58.971429vw;
        height: 39.28571428571429vw;
        top: 0.957143vw;
    }

    .harden-main .harden-s3 .heart-title {
        top: 4.571429vw;
        left: 3.142857vw;
        font-size: 2.857143vw;
        transform: translate3d(14.285714vw, 0, 0);
        -webkit-transform: translate3d(14.285714vw, 0, 0);
        -moz-transform: translate3d(14.285714vw, 0, 0);
    }

    .harden-main .harden-s3 .heart-swiper-controller {
        margin: 4.571429vw auto 0;
    }

    .harden-main .harden-s3 .controller-wrap {
        padding: 0 0.857143vw;
    }

    .harden-main .harden-s3 .controller-wrap .button-item {
        width: 6.857143vw;
    }

    .harden-main .harden-s3 .controller-wrap .swiper-pagination {
        margin: 0 0.571429vw;
    }

    .harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet {
        width: 1.142857vw;
        height: 1.142857vw;
    }

    .harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet:nth-child(n+2) {
        margin-left: 1.714286vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s3 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s3 .heart-container {
        width: 82.222222vw;
    }

    .harden-main .harden-s3 .heart-content .heart-img {
        height: auto;
    }

    .harden-main .harden-s3 .heart1-content .heart-img {
        flex-direction: column;
        padding: 4.4444444444444445vw 0;
    }

    .harden-main .harden-s3 .heart1-content .heart-img video {
        width: 100.833333vw;
        height: 100.833333vw;
        margin-top: 0;
    }

    .harden-main .harden-s3 .heart5-content .heart-img {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .harden-main .harden-s3 .heart5-content .border-img {
        flex-shrink: 0;
        width: 119.3055555555556vw;
        margin: 20.97222222222222vw 3.3333333334vw 20.83333333333333vw 0;
    }

    .harden-main .harden-s3 .heart5-content .border-img video {
        width: 93.194444vw;
        height: 62.222222222222223vw;
        top: 1.569444vw;
    }

    .harden-main .harden-s3 .heart-container .swiper-slide:not(:last-child) {
        margin-right: 4.4444444444444445vw;
    }

    .harden-main .harden-s3 .heart-content .heart-img {
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .harden-s3 .heart-title {
        width: 100%;
        position: static;
        text-align: center;
        font-size: 5.555556vw;
        transform: translate3d(13.88888888888889vw, 0, 0);
        -webkit-transform: translate3d(13.88888888888889vw, 0, 0);
        -moz-transform: translate3d(13.88888888888889vw, 0, 0);
        margin-top: 6.666666666666667vw;
    }

    .harden-main .harden-s3 .heart2-content .space-desc {
        top: 35.277778vw;
    }

    .harden-main .harden-s3 .heart2-content .data-desc {
        font-size: 2.222222vw;
    }

    .harden-main .harden-s3 .heart2-content .data-desc span {
        font-size: 4.444444vw;
    }

    .harden-main .harden-s3 .heart2-content .space-desc p {
        font-size: 2.222222vw;
    }

    .harden-main .harden-s3 .heart2-content .left-desc {
        left: 4.444444vw;
    }

    .harden-main .harden-s3 .heart2-content .right-desc {
        right: 3.541667vw;
    }

    .harden-main .harden-s3 .heart-swiper-controller {
        margin: 8.888889vw auto 0;
    }

    .harden-main .harden-s3 .controller-wrap {
        padding: 0 1.666667vw;
    }

    .harden-main .harden-s3 .controller-wrap .button-item {
        width: 13.333333vw;
    }

    .harden-main .harden-s3 .controller-wrap .swiper-pagination {
        margin: 0 1.111111vw;
    }

    .harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet {
        width: 2.222222vw;
        height: 2.222222vw;
    }

    .harden-main .harden-s3 .swiper-pagination .swiper-pagination-bullet:nth-child(n+2) {
        margin-left: 3.333333vw;
    }
}

/* s3-end */
/* s4-start */
.harden-main .harden-s4 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s4 .video-wrap {
    width: 100%;
    margin-top: 3.333333vw;
    position: relative;
    overflow: hidden;
}

.harden-main .harden-s4 .video-wrap video {
    width: 100vw;
    height: 43.75vw;
}

.harden-main .harden-s4 .data-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.harden-main .harden-s4 .data-wrap .desc-text {
    flex-shrink: 0;
    width: 26.041667vw;
    margin-right: 6.25vw;
}

.harden-main .harden-s4 .data-wrap .data-desc {
    display: flex;
    margin-top: -0.5em;
}

.harden-main .harden-s4 .data-wrap li:nth-child(n+2) {
    margin-left: 3.333333vw;
}

.harden-main .harden-s4 .data-wrap .data-item h3 {
    color: #fff;
    font-size: 1.666667vw;
    line-height: 1.25;
    font-weight: 500;
}

.harden-main .harden-s4 .data-wrap .data-item h3 span {
    font-size: 3.333333vw;
    font-weight: 500;
}

.harden-main .harden-s4 .data-wrap .data-item p {
    color: #86868a;
    font-size: 1.145833vw;
    line-height: 1.25;
    font-weight: 500;
    margin-top: 0.15625vw;
    margin-left: 0.1em;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s4 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s4 .video-wrap {
        margin-top: 4.571429vw;
    }

    .harden-main .harden-s4 .video-wrap video {
        height: 57.14285714285714vw;
    }

    .harden-main .harden-s4 .data-wrap {
        position: static;
        margin: 4.571429vw auto 0;
    }

    .harden-main .harden-s4 .data-wrap .desc-text {
        width: 36.571429vw;
        margin-right: 6.214285714285714vw;
    }

    .harden-main .harden-s4 .data-wrap li:nth-child(n+2) {
        margin-left: 4.571428571428571vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item h3 {
        font-size: 2.285714vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item h3 span {
        font-size: 4.571429vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item p {
        font-size: 2.285714vw;
        margin-top: 0.714286vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s4 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s4 .video-wrap {
        margin-top: 8.888889vw;
    }

    .harden-main .harden-s4 .video-wrap video {
        height: 111.11111111111112vw;
    }

    .harden-main .harden-s4 .data-wrap {
        position: static;
        flex-direction: column;
        margin: 8.888889vw auto 0;
    }

    .harden-main .harden-s4 .data-wrap .desc-text {
        width: 82.222222vw;
        margin: 0 auto;
    }

    .harden-main .harden-s4 .data-wrap .data-desc {
        width: 82.222222vw;
        margin: 8.88888889vw auto 0;
    }

    .harden-main .harden-s4 .data-wrap li:nth-child(n+2) {
        margin-left: 11.111111112vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item h3 {
        font-size: 4.444444vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item h3 span {
        font-size: 8.888889vw;
    }

    .harden-main .harden-s4 .data-wrap .data-item p {
        font-size: 4.444444vw;
        margin-top: 1.9444444444444445vw;
    }
}

/* s4-end */
/* s5-start */
.harden-main .harden-s5 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s5 .content-wrap {
    width: 63.541667vw;
    margin: 0 auto;
    text-align: center;
}

.harden-main .harden-s5 .content-wrap .desc-text {
    margin-top: 1.666667vw;
}

.harden-main .harden-s5 .color-container {
    position: relative;
    width: 63.541667vw;
    margin: 3.333333vw auto 0;
}

.harden-main .harden-s5 .color-container .color-swiper {
    flex-shrink: 0;
    width: 100%;
    margin: 0 auto;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    overflow: hidden;
}

.harden-main .harden-s5 .color-container .color-swiper .swiper-slide {
    position: relative;
    transition: opacity 0.8s linear;
    -webkit-transition: opacity 0.8s linear;
    -moz-transition: opacity 0.8s linear;
}

.harden-main .harden-s5 .color-container .color-swiper .swiper-slide-prev {
    z-index: 2;
}

.harden-main .harden-s5 .color-container .color-swiper .swiper-slide-active {
    z-index: 3;
}

.harden-main .harden-s5 .color-container .color-swiper .color-img {
    overflow: hidden;
    will-change: clip-path;
}

.harden-main .harden-s5 .color-container .color-swiper .swiper-slide-active.rtl .color-img {
    animation: ellipseRTLAni 0.8s linear both;
    -webkit-animation: ellipseRTLAni 0.8s linear both;
}

.harden-main .harden-s5 .color-container .color-swiper .swiper-slide-active.ltr .color-img {
    animation: ellipseLTRtAni 0.8s linear both;
    -webkit-animation: ellipseLTRtAni 0.8s linear both;
}

@keyframes ellipseRTLAni {
    0% {
        clip-path: ellipse(147% 166% at 240% center);
    }

    100% {
        clip-path: ellipse(147% 166% at 130% center);
    }
}

@keyframes ellipseLTRtAni {
    0% {
        clip-path: ellipse(147% 166% at -140% center);
    }

    100% {
        clip-path: ellipse(147% 166% at -10% center);
    }
}

.harden-main .harden-s5 .color-container .swiper-btn-container {
    position: absolute;
    top: 50%;
    left: calc(100% + 3.333333vw);
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    z-index: 1;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .color-txt {
    color: #fff;
    font-size: 1.666667vw;
    font-weight: 500;
    line-height: 1.25;
    display: flex;
    align-items: center;
    width: fit-content;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .color-txt h3 {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    opacity: 0;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .color-txt h3.active {
    opacity: 1;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .color-txt h3:nth-child(2) {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
}

.harden-main .harden-s5 .color-container .swiper-btn-container .color-txt h3:nth-child(3) {
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-list {
    display: flex;
    align-items: center;
    margin-top: 1.666667vw;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-list li {
    position: relative;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-list li::after {
    content: "";
    width: 1.666667vw;
    height: 1.666667vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
    transform-origin: center center;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-blue::after {
    background: linear-gradient(180deg, #dee5f5 0%, #7c92c7 100%);
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-white::after {
    background: linear-gradient(180deg, #ffffff 0%, #bfbfbf 100%);
}

.harden-main .harden-s5 .color-container .swiper-btn-container .btn-black::after {
    background: linear-gradient(0deg, #1f1f1f 0%, #4b4b4b 100%);
}

.harden-main .harden-s5 .color-container .btn-list li:nth-child(n+2) {
    margin-left: 1.041667vw;
}

.harden-main .harden-s5 .color-container .swiper-btn-container .svg-icon {
    width: 2.291667vw;
    height: 2.291667vw;
}

@media (any-hover:hover) {
    .harden-main .harden-s5 .color-container .swiper-btn-container .btn-list li:hover {
        cursor: pointer;
    }
}

.harden-main .harden-s5 .color-container .btn-list .svg-icon .circle-border {
    stroke-dasharray: var(--rl);
    stroke-dashoffset: var(--rl);
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform-origin: center;
    transition: all 0s linear;
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
}

.harden-main .harden-s5 .color-container .btn-list li.active {
    pointer-events: none;
}

.harden-main .harden-s5 .color-container .btn-list li.active .circle-border {
    stroke-dashoffset: 0;
    transition-duration: 2.95s;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s5 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s5 .content-wrap {
        width: 71.428571vw;
    }

    .harden-main .harden-s5 .content-wrap .desc-text {
        margin-top: 2.285714vw;
    }

    .harden-main .harden-s5 .color-container {
        width: 71.428571vw;
        margin: 4.571429vw auto 0;
    }

    .harden-main .harden-s5 .color-container .color-swiper {
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container {
        position: static;
        transform: translate(0, 0%);
        -webkit-transform: translate(0, 0%);
        -moz-transform: translate(0, 0%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 2.285714285714286vw;
        margin-top: 3.428571428571429vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .color-txt {
        font-size: 3.428571428571429vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .btn-list {
        margin-top: 0;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .btn-list li::after {
        width: 4vw;
        height: 4vw;
    }

    .harden-main .harden-s5 .color-container .btn-list li:nth-child(n+2) {
        margin-left: 2.285714285714286vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .svg-icon {
        width: 5.142857142857143vw;
        height: 5.142857142857143vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s5 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s5 .content-wrap {
        width: 82.222222vw;
        text-align: left;
    }

    .harden-main .harden-s5 .content-wrap .desc-text {
        margin-top: 4.444444vw;
    }

    .harden-main .harden-s5 .color-container {
        width: 100%;
        margin: 8.888889vw auto 0;
    }

    .harden-main .harden-s5 .color-container .color-swiper {
        width: 91.111111vw;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8.888888888888889vw;
        padding: 0 8.333333333333333vw 0 8.8888888888889vw;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .color-txt {
        width: 16.66666666666667vw;
        font-size: 6.666666666666667vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .btn-list {
        margin: 0;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .btn-list li::after {
        width: 7.777777777777778vw;
        height: 7.777777777777778vw;
    }

    .harden-main .harden-s5 .color-container .btn-list li:nth-child(n+2) {
        margin-left: 4.4444445vw;
    }

    .harden-main .harden-s5 .color-container .swiper-btn-container .svg-icon {
        width: 10vw;
        height: 10vw;
    }
}

/* s5-end */
/* s6-start */
.harden-main .harden-s6 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s6 .s6-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2.5vw auto 0;
}

.harden-main .harden-s6 .content-wrap {
    width: 29.84375vw;
}

.harden-main .harden-s6 .data-desc {
    display: inline-flex;
    margin-left: 6.25vw;
    margin-top: -0.65em;
}

.harden-main .harden-s6 .data-desc li:nth-child(n+2) {
    margin-left: 2.916667vw;
}

.harden-main .harden-s6 .data-desc li h4 {
    color: #fff;
    font-size: 1.666667vw;
    font-weight: 500;
    line-height: 1.25;
}

.harden-main .harden-s6 .data-desc li h4 span {
    font-size: 3.333333vw;
}

.harden-main .harden-s6 .data-desc li p {
    color: #86868A;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.6;
}

.harden-main .harden-s6 .video-wrap {
    width: 100%;
    margin: 3.333333vw auto 0;
    position: relative;
    overflow: hidden;
}

.harden-main .harden-s6 .video-wrap video {
    width: 100vw;
    height: 44.791667vw;
}


/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s6 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s6 .s6-container {
        margin: 3.428571vw auto 0;
    }

    .harden-main .harden-s6 .content-wrap {
        width: 63.35714285714286vw;
        margin: 0 auto;
        text-align: center;
        order: 0;
    }

    .harden-main .harden-s6 .data-desc {
        width: 100%;
        margin-top: 4.571429vw;
        margin-left: 16.714286vw;
        order: 2;
    }

    .harden-main .harden-s6 .data-desc li:nth-child(n+2) {
        margin-left: 4.571428571428571vw;
    }

    .harden-main .harden-s6 .data-desc li h4 {
        font-size: 2.285714vw;
    }

    .harden-main .harden-s6 .data-desc li h4 span {
        font-size: 4.571429vw;
    }

    .harden-main .harden-s6 .data-desc li p {
        font-size: 2.285714vw;
        margin-top: 1vw;
    }

    .harden-main .harden-s6 .video-wrap {
        margin: 4.571429vw auto 0;
        order: 1;
    }

    .harden-main .harden-s6 .video-wrap video {
        height: 57.14285714285714vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s6 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s6 .s6-container {
        margin: 6.666667vw auto 0;
    }

    .harden-main .harden-s6 .content-wrap {
        width: 82.22222222222222vw;
        margin: 0 auto;
        text-align: center;
        order: 0;
    }

    .harden-main .harden-s6 .data-desc {
        width: 82.22222222222222vw;
        margin: 6.666666666666667vw auto 0;
        order: 2;
    }

    .harden-main .harden-s6 .data-desc li:nth-child(n+2) {
        margin-left: 7.361111111111111vw;
    }

    .harden-main .harden-s6 .data-desc li h4 {
        font-size: 4.444444vw;
    }

    .harden-main .harden-s6 .data-desc li h4 span {
        font-size: 8.888889vw;
    }

    .harden-main .harden-s6 .data-desc li p {
        font-size: 4.444444vw;
        margin-top: 1.9444444444444445vw;
    }

    .harden-main .harden-s6 .video-wrap {
        margin: 8.888889vw auto 0;
        order: 1;
    }

    .harden-main .harden-s6 .video-wrap video {
        height: 111.11111111112vw;
    }
}

/* s6-end */
/* s7-start */
.harden-main .harden-s7 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s7 .content-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.harden-main .harden-s7 .content-wrap .desc-text {
    flex-shrink: 0;
    width: 27.65625vw;
    margin-left: 8.333333vw;
}

.harden-main .harden-s7 .display-img {
    position: relative;
    width: 67.5vw;
    margin: 3.333333vw auto 0;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.harden-main .harden-s7 .display-img .hdr-icon {
    width: 8.697917vw;
    position: absolute;
    z-index: 1;
    right: 1.25vw;
    bottom: 1.25vw;
}

.harden-main .harden-s7 .data-content {
    margin-top: 2.5vw;
    display: flex;
    justify-content: center;
}

.harden-main .harden-s7 .data-content .data-list {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.harden-main .harden-s7 .data-content .data-list li:nth-child(n+2) {
    margin-left: 4.166667vw;
}

.harden-main .harden-s7 .data-content .data-list li h3 {
    color: #fff;
    font-size: 1.25vw;
    line-height: 1.25;
    font-weight: 500;
}

.harden-main .harden-s7 .data-content .data-list li h3 span {
    font-size: 2.5vw;
    font-weight: 500;
}

.harden-main .harden-s7 .data-content .data-list li p {
    color: #A1A1A8;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0.520833vw;
}


/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s7 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s7 .content-wrap {
        width: 59.28571428571429vw;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-left: 16.714286vw;
    }

    .harden-main .harden-s7 .content-wrap .desc-text {
        width: 100%;
        margin: 2.285714vw auto 0;
    }

    .harden-main .harden-s7 .display-img {
        width: 71.428571vw;
        margin: 4.571429vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }

    .harden-main .harden-s7 .display-img .hdr-icon {
        width: 10.571429vw;
        right: 1.714286vw;
        bottom: 1.714286vw;
    }

    .harden-main .harden-s7 .data-content .data-list {
        justify-content: flex-start;
    }

    .harden-main .harden-s7 .data-content {
        margin-top: 4.571429vw;
        padding: 0 14.285714vw;
    }

    .harden-main .harden-s7 .data-content .data-list li:nth-child(n+2) {
        margin-left: 5.714285714285714vw;
    }

    .harden-main .harden-s7 .data-content .data-list li:nth-child(n+4) {
        margin-left: 0;
        margin-right: 5.714286vw;
        margin-top: 3.428571vw;
    }

    .harden-main .harden-s7 .data-content .data-list li h3 {
        font-size: 2.285714vw;
    }

    .harden-main .harden-s7 .data-content .data-list li h3 span {
        font-size: 4.571429vw;
    }

    .harden-main .harden-s7 .data-content .data-list li p {
        font-size: 2.285714vw;
        margin-top: 1vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s7 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s7 .content-wrap {
        width: 82.222222vw;
        margin: 0 auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .harden-main .harden-s7 .content-wrap .desc-text {
        width: 100%;
        margin: 4.4444444444444445vw auto 0;
    }

    .harden-main .harden-s7 .display-img {
        width: 91.111111vw;
        margin: 8.888888889vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .harden-s7 .display-img .hdr-icon {
        width: 30.416667vw;
        right: 3.3333334vw;
        bottom: 3.3333334vw;
    }

    .harden-main .harden-s7 .data-content {
        margin-top: 8.88888889vw;
        padding: 0 8.888889vw;
    }

    .harden-main .harden-s7 .data-content .data-list {
        justify-content: flex-start;
    }

    .harden-main .harden-s7 .data-content .data-list li:nth-child(n+2) {
        margin-left: 0;
        margin-top: 6.666666666666667vw;
    }

    .harden-main .harden-s7 .data-content .data-list li h3 {
        font-size: 4.444444vw;
    }

    .harden-main .harden-s7 .data-content .data-list li h3 span {
        font-size: 8.888889vw;
    }

    .harden-main .harden-s7 .data-content .data-list li p {
        font-size: 4.444444vw;
        margin-top: 1.9444444444444445vw;
    }

    .harden-main .harden-s7 .data-content .data-list .data-item1 {
        width: 100%;
    }

    .harden-main .harden-s7 .data-content .data-list li.data-item3 {
        margin-left: 16.66666666666667vw;
    }

    .harden-main .harden-s7 .data-content .data-list li.data-item5 {
        margin-left: 7.777778vw;
    }
}

/* s7-end */
/* s8-start */
.harden-main .harden-s8 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s8 .content-wrap {
    width: 35.9375vw;
    margin: 2.5vw auto 0;
    text-align: center;
}

.harden-main .harden-s8 .video-wrap {
    width: 100%;
    margin: 3.333333vw auto 0;
    overflow: hidden;
}

.harden-main .harden-s8 .video-wrap video {
    width: 100vw;
    height: 43.75vw;
}

.harden-main .harden-s8 .data-icons {
    margin: 2.5vw auto 0;
    display: flex;
    justify-content: center;
}

.harden-main .harden-s8 .data-icons .icon-list {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.harden-main .harden-s8 .data-icons .icon-list li {
    display: flex;
    align-items: flex-start;
}

.harden-main .harden-s8 .data-icons .icon-list li:nth-child(n+2) {
    margin-left: 6.25vw;
}

.harden-main .harden-s8 .data-icons .icon-list .icon-img {
    width: 2.916667vw;
}

.harden-main .harden-s8 .data-icons .icon-list .right-desc {
    margin-left: 0.8333333333333vw;
}

.harden-main .harden-s8 .data-icons .right-desc h4 {
    color: #fff;
    font-size: 1.666667vw;
    font-weight: 500;
    line-height: 1.25;
}

.harden-main .harden-s8 .data-icons .right-desc p {
    color: #86868A;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0.833333vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s8 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s8 .content-wrap {
        width: 53.07142857142857vw;
        margin: 3.428571vw auto 0;
    }

    .harden-main .harden-s8 .video-wrap {
        margin: 4.571429vw auto 0;
    }

    .harden-main .harden-s8 .video-wrap video {
        height: 57.14285714285714vw;
    }

    .harden-main .harden-s8 .data-icons {
        margin: 3.428571vw auto 0;
        justify-content: flex-start;
    }

    .harden-main .harden-s8 .data-icons .icon-list {
        justify-content: flex-start;
        padding: 0 15vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list li:nth-child(n+2) {
        margin-left: 11.71428571428571vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list li:nth-child(3) {
        margin-left: 0;
        margin-top: 3.428571vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list .icon-img {
        width: 4.285714vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list .right-desc {
        margin-left: 1.142857142857143vw;
    }

    .harden-main .harden-s8 .data-icons .right-desc h4 {
        font-size: 2.285714vw;
    }

    .harden-main .harden-s8 .data-icons .right-desc p {
        font-size: 2vw;
        margin-top: 0.714286vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s8 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s8 .content-wrap {
        width: 82.222222vw;
        margin: 6.666666666666667vw auto 0;
    }

    .harden-main .harden-s8 .video-wrap {
        margin: 8.888888889vw auto 0;
    }

    .harden-main .harden-s8 .video-wrap video {
        height: 111.111111112vw;
    }

    .harden-main .harden-s8 .data-icons {
        margin: 8.888888888888889vw auto 0;
    }

    .harden-main .harden-s8 .data-icons .icon-list {
        justify-content: flex-start;
        padding: 0 8.888888888888889vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list li {
        width: 100%;
    }

    .harden-main .harden-s8 .data-icons .icon-list li:nth-child(n+2) {
        margin: 8.88888889vw 0 0;
    }

    .harden-main .harden-s8 .data-icons .icon-list .icon-img {
        width: 8.333333vw;
    }

    .harden-main .harden-s8 .data-icons .icon-list .right-desc {
        margin-left: 2.22222222223vw;
    }

    .harden-main .harden-s8 .data-icons .right-desc h4 {
        font-size: 5.555555555555556vw;
    }

    .harden-main .harden-s8 .data-icons .right-desc p {
        font-size: 3.888889vw;
        margin-top: 1.9444444444444445vw;
    }

}

/* s8-end */
/* s9-start */
.harden-main .harden-s9 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s9 .content-wrap {
    width: 80%;
    margin: 0 auto 3.333333vw;
    text-align: center;
}

.harden-main .harden-s9 .s9-scroll-container {
    position: relative;
}

.harden-main .harden-s9 .s9-scroll-container .pos-sticky {
    width: 100%;
    overflow: hidden;
}

.harden-main .harden-s9 .s9-swiper {
    margin: 0 auto;
    width: 67.5vw;
    overflow: visible;
}

.harden-main .harden-s9 .s9-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

@media (any-hover:hover) {
    .harden-main .harden-s9 .s9-swiper .swiper-slide:hover {
        cursor: pointer;
    }

    .harden-main .harden-s9 .s9-swiper .swiper-slide-active:hover {
        cursor: default;
    }

}

.harden-main .harden-s9 .s9-swiper .swiper-slide:not(:last-child) {
    margin-right: 2.083333vw;
}

.harden-main .harden-s9 .s9-swiper .card-content {
    position: relative;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
}

.harden-main .harden-s9 .s9-swiper .card-content .card-img {
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons {
    width: 67.5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2.5vw auto 0;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .card-desc-wrap {
    width: 80%;
    padding-left: 2.083333vw;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    display: flex;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .card-desc-wrap p {
    width: 100%;
    color: #86868A;
    font-weight: 500;
    font-size: 1.145833vw;
    line-height: 1.6;
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-transition: opacity .8s cubic-bezier(0.65, 0.05, 0.36, 1);
    -moz-transition: opacity .8s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .card-desc-wrap p .white-color {
    color: #fff;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .card-desc-wrap p:nth-child(2) {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .card-desc-wrap p.active {
    opacity: 1;
    pointer-events: all;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list {
    display: inline-flex;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list li {
    width: 2.5vw;
    height: 2.5vw;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
}

@media (any-hover:hover) {
    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list li:hover {
        cursor: pointer;
        opacity: 0.6;
    }

}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list .s9swiper-button-prev {
    transform: translate3d(0, 0, 0) rotate(180deg);
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
    -moz-transform: translate3d(0, 0, 0) rotate(180deg);
    margin-right: 1.25vw;
}

.harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list .button-disabled {
    pointer-events: none;
    opacity: 0.3;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s9 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s9 .content-wrap {
        width: 70%;
        margin-left: 16.714286vw;
        margin-bottom: 4.571429vw;
        text-align: left;
    }

    .harden-main .harden-s9 .s9-swiper {
        width: 71.428571vw;
    }

    .harden-main .harden-s9 .s9-swiper .swiper-slide:not(:last-child) {
        margin-right: 2.857143vw;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-img {
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-desc {
        position: static;
        color: #86868A;
        font-size: 2.285714vw;
        padding: 3.428571vw 2.857143vw 0;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-desc .white-color {
        color: #fff;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons {
        width: 71.428571vw;
        margin: 4.571429vw auto 0;
        justify-content: flex-end;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list li {
        width: 5.714286vw;
        height: 5.714286vw;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list .s9swiper-button-prev {
        margin-right: 2.857142857142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s9 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s9 .content-wrap {
        width: 82.222222vw;
        margin: 0 auto 8.888889vw;
        text-align: left;
    }

    .harden-main .harden-s9 .s9-swiper {
        width: 86.666667vw;
        margin-left: 4.444444vw;
    }

    .harden-main .harden-s9 .s9-swiper .swiper-slide:not(:last-child) {
        margin-right: 4.444444vw;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-img {
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-desc {
        position: static;
        color: #86868A;
        font-size: 3.888889vw;
        padding: 6.666667vw 0 0 4.4444444444444445vw;
    }

    .harden-main .harden-s9 .s9-swiper .card-content .card-desc .white-color {
        color: #fff;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons {
        width: 82.222222222222223vw;
        margin: 8.888889vw auto 0;
        justify-content: flex-end;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list li {
        width: 11.111111vw;
        height: 11.111111vw;
    }

    .harden-main .harden-s9 .s9-scroll-container .swiper-buttons .button-list .s9swiper-button-prev {
        margin-right: 5.555556vw;
    }
}

/* s9-end */
/* s10-start */
.harden-main .harden-s10 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s10 .content-wrap {
    width: 36.458333vw;
    margin: 2.5vw auto 0;
    text-align: center;
}

.harden-main .harden-s10 .img-wrap {
    width: 100%;
    margin: 3.333333vw auto 0;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s10 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s10 .content-wrap {
        width: 57.85714285714286vw;
        margin: 3.428571vw auto 0;
    }

    .harden-main .harden-s10 .img-wrap {
        margin: 4.571429vw auto 0;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s10 {
        margin-top: 27.77777778vw;
    }

    .harden-main .harden-s10 .content-wrap {
        width: 82.222222vw;
        margin: 6.666667vw auto 0;
    }

    .harden-main .harden-s10 .img-wrap {
        margin: 8.888889vw auto 0;
    }
}

/* s10-end */
/* s11-start */
.harden-main .harden-s11 {
    margin-top: 10.416667vw;
    display: flex;
    align-items: center;
}

.harden-main .harden-s11 .content-wrap {
    width: 21.770833vw;
    margin-left: 13.333333vw;
}

.harden-main .harden-s11 .content-wrap .desc-text {
    margin-top: 1.666667vw;
}

.harden-main .harden-s11 .video-wrap {
    width: 51.041667vw;
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    margin-left: 6.25vw;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.harden-main .harden-s11 .video-wrap video {
    width: calc(100% + 1px);
    height: 35.416667vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s11 {
        margin-top: 14.285714vw;
        flex-direction: column;
        align-items: flex-start;
    }

    .harden-main .harden-s11 .content-wrap {
        width: 65.28571428571429vw;
        margin-left: 16.714286vw;
    }

    .harden-main .harden-s11 .content-wrap .desc-text {
        margin-top: 2.285714vw;
    }

    .harden-main .harden-s11 .video-wrap {
        width: 71.428571vw;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
        margin: 4.571429vw auto 0;
    }

    .harden-main .harden-s11 .video-wrap video {
        height: 45.71428571428571vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s11 {
        margin-top: 27.777778vw;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .harden-main .harden-s11 .content-wrap {
        width: 82.222222vw;
        margin: 0 auto;
    }

    .harden-main .harden-s11 .content-wrap .desc-text {
        margin-top: 4.444444vw;
    }

    .harden-main .harden-s11 .video-wrap {
        width: 91.111111vw;
        margin: 8.888889vw auto 0;
        border-radius: 2.2222223vw;
        -webkit-border-radius: 2.2222223vw;
        -moz-border-radius: 2.2222223vw;
    }

    .harden-main .harden-s11 .video-wrap video {
        height: 111.111111112vw;
    }

}

/* s11-end */
/* s13-start */
.harden-main .harden-s13 {
    margin-top: 10.416667vw;
}

.harden-main .harden-s13 .content-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.harden-main .harden-s13 .content-wrap .desc-text {
    width: 27.5vw;
    margin-left: 6.458333vw;
}

.harden-main .harden-s13 .img-wrap {
    width: 67.5vw;
    margin: 3.333333vw auto 0;
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-s13 {
        margin-top: 14.285714vw;
    }

    .harden-main .harden-s13 .content-wrap {
        width: 57.5vw;
        display: block;
        text-align: left;
        margin-left: 16.714286vw;
    }

    .harden-main .harden-s13 .content-wrap .desc-text {
        width: 57.5vw;
        margin: 2.285714vw 0 0;
    }

    .harden-main .harden-s13 .img-wrap {
        width: 71.428571vw;
        margin: 4.571429vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-s13 {
        margin-top: 27.777778vw;
    }

    .harden-main .harden-s13 .content-wrap {
        display: block;
        width: 82.222222vw;
        text-align: left;
        padding: 0;
        margin: 0 auto;
    }

    .harden-main .harden-s13 .content-wrap .desc-text {
        width: 100%;
        margin: 4.444444vw auto 0;
    }

    .harden-main .harden-s13 .img-wrap {
        width: 91.111111vw;
        margin: 8.888889vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }
}

/* s13-end */


/* modal start */
.harden-main .section-modal {
    position: fixed;
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    outline: 0;
    overflow: hidden;
    background-color: rgba(25, 25, 26, 0);
    -webkit-backdrop-filter: blur(0px) brightness(100%);
    backdrop-filter: blur(0px) brightness(100%);
    padding-inline-end: var(--modal-scrollbar-buffer);
    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);
    -webkit-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);
    -moz-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);
}

.harden-main .section-modal.modal-fully-visible {
    padding-inline-end: 0;
}

.harden-main .section-modal.modal-open {
    background-color: rgba(25, 25, 26, 0.8);
    -webkit-backdrop-filter: blur(50px) brightness(120%);
    backdrop-filter: blur(50px) brightness(120%);
}

.harden-main .section-modal.modal-open .modal-overlay {
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
    -moz-transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.noscroll .harden-main .section-modal.modal-open,
.noscroll .harden-main .section-modal.modal-will-close {
    z-index: 200;
}

.noscroll .harden-main .section-modal .modal-overlay {
    transform: translate3d(0, 0, 0);
}

.harden-main .section-modal.modal-will-close {
    overflow: auto;
    padding-inline-end: 0;
}

.harden-main .section-modal.modal-will-close .modal-overlay {
    transition: opacity 0.6s;
}

.harden-main .section-modal .modal-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.harden-main .section-modal .modal-overlay {
    width: 81.25vw;
    padding: 3.333333vw 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 100vh, 0);
    -webkit-transform: translate3d(0, 100vh, 0);
    -moz-transform: translate3d(0, 100vh, 0);
}

.harden-main .section-modal .modal-wrapper {
    position: relative;
    pointer-events: auto;
}

.harden-main .section-modal .modal-content {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-bottom: 5vw;
    background-color: #000;
    border-radius: 1.25vw;
    -webkit-border-radius: 1.25vw;
    -moz-border-radius: 1.25vw;
}

.harden-main .section-modal .modal-close-container {
    position: absolute;
    top: 1.666667vw;
    right: 1.666667vw;
    bottom: 0;
    width: 2.0833334vw;
    z-index: 2;
}

.harden-main .section-modal .modal-close-button {
    position: sticky;
    z-index: 10;
    top: 1.666667vw;
    width: 100%;
    cursor: pointer;
    border-radius: 100%;
    background-color: rgba(250, 250, 250, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.harden-main .section-modal .modal-close-button rect {
    transition: fill 0.2s;
    fill: #fff;
}

@media (any-hover:hover) {
    .harden-main .section-modal .modal-close-button:hover rect {
        fill: #e6e6e6;
    }
}

.harden-main .section-modal .modal-close-icon {
    pointer-events: none;
}

.harden-main .section-modal .control-video {
    position: relative;
}

.harden-main .section-modal .control-video .control-btn-wrap {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    right: 1.25vw;
    bottom: 1.25vw;
    z-index: 1;
    cursor: pointer;
}

@media (any-hover:hover) {
    .harden-main .section-modal .control-video .control-btn-wrap:hover {
        opacity: .6;
    }
}

.harden-main .section-modal .control-video .control-btn-wrap svg {
    height: 100%;
}

.harden-main .section-modal .control-video .control-btn-wrap .video-btn {
    opacity: 0;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
}

.harden-main .section-modal .control-video[data-video-state="play"] .video-play {
    opacity: 1;
}

.harden-main .section-modal .control-video[data-video-state="pause"] .video-pause {
    opacity: 1;
}

.harden-main .section-modal .control-video[data-video-state="replay"] .video-replay {
    opacity: 1;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal .modal-overlay {
        width: 85.714286vw;
        padding: 4.571429vw 0;
    }

    .harden-main .section-modal .modal-content {
        padding-bottom: 8.571428571428571vw;
        border-radius: 2.285714vw;
        -webkit-border-radius: 2.285714vw;
        -moz-border-radius: 2.285714vw;
    }

    .harden-main .section-modal .modal-close-container {
        top: 1.714286vw;
        right: 1.714286vw;
        width: 4.571429vw;
    }

    .harden-main .section-modal .modal-close-button {
        top: 1.714286vw;
    }

    .harden-main .section-modal .control-video .control-btn-wrap {
        width: 4.571429vw;
        height: 4.571429vw;
        right: 1.714286vw;
        bottom: 1.714286vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal .modal-overlay {
        width: 95.555556vw;
        padding: 8.888889vw 0;
    }

    .harden-main .section-modal .modal-content {
        padding-bottom: 11.111111vw;
        border-radius: 4.444444vw;
    }

    .harden-main .section-modal .modal-close-container {
        top: 3.333333334vw;
        right: 3.333333334vw;
        width: 8.888888888888889vw;
    }

    .harden-main .section-modal .modal-close-button {
        top: 3.333333334vw;
    }

    .harden-main .section-modal .control-video .control-btn-wrap {
        width: 11.11111111111111vw;
        height: 11.11111111111111vw;
        right: 5.555556vw;
        bottom: 5.555556vw;
        cursor: default;
    }
}

/* modal end */

/* design modal start */
.harden-main .section-modal-design-more .modal-content {
    padding-bottom: 4.166667vw;
}

.harden-main .section-modal-design-more .section-content .modal-title {
    width: 67.5vw;
    color: #fff;
    font-size: 4.166667vw;
    font-weight: 500;
    line-height: 1.25;
    margin: 10.416667vw auto 0;
    display: flex;
    justify-content: center;
    text-align: center;
}

.harden-main .section-modal-design-more .section-content .modal-title h3 {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.harden-main .section-modal-design-more .hm-logo-video {
    width: 67.5vw;
    margin: 4.166667vw auto 0;
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
}

.harden-main .section-modal-design-more .desc-text {
    width: 67.5vw;
    margin: 2.5vw auto 0;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal-design-more .modal-content {
        padding-bottom: 5.714286vw;
    }

    .harden-main .section-modal-design-more .section-content .modal-title {
        width: 71.428571vw;
        font-size: 5.714286vw;
        margin: 14.285714vw auto 0;
        text-align: left;
    }

    .harden-main .section-modal-design-more .hm-logo-video {
        width: 71.428571vw;
        margin: 5.714286vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }

    .harden-main .section-modal-design-more .desc-text {
        width: 71.428571vw;
        margin: 3.428571vw auto 0;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal-design-more .modal-content {
        padding-bottom: 8.88888889vw;
    }

    .harden-main .section-modal-design-more .section-content .modal-title {
        width: 82.22222222222222vw;
        font-size: 11.111111vw;
        margin: 24.16666666666667vw auto 0;
        text-align: left;
    }

    .harden-main .section-modal-design-more .hm-logo-video {
        width: 86.805556vw;
        margin: 11.111111vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .section-modal-design-more .desc-text {
        width: 82.22222222222222vw;
        margin: 6.666667vw auto 0;
    }
}

/* design modal end */
/* xiaoyi modal start */
.harden-main .section-modal-xiaoyi-more .section-content .card-desc {
    padding: 2.5vw 2.5vw 0 2.5vw;
}

.harden-main .section-modal-xiaoyi-more .card-desc .card-title {
    color: #fff;
    font-size: 1.666667vw;
    font-weight: 500;
    line-height: 1.25;
}

.harden-main .section-modal-xiaoyi-more .card-desc .card-desc-txt {
    color: #86868A;
    font-size: 1.041667vw;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0.833333vw;
}

.harden-main .section-modal-xiaoyi-more .control-video {
    padding: 2.5vw 0;
}

.harden-main .section-modal-xiaoyi-more .matebook-border {
    position: relative;
    width: 44.010417vw;
    z-index: 1;
    margin: 0 auto;
}

.harden-main .section-modal-xiaoyi-more .matebook-border video {
    width: 34.166667vw;
    position: absolute;
    top: 0.625vw;
    left: 50%;
    transform: translate3d(-50%, 0, 0) scale(1.002);
    -webkit-transform: translate3d(-50%, 0, 0) scale(1.002);
    -moz-transform: translate3d(-50%, 0, 0) scale(1.002);
    z-index: -1;
    border-top-left-radius: 0.3vw;
    border-top-right-radius: 0.3vw;
    overflow: hidden;
    will-change: transform;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .card-desc {
        padding: 3.428571vw 3.428571vw 0 3.428571vw;
    }

    .harden-main .section-modal-xiaoyi-more .card-desc .card-title {
        font-size: 2.857143vw;
    }

    .harden-main .section-modal-xiaoyi-more .card-desc .card-desc-txt {
        font-size: 2vw;
        margin-top: 1.714286vw;
    }

    .harden-main .section-modal-xiaoyi-more .control-video {
        padding: 3.428571vw 0 7.142857vw;
    }

    .harden-main .section-modal-xiaoyi-more .matebook-border {
        width: 50vw;
    }

    .harden-main .section-modal-xiaoyi-more .matebook-border video {
        width: 39.313571vw;
        top: 0.571429vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .card-desc {
        padding: 6.666667vw 6.666667vw 0 6.666667vw;
    }

    .harden-main .section-modal-xiaoyi-more .card-desc .card-title {
        font-size: 5.555556vw;
    }

    .harden-main .section-modal-xiaoyi-more .card-desc .card-desc-txt {
        width: 70.833333333333334vw;
        font-size: 3.888889vw;
        margin-top: 2.777778vw;
    }

    .harden-main .section-modal-xiaoyi-more .control-video {
        padding: 6.666667vw 0 25.694444vw;
    }

    .harden-main .section-modal-xiaoyi-more .matebook-border {
        width: 80vw;
    }

    .harden-main .section-modal-xiaoyi-more .matebook-border video {
        width: 62.361111vw;
        top: 0.972222vw;
    }
}

.harden-main .section-modal-xiaoyi-more .section-content {
    margin: 10.416667vw auto 0;
    width: 67.5vw;
}

.harden-main .section-modal-xiaoyi-more .section-content .modal-title {
    color: #fff;
    font-size: 4.166667vw;
    line-height: 1.25;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.harden-main .section-modal-xiaoyi-more .section-content .modal-title h3 {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}


.harden-main .section-modal-xiaoyi-more .section-content .voice-content {
    width: 100%;
    margin: 4.166667vw auto 0;
    background: #1c1c1c;
    overflow: hidden;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    position: relative;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content {
        margin: 14.85714285714286vw auto 0;
        width: 71.428571vw;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .modal-title {
        font-size: 5.714286vw;
        text-align: left;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .voice-content {
        margin: 5.714285714285714vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content {
        width: 86.805556vw;
        margin: 23.33333333333333vw auto 0;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .modal-title {
        font-size: 11.11111111vw;
        text-align: left;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .voice-content {
        margin: 11.1111111112vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }
}

.harden-main .section-modal-xiaoyi-more .section-content .text-exchange {
    margin: 4.166667vw auto 0;
    background: #1c1c1c;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    overflow: hidden;
}

.harden-main .section-modal-xiaoyi-more .section-content .text-exchange .img-wrap {
    width: 44.0625vw;
    margin: 1.5625vw auto 3.125vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .text-exchange {
        margin: 5.714285714285714vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .text-exchange .img-wrap {
        width: 50vw;
        margin: 4.571429vw auto 6vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .text-exchange {
        margin: 8.888888888888889vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }

    .harden-main .section-modal-xiaoyi-more .section-content .text-exchange .img-wrap {
        width: 73.333333vw;
        margin: 11.111111vw auto 14.861111vw;
    }
}

.harden-main .section-modal-xiaoyi-more .section-content .xiaoyi-set {
    position: relative;
    margin: 4.166667vw auto 0;
    background: #1c1c1c;
    border-radius: 0.833333vw;
    -webkit-border-radius: 0.833333vw;
    -moz-border-radius: 0.833333vw;
    overflow: hidden;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .xiaoyi-set {
        margin: 5.714285714285714vw auto 0;
        border-radius: 1.142857vw;
        -webkit-border-radius: 1.142857vw;
        -moz-border-radius: 1.142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal-xiaoyi-more .section-content .xiaoyi-set {
        margin: 8.888888888888889vw auto 0;
        border-radius: 2.222222vw;
        -webkit-border-radius: 2.222222vw;
        -moz-border-radius: 2.222222vw;
    }
}

/* xiaoyi modal end */

/* 3d modal start */
.harden-main .section-modal.section-modal-3d-more .modal-container,
.harden-main .section-modal.section-modal-3d-more .modal-wrapper,
.harden-main .section-modal.section-modal-3d-more .modal-content,
.harden-main .section-modal.section-modal-3d-more .section-content {
    height: 100%;
}

.harden-main .section-modal.section-modal-3d-more .modal-container {
    width: 100vw;
}

.harden-main .section-modal.section-modal-3d-more .modal-overlay {
    padding: 0;
    width: 100%;
    height: 100%;
}

.harden-main .section-modal.section-modal-3d-more .modal-content {
    padding: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.harden-main .section-modal.section-modal-3d-more iframe {
    width: 100%;
    height: 100%;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .section-modal.section-modal-3d-more .modal-close-container {
        top: 2.857142857142857vw;
        right: 2.857142857142857vw;
    }

    .harden-main .section-modal.section-modal-3d-more .modal-close-button {
        top: 2.857142857142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .section-modal.section-modal-3d-more .modal-close-container {
        top: 5.555555555555556vw;
        right: 5.555555555555556vw;
    }

    .harden-main .section-modal.section-modal-3d-more .modal-close-button {
        top: 5.555555555555556vw;
    }
}

/* 3d modal end*/

/* w1-start */
.harden-main .harden-white-wrap {
    background-color: white;
    width: 100%;
}

.harden-main .harden-w1 .w1Box {
    width: 67.5vw;
    height: 25vw;
    background-color: #F5F5F7;
    margin: 10.41666667vw auto 0;
    position: relative;
    border-radius: 0.83333333vw;
    -webkit-border-radius: 0.83333333vw;
    -moz-border-radius: 0.83333333vw;
    -ms-border-radius: 0.83333333vw;
    -o-border-radius: 0.83333333vw;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.harden-main .harden-w1 .exp-img {
    width: 28.22916667vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 35.10416667vw;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.harden-main .harden-w1 .exp-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: 4.16666667vw;
    line-height: 1.6;
}

.harden-main .harden-w1 .exp-txt {
    margin-bottom: 1.25vw;
    font-size: 1.45833333vw;
    font-weight: 500;
    color: #000000;
    line-height: 1.25;
}

.harden-main .harden-w1 .learn-more {
    font-size: 1.04166667vw;
    font-weight: 500;
    color: #2788D9;
    display: flex;
    align-items: center;

}

.harden-main .harden-w1 .learn-more span {
    display: inline-block;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    font-size: 1.4em;
    line-height: 0;
    margin-top: -0.1em;
}

.harden-main .harden-w1 .learn-more:hover span {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w1 .w1Box {
        margin: 14.28571428vw auto 0;
        display: flex;
        flex-direction: column;
        border-radius: 1.142857142vw;
        -webkit-border-radius: 1.142857142vw;
        -moz-border-radius: 1.142857142vw;
        -ms-border-radius: 1.142857142vw;
        -o-border-radius: 1.142857142vw;
        width: 87.42857142vw;
        height: 57.142857142vw;
        justify-content: center;
        text-align: center;
    }

    .harden-main .harden-w1 .exp-wrap {
        position: static;
        transform: translate(0);
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        margin-bottom: 4.571428571vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .harden-main .harden-w1 .exp-img {
        position: static;
        transform: translate(0);
        width: 55.21428571428571vw;
        margin: 0 auto;
    }

    .harden-main .harden-w1 .exp-txt {
        font-size: 3.42857142vw;
        margin-bottom: 2.2857142857vw;
    }

    .harden-main .harden-w1 .exp-txt .show-mob-inline {
        display: block;
    }

    .harden-main .harden-w1 .learn-more {
        font-size: 2vw;
    }

}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w1 .w1Box {
        width: 91.1111111vw;
        height: 111.1111111vw;
        border-radius: 2.222222222vw;
        -webkit-border-radius: 2.222222222vw;
        -moz-border-radius: 2.222222222vw;
        -ms-border-radius: 2.222222222vw;
        -o-border-radius: 2.222222222vw;
        margin: 27.77777777vw auto 0;
    }

    .harden-main .harden-w1 .exp-wrap {
        top: 8.88888888vw;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        text-align: center;
        width: max-content;
    }

    .harden-main .harden-w1 .exp-txt {
        font-size: 6.6666666vw;
        margin-bottom: 4.444444444vw;
    }

    .harden-main .harden-w1 .learn-more {
        font-size: 3.8888888vw;
        justify-content: center
    }

    .harden-main .harden-w1 .exp-img {
        width: 100%;
        height: 50.97222222vw;
        left: 0;
        top: 43.333333333vw;
        transform: translate(0);
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
    }
}

/* w1-end */
/* w2-start */
.harden-main .harden-w2 {
    margin-top: 10.41666667vw;
}

.harden-main .harden-w2 .pribox {
    display: flex;
    align-items: center;
}

.harden-main .harden-w2 .priimg {
    width: 42.65625vw;
    margin-left: 2.08333333vw;
}

.harden-main .harden-w2 .prititle {
    font-size: 3.33333333vw;
    font-weight: 500;
    color: #000000;
    line-height: 1.25;
    margin-bottom: 1.66666667vw;
}

.harden-main .harden-w2 .pritxtwrap {
    width: 28.54166667vw;
    margin-left: 16.25vw;
}

.harden-main .harden-w2 .pricon {
    line-height: 1.6;
    font-size: 1.14583333vw;
    color: #86868A;
    font-weight: 500;
}

.harden-main .harden-w2 .pricon span.bold {
    color: #000;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w2 {
        margin-top: 14.28571428vw;
    }

    .harden-main .harden-w2 .pribox {
        flex-direction: column;
        align-items: flex-start;
    }

    .harden-main .harden-w2 .pritxtwrap {
        width: 68.71428571vw;
        margin: 0 0 4.571428571vw 16.71428571vw;
    }

    .harden-main .harden-w2 .prititle {
        font-size: 4.571428571vw;
        margin-bottom: 2.28571428vw;
    }

    .harden-main .harden-w2 .pricon {
        font-size: 2.28571428vw;
    }

    .harden-main .harden-w2 .priimg {
        margin: 0 auto;
        width: 58.5vw;
        border-radius: 1.142857142vw;
        -webkit-border-radius: 1.142857142vw;
        -moz-border-radius: 1.142857142vw;
        -ms-border-radius: 1.142857142vw;
        -o-border-radius: 1.142857142vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w2 .pribox {
        flex-direction: column;
        margin-left: 0;
        align-items: center;
    }

    .harden-main .harden-w2 .pritxtwrap {
        width: 82.22222222vw;
        margin: 0 0 8.88888888vw 0;
    }

    .harden-main .harden-w2 .prititle {
        margin-bottom: 4.44444444vw;
        font-size: 8.8888888vw;
    }

    .harden-main .harden-w2 .pricon {
        font-size: 4.44444444vw;
    }

    .harden-main .harden-w2 .priimg {
        width: 90.97222222vw;
        margin-left: 0;
    }

    .harden-main .harden-w2 {
        margin-top: 27.77777777vw;
    }

    .harden-main .harden-w2 .prititle br {
        display: block;
    }
}

/* w2-end */
/* w3-start */
.harden-main .harden-w3 {
    position: relative;
    padding-top: 10.41666667vw;
}

.harden-main .harden-w3::before {
    content: "";
    position: absolute;
    width: 100%;
    top: -1px;
    left: 0;
    height: 2px;
    z-index: 1;
    background-color: #fff;
}

.harden-main .harden-w3 .link-wrap {
    width: 67.5vw;
    display: flex;
    margin: 0 auto 3.33333333vw;
    justify-content: center;
    align-items: center;
}

.harden-main .harden-w3 .link-tltle {
    font-size: 3.33333333vw;
    font-weight: 500;
    color: #000000;
    line-height: 1.25;
}

.harden-main .harden-w3 .link-con {
    font-size: 1.14583333vw;
    font-weight: 500;
    color: #86868A;
    width: 28.54166667vw;
    margin-left: 8.33333333vw;
}

.harden-main .harden-w3 .link-con span.bold {
    color: #000;
}

.harden-main .harden-w3 .link-img {
    width: 67.5vw;
    margin: 0 auto;
    border-radius: 0.83333333vw;
    -webkit-border-radius: 0.83333333vw;
    -moz-border-radius: 0.83333333vw;
    -ms-border-radius: 0.83333333vw;
    -o-border-radius: 0.83333333vw;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w3 {
        padding-top: 14.28571428vw;
    }

    .harden-main .harden-w3 .link-wrap {
        width: 70.71428571428571vw;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 4.57142857vw 16.71428571vw;
    }

    .harden-main .harden-w3 .link-img {
        width: 71.42857142vw;
        margin: 0 auto;
        border-radius: 1.142857142vw;
        -webkit-border-radius: 1.142857142vw;
        -moz-border-radius: 1.142857142vw;
        -ms-border-radius: 1.142857142vw;
        -o-border-radius: 1.142857142vw;
    }

    .harden-main .harden-w3 .link-tltle {
        margin-bottom: 2.28571428vw;
        font-size: 4.571428571vw;
    }

    .harden-main .harden-w3 .link-tltle br {
        display: none;
    }

    .harden-main .harden-w3 .link-con {
        width: 100%;
        font-size: 2.28571428571vw;
        margin-left: 0;
    }

}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w3 {
        padding-top: 27.77777777vw;
    }

    .harden-main .harden-w3 .link-wrap {
        width: 82.2222222vw;
        flex-direction: column;
        margin: 0 auto 8.88888888vw;
        align-items: flex-start;
    }

    .harden-main .harden-w3 .link-tltle {
        font-size: 8.88888888vw;
        margin-bottom: 4.44444444vw;
    }

    .harden-main .harden-w3 .link-con {
        width: 100%;
        font-size: 4.44444444vw;
        margin-left: 0;
    }

    .harden-main .harden-w3 .link-img {
        width: 91.11111111vw;
        margin: 0 auto;
        border-radius: 2.222222222vw;
        -webkit-border-radius: 2.222222222vw;
        -moz-border-radius: 2.222222222vw;
        -ms-border-radius: 2.222222222vw;
        -o-border-radius: 2.222222222vw;
    }
}

/* w3-end */
/* w4-start */
.harden-main .harden-w4 {
    transform: translate3d(0, 0, 0);
    clip-path: ellipse(55.90625vw 46.45833333vw at 50% 75%);
    background-color: white;
    overflow: hidden;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.harden-main .harden-w4::before {
    position: absolute;
    top: 0;
    width: 100%;
    content: "";
    height: 1px;
    background-color: #000;
}

.harden-main .harden-w4::after {
    content: "";
    position: absolute;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.harden-main .harden-w4.will-change {
    will-change: clip-path;
}

.harden-main .harden-w4 .nat-box {
    position: relative;
}

.harden-main .harden-w4 .nat-bg {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
}

.harden-main .harden-w4 .nat-bg::after {
    position: absolute;
    top: 1px;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 9;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.harden-main .harden-w4 .nat {
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.harden-main .harden-w4 .nat-title {
    font-size: 5vw;
    text-align: center;
    padding-top: 10.41666667vw;
    margin-bottom: 3.33333333vw;
    line-height: 1.25;
    font-weight: 700;
}

.harden-main .harden-w4 .nat-img {
    width: 67.5vw;
    border-radius: 0.83333333vw;
    -webkit-border-radius: 0.83333333vw;
    -moz-border-radius: 0.83333333vw;
    -ms-border-radius: 0.83333333vw;
    -o-border-radius: 0.83333333vw;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.harden-main .harden-w4 .nat-con {
    width: 49.73958333vw;
    font-size: 1.14583333vw;
    padding-top: 2.5vw;
    line-height: 1.6;
    color: #86868A;
    font-weight: 500;
    text-align: center;
}

.harden-main .harden-w4 .nat-con span.bold {
    color: #000;
}

.harden-main .w4-black {
    background-color: #000;
    overflow: hidden;
}

@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w4 .nat-title {
        padding-top: 11.42857142vw;
        margin-bottom: 4.5714285vw;
    }

    .harden-main .harden-w4 .nat-img {
        width: 71.42857142vw;
        border-radius: 1.142857142vw;
        -webkit-border-radius: 1.142857142vw;
        -moz-border-radius: 1.142857142vw;
        -ms-border-radius: 1.142857142vw;
        -o-border-radius: 1.142857142vw;
    }

    .harden-main .harden-w4 .nat-con {
        font-size: 2.28571428vw;
        width: 68.21428571vw;
        padding-top: 4.571428571vw;
        text-align: center;
    }

    .harden-main .harden-white-wrap .harden-w4 {
        clip-path: ellipse(60vw 51.4583vw at 50% 64%);
    }

    .harden-main .harden-w4 .nat {
        z-index: 99;
    }

    .harden-main .harden-w4 .nat-bg::after {
        display: none;
    }

    .harden-main .harden-w4 .nat-box::after {
        position: absolute;
        top: 1px;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        z-index: 9;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-white-wrap .harden-w4 {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        clip-path: ellipse(100vw 110.55555555vw at 50% 63%);

    }

    .harden-main .harden-w4 .nat-title {
        font-size: 13.33333333vw;
        padding-top: 22.2222222vw;
        margin-bottom: 8.888888888vw;
    }

    .harden-main .harden-w4 .nat-img {
        width: 91.1111111vw;
        border-radius: 2.222222222vw;
        -webkit-border-radius: 2.222222222vw;
        -moz-border-radius: 2.222222222vw;
        -ms-border-radius: 2.222222222vw;
        -o-border-radius: 2.222222222vw;
    }

    .harden-main .harden-w4 .nat-con {
        width: 82.2222222vw;
        font-size: 4.4444444vw;
        padding-top: 8.8888888vw;
        text-align: left;
    }
}

/* w4-end */
/* w5-start */
.harden-main .harden-w5 {
    position: relative;
    margin-bottom: 10.41666667vw;
    width: 100%;
    overflow: hidden;
}

.harden-main .harden-w5 .w5-img {
    width: 100vw;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.harden-main .harden-w5 .content-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 59.89583333vw;
    width: 24.42708333vw;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.harden-main .harden-w5 .content-wrap .sub-title {
    margin-bottom: 1.66666667vw;
}

.harden-main .harden-w5 .sub-title span.show-pc-inline {
    display: none;
}

.harden-main .harden-w5 .white-color {
    display: inline;
}

.harden-main .harden-w5 .w5-box {
    position: relative;
}

.harden-main .harden-w5 .w5-video {
    position: absolute;
    width: 30.41666667vw;
    top: 6.875vw;
    left: 16.5625vw;
    border-radius: 0.3125vw;
    z-index: 10;
    overflow: hidden;
    -webkit-border-radius: 0.3125vw;
    -moz-border-radius: 0.3125vw;
    -ms-border-radius: 0.3125vw;
    -o-border-radius: 0.3125vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .merge {
        display: flex;
        flex-direction: column;
    }

    .harden-main .harden-w5 .content-wrap {
        position: static;
        width: 56.85714285vw;
        margin: 0 0 4.571428571vw 2.4285714285vw;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    .harden-main .harden-w5 .w5-box {
        display: flex;
        flex-direction: column-reverse;
        width: 71.42857142vw;
        margin: 0 auto;
    }

    .harden-main .harden-w5 .content-wrap .sub-title {
        margin-bottom: 2.28571428VW;
    }

    .harden-main .harden-w5 .w5-img {
        width: 100%;
        margin: 0 auto;
        border-radius: 1.142857142vw;
        -webkit-border-radius: 1.142857142vw;
        -moz-border-radius: 1.142857142vw;
        -ms-border-radius: 1.142857142vw;
        -o-border-radius: 1.142857142vw;
    }

    .harden-main .harden-w5 {
        margin-bottom: 14.2857142vw;
    }

    .harden-main .harden-w5 .sub-title br {
        display: none;
    }



    .harden-main .harden-w5 .w5-box .sub-title span {
        display: inline;
    }

    .harden-main .harden-w5 .w5-video {
        width: 34.5714285714vw;
        top: 26.07142857vw;
        left: 18.5714285714vw;
        border-radius: 0.42857142857vw;
        -webkit-border-radius: 0.42857142857vw;
        -moz-border-radius: 0.42857142857vw;
        -ms-border-radius: 0.42857142857vw;
        -o-border-radius: 0.42857142857vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w5 .content-wrap {
        position: static;
        width: 82.222222222vw;
        margin-bottom: 8.888888888vw;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    .harden-main .harden-w5 .w5-box {
        display: flex;
        flex-direction: column-reverse;
        width: 91.111111111vw;
        text-align: left;
        margin: 0 auto;
        align-items: center;
    }

    .harden-main .harden-w5 .content-wrap .sub-title {
        margin-bottom: 4.44444444vw;
    }

    .harden-main .harden-w5 {
        margin-bottom: 27.777777vw;
    }

    .harden-main .harden-w5 .w5-img {
        width: 100%;
        border-radius: 2.222222222vw;
        -webkit-border-radius: 2.222222222vw;
        -moz-border-radius: 2.222222222vw;
        -ms-border-radius: 2.222222222vw;
        -o-border-radius: 2.222222222vw;
    }

    .harden-main .harden-w5 .w5-video {
        width: 59.416667vw;
        top: 75.166667vw;
        left: 16.5625vw;
        border-radius: 0.8333333333vw;
        -webkit-border-radius: 0.8333333333vw;
        -moz-border-radius: 0.8333333333vw;
        -ms-border-radius: 0.8333333333vw;
        -o-border-radius: 0.8333333333vw;
    }
}

/* w5-end */

/* w6-start */
.harden-main .harden-w6 {
    margin-bottom: 8.33333333vw;
}

.harden-main .harden-w6 .w6-vdieo {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.harden-main .harden-w6 .w6-vdieo::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.208333vw;
    background-image: linear-gradient(to bottom, #000000, transparent);
}

.harden-main .harden-w6 .w6-vdieo::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.208333vw;
    background-image: linear-gradient(to top, #000000, transparent);
}


.harden-main .harden-w6 .w6-vdieo video {
    width: 100vw;
    height: 33.333333vw;
}

.harden-main .harden-w6 .w6-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.harden-main .harden-w6 .content-wrap {
    width: 36.45833333vw;
    text-align: center;
}

.harden-main .harden-w6 .desc-text {
    margin: 1.66666667vw auto 1.25vw;
    width: 29.58333333vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w6 .w6-box {
        align-items: flex-start;
    }

    .harden-main .harden-w6 .content-wrap {
        margin-left: 16.71428571vw;
        width: 58.92857142vw;
        text-align: left;
    }

    .harden-main .harden-w6 .desc-text {
        margin: 2.28571428vw 0;
        width: 60.357142857vw;
    }

    .harden-main .harden-w6 .w6-vdieo {
        width: 71.42857142vw;
        margin: 0 auto;
    }

    .harden-main .harden-w6 .w6-vdieo::before {
        height: 7.142857142857143vw;
    }

    .harden-main .harden-w6 .w6-vdieo::after {
        height: 7.142857142857143vw;
    }

    .harden-main .harden-w6 .w6-vdieo .left-shadow {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 5.714285714285714vw;
        background-image: linear-gradient(to right, #000000, transparent);
    }

    .harden-main .harden-w6 .w6-vdieo .right-shadow {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 5.714285714285714vw;
        background-image: linear-gradient(to left, #000000, transparent);
    }

    .harden-main .harden-w6 .w6-vdieo video {
        width: 100%;
        height: 45.71428571428571vw;
    }

    .harden-main .harden-w6 {
        margin-bottom: 14.2857142vw;
    }

    .harden-main .harden-w6 .w6-box .sub-title span.show-pc-inline {
        display: inline;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w6 .content-wrap {
        width: 82.2222222vw;
        text-align: left;
    }

    .harden-main .harden-w6 .desc-text {
        margin: 4.4444444vw 0;
        width: 100%;
    }

    .harden-main .harden-w6 .w6-vdieo {
        width: 100%;
    }

    .harden-main .harden-w6 .w6-vdieo::before {
        height: 13.88888888888889vw;
    }

    .harden-main .harden-w6 .w6-vdieo::after {
        height: 13.88888888888889vw;
    }

    .harden-main .harden-w6 .w6-vdieo video {
        width: 100%;
        height: 94.444444444444445vw;
    }

    .harden-main .harden-w6 {
        margin-bottom: 27.77777777vw;
    }
}

/* w6-end */
/* w7-start */
.harden-main .harden-w7 {
    margin-bottom: 10.41666667vw;
}

.harden-main .harden-w7 .math-wrap img {
    width: 0.83333333vw;
    margin-left: 0.41666667vw;
    display: inline-block;
    padding-top: 1.525vw;
}

.harden-main .harden-w7 .w7-box {
    margin: 2.5vw 0 3.33333333vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.harden-main .harden-w7 .desc-text {
    width: 19.010417vw;
}

.harden-main .harden-w7 .math-text {
    color: #86868A;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0.3125vw;
}

.harden-main .harden-w7 .math {
    color: #ffffff;
    font-size: 3.33333333vw;
    font-weight: 500;
    line-height: 1.25;
    display: flex;
    align-items: center;
}

.harden-main .harden-w7 .math span {
    font-size: 1.66666667vw;
    padding-top: 1.525vw;
}

.harden-main .harden-w7 ul.math-wrap {
    display: flex;
    flex-direction: row;
    margin-left: 4.166667vw;
    margin-top: -0.65em;
}

.harden-main .harden-w7 ul li:not(:last-child) {
    margin-right: 2.5vw;
}

.harden-main .harden-w7 ul li:last-child span {
    font-size: 1.66666667vw;
    padding-top: 0.625vw;
    padding-top: 0.725vw;
}

.harden-main .harden-w7 .w7-img {
    width: 100%;
    margin-top: 3.33333333vw;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {


    .harden-main .harden-w7 .w7-wrap>.desc-text {
        width: 60.8571428vw;
    }

    .harden-main .harden-w7 .math-text {
        font-size: 2.28571428571vw;
        margin-top: 1vw;
    }

    .harden-main .harden-w7 ul.math-wrap {
        margin: 3.428571428vw 0 0 0;
        justify-content: center;
        order: 2;
    }

    .harden-main .harden-w7 .math {
        font-size: 4.5714285vw;
    }

    .harden-main .harden-w7 .math span {
        font-size: 2.285714285vw;
    }

    .harden-main .harden-w7 .math-wrap img {
        width: 1.285714285vw;
        margin-left: 0.285714285vw;
    }

    .harden-main .harden-w7 ul li:not(:last-child) {
        margin-right: 8.571428571vw;
    }

    .harden-main .harden-w7 {
        margin-bottom: 14.285714285vw;
    }

    .harden-main .harden-w7 ul li:last-child span {
        font-size: 2.285714285vw;
        font-weight: 700;
        padding-top: 1.225vw;
    }

    .harden-main .harden-w7 .w7-box {
        justify-content: center;
    }

    .harden-main .harden-w7 .desc-text {
        width: 58.714285714vw;
        text-align: center;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w7 .desc-text {
        margin-left: 0;
        width: 82.22222222vw;
        text-align: center;
    }

    .harden-main .harden-w7 .w7-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 6.666666666vw auto 0;
    }

    .harden-main .harden-w7 .w7-wrap>.desc-text {
        width: 82.2222222vw;
        text-align: center;
    }

    .harden-main .harden-w7 .w7-wrap {
        margin: 6.666666666vw 0 8.88888888vw;
    }

    .harden-main .harden-w7 .math {
        font-size: 8.88888888vw;
    }

    .harden-main .harden-w7 .math-text {
        font-size: 4.44444444vw;
        margin-top: 1.9444444444vw;
    }

    .harden-main .harden-w7 ul li {
        margin: 8.8888888vw 0 0 0;
    }

    .harden-main .harden-w7 ul li:not(:last-child) {
        margin-right: 8.888888888vw;
    }

    .harden-main .harden-w7 .math-wrap img {
        width: 2.5vw;
        margin-left: 0.5555555555vw;
        padding-top: 3.6111111111vw;
    }

    .harden-main .harden-w7 ul.math-wrap {
        margin-top: 0;
        margin-left: 8.888889vw;
        flex-wrap: wrap;
        order: 2;
    }

    .harden-main .harden-w7 {
        margin-bottom: 27.7777777vw;
    }

    .harden-main .harden-w7 .math span {
        font-size: 4.444444444vw;
        padding-top: 3.6111111111vw;
    }

    .harden-main .harden-w7 ul li:last-child span {
        font-size: 4.444444444vw;
        padding-top: 2.222222222vw;
    }

    .harden-main .harden-w7 .w7-img {
        margin-top: 8.888888888vw;
    }
}

/* w7-end */
/* w8-start */
.harden-main .harden-w8 {
    margin: 10.41666667vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.harden-main .harden-w8 .pigibox {
    width: 100%;
    overflow-x: scroll;
    outline: none;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
}

.harden-main .harden-w8 .pigibox::-webkit-scrollbar {
    display: none;
}

.harden-main .harden-w8 .pigination {
    font-size: 1.14583333vw;
    font-weight: 500;
    color: #86868a;
    line-height: 1.25;
    padding: 0.52083333vw;
    background-color: rgba(255, 255, 255, 0.1);
    display: inline-block;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    margin-top: 1.66666667vw;
}

.harden-main .harden-w8 li.active {
    color: #ffffff;
}

.harden-main .harden-w8 ul {
    display: flex;
    position: relative;
}

.harden-main .harden-w8 ul li {
    text-align: center;
    cursor: pointer;
    padding: 0 1.25vw;
    height: 4.53125vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    margin-right: 0.52083333vw;
}

.harden-main .harden-w8 ul li:nth-child(5) {
    margin-right: 0;
}

.harden-main .harden-w8 ul .pigi-bg {
    width: 7.91666667vw;
    height: 4.53125vw;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    position: absolute;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: transform 0.3s linear;
    -webkit-transition: transform 0.3s linear;
    -moz-transition: transform 0.3s linear;
    -ms-transition: transform 0.3s linear;
    -o-transition: transform 0.3s linear;
}

.harden-main .harden-w8 .swiper {
    width: 67.5vw;
    height: 37.96875vw;
    margin: 0 auto;
    color: white;
}

.harden-main .harden-w8 .content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.harden-main .harden-w8 .desc-text {
    width: 38.02083333vw;
    margin: 1.66666667vw 0 0.625vw;
    text-align: center;
}

/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .harden-w8 {
        margin: 14.28571428vw 0;
    }

    .harden-main .harden-w8 .sub-title span.show-pc-inline {
        display: inline;
    }

    .harden-main .harden-w8 .desc-text {
        width: 54.21428571vw;
        margin: 2.28571428vw auto 4.57142857vw;
    }

    .harden-main .harden-w8 .swiper {
        width: 71.428571428vw;
        height: 51.4285714285vw;
    }

    .harden-main .harden-w8 .swiper .video-lazy {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .harden-main .harden-w8 .swiper .swiper-slide:not(:last-child) .video-lazy video {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }

    .harden-main .harden-w8 .pigination {
        margin-top: 3.428571428vw;
        padding: 1.142857142vw;
        font-size: 1.8571428571vw;
    }

    .harden-main .harden-w8 ul .pigi-bg {
        width: 13.071428571vw;
        height: 7.285714285vw;
        border-radius: 3.42857142vw;
        -webkit-border-radius: 3.42857142vw;
        -moz-border-radius: 3.42857142vw;
        -ms-border-radius: 3.42857142vw;
        -o-border-radius: 3.42857142vw;
    }

    .harden-main .harden-w8 ul li {
        height: 7.5vw;
        padding: 0 2.285714285vw;
        margin-right: 0.714285714vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {
    .harden-main .harden-w8 {
        overflow: hidden;
        align-items: flex-start;
        margin: 27.7777777vw 0;
    }

    .harden-main .harden-w8 .desc-text {
        width: 82.22222222vw;
        margin: 4.44444444vw auto 8.88888888vw;
        text-align: left;
    }

    .harden-main .harden-w8 .content-wrap {
        align-items: flex-start;
        margin: 0 auto;
    }

    .harden-main .harden-w8 .swiper {
        width: 91.11111111vw;
        height: 94.444444444444445vw;
    }

    .harden-main .harden-w8 .swiper .video-lazy {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .harden-main .harden-w8 .swiper .swiper-slide:not(:last-child) .video-lazy video {
        transform: scale(2);
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
    }

    .harden-main .harden-w8 .pigibox {
        display: block;
    }

    .harden-main .harden-w8 .pigination {
        font-size: 3.8888888vw;
        margin: 6.66666666vw 8.888888888vw 0 8.88888888vw;
        padding: 2.222222222vw;
        transition: transform 0.3s linear;
        -webkit-transition: transform 0.3s linear;
        -moz-transition: transform 0.3s linear;
        -ms-transition: transform 0.3s linear;
        -o-transition: transform 0.3s linear;
    }

    .harden-main .harden-w8 ul li {
        flex-shrink: 0;
        height: 14.58333333vw;
        margin-right: 1.38888888vw;
        padding: 0 4.444444444vw;
    }

    .harden-main .harden-w8 ul {
        width: max-content;
    }

    .harden-main .harden-w8 ul .pigi-bg {
        width: 26.94444444vw;
        height: 14.58333333vw;
        border-radius: 6.66666666vw;
        -webkit-border-radius: 6.66666666vw;
        -moz-border-radius: 6.66666666vw;
        -ms-border-radius: 6.66666666vw;
        -o-border-radius: 6.66666666vw;
    }
}

/* w8-end */

/* footer start */
.harden-main .footer-list {
    margin: 0 auto;
    padding: 10.416667vw 0;
    width: 67.5vw;
}

.harden-main .footer-list ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

.harden-main .footer-list ol li {
    color: #7f7f7f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.harden-main .footer-list ol li.active {
    color: #000;
}

.harden-main .footlast {
    list-style: none !important;
    position: relative;
}

.harden-main .footlast::before {
    content: "*";
    position: absolute;
    top: 0;
    left: -9px;
}


@media screen and (min-width: 1920px) {
    .harden-main .footer-list ol li {
        font-size: 0.625vw;
    }
}

@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {
    .harden-main .footer-list {
        width: 71.42857142857143vw;
        padding: 14.285714vw 0;
    }

    .harden-main .footer-list ol li {
        font-size: 1.714286vw;
    }
}

@media screen and (max-aspect-ratio:7/10) {
    .harden-main .footer-list {
        width: 88.75vw;
        padding: 27.777777778vw 0;
    }

    .harden-main .footer-list ol li {
        font-size: 3.333333334vw;
    }

}

/* footer end */


/* fold */
@media screen and (max-aspect-ratio:11/10) and (min-aspect-ratio:7/10) {

    .harden-main .show-pc,
    .harden-main .show-pc-inline,
    .harden-main .show-mob,
    .harden-main .show-mob-inline {
        display: none;
    }

    .harden-main .show-fold {
        display: block;
    }

    .harden-main .show-fold-inline {
        display: inline-block;
    }

    .harden-main .sub-title {
        font-size: 4.571429vw;
    }

    .harden-main .desc-text {
        font-size: 2.285714vw;
    }

    .harden-main .big-title {
        font-size: 6.857143vw;
    }
}

/* mob */
@media screen and (max-aspect-ratio:7/10) {

    .harden-main .show-pc,
    .harden-main .show-pc-inline,
    .harden-main .show-fold,
    .harden-main .show-fold-inline {
        display: none;
    }

    .harden-main .show-mob {
        display: block;
    }

    .harden-main .show-mob-inline {
        display: inline-block;
    }

    .harden-main .sub-title {
        font-size: 8.888889vw;
    }

    .harden-main .desc-text {
        font-size: 4.444444vw;
    }

    .harden-main .big-title {
        font-size: 13.333333vw;
    }
}