* { padding: 0; margin: 0; box-sizing: border-box; }
html { font-size: 16px; color: #000; }
button { cursor: pointer; }

.content-auto { max-width: 75rem; margin: 0 auto; }

/* Header Styles */
header { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; background: rgba(255, 255, 255, 0.8);
  padding: 0rem 24px; position: fixed; top: 0; right: 0; left: 0; z-index: 1; margin: 0 auto;
}
.header-logo img { width: 139px; height: 24px; }
.header-right { display: flex; align-items: center; }
.header-right > button { background-color: rgba(35, 107, 246, 1); border: none; padding: 0 16px; font-size: 14px; font-weight: 500;
  line-height: 32px; height: 32px; border-radius: 64px; color: #fff; }

/* Content One Styles */
.content-one { margin-top: 64px !important; padding: 2.75rem 0 1.5rem 0; position: relative; max-width: 100%; }
.content-one .one-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.content-one > .content-one-box { display: flex; justify-content: space-between; max-width: 86.25rem; }
.content-one > .content-one-box > .content-one-box-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-width: 27.5rem; margin-left: 5.625rem }
.content-one > .content-one-box > .content-one-box-left > h2 { color: rgba(0, 0, 0, 0.9); font-size: 40px; font-weight: 600; }
.content-one > .content-one-box > .content-one-box-left > p { color: rgba(0, 0, 0, 0.9); font-size: 20px; margin-top: 16px; }
.content-one > .content-one-box > .content-one-box-left > button { width: 188px; height: 40px; text-align: center; background: rgba(35, 107, 246, 1);
  border: none; color: white; margin-top: 56px; border-radius: 8px; }
.content-one > .content-one-box > .content-one-box-right { position: relative; width: 46.1875rem; height: 29.25rem; }
.content-one > .content-one-box > .content-one-box-right > .starshape-img { width: 3rem; height: 5rem; position: absolute; top: 0.5625rem; left: 2.9375rem; }
.content-one > .content-one-box > .content-one-box-right > .box1-img { width: 100%; height: 100%;}
.content-one > .content-one-box > .content-one-box-right > button { width: 188px; height: 40px; text-align: center; background: rgba(35, 107, 246, 1);
  border: none; color: white; margin: 16px 0 56px; border-radius: 8px; display: none; }

/* Content Two Styles */
.content-two { margin-top: 4rem !important; }
.content-two > h2 { color: rgba(0, 0, 0, 1); font-size: 2.25rem; font-weight: 500; line-height: 3.25rem; text-align: center; }
.content-two > .tab-btn-group { margin: 0 auto; margin-top: 4.5rem; display: flex; align-items: center; justify-content: center; }
.content-two > .tab-btn-group > button { margin: 0 3.75rem; width: 13.25rem; height: 4rem; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(0, 0, 0, 0.6); border-radius: 2rem; font-size: 1.25rem; font-weight: 500; transition: all 0.3s ease;
  cursor: pointer; }
.content-two > .tab-btn-group > button:hover {
  color: rgba(35, 107, 246, 1); background: linear-gradient(90.00deg, rgba(55, 128, 248, 0.1), rgba(94, 163, 254, 0.1) 100%);
}
.content-two > .tab-btn-group > button > img { margin-right: 1rem; width: 2.25rem; height: 2.25rem; }
.content-two > .tab-btn-group > button.active {
  color: rgba(35, 107, 246, 1); background: linear-gradient(90.00deg, rgba(55, 128, 248, 0.1), rgba(94, 163, 254, 0.1) 100%); }
.content-two > .swiper { border-radius: 1rem; background: rgba(247, 249, 255, 1); padding: 2.75rem 1.875rem 5.625rem 5.125rem; margin-top: 3.5rem; height: 31.25rem; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.content-two > .swiper > .swiper-container { display: none; animation: fadeIn 0.5s ease; }
.content-two > .swiper > .swiper-container.active { display: flex; justify-content: space-between; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-content > .fast-delivery-btn {
  height: 2.25rem; padding: 0 1.5rem; line-height: 2.25rem; text-align: center; border: 0.0625rem solid rgba(35, 107, 246, 1);
  border-radius: 1.25rem; background: linear-gradient(90.00deg, rgba(55, 128, 248, 0.1), rgba(94, 163, 254, 0.1) 100%); color: rgba(35, 107, 246, 1); }
.content-two > .swiper > .swiper-container > .swiper-slide-box-content > .title { margin-top: 1.25rem; font-size: 1.875rem;
  height: 2.75rem; line-height: 2.75rem; font-weight: 500; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-content > .desc { margin-top: 2rem !important; color: rgba(0, 0, 0, 0.5);
  font-size: 1.125rem; font-weight: 400; text-align: left; max-width: 25rem; width: 100%; line-height: 2rem; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-content > .try-btn {
  width: 11.75rem; height: 2.5rem; line-height: 2.5rem; margin-top: 3rem; color: rgba(255, 255, 255, 1);
  font-size: 1rem; font-weight: 500; text-align: center; border-radius: 0.5rem; background: rgba(35, 107, 246, 1); border: none; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-img { margin-top: 2.875rem; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-img > .swiper-img { width: 35rem; height: 20rem; }
.content-two > .swiper > .swiper-container > .swiper-slide-box-img .try-btn {
  width: 188px; height: 40px; line-height: 2.5rem; margin-top: 3rem; color: rgba(255, 255, 255, 1);
  font-weight: 500; text-align: center; border-radius: 0.5rem; background: rgba(35, 107, 246, 1); border: none; display: none; }

/* Content Three Styles */
.content-three { margin-top: 5.875rem !important; background: linear-gradient(135.00deg, rgba(235, 241, 255, 1), rgba(234, 245, 255, 1) 100%);
  padding: 6.875rem 0 3.625rem; text-align: center; max-width: 100% !important; }
.content-three h2 { height: 3.25rem; line-height: 3.25rem; font-size: 2.25rem; font-weight: 500; }
.content-three > .content-three-description { margin-top: 1.5rem; height: 1.8125rem; line-height: 1.8125rem; color: #00000099; font-size: 1.25rem; font-weight: 400; }
.content-three .content-three-box { margin-top: 4rem; margin-bottom: 2.5rem; display: flex; justify-content: center; }
.content-three .content-three-box-left { width: 34.875rem; margin-right: 1.5rem; }
.content-three .content-three-box-right { width: 34.875rem; }
.content-three .content-three-box-ability { background-color: #fff; border-radius: 1.25rem; margin-bottom: 1.5rem; }
.content-three .content-three-box-ability img { width: 100%; }
.content-three .content-three-box-ability-text { padding: 0 0 1.5rem 2rem; height: 5.625rem; line-height: 3.625rem; margin-top: -3.375rem; text-align: left; }
.content-three .content-three-box-right .content-three-box-ability-text { margin-top: -1rem; }
.content-three .content-three-box-ability-text b { color: #236BF6; font-weight: 700; font-size: 2.5rem; }
.content-three .content-three-box-ability-text span { font-weight: 500; font-size: 1.5rem; }

.content-three button { width: 22.5rem; height: 3rem; line-height: 3rem; color: rgba(255, 255, 255, 1);
  font-size: 1rem; font-weight: 500; border-radius: 0.5rem; background: rgba(35, 107, 246, 1); border: none; }

/* Content Four Styles */
.content-four { margin-top: 10rem !important; }
.content-four > .content-four-main { height: 17.5rem; background: url('images/banner.png');
  background-repeat: no-repeat; background-size: 100% 100%; border-radius: 1.25rem; text-align: center; padding-top: 4.1875rem; }
.content-four > .content-four-main > .title { font-size: 2.25rem; font-weight: 500; height: 3.25rem; line-height: 3.25rem; }
.content-four > .content-four-main > button { margin-top: 3.375rem; width: 11.75rem; height: 2.5rem;
  border-radius: 0.5rem; color: #fff; font-size: 1rem; font-weight: 500; background: rgba(35, 107, 246, 1); border: none; }

/* Footer Styles */
footer { margin-top: 200px; }
footer > .footer-top { padding-top: 48px; padding-bottom: 176px; text-align: left; }
footer > .footer-top > img { width: 128px; height: 24px; }
footer > .footer-top > p { height: 17px; line-height: 17px; color: #000000E6; font-size: 12px; font-weight: 400; margin-top: 18px; }
footer > .footer-bottom { padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.2); text-align: center; margin-bottom: 68px; }
footer > .footer-bottom > p { display: inline-block; color: rgba(0, 0, 0, 0.6); font-size: 12px; font-weight: 400; height: 17px; line-height: 17px; }
footer > .footer-bottom > p > a { font-size: 12px; }
footer > .footer-bottom > p:first-child { margin-right: 56px; }
footer > .footer-bottom > p > a { text-decoration: none; color: #00000099; }

/* Media Queries */
@media screen and (max-width: 1360px) {
  html { font-size: 12px; }
  .content-auto { max-width: calc(100% - 120px); margin: 0 auto; }
  .content-one > .content-one-box { width: 100%; flex-direction: column; }
  .content-three .content-three-box-left { flex: 1; }
  .content-three .content-three-box-right { flex: 1; }
  .content-one > .content-one-box > .content-one-box-left { align-items: center; min-width: auto; margin-left: 0; }
  .content-one > .content-one-box > .content-one-box-left > button { display: none; }
  .content-one > .content-one-box > .content-one-box-right { max-width: 520px; width: 100%; height: auto; margin: 0 auto; text-align: center; }
  .content-one > .content-one-box > .content-one-box-right > .starshape-img { display: none; }
  .content-one > .content-one-box > .content-one-box-right > .box1-img { width: 100%; }
  .content-one > .content-one-box > .content-one-box-right > button { display: inline-block; }

  .content-two > .swiper { height: auto; padding: 2rem 1.5rem 2.5625rem; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-content > .fast-delivery-btn { display: none; }
  .content-two > .swiper > .swiper-container { flex-direction: column; text-align: center; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-content > .desc { margin: 0 auto; text-align: center; max-width: 72%; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-content > .try-btn { display: none; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-img { text-align: center; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-img > .swiper-img { max-width: 520px; width: 100%; height: auto; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-img .try-btn { display: inline-block; }

  .content-three { width: 100%; }
  .content-three button { height: 40px; font-size: 1.15rem; }

  .content-four > .content-four-main > button { width: 188px; height: 40px; font-size: 1.15rem; }
}
/* Mobile Styles */
@media screen and (max-width: 760px) {
  html { font-size: 12px; }
  .content-auto { max-width: calc(100% - 48px); margin: 0 auto; }

  .content-one .one-bg { height: calc(100% - 20px); }
  .content-one > .content-one-box { width: 100%; }
  .content-one > .content-one-box > .content-one-box-left > h2 { font-size: 2.25rem; }
  .content-one > .content-one-box > .content-one-box-left > p { font-size: 1.5rem; }

  .content-two { margin-top: 0 !important; }
  .content-two > h2 { font-size: 1.8rem; }
  .content-two > .tab-btn-group { justify-content: space-between; margin-top: 1.5rem; }
  .content-two > .tab-btn-group > button { margin: 0 2px; font-size: 12px; width: 9rem; height: 3rem; }
  .content-two > .tab-btn-group > button > img { margin-right: 0.25rem; }
  .content-two > .swiper { margin-top: 2.5rem; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-content > .title { font-size: 1.6rem; }
  .content-two > .swiper > .swiper-container > .swiper-slide-box-content > .desc { margin-top: 0.5em !important; }

  .content-three { margin-top: 4rem !important; padding: 3.5rem 2.5rem; }
  .content-three h2 { font-size: 1.8rem; }
  .content-three .content-three-box { margin-top: 2.5rem; flex-direction: column; width: 100%; margin: 1.5rem 0 0; max-width: 100%; }
  .content-three .content-three-box-left { width: 100%; }
  .content-three .content-three-box-right { width: 100%; }
  .content-three button { margin-top: 2rem; }
  
  .content-four { margin-top: 4rem !important; }
  .content-four > .content-four-main { height: 14.5rem; padding-top: 2.5rem; }
  .content-four > .content-four-main > .title { font-size: 1.5rem; }
  .content-four > .content-four-main > button { margin-top: 2.25rem; }

  footer > .footer-bottom > p:first-child { margin-right: 0;}
}

@media screen and (max-width: 400px) {
  html { font-size: 10px; }
}