/** Shopify CDN: Minification failed

Line 2122:24 Unexpected "mainRender("
Line 2123:2 Unexpected "$"
Line 2148:19 Comments in CSS use "/* ... */" instead of "//"
Line 2155:4 Comments in CSS use "/* ... */" instead of "//"
Line 2163:4 Comments in CSS use "/* ... */" instead of "//"
Line 2168:6 Comments in CSS use "/* ... */" instead of "//"
Line 2174:6 Comments in CSS use "/* ... */" instead of "//"
Line 2176:6 Comments in CSS use "/* ... */" instead of "//"
Line 2178:6 Comments in CSS use "/* ... */" instead of "//"
Line 2181:6 Comments in CSS use "/* ... */" instead of "//"
... and 58 more hidden warnings

**/
@font-face {
  font-family: 'RobotoBold';
  src: url('/cdn/shop/files/Roboto-Bold.ttf');
}
@font-face {
  font-family: 'Roboto-Bold';
  src: url('/cdn/shop/files/Roboto-Bold.ttf');
}
@font-face {
  font-family: 'Roboto';
  src: url('/cdn/shop/files/Roboto-Medium.ttf');
}
@font-face {
  font-family: 'Roboto-Regular';
  src: url('/cdn/shop/files/Roboto-Regular.ttf');
}
@font-face {
  font-family: 'Roboto-Black';
  src: url('/cdn/shop/files/Roboto-Black_0.ttf');
}
@font-face {
  font-family: 'Montserrat';
  src: url('/cdn/shop/files/Montserrat-Medium.ttf');
}
@font-face {
  font-family: 'Montserrat-Bold';
  src: url('/cdn/shop/files/Montserrat-Bold_dd9d9524-961e-4e88-a3b1-230dd05bfd52.ttf');
}
@font-face {
  font-family: 'Montserrat Extra Bold';
  src: url('/cdn/shop/files/Montserrat_Extra_Bold.otf');
}



/*reset*/
html {
  -webkit-text-size-adjust: 100%;
}

/*reset*/
html {
  max-width: 1080px;
  margin: 0 auto;
}

article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
menu {
  display: block;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
figure,
section,
legend,
textarea,
p,
blockquote,
th,
td,
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Roboto';
}

fieldset,
img {
  border: 0 none;
}

body {
  font-size: 62.5%;
  background-color: #fff;
  color: #333;
  /* max-width: 640px; */
  margin: 0 auto;
  letter-spacing: 0px;
  line-height: inherit;
  color: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  letter-spacing: 0px;
  line-height: inherit;
  color: inherit;
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

table {
  border-collapse: collapse;
}

ul,
ol,
dd,
dt,
dl {
  list-style-type: none;
}

a {
  color: #333;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

a,
input,
select {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input,
img {
  border: none;
}

/* i,
em {
  font-style: normal;
} */

:focus {
  outline: none;
}

select {
  background: none;
}

/*iphone6*/
/* @media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2) {
  body {
      font-size: 14.5px;
  }
} */

/*iphone6plus*/
/* @media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {
  body {
      font-size: 15.5px;
  }
} */

/*原子类*/
.clear {
  clear: both;
}

.clear:after {
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  content: '.';
}

/* .fl {
  float: left;
}

.fr {
  float: right;
} */

.mb10 {
  margin-bottom: 10px;
}

.mt10 {
  margin-top: 10px;
}

/*placeholder css*/
::-moz-placeholder {
  font-family: 'Microsoft YaHei';
}

::-webkit-input-placeholder {
  font-family: 'Microsoft YaHei';
}

:-ms-input-placeholder {
  font-family: 'Microsoft YaHei';
}

#root {
}

html,
body {
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: auto !important;
  text-size-adjust: auto !important;
  -moz-text-size-adjust: auto !important;
}

body {
  background: #fff;
  overflow-x: hidden;
}

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

html,
body {
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: auto !important;
  text-size-adjust: auto !important;
  -moz-text-size-adjust: auto !important;
}

#root {
  letter-spacing: initial !important;
}

body,
html {
  font-family: 'Roboto';
}

img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.sp-times {
  width: 100%;
  height: 123px;
  background: #030406;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  padding: 0 30px;
  box-sizing: border-box;
  margin-left: -1px;
}

.sp-limited p {
  font-family: 'Montserrat-Bold';
  font-size: 45px;
  color: #ffffff;
  text-transform: uppercase;
}

.sp-min-box {
  position: relative;
  font-size: 70px;
  font-family: 'RobotoBold';
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sp-min-box > span {
  font-size: 20px;
  font-family: Montserrat;
  font-weight: bold;
  color: #ffffff;
  line-height: 25px;
  position: absolute;
  left: -50px;
  top: 0;
}

.sp-min-box > em {
  background: url('/cdn/shop/files/time-bg.png') no-repeat;
  background-size: 100% 100%;
  width: 94px;
  height: 89px;
  line-height: 89px;
  display: inline-block;
  font-family: 'RobotoBold';
  font-size: 61px;
  color: #191919;
  font-style: normal;
  margin: 0 8px;
  text-align: center;
}

.sp-header {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #f9e5c1;
  padding: 28px 36px 22px 60px;
  background-color: #ffffff;
  box-sizing: border-box;
  position: relative;
  z-index: 1000;
}

header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1080px;
  width: 100%;
  z-index: 1000;
}

.sp-header .sp-head-btns {
  width: 386px;
  height: 87px;
  line-height: 87px;
  background: url('/cdn/shop/files/20241029-btns.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 51px;
  color: #ffffff;
  font-family: 'RobotoBold';
}

.sp-header .sp-head-btns > div {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* animation: beat2 0.5s alternate infinite; */
}

.sp-logo {
  font-family: 'RobotoBold';
  font-size: 81px;
  color: #333333;
}

.sp-logo img {
  width: 300px;
  display: block;
}

#swiper {
  height: 87px;
  background: #0e667f;
}

#swiper i {
  display: inline-block;
  width: 39px;
  height: 45px;
  background: url('/cdn/shop/files/20241029-shan.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 15px;
}
#swiper .swiper-slide{
    width:580px !important;
}

