*,
*::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: 1380px; 
  width: 100%;
}

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

@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;
  
  }
  #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: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }


  .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);
  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: 10px;
  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);
  }
}

.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: 1000;
  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: 95%;
  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);
}

.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: var(--drawer-padding-block) 0;
}

.drawer__head--divider {
  border-bottom: 1px solid rgb(var(--color-entry-line));
}

.drawer__title {
  display: flex;
}

.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: 3px;
}

.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-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;
}

.modal-video[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.modal-video__content {
  background-color: rgb(var(--color-page-background));
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  width: 100%;
}

.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 {
  margin: 0 auto;
  height: calc(100% - 70px);
  padding-top: 90px;
  width: calc(100% - 86px);
}

@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);
  }
}

.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%;
}

.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;
}

/* 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;
  }

  .advc-back-to-top {
      right: 27px !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;
    }
}

/* 渐入动画 */
  .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,
    .lazy-img-box {
        width: 100%;
        position: relative;
    }

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

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

    .lazy-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,
        .lazy-img-box {
            padding-bottom: calc(100% / var(--aspect_ratio-m));
        }
    }