*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (max-width: 959px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

html {
    height: 100%;
    font-size: 10px;
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    font-size: calc(var(--body-font-size) * 0.75);
    letter-spacing: calc(var(--body-letter-spacing) / 1000);
    line-height: var(--body-line-height);
    font-family: var(--body-font);
    font-style: var(--body-font-style);
    font-weight: var(--body-font-weight);
}

body.open-pop {
    overflow: hidden;
    position: fixed;
}

body,
html {
    background-color: rgba(var(--color-page-background));
    color: rgba(var(--color-text));
}

a:empty,
ul:empty,
dl:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
    display: none;
}

a:not([href]) {
    cursor: not-allowed;
}

a:not(.button),
a:not(.button):hover {
    color: rgba(var(--color-text));
    text-decoration: none;
}

svg.icon circle,
svg.icon path {
    vector-effect: non-scaling-stroke;
}

/* base-details-summary */

summary {
    cursor: pointer;
    list-style: none;
    position: relative;
}

summary::-webkit-details-marker {
    display: none;
}

deferred-media {
    display: block;
}

*:focus {
    outline: 0;
}

:root {
    --page-padding: 50px;
}

@media (max-width: 959px) {
    :root {
        --page-padding: 20px;
    }
}

@media (max-width: 500px) {
    :root {
        --page-padding: 20px;
    }
}

img,
video {
    display: block;
}

.page-width {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    /* max-width: calc(var(--page-padding) * 2 + var(--page-width)); */
    max-width: 1540px;
    width: 100%;
}

.page-width.page-width--narrow {
    max-width: 1300px;
}

@media screen and (max-width: 1600px) {
    .page-width {
        max-width: 1380px;
    }
}

@media screen and (max-width: 959px) {
    .page-width {
        max-width: 100%;
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
    }
}

.grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-horizontal-space) * -0.5);
    margin-right: calc(var(--grid-horizontal-space) * -0.5);
    margin-top: calc(var(--grid-vertical-space) * -1);
    list-style: none;
    padding: 0;
}

.grid>* {
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: var(--grid-vertical-space);
    max-width: 100%;
    padding-left: calc(var(--grid-horizontal-space) * 0.5);
    padding-right: calc(var(--grid-horizontal-space) * 0.5);
    width: 100%;
}

.grid-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
}

.grid-cols-2>* {
    flex: 0 0 auto;
    width: 50%;
}

.grid-cols-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.grid-cols-4>* {
    flex: 0 0 auto;
    width: 25%;
}

.grid-cols-5>* {
    flex: 0 0 auto;
    width: 20%;
}

.grid-cols-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

.grid-cols-7>* {
    flex: 0 0 auto;
    width: 14.2857142857%;
}

@media (max-width: 959px) {
    .grid {
        --grid-vertical-space: var(--grid-mobile-vertical-space);
        --grid-horizontal-space: var(--grid-mobile-horizontal-space);
    }

    .grid-cols-2>* {
        width: calc(50% - 6px);
        padding: 0 12px 16px;
    }

    .grid-cols-2 {
        gap: 12px;
    }
}

@media screen and (max-width: 959px) {
    .grid-cols-1-tablet>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .grid-cols-2-tablet>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .grid-cols-3-tablet>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .grid-cols-4-tablet>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .grid-cols-5-tablet>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .grid-cols-6-tablet>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .grid-cols-6-tablet>* {
        flex: 0 0 auto;
        width: 14.2857142857%;
    }
}

@media screen and (min-width: 960px) {
    .grid-cols-1-desktop>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .grid-cols-2-desktop>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .grid-cols-3-desktop>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    /* 
  .grid-cols-4-desktop > * {
    flex: 0 0 auto;
    border-radius: 10px;
  
  } */

    .grid-cols-4-desktop>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .grid-cols-5-desktop>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .grid-cols-6-desktop>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .grid-cols-7-desktop>* {
        flex: 0 0 auto;
        width: 14.28%;
    }

    .grid-cols-8-desktop>* {
        flex: 0 0 auto;
        width: 12.5%;
    }


    #shopline-section-product-recommendations .grid {

        justify-content: space-between;
        margin-left: 0;
        margin-right: 0;

    }

    #shopline-section-product-recommendations .grid li {
        position: relative;
    }

    #shopline-section-product-recommendations .grid-cols-4-desktop>* {
        width: calc((100% - 60px) / 4);
        min-height: 510px;
        padding: 24px 20px;
        box-shadow: 0px 0px 7px 0px #B0B0B059;
    }


    .grid-cols-5-desktop>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .grid-cols-6-desktop>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .grid-cols-7-desktop>* {
        flex: 0 0 auto;
        width: 14.2857142857%;
    }
}

.display-block {
    display: block !important;
}

.display-none {
    display: none !important;
}

.display-flex {
    display: flex !important;
}

.display-inline-block {
    display: inline-block !important;
}

.display-inline-flex {
    display: inline-flex !important;
}

@media screen and (max-width: 959px) {
    .display-block-tablet {
        display: block !important;
    }

    .display-none-tablet {
        display: none !important;
    }

    .display-flex-tablet {
        display: flex !important;
    }

    .display-inline-block-tablet {
        display: inline-block !important;
    }
}