#swiper p {
  font-family: 'Roboto-Regular';
  font-size: 40px;
  color: #ffffff;
  font-style: italic;
  height: 87px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 580px;
}

#swiper.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear !important;
}

/*  */
.sp-part1 {
  position: relative;
  min-height: 1734px;
  background: url('/cdn/shop/files/20241029-bg1_cedd2955-22ce-4554-8121-bb8d4d69c4a7.png?v=1741229968') no-repeat;
  background-size: 100% 100%;
  padding: 53px 0 0 0;
  overflow: hidden;
  margin-top: 234px;
}

.sp-part1 > h4 {
  font-family: 'Roboto-Black';
  font-size: 79px;
  color: #0aa7b6;
  line-height: 94px;
  text-align: center;
  text-transform: uppercase;
}

.sp-part1-box {
  position: absolute;
  right: 52px;
  bottom: 317px;
}

.sp-part1-box li {
  margin-top: 34px;
}

.sp-part1-box span {
  display: block;
  width: 472px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background: #1fafc7;
  border-radius: 55px;
  font-family: 'RobotoBold';
  font-size: 49px;
  color: #ffffff;
}

.sp-coating {
  width: 653px;
  height: 103px;
  margin: 0 auto;
  margin-top: 8px;
}

.sp-part1-img {
  width: 500px;
  height: 500px;
  background: #8cedf6;
  border-radius: 50%;
  position: absolute;
  left: 11px;
  bottom: 47px;
  z-index: 1;
}

.sp-part1-img img {
  position: absolute;
  left: -7px;
  bottom: 5px;
  border-radius: 50%;
}

@keyframes Updown {
  from {
    transform: translateY(-15px);
  }

  to {
    transform: translateY(0);
  }
}