@media screen and (min-width: 960px) {
    .display-block-desktop {
        display: block !important;
    }

    .display-none-desktop {
        display: none !important;
    }

    .display-flex-desktop {
        display: flex !important;
    }

    .display-inline-block-desktop {
        display: inline-block !important;
    }

    .display-inline-flex-desktop {
        display: inline-flex !important;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
    font-family: var(--title-font);
    font-style: var(--title-font-style);
    /* font-weight: var(--title-font-weight, 700); */
    font-weight: 600;
    letter-spacing: var(--title-letter-spacing);
    line-height: var(--title-line-height);
    margin-bottom: 0;
    margin-top: 0;
    word-break: break-word;
    text-transform: var(--title-text-transform);
}

h1,
.title1 {
    font-size: calc(var(--title-font-size) * 1);
}

@media (min-width: 960px) {

    h1,
    .title1 {
        font-size: calc(var(--title-font-size) * 2.333333);
    }
}

h2,
.title2 {
    font-size: calc(var(--title-font-size) * 0.833333);
}

@media (min-width: 960px) {

    h2,
    .title2 {
        font-size: calc(var(--title-font-size) * 1.666667);
    }
}

h3,
.title3 {
    font-size: calc(var(--title-font-size) * 0.733333);
}

@media (min-width: 960px) {

    h3,
    .title3 {
        font-size: calc(var(--title-font-size) * 1.2);
    }
}

h4,
.title4 {
    font-size: calc(var(--title-font-size) * 0.666667);
}

@media (min-width: 960px) {

    h4,
    .title4 {
        font-size: calc(var(--title-font-size) * 1);
    }
}

h5,
.title5 {
    font-size: calc(var(--title-font-size) * 0.6);
}

@media (min-width: 960px) {

    h5,
    .title5 {
        font-size: calc(var(--title-font-size) * 0.833333);
    }
}

h6,
.title6 {
    font-size: calc(var(--title-font-size) * 0.6);
}

@media (min-width: 960px) {

    h6,
    .title6 {
        font-size: calc(var(--title-font-size) * 0.666667);
    }
}

.body-font,
.body1,
.body2,
.body3,
.body4,
.body5,
.body6 {
    font-family: var(--body-font);
    font-style: var(--body-font-style);
    font-weight: var(--body-font-weight, 400);
    letter-spacing: var(--body-letter-spacing);
    line-height: var(--body-line-height);
    word-break: break-word;
}

.body1 {
    font-size: calc(var(--body-font-size) * 1.142857);
}

@media (min-width: 960px) {
    .body1 {
        font-size: calc(var(--body-font-size) * 1.571429);
    }
}

.body2 {
    font-size: calc(var(--body-font-size) * 1.071429);
}

@media (min-width: 960px) {
    .body2 {
        font-size: calc(var(--body-font-size) * 1.285714);
    }
}

.body3 {
    font-size: calc(var(--body-font-size) * 1);
}

@media (min-width: 960px) {
    .body3 {
        font-size: calc(var(--body-font-size) * 1.142857);
    }
}

.body4 {
    font-size: calc(var(--body-font-size) * 0.928571);
}

@media (min-width: 960px) {
    .body4 {
        font-size: calc(var(--body-font-size) * 1);
    }
}

.body5 {
    font-size: calc(var(--body-font-size) * 0.857143);
}

@media (min-width: 960px) {
    .body5 {
        font-size: calc(var(--body-font-size) * 0.928571);
    }
}

.body6 {
    font-size: calc(var(--body-font-size) * 0.857143);
}

@media (min-width: 960px) {
    .body6 {
        font-size: calc(var(--body-font-size) * 0.857143);
    }
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
}

.title-wrapper {
    margin-bottom: 30px;
}

.title-wrapper--no-top-margin {
    margin-top: 0;
}

.fw-bold {
    font-weight: var(--body-bold-font-weight) !important;
}

/* .hover-image-scale:hover [data-scale="hover-scale"] {
  transform: scale(1.05);
} */

.hover-image-scale [data-scale="hover-scale"] {
    transition: all 0.5s;
}

@media (max-width: 959px) {
    .title-wrapper {
        margin-bottom: 20px;
    }

    .mobile-slider-full-screen {
        padding-left: calc(var(--page-padding) - (var(--grid-horizontal-space) * 0.5)) !important;
        padding-right: calc(var(--page-padding) - (var(--grid-horizontal-space) * 0.5)) !important;
        margin-left: calc(0px - var(--page-padding)) !important;
        margin-right: calc(0px - var(--page-padding)) !important;
    }
}

.slider-full-screen {
    padding-left: calc(var(--page-padding) - (var(--grid-horizontal-space) * 0.5)) !important;
    padding-right: calc(var(--page-padding) - (var(--grid-horizontal-space) * 0.5)) !important;
    margin-left: calc(0px - var(--page-padding)) !important;
    margin-right: calc(0px - var(--page-padding)) !important;
}

.slider-component-full-width {
    max-width: 100%;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

.global-media-border-shadow {
    border-color: rgba(var(--color-text), var(--media-border-opacity));
    border-radius: var(--media-border-radius);
    border-style: solid;
    border-width: var(--media-border-thickness) !important;
    box-shadow: var(--media-shadow-offset-x) var(--media-shadow-offset-y) var(--media-shadow-blur) rgba(var(--color-text), var(--media-shadow-opacity));
    box-sizing: border-box;
    overflow: hidden;
}

.global-content-border-shadow {
    border-color: rgba(var(--color-text), var(--content-border-opacity));
    border-radius: var(--content-border-radius);
    border-style: solid;
    border-width: var(--content-border-thickness) !important;
    box-shadow: var(--content-shadow-offset-x) var(--content-shadow-offset-y) var(--content-shadow-blur) rgba(var(--color-text), var(--content-shadow-opacity));
    box-sizing: border-box;
}

.global-modal-border-shadow {
    border-color: rgba(var(--color-text), var(--menu-modal-border-opacity));
    border-radius: var(--menu-modal-border-radius);
    border-style: solid;
    border-width: var(--menu-modal-border-thickness);
    box-shadow: var(--menu-modal-shadow-offset-x) var(--menu-modal-shadow-offset-y) var(--menu-modal-shadow-blur) rgba(var(--color-text), var(--menu-modal-shadow-opacity)) !important;
    box-sizing: border-box;
}

.global-drawer-border-shadow {
    border-color: rgba(var(--color-text), var(--drawer-border-opacity));
    border-style: solid;
    border-width: 0 var(--drawer-border-thickness) 0 0;
    box-sizing: border-box;
    filter: drop-shadow(var(--drawer-shadow-offset-x) var(--drawer-shadow-offset-y) var(--drawer-shadow-blur) rgba(var(--color-text), var(--drawer-shadow-opacity)));
}

.global-card-border-shadow {
    border-color: rgba(var(--color-text), var(--card-border-opacity));
    border-radius: var(--card-border-radius);
    border-style: solid;
    border-width: var(--card-border-thickness) !important;
    box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(var(--color-text), var(--card-shadow-opacity));
    box-sizing: border-box;
    overflow: hidden;
}

.global-product-card-border-shadow {
    border-color: rgba(var(--color-text), var(--product-card-border-opacity));
    border-radius: var(--product-card-border-radius);
    border-style: solid;
    border-width: var(--product-card-border-thickness) !important;
    box-shadow: var(--product-card-shadow-offset-x) var(--product-card-shadow-offset-y) var(--product-card-shadow-blur) rgba(var(--color-text), var(--product-card-shadow-opacity));
    box-sizing: border-box;
    overflow: hidden;
}

.global-collection-card-border-shadow {
    border-color: rgba(var(--color-text), var(--collection-card-border-opacity));
    border-radius: var(--collection-card-border-radius);
    border-style: solid;
    border-width: var(--collection-card-border-thickness) !important;
    box-shadow: var(--collection-card-shadow-offset-x) var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur) rgba(var(--color-text), var(--collection-card-shadow-opacity));
    box-sizing: border-box;
    overflow: hidden;
}

.global-blog-card-border-shadow {
    border-color: rgba(var(--color-text), var(--blog-card-border-opacity));
    border-radius: var(--blog-card-border-radius);
    border-style: solid;
    border-width: var(--blog-card-border-thickness) !important;
    box-shadow: var(--blog-card-shadow-offset-x) var(--blog-card-shadow-offset-y) var(--blog-card-shadow-blur) rgba(var(--color-text), var(--blog-card-shadow-opacity));
    box-sizing: border-box;
    overflow: hidden;
}

.global-loading-logo {
    background-image: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
    pointer-events: none;

}

/* padding between section */

.section+.section {
    margin-top: var(--section-vertical-gap);
}

@media (max-width: 959px) {
    .section+.section {
        margin-top: calc(var(--section-vertical-gap) / 2);
    }
}

.section--padding {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
}

@media (max-width: 959px) {
    .section--padding {
        padding-top: calc(var(--section-padding-top) * 0.5);
        padding-bottom: calc(var(--section-padding-bottom) * 0.5);
    }
}

.visibility-hidden {
    visibility: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-unstyled {
    margin: 0;
    padding: 0;
}

.ratio {
    display: flex;
    position: relative;
    align-items: stretch;
}

.ratio::before {
    content: "";
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

.full-unstyled-link {
    text-decoration: none;
    color: currentColor;
    display: block;
}

:root {
    --duration-short: 100ms;
    --duration-long: 500ms;
    --duration-default: 250ms;
}

.button,
.shopline-element-buy-now {
    display: inline-flex;
    font-family: var(--body-font);
    font-weight: var(--body-bold-font-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    color: rgb(var(--color-button-text));
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: rgb(var(--color-button-background));
    transition: opacity 0.15s ease-in-out;
    padding: calc(var(--btn-border-thickness) + 9px) calc(var(--btn-border-thickness) + 18px);
    position: relative;
    border-radius: var(--btn-border-radius-outset);
    font-size: 14px;
    border: none;
    --border-opacity: calc(100% - var(--btn-border-opacity));
    --alpha-button-background: 1;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

.button:not(.button--link),
.shopline-element-buy-now {
    overflow: hidden;
    box-shadow: var(--btn-shadow-offset-x) var(--btn-shadow-offset-y) var(--btn-shadow-blur) rgba(var(--color-text), var(--btn-shadow-opacity));
}

.button:not(.button--link)::before,
.shopline-element-buy-now::before {
    content: "";
    background-color: #fff;
    opacity: 0.2;
    width: 0;
    position: absolute;
    /* bottom: var(--btn-border-thickness); */
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    transition: width var(--duration-long) ease-in-out;
    border-radius: var(--btn-border-radius);
}

.button:not(.button--link):hover::before,
.shopline-element-buy-now:hover::before {
    /* width: calc(100% - var(--btn-border-thickness) - var(--btn-border-thickness)); */
    width: 100%;
}

.button:not(.button--link)::after,
.shopline-element-buy-now::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    box-shadow: 0 0 0 var(--btn-border-thickness) rgba(var(--color-button-text), var(--border-opacity)),
        0 0 0 var(--btn-border-thickness) rgba(var(--color-button-background), var(--alpha-button-background));
    border-radius: var(--btn-border-radius);
    transition: box-shadow var(--duration-short) ease;
    z-index: 1;
}

/* button--secondary 需要边距描边 */
.button--secondary:not(.button--link)::after {
    bottom: var(--btn-border-thickness);
    left: var(--btn-border-thickness);
    right: var(--btn-border-thickness);
    top: var(--btn-border-thickness);
}

.button:not([disabled]):hover::after,
.shopline-element-buy-now:hover::after {
    box-shadow: 0 0 0 calc(var(--btn-border-thickness) + 1px) rgba(var(--color-button-text), var(--border-opacity)),
        0 0 0 calc(var(--btn-border-thickness) + 1px) rgba(var(--color-button-background), var(--alpha-button-background));
}

.button--secondary {
    --color-button-background: var(--color-button-secondary-background);
    --color-button-text: var(--color-button-secondary-text);
    --border-opacity: var(--btn-border-opacity);
}

.button.round {
    border-radius: 50px;
}

.button--link {
    --color-button-background: transparent;
    --color-button-text: rgb(var(--color-text));
    padding: 0 1px;
    position: relative;
    text-underline-offset: 6px;
    transition: width var(--duration-long) ease-in-out;
    padding-bottom: 3px;
}

.button--link:hover::after {
    width: 35%;
}

.button.loading {
    color: transparent;
}

.loading-overlay__spinner {
    display: none;
}

.loading>.loading-overlay__spinner {
    display: inline-flex;
}

.button.loading .loading-overlay__spinner {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    color: rgb(var(--color-button-text));
    display: flex;
}

/* button animation */

.loading .loading-overlay__spinner {
    animation: button-loading linear 1.5s infinite;
}

@keyframes button-loading {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(1turn);
    }
}

.button:active::before {
    animation: button-press linear 0.6s 1;
    animation-fill-mode: forwards;
}

@keyframes button-press {
    from {
        background: rgba(var(--color-button-text), 0.08) radial-gradient(circle,
                rgba(var(--color-button-text), 0.08) 1%,
                transparent 1%) 50%/100%;
    }

    100% {
        background-position: 50%;
        background-size: 25000%;
    }
}

.button:disabled,
.button.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.button--full-width {
    width: 100%;
    display: flex;
}

.icon-button {
    position: relative;
    display: inline-flex;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    padding: 0;
    transition: transform 0.3s;
}

.icon-button:hover,
.icon-button:focus {
    transform: scale(1.1);
}

.color-scheme-1,
.color-scheme-2,
.color-scheme-3 {
    background-color: rgb(var(--color-page-background));
    color: rgb(var(--color-text));
}

.color-scheme-1,
.color-scheme-1 .button::before {
    --color-page-background: var(--color-scheme-1-bg);
    --color-text: var(--color-scheme-1-text);
    --color-button-background: var(--color-scheme-1-text);
    --color-button-text: var(--color-scheme-1-bg);
}

.color-scheme-1 .price {
    --color-sale: var(--color-scheme-1-text);
}

.color-scheme-2,
.color-scheme-2 .button::before {
    --color-page-background: var(--color-scheme-2-bg);
    --color-text: var(--color-scheme-2-text);
    --color-button-background: var(--color-scheme-2-text);
    --color-button-text: var(--color-scheme-2-bg);
}

.color-scheme-2 .price {
    --color-sale: var(--color-scheme-2-text);
}

.color-scheme-3,
.color-scheme-3 .button::before {
    --color-page-background: var(--color-scheme-3-bg);
    --color-text: var(--color-scheme-3-text);
    --color-button-background: var(--color-scheme-3-text);
    --color-button-text: var(--color-scheme-3-bg);
}

.color-scheme-3 .price {
    --color-sale: var(--color-scheme-3-text);
}

.color-scheme-1 .button--secondary,
.color-scheme-1 .button--secondary::before {
    --color-button-background: var(--color-scheme-1-bg);
    --color-button-text: var(--color-scheme-1-text);
}

.color-scheme-2 .button--secondary,
.color-scheme-2 .button--secondary::before {
    --color-button-background: var(--color-scheme-2-bg);
    --color-button-text: var(--color-scheme-2-text);
}

.color-scheme-3 .button--secondary,
.color-scheme-3 .button--secondary::before {
    --color-button-background: var(--color-scheme-3-bg);
    --color-button-text: var(--color-scheme-3-text);
}

/* ---------------- field styles ---------------- */

.field {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
    font-size: 14px;
    transition: all 300ms;
    align-items: center;
    color: rgba(var(--color-text));
    /* background-color: rgba(var(--color-page-background)); */
    margin-bottom: 20px;
}

@media (max-width: 959px) {
    .field {
        margin-bottom: 16px;
    }
}

.field:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    border-width: var(--input-border-thickness);
    border-style: solid;
    border-color: #E1E1E1;
    pointer-events: none;
    transition: border-color 300ms;
    border-radius: var(--input-border-radius-outset);
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity));
}

.field:hover:after,
.field:focus::after,
.field:focus-within::after {
    border-color: #C2DEE6;
    border-width: calc(var(--input-border-thickness) + 1px);
}

.field .field__container {
    flex: 1;
    position: relative;
}

/* vaild error */

.field--error::after {
    border-color: rgba(var(--color-discount-tag-background));
}

/* ---------------- field group ---------------- */

.field__group {
    display: flex;
    gap: 20px;
}

/* ---------------- field label style ---------------- */

.field__label {
    position: absolute;
    left: 30px;
    right: 0;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 300ms ease;
    transform-origin: left top;
    word-break: break-word;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ---------------- field input style ---------------- */

.field__input {
    width: 100%;
    border-radius: var(--input-border-radius-outset);
    border: none;
    padding: 24px 30px 8px;
    background: none;
    line-height: 1.15;
    box-shadow: none !important;
    color: rgba(var(--color-text));
    height: 56px;
    -webkit-appearance: none;
}

.field__input::placeholder {
    opacity: 0;
}

.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label,
.field__input:-webkit-autofill~.field__label {
    transform: scale(0.8) translate(0, -90%);
    word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
    color: #BBBBBB;
}

.field__input--classic:focus::after,
.field__input--classic:focus-within::after,
.field__input:focus::after,
.field__input:focus-within::after {
    border-color: #13B2BA;
    border-width: calc(var(--input-border-thickness)+1px);
}

.field__input--classic:focus-visible,
.field__input--classic:focus,
.field__input:focus-visible,
.field__input:focus {
    outline: 0;
}

.field__input::-webkit-search-cancel-button {
    display: none;
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s;
}

.field__input--classic {
    width: 100%;
    border-radius: 4px;
    border: none;
    padding: 0 16px;
    background: none;
    line-height: 1.15;
    box-shadow: none !important;
    color: rgba(var(--color-text));
    height: 56px;
    -webkit-appearance: none;
}

.field__input--classic::placeholder {
    word-break: break-word;
    color: rgba(var(--color-text), 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (max-width:959px) {
    .field__input {
        height: 48px;
        padding: 26px 18px 8px;
    }

    .field__label {
        left: 18px;
    }
}

/* ---------------- field extra ---------------- */

.field__suffix {
    display: flex;
    justify-content: center;
    margin-right: 10px;
    padding: 6px;
}

select.field__input--classic {
    position: relative;
    z-index: 1;
    padding-right: 40px;
}

select.field__input--classic+.field__suffix {
    position: absolute;
    z-index: 0;
    right: 10px;
    margin-right: 0px;
}

@media (max-width:959px) {
    .field__suffix svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------------- field info text ---------------- */

.field__info {
    display: flex;
    font-size: 12px;
    line-height: 1.4;
}

.field__info svg {
    margin-right: 4px;
}

.field__info--error {
    color: rgba(var(--color-discount-tag-background));
}

@media screen and (min-width: 960px) {
    .field__info svg {
        margin-right: 8px;
    }
}

/* ---------------- field checkbox ---------------- */

.field-checkbox {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.2;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
}

.field-checkbox input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    -webkit-appearance: auto;
}

.field-checkbox input[type="checkbox"]:checked+.checkbox {
    background-color: rgba(var(--color-button-background));
    border-color: rgba(var(--color-button-background));
}

.field-checkbox input[type="checkbox"]:checked+.checkbox::after {
    position: absolute;
    display: table;
    /* border: 2px solid #fff; */
    border-top: 0;
    border-left: 0;
    /* transform: rotate(45deg) scale(1) translate(-50%, -50%); */
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    /* content: " "; */
    content: url("data:image/svg+xml,%0A%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.13043L6.2973 9L15 1' stroke='white'/%3E%3C/svg%3E%0A");
}

.field-checkbox .checkbox {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    direction: ltr;
    background: #D9D9D9;
    border-collapse: separate;
    transition: all 0.3s;
}

.field-checkbox .checkbox:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: table;
    width: 5.71428571px;
    height: 9.14285714px;
    border-top: 0;
    border-left: 0;
    opacity: 0;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
    content: url("data:image/svg+xml,%0A%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.13043L6.2973 9L15 1' stroke='white'/%3E%3C/svg%3E%0A");
}

.text-area {
    min-height: 100px;
    resize: none;
}

.text-area+.field__label {
    top: 21px;
}

.field select~.icon-arrow {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
}

/* ---------------- field switch ---------------- */

/* The switch - the box around the slider */

.field-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

/* The slider */

.field-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background-color: rgba(var(--color-text), 0.1);
    transition: 0.2s;
}

.field-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    border-radius: 50%;
    background-color: rgba(var(--color-page-background));
    transition: 0.2s;
}