.sp-part1-btn {
  position: absolute;
  right: 14px;
  bottom: 48px;
  text-align: center;
  width: 560px;
  height: 166px;
  background: url('/cdn/shop/files/20241029-btns3.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: beat2 0.5s alternate infinite;
}

.sp-part1-btn span {
  font-family: 'Montserrat Extra Bold';
  font-size: 57px;
  color: #ffffff;
  text-transform: uppercase;
}

.sp-part1-btn img {
  width: 56px;
  height: 66px;
  margin-left: 20px;
}

/* animation: beat 0.7s ease infinite; */
/* 心脏跳动动画 */
@keyframes beat {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes beat2 {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

.sp-part1-bottom {
  width: 100%;
  height: 259px;
  background: #73d1da;
}

.sp-part1-bottom > ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 40px;
  justify-content: space-between;
}

.sp-part1-bottom > ul img {
  width: 156px;
  height: 157px;
  display: block;
  margin: 0 auto;
}

.sp-part1-bottom > ul li span {
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 36px;
  color: #ffffff;
  text-align: center;
  display: block;
  margin-top: 10px;
}

/*  */
.sp-title.sp-white h4 {
  color: #ffffff;
}

.sp-title.sp-white p {
  color: #ffffff;
}

.sp-title h4 {
  font-family: 'Roboto-Black';
  font-style: italic;
  font-size: 70px;
  color: #0e667f;
  text-align: center;
}

.sp-title h4 span {
  display: inline-block;
  font-family: 'Roboto-Black';
  font-style: italic;
  font-size: 120px;
  color: #0e667f;
  text-align: left;
  width: 305px;
  background: linear-gradient(180deg, #82d7df 0%, #0e667f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  top: 10px;
}

.sp-title p {
  font-family: 'Montserrat';
  font-size: 40px;
  color: #0e667f;
  text-align: center;
  margin-top: 24px;
}

.sp-part2 {
  padding-top: 84px;
}

.sp-part2-box {
  width: 916px;
  height: 863px;
  background: url('/cdn/shop/files/20241029-part2-1.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 77px;
  margin-bottom: 76px;
}

.sp-part2-box > ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sp-part2-box > ul li {
  position: relative;
  width: calc(50% - 13px);
}

.sp-part2-box > ul li p {
  font-family: 'Roboto-Black';
  font-style: italic;
  font-size: 34px;
  color: #485052;
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 100%;
  height: 84px;
  line-height: 84px;
  text-align: center;
}

.sp-part2-box > ul li:nth-child(n + 3) p {
      bottom: 2px;
    line-height: 40px;
    font-size: 34px;
}

.sp-part2-box > ul li:nth-child(n + 3) span {
  bottom: 98px;
}

.sp-part2-box > ul li span {
  position: absolute;
  bottom: 109px;
  left: 66px;
  display: inline-block;
  width: 306px;
  height: 69px;
  line-height: 69px;
  background: rgba(76, 76, 76, 0.4);
  font-family: 'Roboto-Black';
  font-style: italic;
  font-size: 38px;
  color: #ffffff;
  text-align: center;
}

@keyframes swing {
  0% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-10deg);
  }

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

.sp-part2-box2 {
  box-sizing: border-box;
  position: relative;
}

.sp-part2-gif {
  width: 990px;
  height: 495px;
  margin: 0 auto;
  margin-top: 80px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.sp-part2-box3 {
  min-height: 1398px;
  background: url('/cdn/shop/files/20241029-bg2.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  margin-top: -366px;
}
.sp-part2-box3 p {
  position: absolute;
  left: 495px;
  bottom: 50px;
  font-family: 'Roboto-Regular';
  font-weight: 600;
  font-size: 35px;
  color: #0e667f;
  line-height: 1.2;
  text-align: center;
  width: 580px;
}
.sp-part2-box3 p span {
  font-family: 'Roboto-Black';
  font-size: 68px;
  color: #0e667f;
  position: relative;
  top: 2px;
}
/*  */
.sp-part3 {
  padding: 78px 0 0 0;
}
.sp-part3 .sp-title h4{
  font-size:55px;
}

.sp-part3 > img {
  width: 100%;
  height: 1086px;
  margin-top: 84px;
  display: block;
  margin-bottom: -6px;
}

.sp-part3-box {
  min-height: 1431px;
  background: url('/cdn/shop/files/20241029-bg3.png') no-repeat;
  background-size: 100.5% 100%;
  padding-top: 40px;
  box-sizing: border-box;
  position: relative;
}

.sp-part3-after {
  position: absolute;
  left: 85px;
  top: 530px;
}

.sp-part3-after ul li:first-child {
  margin-bottom: 346px;
}
.sp-part3-after ul li:last-child{
  padding-left: 10px;
}
.sp-part3-after ul li h4 {
  font-family: 'Montserrat Extra Bold';
  font-size: 40px;
  color: #0b5a71;
}
.sp-part3-after ul li p {
  font-family: 'Montserrat-Bold';
  font-size: 35px;
  color: #ffffff;
  opacity: 0.9;
}
.sp-part3-wraper {
  position: relative;
  padding: 85px 0 0 0;
  box-sizing: border-box;
}
.sp-part3-wraper .sp-title p{
  font-size: 38px;
}

.sp-part3-before {
  height: 1126px;
  background: url('/cdn/shop/files/20241029-bg4.png') no-repeat;
  background-size: 100% calc(100% + 4px);
  box-sizing: border-box;
  position: relative;
  margin-top: -110px;
}

.sp-part3-before span {
  font-family: 'Roboto-Black';
  font-weight: 500;
  font-style: italic;
  font-size: 40px;
  color: #ffffff;
  position: absolute;
  left: 234px;
  bottom: 70px;
}

.sp-public-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 207px;
  background: #ffc925;
  font-family: 'Roboto-Black';
  font-size: 80px;
  color: #fefeff;
}

.sp-public-btn span {
  font-family: 'RobotoBold';
  font-size: 75px;
  color: #0e667f;
  animation: beat2 0.5s alternate infinite;
}

.sp-public-btn span em {
  color: #ea2736;
  font-style: normal;
}

.sp-part3-wraper2 {
  padding: 72px 0 0 0;
  box-sizing: border-box;
}

.sp-part3-wraper2 .sp-title p {
  font-family: 'Montserrat';
  font-weight: 200;
  font-size: 40px;
  color: #0e667f;
}
.sp-part3-wraper2 .sp-title h4{
      font-size: 70px;
}

.sp-gif-wraper {
  width: 100%;
  height: 1083px;
  background: url('/cdn/shop/files/20241029-part3-2.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  margin-top: 68px;
}
.sp-gif-wraper > ul {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.sp-gif-wraper > ul li {
  width: 25%;
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 40px;
  color: #0d0d0d;
  text-align: center;
}
.sp-part3-wraper3 {
  min-height: 1606px;
  background: url('/cdn/shop/files/20241029-bg5.png') no-repeat;
  background-size: 100% calc(100% + 3px);
  position: relative;
  box-sizing: border-box;
  padding: 68px 0 0 0;
}

.sp-part3-wraper3 > p {
  position: absolute;
  left: 51px;
  top: 458px;
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 40px;
  color: #0e667f;
}

.sp-part3-wraper3 > p span {
  color: #0e667f;
  font-size: 50px;
  font-family: 'Roboto-Black';
}

.sp-part3-wraper3 > ul {
  position: absolute;
  left: 69px;
  top: 1066px;
}

.sp-part3-wraper3 > ul li {
  margin-bottom: 60px;
}

.sp-part3-wraper3 > ul h4 {
  font-family: 'Roboto-Black';
  font-size: 50px;
  color: #0d828e;
}

.sp-part3-wraper3 > ul p {
  font-family: 'Roboto-Regular';
  font-weight: 500;
  font-size: 35px;
  color: #0fa1b0;
  margin-top: 12px;
}

.sp-part3-title {
  position: absolute;
  left: 140px;
  top: 590px;
  font-family: 'RobotoBold';
  font-size: 40px;
  color: #ffffff;
}

.sp-part4 {
  width: 100%;
  min-height: 1456px;
  background: url('/cdn/shop/files/20241029-bg6.png') no-repeat;
  background-size: 100% calc(100% + 4px);
  box-sizing: border-box;
  padding: 72px 0 106px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: -2px;
}

.sp-mgs12 {
  margin-top: 45px;
}

.sp-part4 ul {
  padding: 0 0 0 97px;
}

.sp-part4 ul li {
  font-family: 'Roboto-Regular';
  font-size: 42px;
  color: #32818f;
}

.sp-part4 ul p {
  font-family: 'Roboto-Regular';
  font-size: 42px;
  color: #32818f;
      padding-right: 44px;
}

.sp-part4 ul span {
  font-size: 42px;
  color: #32818f;
  font-family: 'Roboto';
}

/*  */
.sp-shoppings {
  height: 96px;
  background: #525252;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.sp-shoppings p {
  font-family: 'Roboto-Regular';
  font-size: 37px;
  color: #ffffff;
  text-transform: uppercase;
}

.sp-shoppings img {
  width: 58px;
  height: 32px;
  margin-right: 18px;
}

.sp-part5 {
  height: 80px;
  background: #0e667f;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto-Black';
  font-size: 42px;
  color: #ffffff;
  text-transform: uppercase;
}

.sp-part5 img {
  height: 47px;
  width: 41px;
  margin-right: 25px;
}

.sp-product-list {
  padding: 38px 40px 0 60px;
}

.sp-product-list > ul > li:first-child {
  min-height: 470px;
}

.sp-product-list > ul > li {
  border: 4px solid #0e667f;
  min-height: 532px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 52px;
  border-radius: 30px;
}

.MostPopular.best {
  background: url('/cdn/shop/files/20241029-most-bg.png') no-repeat;
  background-size: 100% 100%;
}

.MostPopular {
  position: absolute;
  left: 136px;
  top: 0;
  width: 168px;
  height: 88px;
  background: url('/cdn/shop/files/20241029-most-bg.png') no-repeat;
  background-size: 100% 100%;
  z-index: 4;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5px 0 0 0;
  box-sizing: border-box;
}

.MostPopular span {
  font-family: 'RobotoBold';
  font-size: 28px;
  color: #FEFEFE;
  line-height: 28px;
}

.sp-pro-offs {
  position: absolute;
  left: -61px;
  top: -50px;
  width: 233px;
  height: 142px;
  background: url('/cdn/shop/files/20241029-clock.png') no-repeat;
  background-size: 100% 100%;
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 47px;
  color: #FFFFFF;
  line-height: 28px;
  box-sizing: border-box;
  padding: 83px 0 0 37px;
  animation: swing1 0.5s ease-in-out infinite;
}

@keyframes swing1 {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.sp-pro-offs span {
  display: inline-block;
  transform: rotate(-10deg);
}

.sp-product-list > ul > li:last-child {
  margin-bottom: 0;
}

.sp-product-list > ul > li .sp-product-img {
  position: relative;
  width: 520px;
  text-align: center;
}

.sp-product-img .sp-frees {
  width: 364px;
  height: 96px;
  background: url('/cdn/shop/files/20240626-free.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 97px;
  bottom: -41px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 110px;
}

.sp-product-img .sp-frees > span {
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 37px;
  color: #191919;
  line-height: 36px;
}

.sp-product-list > ul > li .sp-product-img img {
  width: auto;
  text-align: center;
  object-fit: contain;
  vertical-align: middle;
}

.sp-product-list > ul > li:first-child {
  align-items: center;
}

.sp-product-list > ul > li:first-child .sp-product-img img {
  width: 295px;
  height: 318px;
}

.sp-product-list > ul > li:nth-child(2) .sp-product-img img {
  width: 450px;
  height: 305px;
  margin-left: 0;
  margin-top: 83px;
}

.sp-product-list > ul > li:nth-child(3) .sp-product-img img {
  width: 468px;
  height: 338px;
  margin-left: 0;
  margin-top: 34px;
}

.sp-product-list > ul > li:nth-child(4) .sp-product-img img {
  width: 475px;
  height: 385px;
  margin-left: 0;
  margin-top: 118px;
}

.sp-product-rl {
  width: calc(100% - 494px);
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 0 0;
}

.sp-shopping {
  min-width: 254px;
  height: 56px;
  margin-top: 27px;
  padding: 13px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, #ca0f0f, #ea2323);
}

.sp-shopping span {
  font-size: 30px;
  color: #ffffff;
  margin-left: 13px;
}

.sp-shopping img {
  width: 39px;
  height: 30px;
}

.sp-product-rl > h3 {
  font-family: 'RobotoBold';
  font-size: 50px;
  color: #313131;
  text-transform: uppercase;
}

.sp-product-rl .sp-texts {
  font-size: 36px;
  color: #ff0000;
  font-family: 'RobotoBold';
  margin-bottom: 10px;
  text-transform: uppercase;
}

.sp-product-rl .sp-price {
  text-align: center;
  margin-bottom: 15px;
}

.sp-product-rl .sp-price > span {
  margin-right: 24px;
}

.sp-product-rl .sp-price span {
  font-family: 'RobotoBold';
  font-size: 60px;
  color: #df0f0f;
  margin-top: 12px;
}

.sp-product-rl .sp-price > span .new {
  font-family: 'RobotoBold';
  font-size: 60px;
  color: #df0f0f;
}

.sp-product-rl .sp-price > em {
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 40px;
  color: #aaaaaa;
  line-height: 36px;
  text-decoration-line: line-through;
  font-style: normal;
}

.sp-product-rl .sp-price > em > em {
  font-style: normal;
}

.sp-pro-choose li {
  width: 332px;
  height: 73px;
  line-height: 73px;
  background: #f7f7f7;
  border-radius: 21px;
  border: 1px solid #4f4f4f;
  margin-bottom: 15px;
  font-family: 'RobotoBold';
  font-size: 33px;
  color: #000000;
  text-align: center;
}

.sp-pro-choose li.active {
  border-color: #1fafc7;
}
.sp-zhang {
  width: 80px;
  height: 131px;
  background: url('/cdn/shop/files/20241029-zhang.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: absolute;
  font-family: 'Roboto-Regular';
  font-size: 24px;
  color: #000000;
  padding: 23px 0 0 0;
  text-align: center;
}
.sp-zhang1 {
  right: -24px;
  top: 124px;
}
.sp-zhang2 {
  right: 0;
  top: 4px;
}
.sp-zhang3 {
  right: 31px;
  top: 124px;
}
.sp-fire {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: 'RobotoBold';
  font-size: 40px;
  color: #000000;
  line-height: 54px;
  margin-bottom: 51px;
}

.sp-fire p {
  font-family: 'RobotoBold';
  font-size: 40px;
  color: #000000;
}

.sp-fire span {
  color: #d81e06;
}

.sp-fire > img {
  width: 37px;
  height: 41px;
  margin-right: 23px;
}

/* 数字 */
.sp-number {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 28px 0 7px 0;
}

.sp-alignment {
  width: 371px;
  height: 85px;
  background: #ffffff;
  border-radius: 14px;
  border: 2px solid #000000;
  font-size: 41px;
  color: #202020;
}

.link-btn {
  width: 441px;
  height: 117px;
  background: url('/cdn/shop/files/20241029-btns2.png') no-repeat !important;
  background-size: 100% 100% !important;
  margin: 0 auto;
  display: block;
  font-family: 'RobotoBold';
  font-size: 50px;
  color: #ffffff;
  text-align: center;
  border-radius: 22px;
  animation: beat2 0.5s alternate infinite;
  /* animation: bounce-down 1.5s linear infinite; */
}

.link-btn > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 117px;
}

.link-btn img {
  width: 18px;
  height: 30px;
  margin-left: 25px;
}

/* 尾部 */
.sp-footer-image img {
  width: 1052px;
  height: 96px;
  margin: 0 auto;
  display: block;
  margin-bottom: 23px;
  margin-top: 51px;
}

.sp-footer-ul {
  height: 235px;
  background: #000000;
  padding: 0 57px;
  padding-top: 48px;
  padding-bottom: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sp-footer-ul li {
  width: 469px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 38px;
  color: #ffffff;
  font-family: 'Roboto-Regular';
  margin-bottom: 24px;
}

.sp-footer-ul li p {
  font-family: 'Roboto-Regular';
}

.sp-footer-ul li:nth-child(2n) {
  width: 360px;
}

.sp-footer-ul li:nth-child(3),
.sp-footer-ul li:nth-child(4) {
  margin-bottom: 0;
}

.sp-footer-ul i {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url('/cdn/shop/files/20241029-foot-1.png') no-repeat;
  background-size: 100% 100%;
}

.sp-icon {
  width: 48px;
  margin-right: 20px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sp-footer-ul i.sp-icon2 {
  width: 48px;
  height: 40px;
  background-image: url('/cdn/shop/files/20241029-foot-2.png');
}

.sp-footer-ul i.sp-icon3 {
  width: 48px;
  height: 47px;
  background-image: url('/cdn/shop/files/20241029-foot-3.png');
}

.sp-footer-ul i.sp-icon4 {
  width: 40px;
  height: 47px;
  background-image: url('/cdn/shop/files/20241029-foot-4.png');
}

@keyframes bounce-down {
  25% {
    transform: translateY(-10px);
  }

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

  75% {
    transform: translateY(10px);
  }
}



.guarantee_column_container, .collapsible-content__wrapper {
  display: none !important;
}
.mf-bundle-product {
  zoom: 2.2;
}
.mf-bundle-checkout-warning{
  color: #788188 !important;
  opacity: 0.6;
}
.app-embed-plus-component-pay-button-address-text {
  color: #000;
  opacity: 0.75;
  font-size: 16px !important;
}
.app-embed-plus-component-bundler {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.product-part {
  font-family: "Roboto";
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 20px;
  padding: 70px 48px 45px;
}
.product-part .sp-img-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.product-part .sp-swiper {
  width: 899px;
  height: 724px;

  flex-shrink: 0;
  /* border-radius: 50px; */
}
.product-part .swiper-slide {
  width: 899px;
  height: 724px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 30px;
  box-sizing: border-box;
  position: relative;
}
.product-part .sp-border {
  border: 4px solid #0cd8e3;
}
.product-part .sp-brand {
  width: 183px;
  height: 255px;
  background: url("/cdn/shop/files/20250114-brand.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -29px;
  left: 701px;
  padding-top: 122px;
  text-align: center;
  font-family: "Roboto-Bold";
  box-sizing: border-box;
  font-size: 42px;
  line-height: 0.9;
  color:#fff;
}
.product-part .sp-free {
  width: 118px;
  height: 118px;
  background: url("/cdn/shop/files/20250114-free.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 455px;
  left: 718px;
}
.product-part .sp-brand .sp-p {
  font-size: 70px;
}
.product-part .sp-option-title {
  font-size: 32px;
  color: #1e1e1e;
  margin: 24px 0 16px;
  line-height: 1;
}

.product-part .opt-group {
  display: flex;
  gap: 20px 34px;
  position: relative;
  flex-wrap: wrap;
}

.product-part .sp-option {
  height: 87px;
  background: #fdfdfd;
  border-radius: 43px;
  border: 3px solid #0e667f;
  padding:0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* box-sizing: border-box; */
  text-align: center;
  font-family: "Roboto";
  font-size: 39px;
  color: #1e1e1e;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
  gap: 15px;
}

.product-part .sp-option.active {
  background: #1fafc7;
  border-color: #1fafc7;
  color: #fff;
}
.product-part .sp-emo1 {
  width: 47px;
  height: 45px;
  background: url("/cdn/shop/files/20250114-good.png") no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
}
.product-part .active .sp-emo1 {
  background-image: url("/cdn/shop/files/20250114-good0.png");
}
.product-part .price-group {
  line-height: 1;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 43px;
}
.product-part .price1 {
  font-size: 85px;
  font-family: "Roboto-Bold";
  color: #ee1010;
}

.product-part .price2 {
  font-family: "Roboto-Bold";

  font-size: 50px;
  color: #1e1e1e;
  opacity: 0.34;
  margin-left: 5px;
  margin-right: 5px;
}

.product-part .addCart {
  width: 491px;
  height: 119px;
  background: #fdfdfd;
  border-radius: 58px;
  border: 4px solid #0e667f;
  box-sizing: border-box;
  font-size: 45px;
  color: #0e667f;
}
.product-part .addCart .sp-icon {
  width: 40px;
}
.product-part .sp-btn-style {
  width: 100%;
  height: 159px;
  background: url("/cdn/shop/files/2025-1-18-btnbg.png?v=1737184441") no-repeat;
  background-size: 100% 100%;
  /* border-radius: 78px; */
  color: #fff;
  font-size: 63px;
  margin-top: 48px;
  animation: skip 4s infinite;
  gap: 30px;
}
.product-part .sp-btn-style img {
  width: 39px;
  height: auto;
}
@keyframes skip {
  0%,
  10%,
  16%,
  27%,
  100% {
    transform: scale(1);
  }
  5%,
  13%,
  21% {
    transform: scale(0.9);
  }
}
@keyframes skip2 {
  0%,
  10%,
  16%,
  27%,
  100% {
    transform: scale(1);
  }
  5%,
  13%,
  21% {
    transform: scale(1.2);
  }
}

.addGroup {
  width: 460px;
  height: 119px;
  /* border-radius: 15px; 
  border: 3px solid #828282;*/
  font-family: "Roboto";
  font-size: 50px;
  color: #000000;
  padding: 0px 50px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Roboto-Bold";
  /* background: #eeeeee; */
  background: url("/cdn/shop/files/5_8d1ca20a-d6b0-422b-a43b-438603f2408e.png?v=1741229967") no-repeat;
  background-size: 100% 100%;
}
.sp-relative {
  position: relative;
}
.sp-cart {
  width: 110px;
  height: 110px;
  border-radius: 10px;
  border: 3px solid #4e4e4e6a;
  /* margin-right: 50px; */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-cart .sp-icon {
  width: 65px;
      height: auto;
}
.sp-cart .sp-num {
  width: 60px;
  height: 60px;
  background: #cf0101;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  right: -20px;
  top: -13px;
  font-size: 36px;
  font-family: "Roboto";
  text-align: center;
  box-sizing: border-box;
}
.sp-cart .sp-num.sp-gray {
  background-color: #858585;
}

.addGroup .sp-reduce,
.addGroup .sp-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  padding: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

.addGroup input {
  outline: 0;
  border: none;
  text-align: center;
  box-sizing: border-box;
  width: 190px;
  height: 100%;
  color: #202020;
  background: transparent;
  /* vertical-align: middle; */
  padding: 0;
  font-family: "Roboto";
  font-size: 65px;
  /* border-left: 2px solid #666666a9;
  border-right: 2px solid #666666a9; */

  line-height: 40px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.cart-btn .on {
  animation: scaleAni 1s ease-in-out forwards;
}
.sp-header-top .sp-cart.on {
  animation: shakeCart 3s infinite ease-in-out;
}
@keyframes shakeCart {
  0%,
  16% {
    transform: scale(1) rotate(0);
  }
  2% {
    transform: scale(1.2) rotate(0);
  }
  4%,
  8%,
  12% {
    transform: scale(1.2) rotate(-10deg);
  }
  6%,
  10%,
  14% {
    transform: scale(1.2) rotate(10deg);
  }
}
@keyframes scaleAni {
  from {
    transform: scale(1) rotate(0);
  }
  10% {
    transform: scale(1.2) rotate(0);
  }
  15% {
    transform: scale(1.2) rotate(-10deg);
  }
  20% {
    transform: scale(1.2) rotate(10deg);
  }
  25% {
    transform: scale(1.2) rotate(-10deg);
  }
  30% {
    transform: scale(1.2) rotate(10deg);
  }
  35% {
    transform: scale(1.2) rotate(-10deg);
  }
  40% {
    transform: scale(1.2) rotate(10deg);
  }
  45% {
    transform: scale(1.2) rotate(0);
  }
  50% {
    transform: scale(1) rotate(0);
  }
  to {
    transform: scale(1) rotate(0);
  }
}
.price-group {
  display: flex;
  align-items: baseline;
}

.price-group .price2 {
  text-decoration: line-through;
}
.btn-style {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.sp-flex-x {
  display: flex;
  align-items: center;
}

.flex-bet {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-tip5 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* gap: 52px; */

  font-size: 34px;
  color: #ee4b10;
  line-height: 55px;
  text-align: center;
  margin-top: 50px;
}
.sp-tip5 .sp-icon {
  width: 50px;
  flex-shrink: 0;
  transform: translateY(6px);
}
.sp-part9 .sp-title .sp-stroke::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part9 .sp-title .sp-stroke2::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part6 {
}
.sp-part6 .sp-title-wrap {
  top: 95px;
  padding: 0 25px;
}
.sp-part6 .sp-title {
  font-size: 70px;
  color: #ffffff;
  line-height: 80px;
}
.sp-part6 .sp-sub-title {
  margin-top: 35px;
}

.sp-part9 {
  background: #fbf9f8;
  padding-top: 85px;
  padding-bottom: 66px;
}
.sp-part9 .sp-title {
  font-size: 56px;
  color: #3c8cff;
  line-height: 80px;
  margin-bottom: 60px;
  font-family: Montserrat Extra Bold;
  text-align: center;
  width: 100%;
  -webkit-text-stroke: 8px #ffffff;
    text-transform: uppercase;
}

.sp-part9 .swiper {
  width: 100%;
  padding-bottom: 48px;
}
.sp-part9 .swiper .swiper-pagination-bullet {
  width: 108px;
  height: 14px;
  background: #717171;
  border-radius: 7px;
  opacity: 0.35;
  margin: 0 30px !important;
}
.sp-part9 .swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #4f7eeb;
}

.sp-part9 .swiper-slide {
  width: 604px;
  height: 1012px;
  /* transform: scaleY(0.86); */
  transition: all 0.3s;
  margin: 0 1px;
  opacity: 0.6;
}

.sp-part9 .swiper-slide-active {
  transform: scaleY(1);
  opacity: 1;
}
.sp-part9 .swiper-slide .sp-img {
  width: 100%;
  height: 100%;
}

.sp-part9 .sp-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000000;
  text-align: center;
  position: absolute;
  top: 584px;
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
}
.sp-part9 .title-s {
  font-family: "Roboto";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 45px;
  color: #000000;
  line-height: 48px;
  margin-bottom: 12px;
}
.sp-part9 .title-s img {
  width: 36px;
}
.sp-part9 .sp-text1 {
  font-family: "Roboto";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 35px;
}
.sp-part9 .sp-text1 img {
  width: 218px;
  height: 36px;
}

.sp-part9 .sp-text3 {
  font-family: "Roboto";
  font-size: 30px;
  color: #222222;
  line-height: 34px;
  margin-top: 30px;
}
.sp-part9 .sp-title .sp-stroke::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part9 .sp-title .sp-stroke2::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part9 .sp-stroke-shadow {
  position: relative;
  z-index: 1;
}
.sp-part9 .sp-stroke-shadow::before {
  content: attr(data-title);
  -webkit-text-stroke: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  text-shadow: 0px 8px 5px rgba(137, 118, 96, 0.88);
  z-index: -1;
}
.sp-part9 .sp-stroke {
  position: relative;
}
.sp-part9 .sp-stroke::after {
  content: attr(data-title);
  -webkit-text-stroke: 0px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.sp-part9 .sp-title .sp-stroke-shadow::before {
  text-shadow: 0px 4px 8px rgba(72, 66, 59, 0.71);
}
.sp-part9 .sp-title .sp-stroke {
  display: inline-block;
}
.sp-part9 .sp-title .sp-stroke::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part9 .sp-title .sp-stroke.sp-stroke2::after {
  background: #0e667f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-part9 .sp-title .sp-stroke.sp-stroke2{
      font-size: 78px;
}



.guarantee_column_container, .collapsible-content__wrapper {
  display: none !important;
}
.mf-bundle-product {
  zoom: 2.2;
}
.mf-bundle-checkout-warning{
  color: #788188 !important;
  opacity: 0.6;function mainRender() {
  $(function () {
    $('#root').css('zoom', 'normal')
    let scale = document.body.clientWidth / 1080
    $('#root').css('zoom', scale)

    window.addEventListener(
      'resize',
      (function () {
        var timer
        return function () {
          if (timer) clearTimeout(timer)
          timer = setTimeout(function () {
            $('#root').css('zoom', 'normal')
            let scale = document.body.clientWidth / 1080
            $('#root').css('zoom', scale)
          }, 100)
        }
      })()
    )
    new Swiper('#swiper', {
      loop: true,
      centeredSlides: true,
      spaceBetween: 40,
      slidesPerView: 2.9,
      freeMode: true,
      speed: 5500, //匀速时间
      autoplay: {
        delay: 0,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    })
    // 头部固定
    $('header').addClass('stiky')
    $(document).scroll(function (e) {
      var beforScrollTop = $(document).scrollTop()
      setTimeout(function () {
        $('header').addClass('stiky')
      }, 50)
    })
    // 生成随机时间
    function generateRandomTime() {
      var hours = Math.floor(Math.random() * 15) + 1
      var minutes = Math.floor(Math.random() * 60)
      var seconds = Math.floor(Math.random() * 60)
      //总共的毫秒数
      var targetTime = (hours * 3600 + minutes * 60 + seconds) * 1000

      return targetTime
    }
    function TimeDown(value) {
      //倒计时的总秒数
      var totalSeconds = parseInt(value / 1000)
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24)
      //小时数
      var hours = Math.floor(modulo / (60 * 60))
      modulo = modulo % (60 * 60)
      //分钟
      var minutes = Math.floor(modulo / 60)
      //秒
      var seconds = modulo % 60

      hours = hours.toString().length == 1 ? '0' + hours : hours
      minutes = minutes.toString().length == 1 ? '0' + minutes : minutes
      seconds = seconds.toString().length == 1 ? '0' + seconds : seconds

      //输出到页面
      $('.sp_hour').html(hours)
      $('.sp_minute').html(minutes)
      $('.sp_second').html(seconds)
      //延迟一秒执行自己
      if (hours == '00' && minutes == '00' && parseInt(seconds) - 1 < 0) {
      } else {
        setTimeout(function () {
          TimeDown(value - 1000)
        }, 1000)
      }
    }
    TimeDown(generateRandomTime())
    // $('.sp-pro-choose li').click(function () {
    //   $(this).addClass('active').siblings().removeClass('active')
    // })
    // $('.link-btn').click(function () {
    //   let id = $(this).siblings('.sp-pro-choose').find('li.active').attr('data-id')
    //   window.location.href = '/cart/' + id + ':1'
    // })
  })
  function lazyLoadImages() {
    // 懒加载
    const images = document.querySelectorAll('.lazy-load') // 获取所有需要懒加载的图片
    const config = {
      rootMargin: '0px 0px 1300px 0px',
      threshold: 0,
    }

    const lazyLoadObserver = new IntersectionObserver(function (
      entries,
      observer
    ) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          // 当图片进入视口时
          const image = entry.target
          const dataSrc = image.getAttribute('data-src')
          image.src = dataSrc // 将data-src属性的值设置为图片的实际地址
          lazyLoadObserver.unobserve(image) // 停止观察该图片
        }
      })
    },
    config)

    images.forEach(function (image) {
      lazyLoadObserver.observe(image) // 开始观察每个图片
    })
  }

  function preloadImages(imageArray) {
    // 预加载
    // 检查数组数据结构
    if (Array.isArray(imageArray[0])) {
      // 处理二维数组
      imageArray.forEach((subArray) => {
        subArray.forEach((url) => {
          const img = new Image()
          img.src = url
        })
      })
    } else {
      // 处理一维数组
      imageArray.forEach((url) => {
        const img = new Image()
        img.src = url
      })
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    lazyLoadImages()

    // preloadImages(imagesOneDim)
    // preloadImages(imagesTwoDim)

    // 找到所有跳转套餐的锚点链接
    var links = document.querySelectorAll('a[href^="#shopping"]')
    links.forEach(function (link) {
      link.addEventListener('click', function (event) {
        event.preventDefault() // 阻止默认的跳转行为
        // var targetElement = document.getElementById('shopping');
        // if (targetElement) {
        //     targetElement.scrollIntoView({ behavior: 'smooth' });
        // } // 方式一
        const targetElement = document.getElementById('shopping') // 获取跳转目标节点
        const offsetTop = targetElement.offsetTop
        window.scroll({
          top: offsetTop * $('div#root').css('zoom'),
          behavior: 'smooth', // 使用 smooth 实现平滑滚动
        }) // 方式二
      })
    })
  })

  // IOS字体多了间距的处理 给节点添加 sp_system 类名
  // 判断当前用户是安卓端还是iOS端
  var userAgent = navigator.userAgent || navigator.vendor || window.opera
  var isAndroid = /android/i.test(userAgent)
  var isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream
  var isPC = !isAndroid && !isIOS && !/Iron/.test(userAgent) // 添加了对 "Iron" 关键词的判断

  if (isAndroid) {
    console.log('Android')
  } else if (isIOS) {
    console.log('iOS')
  } else if (isPC) {
    console.log('PC')
  } else {
    $('.sp_system').css('letter-spacing', '-4px')
  }
}

mainRender()
let swiper = new Swiper("#swiper-p1", {
    speed: 1,
  });
new Swiper("#sp-swiper2", {
    autoplay: true,
    autoplay: {
      disableOnInteraction: false,
    },
    spaceBetween: 0,
    slidesPerView: "auto",
    centeredSlides: true,
    loop: true,
    pagination: {
      el: ".sp-pagination1",
      clickable: true,
    },
  });
let prods = window.product
function getCur(){
  let color = $('#sp-color div.active').attr('data-val')
  let size = $('#sp-num div.active').attr('data-val')
  return prods.filter(item=> item.option1 == color && item.option2 == size)[0]
}
function changePrice(){
  let num = $('#calcNumber').val()
  let price = (getCur().price * num / 100).toFixed(2)
  let compare = (getCur().compare_at_price  * num / 100).toFixed(2)
  price = (price + '').replace('.', ',')
  compare = (compare + '').replace('.', ',')
  $('#sp_price1').html(price)
  $('#sp_price2').html(compare)
}
$('.sp-btn-style').click(function(){
  let num = $('#calcNumber').val()
  window.location.href = '/cart/' + getCur().id + ':' + num
})

  $(".sp-reduce").click(function () {
    let input = $(this).siblings("input")[0];
    let num = Number(input.value) - 1;
    if (num > 0) {
      input.value = num;
      changePrice()
    }
  });
  $(".sp-add").click(function () {
    let input = $(this).siblings("input")[0];
    let num = Number(input.value) + 1;
    input.value = num;
changePrice()
  });

$(function () {
    $(".sp-option").click(function () {
      $(this).siblings().removeClass("active");
      $(this).addClass("active");
      // style选项
changePrice()
      let colorOptions = $("#sp-color .sp-option.active").index();
      let numOptions = $("#sp-num .sp-option.active").index();
      let _index = colorOptions  + numOptions * 2;
      swiper.slideTo(numOptions);
    });;
if(window.cartCount > 0){
    $("#cardNum").removeClass("sp-gray");
  }
    // 购物车加购动效
    $(".cart-btn").click(function () {
      $(this).children("img").addClass("on");
      $(".sp-header-top .sp-cart .num").show();
      setTimeout(function () {
        $(".cart-btn").children("img").removeClass("on");
      }, 500);
      $(".sp-header-top .sp-cart").addClass("on");
      setTimeout(function () {
        $(".sp-header-top .sp-cart").removeClass("on");
      }, 500);
    });
    let initNum = 0;
    $(".product-part .cart-btn").click(function () {
     var data = {
      id: getCur().id,
      quantity: $('#calcNumber').val(),
    };
    $.ajax({
      type: "POST",
      url: "/cart/add.js",
      data: data,
      success: function () {
        $.getJSON(window.Shopify.routes.root + "cart.js", function (result) {
          $("#cardNum").html(result.item_count);
           $("#cardNum").removeClass("sp-gray");
        });
      },
      dataType: "json",
    });
      // handleAddToCart(initNum);

      // var img = $(".product-part .p-img");
      var img = $(".product-part .swiper-slide-active .sp-img");

      var flyer = img[0].cloneNode(true);
      flyer.classList.add("sp_clone");

      $(".product-part").append(flyer);
      $(".sp_clone").css({
        width: img[0].width,
        height: img[0].height,
        position: "fixed",
        top: img[0].offsetTop,
        left: img.offset().left,
        "z-index": "999999",
      });

      let finish = $(".sp-cart");
      $(".sp_clone").animate(
        {
          top:
            finish[0].offsetTop +
            finish.height() / 2 +
            $(".time-part").height(),
          left: finish[0].offsetLeft + finish.width() / 2,
          width: 50, // 结束时的大小，根据需要调整
          height: 50, // 结束时的大小，根据需要调整
          opacity: 0.4,
        },
        500,
        "linear",
        function () {
          $(this).animate(
            {
              width: 0,
              height: 0,
              opacity: 0,
            },
            0,
            function () {
              $(this).detach();
            }
          );
        }
      );
    });
  });

}
.app-embed-plus-component-pay-button-address-text {
  color: #000;
  opacity: 0.75;
  font-size: 16px !important;
}
.app-embed-plus-component-bundler {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.vtl-ub-vd-widget, .lt_back_to_top{
  display: none !important;
}
#root .customer_buy_more_wrapper .customer_buy_more_title {
font-size: 50px;
margin-bottom: 40px;
}
#root table.customer-buy-more-discount-table {
color: #000;
}
#root .quick-add-hidden {
margin: 20px 40px 40px;
font-size: 40px;
}
#root table.customer-buy-more-discount-table th, td {
padding: 20px 10px !important;
}