/* Hide default HTML checkbox */

.field-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.field-switch input:checked+.field-switch-slider {
    background-color: rgba(var(--color-text), 1);
}

.field-switch input:checked+.field-switch-slider:before {
    transform: translateX(20px);
}

.field-radio {
    cursor: pointer;
    position: relative;
}

.field-radio>input {
    margin: 0;
    padding: 0;
    height: 100%;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
    cursor: pointer;
}

.field-radio>input:checked+.radio {
    border-color: rgba(var(--color-button-background));
}

.field-radio>input:checked+.radio:after {
    opacity: 1;
    transform: scale(0.5);
}

.field-radio .radio {
    display: block;
    height: 16px;
    width: 16px;
    background-color: rgba(var(--color-page-background));
    border: 1px solid rgba(var(--color-entry-line));
    border-collapse: separate;
    border-radius: 50%;
    left: 0;
    position: relative;
    top: 0;
    transition: all 0.3s;
}

.field-radio .radio::after {
    height: 16px;
    width: 16px;
    background-color: rgba(var(--color-button-background));
    border-radius: 16px;
    content: "";
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideInTop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes modalSlideInBottom {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes drawerFadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes drawerFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes drawerFadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animation-delay-show-container {
    transform: translate3d(0px, 25px, 0px);
    opacity: 0;
}

.animation-delay-show-container.come-into-view {
    animation: column-fade-in 0.8s ease;
    animation-fill-mode: forwards;
}

@keyframes column-fade-in {
    100% {
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
    }
}

.global-parallax-container {
    width: 100%;
    height: 100%;
}

.global-parallax-container .global-parallax {
    position: relative;
    top: -30% !important;
    height: 160% !important;
    transition: none 0s ease 0s !important;
}

/* Common component style */

slider-component {
    display: block;
    position: relative;
}

.slider {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

slider-component[pc-direction="vertical"] .slider,
slider-component[direction="vertical"] .slider {
    overflow-x: unset;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

.slider__slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    list-style: none;
}

/* Scrollbar */

.slider {
    scrollbar-color: rgb(var(--color-image-background)) rgba(var(--color-image-background), 0.04);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
    display: none;
}

.slider::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-image-background));
    border-radius: 0.4rem;
    border: 0;
}

.slider::-webkit-scrollbar-track {
    background: rgba(var(--color-image-background), 0.04);
    border-radius: 0.4rem;
}

.no-js .slider {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
}

.no-js .slider::-webkit-scrollbar {
    display: initial;
}

.slider-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-button {
    color: rgb(var(--color-text));
    background: transparent;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-button .icon {
    height: 1em;
}

.slider-button[disabled] .icon {
    color: rgba(var(--color-text), 0.3);
    cursor: not-allowed;
}

.slider-button--prev .icon {
    transform: rotate(90deg);
}

.slider-button--next .icon {
    transform: rotate(-90deg);
}

.slider-counter {
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

@media screen and (min-width: 960px) {
    .slider:not(.slider--desktop)+.slider-buttons {
        display: none;
    }

    .slider.slider--tablet-up {
        position: relative;
        flex-wrap: inherit;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: 1em;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 959px) {
    .small-hide {
        display: none !important;
    }

    .slider-buttons {
        padding-bottom: 20px;
    }

    .slider.slider--mobile {
        position: relative;
        flex-wrap: inherit;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }

    .thumbnail-slider {
        display: flex;
        align-items: center;
    }

    .thumbnail-slider .thumbnail-list.slider {
        display: flex;
        flex: 1;
        /* scroll-padding-left: ; */
    }

    .thumbnail-list__item.slider__slide {
        width: calc(33% - 10px);
    }
}

.modal__content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(var(--color-page-background));
    z-index: 99999999999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-duration: 0.2s;
    animation-timing-function: ease;
}

details .modal__overlay {
    display: block;
}

details[data-clone] summary {
    display: none;
    opacity: 0;
    visibility: hidden;
}

details[open] .modal__overlay::after {
    position: fixed;
    content: "";
    background-color: rgba(var(--color-mask), 0.6);
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1000;
}

expand-component {
    display: block;
}

expand-component.expand-limit-height .expand-wrapper {
    max-height: 150px;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-out;
}

expand-component.expand-limit-height .expand-wrapper:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 40px;
    background: linear-gradient(180deg,
            rgba(var(--color-page-background), 0) 0%,
            rgb(var(--color-page-background)) 100%);
}

expand-component .expand-view-more-box {
    display: none;
    margin-top: 10px;
}

expand-component .expand-view-more-box .expand-view-more-button {
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer;
}

expand-component .expand-view-more-box .expand-view-more-button svg {
    margin-left: 4px;
}

expand-component .expand-view-more-box .expand-view-less-button {
    display: none;
    align-items: center;
    line-height: 1;
    cursor: pointer;
}

expand-component .expand-view-more-box .expand-view-less-button svg {
    margin-left: 4px;
}

expand-component .expand-view-more-box .expand-view-less-button .less-button-rotate {
    transform: rotate(180deg);
}

expand-component .expand-view-more-box[open] .expand-view-more-button {
    display: none;
}

expand-component .expand-view-more-box[open] .expand-view-less-button {
    display: flex;
}

.drawer {
    --drawer-padding-inline: 20px;
    --drawer-padding-block: 16px;
}

.drawer .modal__content {
    top: 0;
    width: 400px;
    max-width: 100%;
    padding: 0 var(--drawer-padding-inline);
    display: flex;
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    margin: initial;
}

.drawer .modal__content[data-position="left"] {
    --modal-animation-name: drawerFadeInLeft;

    left: 0;
    right: initial;
    transform: translateX(-100%);
}

.drawer .modal__content[data-position="right"] {
    --modal-animation-name: drawerFadeInRight;

    left: initial;
    right: 0;
    transform: translateX(100%);
}


@media screen and (max-width: 959px) {
    .drawer .modal__content {
        width: 340px;
    }
}

.drawer details[open] .modal__content {
    transform: translateX(0);
    width: 100vw;
}

.drawer details[open] .modal__content[data-position="left"] .modal__overlay::after {
    top: 0;
    left: 100%;
    right: initial;
}

.drawer details[open] .modal__content[data-position="right"] .modal__overlay::after {
    top: 0;
    left: initial;
    right: 100%;
}

.drawer__head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 22px 0;
}

.drawer__head--divider {
    border-bottom: 1px solid #CCCCCC;
}

.drawer__title {
    display: flex;
}

.drawer__title .header__user-center-button span {
    font-size: 12px;
    font-weight: 400;
    padding-left: 8px;
}

.drawer__head .drawer__close-button.icon-button {
    color: #919191;
    zoom: 0.8;
}

.drawer__title:empty {
    display: flex;
}

.drawer__main {
    flex: 1 0 0;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: var(--drawer-padding-block);
}

.drawer__close-button {
    padding: 6px;
}

.drawer__close-button .icon {
    width: 16px;
    height: 16px;
}

/* component-quantity */

.quantity__button.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
}

.quantity {
    z-index: 0;
    color: rgba(var(--color-text));
    position: relative;
    width: calc(3 * var(--body-font-size) + var(--input-border-thickness) * 2 + 30px * 2);
    display: flex;
    border-radius: var(--input-border-radius);
    min-height: calc((var(--input-border-thickness) * 2) + 2.8rem);
}

.quantity:after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: var(--input-border-thickness);
    right: var(--input-border-thickness);
    bottom: var(--input-border-thickness);
    left: var(--input-border-thickness);
    border: 0.1rem solid transparent;
    border-radius: var(--input-border-radius);
    box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-text), var(--input-border-opacity));
    z-index: 1;
}

.quantity:hover.quantity:after {
    box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-text), var(--input-border-opacity));
}

.quantity:before {
    background: rgb(var(--color-page-background));
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--input-border-radius-outset);
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity));
    z-index: -1;
}

.quantity.line-border::before,
.quantity.line-border::after,
.quantity.none-border::before,
.quantity.none-border::after {
    content: none;
}

.quantity.line-border {
    border-top: 1px solid rgba(var(--color-text), var(--input-border-opacity));
    border-bottom: 1px solid rgba(var(--color-text), var(--input-border-opacity));
}

.quantity__input {
    color: currentColor;
    text-align: center;
    background-color: transparent;
    border: 0;
    width: 100%;
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    outline-style: none;
}

.quantity__button {
    width: 30px;
    flex-shrink: 0;
    font-size: 1.8rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-text));
    padding: 0;
}

.quantity:not(.none-border) .quantity__button:first-child {
    margin-left: calc(var(--input-border-thickness));
}

.quantity:not(.none-border) .quantity__button:last-child {
    margin-right: calc(var(--input-border-thickness));
}

.quantity__button svg {
    width: 1rem;
    pointer-events: none;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
    box-shadow: 0 0 0 10rem rgb(var(--color-page-background)) inset !important;
    -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-page-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity__input[type="number"] {
    -moz-appearance: textfield;
}

.rte:after {
    clear: both;
    content: "";
    display: block;
}

.rte>p:first-child {
    margin-top: 0;
}

.rte>p:last-child {
    margin-bottom: 0;
}

.rte a:hover,
.rte a {
    padding: 0 1px;
    position: relative;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.rte a:hover:hover,
.rte a:hover {
    opacity: 1;
}

.rte img {
    height: auto;
    max-width: 100%;
    border: var(--media-border-thickness) solid rgba(var(--color-text), var(--media-border-opacity));
    border-radius: var(--media-border-radius);
    box-shadow: var(--media-shadow-offset-x) var(--media-shadow-offset-y) var(--media-shadow-blur) rgba(var(--color-text), var(--media-shadow-opacity));
    margin-bottom: var(--media-shadow-offset-y);
}

.rte table {
    table-layout: fixed;
}

.modal-card__content-info {
    position: relative;
}

.modal-card__toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.modal-video {
    background: rgba(var(--color-page-background), 0.2);
    box-sizing: border-box;
    height: 100%;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: -1;
    backdrop-filter: blur(7px);
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.modal-video[open] {
    opacity: 1;
    visibility: visible;
    z-index: 9999999999;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.modal-video__content {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: auto;
    padding: 0;
    background-color: #000;
}


.modal-video__toggle {
    align-items: center;
    background-color: rgb(var(--color-page-background));
    border-radius: 50%;
    border: 1px solid rgba(var(--color-text), 0.1);
    color: rgba(var(--color-text), 0.55);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 12px;
    position: fixed;
    right: 43px;
    top: 30px;
    width: 40px;
    z-index: 2;
}

.modal-video__content-info {
    display: flex;
    max-width: 60%;
    width: 100%;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
}



.modal-video__toggle .icon {
    height: auto;
    margin: 0;
    width: 22px;
}

.modal-video__video,
.modal-video__video iframe {
    height: 100%;
    width: 100%;
}

.modal-video__video iframe {
    position: static;
    border: 0;
}

.modal-video__video video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.deferred-media__poster {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.media>.deferred-media__poster {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media>*:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.deferred-media__poster img {
    width: auto;
    max-width: 100%;
    height: 100%;
}

.deferred-media {
    overflow: hidden;
}

.deferred-media iframe {
    border: none;
}

.deferred-media:not([loaded]) template {
    z-index: -1;
}

.deferred-media[loaded]>.deferred-media__poster {
    display: none !important;
}

.deferred-media__poster-button {
    background-color: #ffffff;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1;
}

.deferred-media__poster-button.auto-width {
    width: 15%;
    min-width: 36px;
    max-width: 108px;
    height: auto;
}

.deferred-media__poster-button.auto-width::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.deferred-media__poster-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.deferred-media__poster-button .icon {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.deferred-media__poster-button .icon-play {
    left: 4px;
}

@media (max-width: 959px) {
    .deferred-media__poster-button .icon-play {
        left: 2px;
    }
}

.expandable-content__controls {
    position: relative;
}

.expandable-content__controls .expandable-content__mask {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 84px;
    background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.expandable-content__controls .expandable-content__buttons {
    position: relative;
    z-index: 2;
}

.expandable-content__controls .expandable-content__buttons>* {
    cursor: pointer;
}

.expandable-content__controls .expandable-content__buttons .button-more {
    display: inline-block;
}

.expandable-content__controls .expandable-content__buttons .button-less {
    display: none;
}

.expandable-content__controls.expandable-content__controls--opened .expandable-content__mask {
    display: none;
}

.expandable-content__controls.expandable-content__controls--opened .expandable-content__buttons .button-more {
    display: none;
}

.expandable-content__controls.expandable-content__controls--opened .expandable-content__buttons .button-less {
    display: inline-block;
}

@media screen and (max-width: 959px) {
    .modal-video__toggle {
        right: 5px;
        top: 20px;
    }

    .modal-video__content-info {
        /* height: calc(100% - 60px);
    padding-top: 80px;
    width: calc(100% - 10px); */
        max-width: 100%;
        aspect-ratio: var(--aspect-ratio, 16 / 9);
    }

    .modal-video__video video {
        aspect-ratio: var(--aspect-ratio, 16 / 9);
        max-height: 100dvh;
    }

    .modal-card__toggle {
        right: calc(5% + 20px);
    }
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */


/* fadein animation */
.fadein-03,
.fadein-05,
.fadein-0,
.fadein-1,
.fadein-1-5,
.fadein-2 {
    opacity: 0;
}

@keyframes fadein1 {
    0% {
        transform: translateY(20%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes fadein1 {
    0% {
        transform: translateY(20%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fadein2 {
    0% {
        transform: translateY(20px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes fadein2 {
    0% {
        transform: translateY(20px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fadein3 {
    0% {
        transform: translate(-50%, 20%);
        opacity: 0
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1
    }
}

@-webkit-keyframes fadein3 {
    0% {
        transform: translate(-50%, 20%);
        opacity: 0
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1
    }
}

@keyframes fade-left {
    0% {
        transform: translate(-50%, 0);
        opacity: 0
    }

    100% {
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes fade-left {
    0% {
        transform: translate(-50%, 0);
        opacity: 0
    }

    100% {
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes fade-right {
    0% {
        transform: translate(100%, 0);
        opacity: 0
    }

    100% {
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes fade-right {
    0% {
        transform: translate(100%, 0);
        opacity: 0
    }

    100% {
        transform: translate(0, 0);
        opacity: 1
    }
}

.normalmove .fadein-0 {
    animation: fadein1 .5s linear .1s;
    -moz-animation: fadein1 .5s linear .1s;
    -webkit-animation: fadein1 .5s linear .1s;
    -o-animation: fadein1 .5s linear .1s;
    animation-fill-mode: forwards
}

.normalmove .fadein-03 {
    animation: fadein1 .5s linear .3s;
    -moz-animation: fadein1 .5s linear .3s;
    -webkit-animation: fadein1 .5s linear .3s;
    -o-animation: fadein1 .5s linear .3s;
    animation-fill-mode: forwards
}

.normalmove .fadein-05 {
    animation: fadein1 .5s linear .5s;
    -moz-animation: fadein1 .5s linear .5s;
    -webkit-animation: fadein1 .5s linear .5s;
    -o-animation: fadein1 .5s linear .5s;
    animation-fill-mode: forwards
}

.normalmove .fadein-1 {
    animation: fadein1 .5s linear 1s;
    -moz-animation: fadein1 .5s linear 1s;
    -webkit-animation: fadein1 .5s linear 1s;
    -o-animation: fadein1 .5s linear 1s;
    animation-fill-mode: forwards
}

.normalmove .fadein-1-5 {
    animation: fadein1 .5s linear 1.5s;
    -moz-animation: fadein1 .5s linear 1.5s;
    -webkit-animation: fadein1 .5s linear 1.5s;
    -o-animation: fadein1 .5s linear 1.5s;
    animation-fill-mode: forwards
}

.normalmove .fadein-2 {
    animation: fadein1 .5s linear 2s;
    -moz-animation: fadein1 .5s linear 2s;
    -webkit-animation: fadein1 .5s linear 2s;
    -o-animation: fadein1 .5s linear 2s;
    animation-fill-mode: forwards
}

.normalmove .fadein-2-5 {
    animation: fadein1 .5s linear 2.5s;
    -moz-animation: fadein1 .5s linear 2.5s;
    -webkit-animation: fadein1 .5s linear 2.5s;
    -o-animation: fadein1 .5s linear 2.5s;
    animation-fill-mode: forwards
}

.normalmove .fadein-1-5-center {
    animation: fadein3 .5s linear 1.5s;
    -moz-animation: fadein3 .5s linear 1.5s;
    -webkit-animation: fadein3 .5s linear 1.5s;
    -o-animation: fadein3 .5s linear 1.5s;
    animation-fill-mode: forwards
}

@media (max-width: 749px) {
    .normalmove .fadein-05-mb {
        animation: fadein1 .5s linear .5s;
        -moz-animation: fadein1 .5s linear .5s;
        -webkit-animation: fadein1 .5s linear .5s;
        -o-animation: fadein1 .5s linear .5s;
        animation-fill-mode: forwards
    }
}

.normalmove .fadein-left {
    animation: fade-left 1s linear .1s;
    -moz-animation: fade-left 1s linear .1s;
    -webkit-animation: fade-left 1s linear .1s;
    -o-animation: fade-left 1s linear .1s;
    animation-fill-mode: forwards
}

.normalmove .fadein-right {
    animation: fade-right 1s linear .5s;
    -moz-animation: fade-right 1s linear .5s;
    -webkit-animation: fade-right 1s linear .5s;
    -o-animation: fade-right 1s linear .5s;
    animation-fill-mode: forwards
}

/* Ended fadein animation */


/* Swiper options */
.common-swiper-container-wrapper .swiper-pagination-bullet {
    width: 35px !important;
    height: 5px !important;
    background-color: #dfdfdf !important;
    margin: 0 8px !important;
    border-radius: 5px !important;
    transition: all .3s;
    opacity: 1 !important;
}

.common-swiper-container-wrapper .swiper-pagination-bullet-active {
    background-color: rgb(var(--color-custom-theme)) !important;
}

@media screen and (max-width: 589px) {
    .common-swiper-container-wrapper .swiper-pagination-bullet {
        width: 30px !important;
        margin: 0 6px !important;
    }
}

/* Ended Swiper options */



/* home page sections */
.common-header {
    text-align: center;
}

.common-title {
    font-size: 48px !important;
    margin-top: 0;
    margin-bottom: 28px;
}

@media screen and (max-width: 1919px) {
    .common-title {
        font-size: calc(10px + 2vw) !important;
    }
}

@media screen and (max-width: 989px) {
    .common-title {
        font-size: 36px !important;
    }
}

@media screen and (max-width: 749px) {
    .common-title {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 549px) {
    .common-title {
        font-size: 30px !important;
    }

    section-media-coverage .common-title,
    section-wall-of-fame .common-title {
        font-size: calc(15px + 2vw) !important;
    }
}


.more-center__button {
    text-align: center;
    margin-top: 4%;
}

.more-center__button .button {
    min-height: 3.2rem;
    min-width: 14rem;
}

/* .more-center__button .button:hover{
  background:#169372 !important; 
  color:#fff;
} */
.more-center__button .button:not([disabled]):hover:after {
    --border-offset: 0;
    box-shadow: none;
}

@media screen and (min-width: 750px) {
    .more-center__button .button {
        width: 18rem;
        min-height: 4rem;
    }
}

.see-more-btn {
    font-size: 16px;
    color: rgb(var(--color-custom-theme)) !important;
    display: inline-block;
}

.see-more-btn:hover {
    color: #0e8da4 !important;
}

.common-swiper-container-wrapper {
    position: relative;
}

.common-swiper-container-wrapper .swiper-btn {
    z-index: 2;
    position: absolute;
    top: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.common-swiper-container-wrapper .swiper-btn svg {
    display: block;
    fill: #f0f0f0;
}

.common-swiper-container-wrapper .swiper-btn:hover svg {
    fill: #ebebeb;
}

.common-swiper-container-wrapper .swiper-btn svg path {
    stroke: rgb(var(--color-custom-theme));
}

.common-swiper-container-wrapper .swiper-btn-prev {
    transform: translateY(calc(-50%));
    left: -4vw;
}

.common-swiper-container-wrapper .swiper-btn-next {
    transform: translateY(calc(-50%));
    right: -4vw;
}

.common-swiper-container-wrapper .swiper-btn[aria-disabled="true"] {
    opacity: 0;
}

@media screen and (max-width: 1450px) {
    .common-swiper-container-wrapper .swiper-btn svg {
        width: 48px;
        height: 48px;
    }

    .common-swiper-container-wrapper .swiper-btn-prev {
        left: -48px;
    }

    .common-swiper-container-wrapper .swiper-btn-next {
        right: -48px;
    }
}

/* home page sections */


.product-recommendations-wrapper,
.product-recommendations-wrapper .page-width {
    background-color: #fff !important;
}

.section-announcement-bar+.plugin-isv-multiLanguage {
    display: none !important;
    position: fixed;
    z-index: 21;
    top: 0;
    right: 5vw;
}

.section-announcement-bar+.plugin-isv-multiLanguage .plugin-isv-multiLanguage_header .toolbar {
    background-color: transparent;
}

.section-announcement-bar+.plugin-isv-multiLanguage .plugin-isv-multiLanguage_header {
    background-color: transparent;
    transition: 0.6s;
    border-radius: 8px;
    padding: 3px 0;
}

@media (max-width:959px) {
    .section-announcement-bar+.plugin-isv-multiLanguage {
        display: none;
    }

    .section-announcement-bar+.plugin-isv-multiLanguage .display-none-tablet {
        display: inline !important;
        background: transparent;
    }

    .section-announcement-bar+.plugin-isv-multiLanguage {
        top: -10px;
    }
}

@media (min-width:1300px) {
    .section-announcement-bar+.plugin-isv-multiLanguage {
        right: calc((100% - 1300px)/2);
    }
}

@media (min-width:960px) {
    .plugin-isv-multiLanguage_header .isv_container {
        display: none !important;
    }

    .section-announcement-bar+.plugin-isv-multiLanguage {
        top: 5px;
        display: none !important;
    }

    .section-announcement-bar+.plugin-isv-multiLanguage:hover .plugin-isv-multiLanguage_header {
        background-color: #29bbd7;
    }
}

.plugin-isv-multiLanguage .isv-pc-language-wrap.locale-currency.is_dropdown[data-position=header] button {
    color: #fff;
    padding: 0;
}

.header-nav-list .mega-menu__bottom-buttons>a.button--secondary.btn-color--white,
.mb-mega-menu__product-list .mega-menu__bottom-buttons .button.btn-color--white {
    display: none;
}

/* 首页learn more 按钮和首页其他调整
  * date：2024-05-29
  */
#member-system-plugin .styles__PluginIcon-sc-18ndyll-0 {
    bottom: calc(160px + 5vw) !important;
}


/* 增加产品详情页三个模块的按钮
  * date：2024-06-12
  */
.hastextbutton .tnv30textmedia-content,
.hastextbutton .tnv30textwithimage-wz-content,
.hastextbutton .tnv30operationtext-content {
    margin-bottom: 0;
}

.hastextbutton .button.btnho-procustom {
    margin: 20px 0 25px;
}

@media (max-width:550px) {
    .hastextbutton .button.btnho-procustom {
        margin: 15px 0 0;
    }
}

.productnew-tnv30 a.pro4kbtn:hover {
    color: #fff;
}


/* D9pro advertisement page
  * date：2024-06-12
  */
.pages-d9pro-adv img,
.productnew-d9-pro-3 img {
    vertical-align: top;
}

.pages-d9pro-adv .pro4kteoverimgte-center,
.productnew-d9-pro-3 .pro4kteoverimgte-center {
    width: 100%;
}

.pages-d9pro-adv .pro4kteoverimg-container .tnv30scrollimg-box-title,
.productnew-d9-pro-3 .pro4kteoverimg-container .tnv30scrollimg-box-title {
    font-size: calc(3.125vw + 20px);
    margin-top: 3vw;
}

.pages-d9pro-adv .tnv30textmedia-container,
.productnew-d9-pro-3 .tnv30textmedia-container {
    padding-top: 0;
    padding-bottom: 0;
}

.pages-d9pro-adv .tnv30textmedia-container .tnv30operationtext-title,
.productnew-d9-pro-3 .tnv30textmedia-container .tnv30operationtext-title {
    font-size: calc(12px + 2.5vw);
    line-height: 1.2;
    margin-bottom: 3px;
}

.tnv30textmedia-subtitle {
    font-size: calc(12px + 1.25vw);
    margin-bottom: 0.9vw;
}

.pages-d9pro-adv .tnv30textmedia-container .tnv30textmedia-content,
.productnew-d9-pro-3 .tnv30textmedia-container .tnv30textmedia-content {
    margin-bottom: calc(17px + 1vw);
    padding: 0 1vw;
    font-size: calc(12px + 0.4vw);
}

.advtextimglist-title {
    font-size: calc(12px + 1.25vw);
    margin-bottom: calc(10px + 0.3vw);
}

.advtextimglist-con {
    font-size: calc(12px + 2.5vw);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: calc(10px + 0.8vw);
}

.advtextimglist-imgbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(12px + 0.6vw);
}

.advtextimglist-imgbox-item {
    grid-column: span 1;
    grid-row: span 1;
    position: relative;
    border-radius: 0.5vw;
    overflow: hidden;
}

.advtextimglist-ittitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.25;
    font-size: calc(12px + 0.625vw);
    width: 62%;
}

.switch_textadv {
    display: flex;
    flex-direction: column;
}

.switch_textadv .tnv30textmedia-subtitle {
    order: -1;
    margin-bottom: 2px;
    font-size: calc(6px + 1.25vw);
}

.pages-d9pro-adv .tnv30textmedia-container .tnv30operationtext-title,
.productnew-d9-pro-3 .tnv30textmedia-container .tnv30operationtext-title {
    font-size: calc(12px + 1.875vw);
    margin-bottom: calc(8px + 0.4vw);
}

.tnv30textmedia-container .switch_textadv .tnv30textmedia-content {
    color: #666666 !important;
    margin-bottom: calc(16px + 1.3vw);
}

.advmutitextandimg-box-item {
    margin-bottom: calc(30px + 1.5vw);
}

.advmutitextandimg-box-item img {
    border-radius: 10px;
}

.advmutitextandimg-itimg {
    width: 48%;
}

.advmutitextandimg-text {
    width: 52%;
    padding: 10px 1vw 10px 3.5vw;
}

.advmtai-boxitem-right .advmutitextandimg-itimg {
    order: 3;
}

.advmtai-boxitem-right .advmutitextandimg-text {
    padding: 10px 2.6vw 10px 0;
}

.advmutitextandimg-ittoptitle {
    margin-bottom: 0.5vw;
    line-height: 1.2;
    font-size: calc(6px + 1.25vw);
    font-weight: 500;
}

.advmutitextandimg-ittitle {
    font-size: calc(12px + 1.875vw);
    margin-bottom: calc(8px + 0.4vw);
    line-height: 1.2;
    font-weight: 600;
}

.advmutitextandimg-itcon {
    color: #666666 !important;
    line-height: 1.5;
    font-size: calc(12px + 0.4vw);
}

.advmutitextandimg-box-item {
    display: flex;
    align-items: center;
}

.advpowerbu-container {
    position: relative;
}

.advpowerbu-container>.container-ho {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

.advpowerbu-toptextbox {
    position: absolute;
    top: 8vw;
    left: 20px;
    display: flex;
}

.advpowerbu-bottextbox {
    position: absolute;
    bottom: 3.7vw;
    left: 20px;
}

.advpowerbutopbot-title {
    font-size: calc(12px + 1.875vw);
    margin-bottom: calc(8px + 0.4vw);
    line-height: 1.2;
    font-weight: 600;
}

.advpowerbutopbot-content {
    line-height: 1.5;
    font-size: calc(12px + 0.4vw);
}

.advpowerbu-toptextbox-item {
    margin-right: 6.5vw;
}

.advpowerbutop-ittitle {
    font-size: calc(12px + 0.4vw);
    line-height: 1.2;
    margin-bottom: 0.8vw;
}

.advpowerbutop-itcon {
    color: #308FA1;
    font-size: calc(12px + 1.875vw);
    line-height: 1.2;
    font-weight: 600;
}

.advmugridimg-box {
    display: flex;
    justify-content: space-between;
}

.advmugridimg-box-item {
    width: calc((100% - 3vw)/2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.advmugridimg-item-bottom .advmugridimg-itimg {
    order: 2;
}

.advmugridimg-text {
    padding: 5.8vw 1vw 8vw;
}

.advmugridimg-item-bottom .advmugridimg-text {
    padding: 7.5vw 1vw 5.8vw 0;
}

.advmugridimg-itimg img,
.advswiperimg-switem img {
    border-radius: 10px;
}

.advswiperimg-switem {
    position: relative;
}

.advswiperimg-switem::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.8;
}

.swiper-slide-active .advswiperimg-switem::after {
    opacity: 0;
    z-index: -1;
}

.advmugridimg-itcon {
    color: #666666;
    line-height: 1.5;
    font-size: calc(12px + 0.4vw);
}

.advmugridimg-itcon strong {
    color: #000;
}

.advmugridimg-ittitle {
    font-size: calc(12px + 1.875vw);
    margin-bottom: calc(8px + 0.4vw);
    line-height: 1.2;
    font-weight: 600;
}

.advswiperimg-ittitle {
    font-size: calc(12px + 1.875vw);
    margin-bottom: 2.5vw;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

.advswiperimg-autherbox {
    text-align: center;
    margin-top: 1vw;
    display: flex;
    position: relative;
    z-index: 3;
    justify-content: center;
    opacity: 0;
}

.swiper-slide-active .advswiperimg-autherbox {
    opacity: 1;
}

span {
    vertical-align: baseline;
    display: inline-block;
    align-self: center;
    line-height: 1.2;
}

.advswiperimg-autherbox img {
    width: calc(15px + 1.5vw);
    margin-right: calc(6px + 0.4vw);
}

.advreview-container .swiper-container {
    padding-bottom: 50px;
}

.advreview-container {
    text-align: center;
}

.advreview-title {
    font-size: calc(12px + 1.875vw);
    margin-bottom: 2vw;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

.advreview-container .swiper-slide {
    height: auto;
}

.advreview-switem {
    padding: 2.2vw 2.4vw 2.5vw;
    background: #F8F8F8;
    border-radius: 10px;
    height: 100%;
}

.advreview-switem>img {
    width: 5.2vw;
    margin-bottom: 0.65vw;
}

.advreview-switem-title {
    font-size: calc(0.625vw + 12px);
    margin-bottom: 0.4vw;
    font-weight: 600;
}

.advreview-switem-content {
    color: #666666;
    font-size: calc(0.625vw + 4px);
    line-height: 1.5;
    margin-bottom: 1vw;
}

.advreview-stasbox>img {
    width: calc(8px + 0.42vw);
    margin: 0 2px;
}

.advreview-container .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    margin: 0 6px;
    border-radius: 3px;
    background: #666666;
    opacity: 0.5;
}

.advreview-container .swiper-pagination-bullet-active {
    background: #308FA1;
    opacity: 1;
}

.advrichtext-content {
    text-align: center;
    font-size: calc(12px + 2.5vw);
    line-height: 1.2;
}

.advshipinfo-container {
    text-align: center;
}

.advshipinfo-title {
    font-size: calc(12px + 1.875vw);
    margin-bottom: 2.6vw;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

.advshipinfo-imgbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.advshipinfo-container .advshipinfo-btn {
    background: #000;
    display: inline-block;
    padding: 9px calc(1.82vw + 11px);
    border-radius: 10px;
    color: #fff;
    margin-top: 2.5vw;
    line-height: 1.5;
}

.advshipinfo-container .advshipinfo-btn:hover {
    opacity: 0.6;
    color: #fff;
}

.advshipinfo-itimg img {
    max-height: calc(13px + 2vw);
    margin-bottom: calc(8px + 0.5vw);
}

.advshipinfo-ittitle {
    font-size: calc(0.625vw + 12px);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: calc(0.2vw + 5px);
}

.advshipinfo-itcon {
    color: #666666;
    font-size: calc(0.625vw + 8px);
}

.procomparison-container {
    display: flex;
    font-size: 15px;
    text-align: center;
    justify-content: flex-end;
    background: #fff;
    border-radius: 10px;
}

.procomparison_left {
    width: 25%;
    position: relative;
}

.procomparison_right {
    width: 75%;
}

.advcomparison-title {
    font-size: calc(12px + 1.875vw);
    margin-bottom: 1.8vw;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
}

.procomparison-probox {
    padding: 0 calc(0.625vw + 10px);
    color: #999999;
}

.procomparison_left .procomparison-probox {
    color: #000;
}

.procomparison-itemtitle.procomparison-itemspec {
    font-size: calc(0.625vw + 8px);
    font-weight: 500;
}

.procomparison-probox a {
    color: #999999;
}

.swiper-slide-active .procomparison-probox * {
    color: #fff;
}

.swiper-slide-active .procomparison-probox {
    background: linear-gradient(180deg, #38B5BB 0%, #308FA1 100%);
}

.swiper-slide-active .procomparison-itemtitle.procomparison-itemspec {
    font-weight: 600;
}

.procomparison-itemspec {
    border-top: 1px dashed #DDDDDD;
    padding: 15px 10px;
}

.procomparison-itemtitle.procomparison-itemspec,
.procomparison-proimg.procomparison-itemspec {
    border-top: none;
}

.procomparison-proimg.procomparison-itemspec {
    padding: calc(1vw + 14px) 10px 8px;
}

.procomparison_left .procomparison-itemtitle,
.procomparison_left .procomparison-proimg {
    opacity: 0;
}

.procomparison-proimg img {
    max-height: calc(2.5vw + 60px);
}

.procomparison-itemspec .height_item {
    display: flex;
    text-align: left;
    align-items: center;
}

.procomparison_right .procomparison-itemspec .height_item {
    justify-content: center;
    text-align: center;
}

.procomparison_left .procomparison-itemspec {
    position: relative;
    padding-left: 35px;
    font-weight: 500;
}

.procomparison_left .procomparison-itemspec:before {
    position: absolute;
    content: '';
    width: 9px;
    height: 9px;
    background: #308FA1;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-procomparison .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}

.procomparison-itemspec:last-child {
    padding-bottom: 30px;
}

.procomparison_left .procomparison-itemspec:last-child:before {
    transform: translateY(calc(-50% - 7px));
}

.advnav-bar {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    align-items: center;
    font-size: calc(0.625vw + 4px);
}

.advnav-list {
    margin-right: 0px;
    margin-left: auto;
}

.advnav-item {
    margin-right: calc(1.25vw + 20px);
    cursor: pointer;
}

.advnav-btn {
    display: inline-block;
    padding: 9px 2.7vw;
    background: #308FA1;
    color: #fff;
    cursor: pointer;
}

.advnav-title {
    font-size: calc(8px + 0.625vw);
    font-weight: 600;
    line-height: 1.5;
}

.stickadvbox {
    position: sticky;
    top: 0;
    z-index: 9;
}

.hidebox {
    visibility: hidden;
    opacity: 0;
    z-index: -1 !important;
}

.advpowerbu-image img {
    width: 100%;
}

.advswiperimg-switem>img {
    width: 100%;
}

@media (min-width:2000px) {

    .pages-d9pro-adv .container-ho,
    .productnew-d9-pro-3 .container-ho,
    .pages-d9pro-adv .tnv30textmedia-container,
    .productnew-d9-pro-3 .tnv30textmedia-container {
        max-width: calc(1340px + 10vw);
    }
}

@media (max-width:1550px) {
    .advtextimglist-text {
        max-width: 1100px;
    }

    .pages-d9pro-adv .container-ho,
    .productnew-d9-pro-3 .container-ho,
    .pages-d9pro-adv .tnv30textmedia-container,
    .productnew-d9-pro-3 .tnv30textmedia-container {
        max-width: 1240px;
    }

    .advnav-bar {
        padding: 14px 0;
    }
}

@media (max-width:1200px) {

    .pages-d9pro-adv .pro4kteoverimg-container .tnv30scrollimg-box-title,
    .productnew-d9-pro-3 .pro4kteoverimg-container .tnv30scrollimg-box-title {
        font-size: 4.2vw;
    }

    .advnav-bar {
        font-size: calc(0.2vw + 12px);
    }

    .pages-d9pro-adv .header__container_wrapper>.page-width,
    .productnew-d9-pro-3 .header__container_wrapper>.page-width {
        padding-left: 20px;
        padding-right: 20px;
    }

    .advreview-switem-content {
        font-size: calc(0.1vw + 12px);
    }

    .advreview-stasbox>img {
        width: calc(12px + 0.42vw);
    }

    .procomparison_right {
        width: 67%;
    }

    .procomparison_left {
        width: 33%;
    }


}

@media (max-width:993px) {

    .pages-d9pro-adv .tnv30textmedia-container .tnv30textmedia-content,
    .productnew-d9-pro-3 .tnv30textmedia-container .tnv30textmedia-content {
        margin-bottom: calc(17px + 1vw);
        padding: 0;
        font-size: calc(12px + 0.4vw);
    }

    .advnav-title {
        font-size: calc(12px + 1vw);
    }

    .advtextimglist-imgbox {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width:768px) {

    .pages-d9pro-adv .pro4kteoverimg-container .tnv30scrollimg-box-title,
    .productnew-d9-pro-3 .pro4kteoverimg-container .tnv30scrollimg-box-title {
        font-size: 6vw;
        line-height: 1.2;
    }

    .pages-d9pro-adv .tnv30textmedia-textbk,
    .productnew-d9-pro-3 .tnv30textmedia-textbk {
        text-align: center;
    }

    .pages-d9pro-adv .tnv30textmedia-container .tnv30operationtext-title,
    .productnew-d9-pro-3 .tnv30textmedia-container .tnv30operationtext-title {
        font-size: calc(12px + 3vw);
        font-family: "Poppins-Bold", "Poppins-Regular", "sans-serif";
    }

    .tnv30textmedia-subtitle {
        font-size: calc(12px + 1.5vw);
        margin-bottom: 2vw;
        line-height: 1.5;
    }

    .switch_textadv .tnv30textmedia-subtitle {
        font-size: calc(12px + 1.5vw);
        margin-bottom: 4px;
    }

    .advmutitextandimg-ittoptitle {
        font-size: calc(12px + 1vw);
        margin-bottom: 1.1vw;
    }

    .advmutitextandimg-ittitle {
        font-size: calc(12px + 2.5vw);
        margin-bottom: calc(8px + 0.8vw);
    }

    .advpowerbutop-ittitle {
        font-size: calc(12px + 0.6vw);
        margin-bottom: 1.3vw;
    }

    .advpowerbutop-itcon {
        font-size: calc(12px + 2.5vw);
    }

    .advpowerbu-toptextbox-item {
        margin-right: 10vw;
    }

    .advmugridimg-ittitle {
        font-size: calc(12px + 2vw);
    }

    .advswiperimg-ittitle {
        font-size: calc(12px + 2.5vw);
        margin-bottom: 3.5vw;
    }

    .advswiperimg-autherbox img {
        width: calc(15px + 3vw);
        margin-right: calc(8px + 0.5vw);
    }

    .advswiperimg-container {
        padding: 8vw 20px !important;
    }

    .advswiperimg-autherbox {
        margin-top: 2vw;
    }

    .advreview-title {
        font-size: calc(12px + 2.5vw);
        margin-bottom: 3vw;
    }

    .advreview-switem {
        padding: 3.2vw 4.4vw 3.5vw;
    }

    .advreview-switem-content {
        font-size: calc(0.3vw + 12px);
        margin-bottom: 2vw;
    }

    .advreview-switem>img {
        width: 7.2vw;
        margin-bottom: 1.5vw;
    }

    .advreview-switem-title {
        font-size: calc(1.2vw + 12px);
        margin-bottom: 1.2vw;
    }

    .advreview-stasbox>img {
        width: calc(12px + 1.5vw);
    }

    .advcomparison-conbox>.container-ho {
        position: relative;
        padding-right: 0;
        padding-bottom: 40px;
    }

    .advcomparison-conbox .swiper-scrollbar {
        left: 50% !important;
        max-width: 200px;
        height: 3px !important;
        border-radius: 3px;
        transform: translateX(-50%);
        background: rgb(102, 102, 102, 0.5);
    }

    .advcomparison-conbox .swiper-scrollbar-drag {
        background: #308FA1;
    }

    .procomparison-itemtitle.procomparison-itemspec {
        font-size: calc(1vw + 12px);
    }

    .advcomparison-conbox {
        padding-top: 6vw !important;
    }

    .advcomparison-title {
        font-size: calc(12px + 2.5vw);
        margin-bottom: 2.8vw;
    }

    .procomparison-container {
        border-radius: 0;
    }

    .advnav-bar {
        padding: 8px 0;
    }

    .advswiperimg-container .swiper-button-next,
    .advswiperimg-container .swiper-button-prev {
        width: 7.5vw;
        height: 7.5vw;
    }

    .advswiperimg-container .swiper-button-next:after,
    .advswiperimg-container .swiper-button-prev:after {
        display: none;
    }

    .advswiperimg-container .swiper-button-next {
        right: 1px;
    }

    .advswiperimg-container .swiper-button-prev {
        left: 1px;
    }


}

.advswiperimg-switem>.plyr {
    border-radius: 10px;
}

@media (max-width:550px) {
    .advswiperimg-switem>.plyr {
        border-radius: 5px;
    }

    .pages-d9pro-adv .container-ho,
    .productnew-d9-pro-3 .container-ho {
        padding: 0 4vw;
    }

    .pages-d9pro-adv .advnav-container>.container-ho,
    .productnew-d9-pro-3 .advnav-container>.container-ho {
        padding: 0 3vw 0 6vw;
    }

    .advnav-list {
        width: 100%;
        order: 3;
        padding-top: 8px;
        margin-top: 8px;
        position: relative;
    }

    .advnav-list:after {
        content: '';
        width: calc(100% + 9vw);
        position: absolute;
        height: 1px;
        top: 0;
        left: -6vw;
        background: #434343;
    }

    .advnav-bar {
        padding: 9px 0;
        flex-wrap: wrap;
    }

    .advnav-item {
        margin-right: calc(2vw + 20px);
    }

    .advnav-btn {
        padding: 5px calc(2vw + 15px);
        font-size: 12px;
    }

    .advnav-title {
        font-size: calc(12px + 1.8vw);
        /* font-size: calc(12px + 0.77vw); */
    }

    .pages-d9pro-adv .pro4kteoverimg-container .tnv30scrollimg-box-title,
    .productnew-d9-pro-3 .pro4kteoverimg-container .tnv30scrollimg-box-title {
        font-size: 10.6vw;
        line-height: 1.16;
    }

    .pages-d9pro-adv .Product-TextWithMedia>div,
    .productnew-d9-pro-3 .Product-TextWithMedia>div {
        padding-top: 7.8vw !important;
        padding-bottom: 13vw !important;
    }

    .pages-d9pro-adv .tnv30textmedia-container,
    .productnew-d9-pro-3 .tnv30textmedia-container {
        padding-left: 0;
        padding-right: 0;
    }

    .pages-d9pro-adv .tnv30textmedia-textbk,
    .productnew-d9-pro-3 .tnv30textmedia-textbk {
        padding: 0 4vw;
    }

    .pages-d9pro-adv .tnv30textmedia-container .tnv30operationtext-title,
    .productnew-d9-pro-3 .tnv30textmedia-container .tnv30operationtext-title {
        font-size: 7.8vw;
        margin-bottom: calc(2px + 0.4vw);
    }

    .tnv30textmedia-subtitle {
        font-size: 4.68vw;
        margin-bottom: 1.8vw;
    }

    .pages-d9pro-adv .tnv30textmedia-container .tnv30textmedia-content,
    .productnew-d9-pro-3 .tnv30textmedia-container .tnv30textmedia-content {
        margin-bottom: 6.5vw;
        padding: 0;
        font-size: 3.2vw;
    }

    .pages-d9pro-adv .tnv30textmedia-wrapper img,
    .productnew-d9-pro-3 .tnv30textmedia-wrapper img {
        border-radius: 0;
    }

    #advtextimglist-1718173672674f960ad8 {
        padding-top: 10.5vw !important;
        padding-bottom: 10.5vw !important;
    }

    .advtextimglist-title {
        font-size: 4.68vw;
        margin-bottom: calc(5px + 1vw);
        line-height: 1.2;
        padding: 0 1vw;
    }

    .advtextimglist-con {
        font-size: 7.8vw;
        margin-bottom: 4.5vw;
    }

    .advtextimglist-imgbox {
        gap: 3.7vw;
    }

    .advtextimglist-ittitle {
        font-size: 3.2vw;
        width: 80%;
    }

    #advtextimglist-17181758957391f1eef0 {
        padding-top: 11vw !important;
        padding-bottom: 5vw !important;
    }

    .pages-d9pro-adv #advtextimglist-17181758957391f1eef0 .container-ho,
    .productnew-d9-pro-3 #advtextimglist-17181758957391f1eef0 .container-ho {
        padding: 0 7vw 0 6vw;
    }

    .switch_textadv .tnv30textmedia-subtitle {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .pages-d9pro-adv .tnv30textmedia-container .switch_textadv .tnv30operationtext-title,
    .productnew-d9-pro-3 .tnv30textmedia-container .switch_textadv .tnv30operationtext-title {
        font-size: 6.4vw;
        line-height: 1.2;
        padding: 0 5vw;
        margin-bottom: 2vw;
    }

    .pages-d9pro-adv .tnv30textmedia-container .switch_textadv .tnv30textmedia-content,
    .productnew-d9-pro-3 .tnv30textmedia-container .switch_textadv .tnv30textmedia-content {
        margin-bottom: 4vw;
    }

    .switch_textadv+.tnv30textmedia-wrapper {
        padding: 0 4vw;
    }

    .pages-d9pro-adv .Product-TextWithMedia>div#tnv30textmedia-171817652714734a0db6,
    .productnew-d9-pro-3 .Product-TextWithMedia>div#tnv30textmedia-171817652714734a0db6 {
        padding-top: 11vw !important;
    }

    .advmutitextandimg-box-item {
        flex-wrap: wrap;
    }

    .advmutitextandimg-itimg {
        order: 3;
        width: 100%;
    }

    .advmtai-boxitem-right .advmutitextandimg-text,
    .advmutitextandimg-text {
        width: 100%;
        padding: 0 3vw 4vw;
        text-align: center;
    }

    .advmutitextandimg-box-item {
        margin-bottom: 11vw;
    }

    .advmutitextandimg-ittoptitle {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .advmutitextandimg-ittitle {
        font-size: 6.4vw;
        line-height: 1.2;
        margin-bottom: 2vw;
    }

    .advmutitextandimg-itcon {
        font-size: 3.2vw;
    }

    #advmutitextandimg-1718178898012452298e {
        padding-bottom: 2vw !important;
    }

    .pages-d9pro-adv .Product-TextWithMedia>div#tnv30textmedia-1718180532801c861008,
    .productnew-d9-pro-3 .Product-TextWithMedia>div#tnv30textmedia-1718180532801c861008 {
        padding-bottom: 11vw !important;
    }

    .advpowerbutop-ittitle {
        font-size: 3.2vw;
        margin-bottom: 2vw;
    }

    .advpowerbutop-itcon {
        font-size: 6.4vw;
    }

    .advpowerbu-toptextbox-item {
        margin-right: 0;
    }

    .advpowerbu-toptextbox-item:first-child {
        margin-right: 13vw;
    }

    .advmutitextandimg-box-item img {
        border-radius: 5px;
    }

    .advpowerbu-toptextbox {
        top: 9vw;
        left: 7vw;
    }

    .advpowerbu-bottextbox {
        bottom: 8vw;
        left: 6vw;
        width: 90%;
    }

    .advpowerbutopbot-title {
        font-size: 6.4vw;
        margin-bottom: 2vw;
    }

    .advpowerbutopbot-content {
        font-size: 3.2vw;
    }

    .advmugridimg-box {
        flex-wrap: wrap;
    }

    .advmugridimg-box-item {
        width: 100%;
    }

    .advmugridimg-itimg img,
    .advswiperimg-switem img {
        border-radius: 5px;
    }

    .advmugridimg-itimg {
        order: 3;
    }

    .advswiperimg-container {
        padding: 10vw 4vw !important;
    }

    .advswiperimg-ittitle,
    .advreview-title {
        font-size: 6.4vw;
        margin-bottom: 4vw;
    }

    .advswiperimg-autherbox {
        margin-top: 2.4vw;
        font-size: 3.2vw;
    }

    .advswiperimg-autherbox img {
        width: 9vw;
        margin-right: 2vw;
    }

    .advreview-switem {
        padding: 6vw 5vw;
        border-radius: 5px;
    }

    .advreview-switem-title {
        font-size: 3.7vw;
        margin-bottom: 2vw;
    }

    .advreview-switem-content {
        font-size: 2.8vw;
        margin-bottom: 3vw;
    }

    .advreview-container .swiper-pagination-bullet {
        width: 30px;
        height: 2px;
        margin: 0 4px;

    }

    .advreview-switem>img {
        width: 13vw;
    }

    .advreview-container .swiper-container {
        padding-bottom: 25px;
    }

    .advreview-stasbox>img {
        width: 3vw;
        margin: 0;
    }

    .advcomparison-conbox {
        padding-top: 8vw !important;
        padding-bottom: 12vw !important;
    }

    .pages-d9pro-adv .advcomparison-conbox>.container-ho,
    .productnew-d9-pro-3 .advcomparison-conbox>.container-ho {
        padding-right: 0;
        padding-bottom: 30px;
    }

    .procomparison-container {
        font-size: 12px;
        border-radius: 5px;
        line-height: 1.2;
    }

    .procomparison_right {
        width: 53%;
    }

    .procomparison_left {
        width: 47%;
    }

    .procomparison-proimg img {
        max-height: 14vw;
    }

    .procomparison-itemtitle.procomparison-itemspec {
        font-size: 13px;
    }

    .advcomparison-title {
        font-size: 6.4vw;
        margin-bottom: 6vw;
    }

    .procomparison_left .procomparison-itemspec:before {
        width: 5px;
        height: 5px;
        left: 2px;
    }

    .procomparison_left .procomparison-itemspec {
        padding-left: 15px;
    }

    .advcomparison-conbox .swiper-scrollbar {
        max-width: 150px;
    }

    .advrichtext-content {
        font-size: 7.8vw;
    }

    .advrichtext-container {
        padding-top: 10vw !important;
        padding-bottom: 10vw !important;
    }

    .advshipinfo-container {
        padding-top: 8vw !important;
        padding-bottom: 12vw !important;
    }

    .advshipinfo-title {
        font-size: 6.4vw;
        margin-bottom: 8vw;
    }

    .advshipinfo-imgbox {
        grid-template-columns: 1fr 1fr;
        gap: 8vw;
        padding-right: 4vw;
    }

    .advshipinfo-itimg img {
        max-height: calc(13px + 3vw);
        margin-bottom: calc(8px + 1vw);
    }

    .advshipinfo-container .advshipinfo-btn {
        padding: 6px calc(3vw + 12px);
        border-radius: 5px;
        margin-top: 7.5vw;
        font-size: 12px;
    }

    .advshipinfo-ittitle {
        font-size: calc(0.5vw + 12px);
    }

    .advshipinfo-itcon {
        font-size: calc(0.625vw + 9px);
    }

    .advmugridimg-container {
        padding-top: 10vw !important;
        padding-bottom: 5vw !important;
    }

    .advmugridimg-ittitle {
        font-size: 6.4vw;
        margin-bottom: 2vw;
    }

    .advmugridimg-itcon {
        font-size: 3.2vw;
    }

    .advmugridimg-text,
    .advmugridimg-item-bottom .advmugridimg-text {
        padding: 1vw 0 5vw;
    }

    .advmugridimg-box-item {
        margin-bottom: 8vw;
    }
}


@media (min-width:551px) and (max-width:1200px) {
    .advpowerbu-bottextbox {
        padding-right: 40px;
    }
}

.pages-d9pro-adv #MainContent,
.productnew-d9-pro-3 #MainContent {
    font-family: "Poppins", "Poppins-Regular";
}

.pro4kteoverimg-container video {
    vertical-align: top;
    margin-bottom: -1px;
}

.pages-d9pro-adv .pro4kteoverimg-container .animate-ele,
.productnew-d9-pro-3 .pro4kteoverimg-container .animate-ele {
    transform: translateY(0);
    opacity: 1;
}

.ser-supportpage.page-width.page-width--narrow {
    max-width: 1300px;
}

.pages-bd52a5bc0d464adb8dee75c8bfa3153e .christmas-collection img {
    vertical-align: top;
}

.pages-bd52a5bc0d464adb8dee75c8bfa3153e .christmas-collection .christmas__products-container .grid {
    margin-bottom: 0;
}

.pages-bd52a5bc0d464adb8dee75c8bfa3153e .christmas-collection .christmas__products-container {
    margin-top: 0;
    margin-bottom: 0;
}

.pages-bd52a5bc0d464adb8dee75c8bfa3153e .christmas_width {
    width: 100%;
    padding: 0;
}

.pages-bd52a5bc0d464adb8dee75c8bfa3153e .christmas-collection .text-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

/* 2024年8月3日全局除了产品页 */
#tidio-chat-iframe {
    bottom: 50px !important;

}

#tidio-chat {
    z-index: 100 !important;
}

.advc-back-to-top {
    right: 27px !important;
}

@media(min-width: 960px) {
    .advc-back-to-top {
        border-radius: 50px !important;
        width: 58px !important;
        height: 58px !important;
    }

    #tidio-chat {
        bottom: 60px !important;
    }
}

@media(max-width: 959px) {
    #tidio-chat {
        bottom: 58px !important;
    }
}

@media only screen and (max-width: 767px) {
    #tidio-chat-iframe {
        bottom: 160px !important;
    }

    .advc-back-to-top {
        right: 17px !important;
        bottom: 122px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

@media(min-width: 769px) {
    .is-m {
        display: none;
    }

    .mb-show {
        display: none;
    }
}

@media(max-width: 768px) {
    .is-pc {
        display: none;
    }

    .pc-show {
        display: none;
    }
}

@media(min-width: 960px) {
    .hide-pc {
        display: none;
    }
}

@media(max-width: 959px) {
    .hide-mb {
        display: none;
    }

}

/* 渐入动画 */
.animate-ele {
    transform: translateY(30px);
    opacity: 0;
    transition: .3s linear;
}

.animate-ele.animate-top {
    transform: translateY(0);
    opacity: 1;
}

/* 按钮样式 */
.btn {
    border-radius: var(--btn-border-radius);
}

.btn a {
    line-height: 1.2;
    transition: 0.3s ease;
    min-width: 120px;
    padding: 10px;
    display: inline-block;
    text-align: center;
    border-radius: var(--btn-border-radius);
}

.btn.primary a {
    color: #FFF;
    background: #13B2BA;
}

.btn.wire a {
    color: #FFF;
    border: 1px solid #fff;
    background: transparent;
}

.btn.primary a:hover {
    background: #0E7F94;
}

.btn.wire a:hover {
    background: #fff;
    color: #000;
}

/* 首页样式 */
.home-title {
    color: #00080B;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 40px;
}

@media(max-width: 768px) {
    .home-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
}

/* fontSpacing start */

.mileseeyH1 {
    font-size: 72px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyH2 {
    font-size: 60px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyH3 {
    font-size: 48px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyH4 {
    font-size: 36px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyH5 {
    font-size: 30px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyH6 {
    font-size: 24px;
    font-weight: 600;
    padding: 0 0 1em 0;
    line-height: 1.2;
}

.mileseeyP1 {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

.mileseeyP2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.mileseeyP3 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.mileseeyP4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
}

.mileseeyP5 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.mileseeyP6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.spacingTop1 {
    padding-top: 100px;
}

.spacingTop2 {
    padding-top: 70px;
}

.spacingTop3 {
    padding-top: 60px;
}

.spacingTop4 {
    padding-top: 40px;
}

.spacingTop5 {
    padding-top: 30px;
}

.spacingTop6 {
    padding-top: 24px;
}

.spacingTop7 {
    padding-top: 20px;
}

.spacingBottom1 {
    padding-bottom: 100px;
}

.spacingBottom2 {
    padding-bottom: 70px;
}

.spacingBottom3 {
    padding-bottom: 60px;
}

.spacingBottom4 {
    padding-bottom: 40px;
}

.spacingBottom5 {
    padding-bottom: 30px;
}

.spacingBottom6 {
    padding-bottom: 24px;
}

.spacingBottom7 {
    padding-bottom: 20px;
}

@media only screen and (max-width: 1920px) {
    .mileseeyH1 {
        font-size: 60px;
    }

    .mileseeyH2 {
        font-size: 48px;
    }

    .mileseeyH3 {
        font-size: 36px;
    }

    .mileseeyH4 {
        font-size: 30px;
    }

    .mileseeyH5 {
        font-size: 24px;
    }

    .mileseeyH6 {
        font-size: 20px;
    }

    .mileseeyP1 {
        font-size: 24px;
    }

    .mileseeyP2 {
        font-size: 20px;
    }

    .mileseeyP3 {
        font-size: 18px;
    }

    .mileseeyP4 {
        font-size: 16px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 14px;
    }

    .spacingTop1 {
        padding-top: 80px;
    }

    .spacingTop2 {
        padding-top: 60px;
    }

    .spacingTop3 {
        padding-top: 40px;
    }

    .spacingTop4 {
        padding-top: 30px;
    }

    .spacingTop5 {
        padding-top: 24px;
    }

    .spacingTop6 {
        padding-top: 20px;
    }

    .spacingTop7 {
        padding-top: 18px;
    }

    .spacingBottom1 {
        padding-bottom: 80px;
    }

    .spacingBottom2 {
        padding-bottom: 60px;
    }

    .spacingBottom3 {
        padding-bottom: 40px;
    }

    .spacingBottom4 {
        padding-bottom: 30px;
    }

    .spacingBottom5 {
        padding-bottom: 24px;
    }

    .spacingBottom6 {
        padding-bottom: 20px;
    }

    .spacingBottom7 {
        padding-bottom: 18px;
    }
}

@media only screen and (max-width: 1600px) {
    .mileseeyH1 {
        font-size: 60px;
    }

    .mileseeyH2 {
        font-size: 48px;
    }

    .mileseeyH3 {
        font-size: 36px;
    }

    .mileseeyH4 {
        font-size: 30px;
    }

    .mileseeyH5 {
        font-size: 24px;
    }

    .mileseeyH6 {
        font-size: 20px;
    }

    .mileseeyP1 {
        font-size: 24px;
    }

    .mileseeyP2 {
        font-size: 20px;
    }

    .mileseeyP3 {
        font-size: 18px;
    }

    .mileseeyP4 {
        font-size: 16px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 14px;
    }

    .spacingTop1 {
        padding-top: 80px;
    }

    .spacingTop2 {
        padding-top: 60px;
    }

    .spacingTop3 {
        padding-top: 40px;
    }

    .spacingTop4 {
        padding-top: 30px;
    }

    .spacingTop5 {
        padding-top: 24px;
    }

    .spacingTop6 {
        padding-top: 20px;
    }

    .spacingTop7 {
        padding-top: 18px;
    }

    .spacingBottom1 {
        padding-bottom: 80px;
    }

    .spacingBottom2 {
        padding-bottom: 60px;
    }

    .spacingBottom3 {
        padding-bottom: 40px;
    }

    .spacingBottom4 {
        padding-bottom: 30px;
    }

    .spacingBottom5 {
        padding-bottom: 24px;
    }

    .spacingBottom6 {
        padding-bottom: 20px;
    }

    .spacingBottom7 {
        padding-bottom: 18px;
    }
}

@media only screen and (max-width: 1400px) {
    .mileseeyH1 {
        font-size: 48px;
    }

    .mileseeyH2 {
        font-size: 36px;
    }

    .mileseeyH3 {
        font-size: 28px;
    }

    .mileseeyH4 {
        font-size: 24px;
    }

    .mileseeyH5 {
        font-size: 22px;
    }

    .mileseeyH6 {
        font-size: 18px;
    }

    .mileseeyP1 {
        font-size: 20px;
    }

    .mileseeyP2 {
        font-size: 16px;
    }

    .mileseeyP3 {
        font-size: 16px;
    }

    .mileseeyP4 {
        font-size: 14px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 14px;
    }

    .spacingTop1 {
        padding-top: 60px;
    }

    .spacingTop2 {
        padding-top: 40px;
    }

    .spacingTop3 {
        padding-top: 30px;
    }

    .spacingTop4 {
        padding-top: 24px;
    }

    .spacingTop5 {
        padding-top: 20px;
    }

    .spacingTop6 {
        padding-top: 18px;
    }

    .spacingTop7 {
        padding-top: 16px;
    }

    .spacingBottom1 {
        padding-bottom: 60px;
    }

    .spacingBottom2 {
        padding-bottom: 40px;
    }

    .spacingBottom3 {
        padding-bottom: 30px;
    }

    .spacingBottom4 {
        padding-bottom: 24px;
    }

    .spacingBottom5 {
        padding-bottom: 20px;
    }

    .spacingBottom6 {
        padding-bottom: 18px;
    }

    .spacingBottom7 {
        padding-bottom: 16px;
    }
}

@media only screen and (max-width: 1200px) {
    .mileseeyH1 {
        font-size: 48px;
    }

    .mileseeyH2 {
        font-size: 36px;
    }

    .mileseeyH3 {
        font-size: 28px;
    }

    .mileseeyH4 {
        font-size: 24px;
    }

    .mileseeyH5 {
        font-size: 22px;
    }

    .mileseeyH6 {
        font-size: 18px;
    }

    .mileseeyP1 {
        font-size: 20px;
    }

    .mileseeyP2 {
        font-size: 16px;
    }

    .mileseeyP3 {
        font-size: 16px;
    }

    .mileseeyP4 {
        font-size: 14px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 14px;
    }

    .spacingTop1 {
        padding-top: 60px;
    }

    .spacingTop2 {
        padding-top: 40px;
    }

    .spacingTop3 {
        padding-top: 30px;
    }

    .spacingTop4 {
        padding-top: 24px;
    }

    .spacingTop5 {
        padding-top: 20px;
    }

    .spacingTop6 {
        padding-top: 18px;
    }

    .spacingTop7 {
        padding-top: 16px;
    }

    .spacingBottom1 {
        padding-bottom: 60px;
    }

    .spacingBottom2 {
        padding-bottom: 40px;
    }

    .spacingBottom3 {
        padding-bottom: 30px;
    }

    .spacingBottom4 {
        padding-bottom: 24px;
    }

    .spacingBottom5 {
        padding-bottom: 20px;
    }

    .spacingBottom6 {
        padding-bottom: 18px;
    }

    .spacingBottom7 {
        padding-bottom: 16px;
    }
}

@media only screen and (max-width: 1024px) {
    .mileseeyH1 {
        font-size: 36px;
    }

    .mileseeyH2 {
        font-size: 28px;
    }

    .mileseeyH3 {
        font-size: 22px;
    }

    .mileseeyH4 {
        font-size: 20px;
    }

    .mileseeyH5 {
        font-size: 18px;
    }

    .mileseeyH6 {
        font-size: 16px;
    }

    .mileseeyP1 {
        font-size: 18px;
    }

    .mileseeyP2 {
        font-size: 16px;
    }

    .mileseeyP3 {
        font-size: 14px;
    }

    .mileseeyP4 {
        font-size: 14px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 12px;
    }

    .spacingTop1 {
        padding-top: 40px;
    }

    .spacingTop2 {
        padding-top: 30px;
    }

    .spacingTop3 {
        padding-top: 24px;
    }

    .spacingTop4 {
        padding-top: 20px;
    }

    .spacingTop5 {
        padding-top: 18px;
    }

    .spacingTop6 {
        padding-top: 16px;
    }

    .spacingTop7 {
        padding-top: 14px;
    }

    .spacingBottom1 {
        padding-bottom: 40px;
    }

    .spacingBottom2 {
        padding-bottom: 30px;
    }

    .spacingBottom3 {
        padding-bottom: 24px;
    }

    .spacingBottom4 {
        padding-bottom: 20px;
    }

    .spacingBottom5 {
        padding-bottom: 18px;
    }

    .spacingBottom6 {
        padding-bottom: 16px;
    }

    .spacingBottom7 {
        padding-bottom: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .mileseeyH1 {
        font-size: 36px;
    }

    .mileseeyH2 {
        font-size: 28px;
    }

    .mileseeyH3 {
        font-size: 22px;
    }

    .mileseeyH4 {
        font-size: 20px;
    }

    .mileseeyH5 {
        font-size: 18px;
    }

    .mileseeyH6 {
        font-size: 16px;
    }

    .mileseeyP1 {
        font-size: 18px;
    }

    .mileseeyP2 {
        font-size: 16px;
    }

    .mileseeyP3 {
        font-size: 14px;
    }

    .mileseeyP4 {
        font-size: 14px;
    }

    .mileseeyP5 {
        font-size: 14px;
    }

    .mileseeyP6 {
        font-size: 12px;
    }

    .spacingTop1 {
        padding-top: 40px;
    }

    .spacingTop2 {
        padding-top: 30px;
    }

    .spacingTop3 {
        padding-top: 24px;
    }

    .spacingTop4 {
        padding-top: 20px;
    }

    .spacingTop5 {
        padding-top: 18px;
    }

    .spacingTop6 {
        padding-top: 16px;
    }

    .spacingTop7 {
        padding-top: 14px;
    }

    .spacingBottom1 {
        padding-bottom: 40px;
    }

    .spacingBottom2 {
        padding-bottom: 30px;
    }

    .spacingBottom3 {
        padding-bottom: 24px;
    }

    .spacingBottom4 {
        padding-bottom: 20px;
    }

    .spacingBottom5 {
        padding-bottom: 18px;
    }

    .spacingBottom6 {
        padding-bottom: 16px;
    }

    .spacingBottom7 {
        padding-bottom: 14px;
    }
}

/* fontSpacing start */

.recommend-product-item .recommend-product-item-sale-tag {
    color: #fff !important;
}

.product-recommend .product-item-swiper-list .swiper-box {
    z-index: 1 !important;
}

.recommend-product-item .recommend-product-item-price .origin-price .itrans-money {
    text-decoration: line-through !important;
}

.recommend-product-item span {
    vertical-align: unset !important;
}

.isv-trans-wrap {
    z-index: 3 !important;
}


/* 视频图片组件 */

.lazy-video-box,
.normal-video-box,
.lazy-img-box {
    width: 100%;
    position: relative;
}

.lazy-video-box video,
.lazy-img-box img,
.lazy-video-box img,
.normal-video-box img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lazy-video-box img,
.normal-video-box img {
    z-index: 1;
}

.lazy-video-box video,
.normal-video-box video {
    z-index: 2;
}

@media(min-width: 960px) {

    .lazy-video-box,
    .lazy-img-box {
        padding-bottom: calc(100% / var(--aspect_ratio-pc));
    }
}

@media(max-width: 959px) {

    .lazy-video-box,
    .normal-video-box,
    .lazy-img-box {
        padding-bottom: calc(100% / var(--aspect_ratio-m));
    }
}

[class*="kl-teaser-"] {
    z-index: 100 !important;
}

body.overflow-hidden [class*="kl-teaser-"],
body.overflow-hidden .advc .advc-back-to-top,
body.overflow-hidden #tidio-chat {
    z-index: 1 !important;
}

.template-product [class*="kl-teaser-"] {
    bottom: 120px !important;
}

@media (max-width: 959px) {
    [class*="kl-teaser-"] {
        width: fit-content !important;
        min-width: 80px !important;
    }
}

/* product tag */
.product-item__tag .image-wrapper-tag span {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 50px;
}

.product-item__tag .image-wrapper-tag.new span {
    color: #13B2BA;
    background: #13B2BA1A;
}

.product-item__tag .image-wrapper-tag.hot span {
    color: #D70D00 !important;
    background: #FFE6E6;
}

.product-item__tag .image-wrapper-tag.pre-order span {
    color: #FF6C00 !important;
    background: #FFEBDC;
}

.product-item__tag .image-wrapper-tag.comingsoon span {
    color: #B37201 !important;
    background: #FFF8DA;
}

.product-item__tag .image-wrapper-tag.sale span {
    background: rgba(247, 4, 8, 0.05);
    color: rgba(247, 4, 8, 1);
}