header {
  width: 100%;
  --header-color: var(--theme-color-gray);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: 0.3s;
  background-color: #fff;
  box-shadow: var(--theme-box-shadow);
}

header.header-transparent {
  --header-color: #fff;
  background-color: unset;
  box-shadow: unset;
}

body:not(.scrolled) header.header-transparent .logo {
  filter: url(#white-overlay);
}

header.header-transparent::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .3s;
  background: #fff;
  backdrop-filter: blur(30px);
  transform: scale();
}

body.scrolled header,
body.scrolled .mobile-nav {
  --header-h: 60px;
  box-shadow: var(--theme-box-shadow);
  --header-color: var(--theme-color-gray);
}

body.scrolled header.header-transparent::after {
  top: 0;
}

header .main,
header .main-thin {
  position: relative;
  z-index: 1;
  padding: 0 var(--main-margin);
  margin: 0;
}

.header-wrap .logo {
  height: var(--header-h);
  margin-right: max(20px, 60 * var(--px));
  transition: 0.3s;
  /* filter: url(#black-overlay); */
  flex-shrink: 0;
}

.header-wrap .logo .logo-img1 {
  display: none;
}

header.header-transparent .logo .logo-img1 {
  display: block;
}

header.header-transparent .logo .logo-img2 {
  display: none;
}

body:not(.scrolled) header.header-transparent .btn-large-nav-expand i {
  background-color: #fff;
}

.header-wrap .nav {
  flex-shrink: 0;
  margin-right: 20px;
}

.header-wrap .nav-ul-f {
  gap: var(--px-20-40);
}

.header-wrap .nav-a-f {
  height: var(--header-h);
  line-height: var(--header-h);
  color: var(--header-color);
  display: block;
  font-weight: bold;
  transition: 0.3s;
}

.header-wrap .nav-li-f.active .nav-a-f {
  color: var(--theme-color-green);
}

.header-wrap .nav-li-f:hover .nav-a-f,
.header-wrap .nav-a-s:hover {
  color: var(--theme-color-green);
}

.header-wrap .nav-a-s:hover img {
  filter: url(#blue-overlay);
  transform: translateX(10px);
}

.header-wrap .nav-li-f:hover .nav-ul-s {
  visibility: visible;
  transform: translate(-50%, 0);
  opacity: 1;
}

.header-wrap .nav-ul-s {
  position: absolute;
  top: 100%;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -20px);
  transition: .3s;
  z-index: 999;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
  visibility: hidden;
  opacity: 0;
}

.header-wrap .nav-li-s+.nav-li-s {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.header-wrap .nav-ul-s {
  width: 100%;
}

.header-wrap .nav-a-s {
  gap: 20px;
  padding: var(--px-10-20) var(--px-20-40);
}

.header-wrap .nav-a-s img {
  filter: url(#gray-overlay);
  width: 15px;
  transition: .3s;
}

.header-area-r {
  gap: 10px;
}

.search-wrap {
  border: 1px solid var(--theme-color-green);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

header .search-wrap img {
  filter: url(#green-overlay);
}

body:not(.scrolled) header.header-transparent .search-wrap {
  border-color: #fff;
}

body:not(.scrolled) header.header-transparent .search-wrap img {
  filter: unset;
}

header .learn-more {
  border-color: var(--theme-color-green);
  color: var(--theme-color-green);
}

body:not(.scrolled) header.header-transparent .learn-more {
  border-color: #fff;
  color: #fff;
}

.lang-wrap {
  position: relative;
  cursor: pointer;
}

.lang-curr {
  border-radius: 300px;
  padding: 0 20px;
  height: 40px;
  gap: 5px;
  color: var(--theme-color-green);
  border: 1px solid var(--theme-color-green);
}

header:not(.header-transparent) .lang-curr img {
  filter: url(#gray-overlay);
}

.lang-cont {
  width: 100%;
  position: absolute;
  top: 110%;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  transform: translateY(-10px);
  box-shadow: 0px 0px 10px 0px rgba(71, 52, 26, 0.1);
  border-radius: 2px;
}

.lang-cont-area {
  border-radius: 10px;
  overflow: hidden;
}

.lang-cont a {
  background-color: #fff;
  padding: 10px 0;
  color: #000;
}

.lang-wrap:hover .lang-cont {
  visibility: visible;
  opacity: 1;
  transform: unset;
}

.learn-more {
  border-radius: 30px;
  border: 1px solid;
  padding: max(10px, 16 * var(--px)) max(15px, 32 * var(--px));
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: .3s;
  line-height: 1;
  color: #fff;
  border-color: #fff;
  width: max-content;
  gap: 8px;
}

.learn-more:hover {
  color: var(--theme-color-gray);
}

.learn-more::before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
  transform: translateY(105%);
  background-color: #fff;
}

.learn-more:hover img {
  filter: url(#black-overlay);
}

.learn-more>* {
  position: relative;
  z-index: 1;
}

.learn-more:hover::before {
  transform: translateY(0);
}

body.scrolled .header-area-r .learn-more {
  height: 40px;
  padding-left: max(12px, 24 * var(--px));
  padding-right: max(12px, 24 * var(--px));
}

body .header-area-r .learn-more::before {
  background-color: var(--theme-color-green);
}

body .header-area-r .learn-more:hover {
  color: #fff;
}

body:not(.scrolled) header.header-transparent .header-area-r .learn-more::before {
  background-color: #fff;
}

body:not(.scrolled) header.header-transparent .header-area-r .learn-more:hover {
  color: var(--theme-color-gray);
}

.learn-more.lay1 {
  border-color: var(--theme-color-gray);
  color: var(--theme-color-gray);
}

.learn-more.lay1 img {
  filter: url(#black-overlay);
}

.learn-more.lay1::before {
  background-color: var(--theme-color-gray);
}

.learn-more.lay1:hover {
  color: #fff;
  border-color: #fff;
}

.learn-more.lay1:hover img {
  filter: url(#white-overlay);
}

.learn-more.lay2.active,
.learn-more.lay2 {
  border-color: var(--theme-color-green);
  background-color: var(--theme-color-green);
  color: #fff;
}

.learn-more.lay2.active,
.learn-more.lay2:hover {
  border-color: #fff;
  color: var(--theme-color-green);
  background-color: #fff;
}

.learn-more.lay2.active::before,
.learn-more.lay2::before {
  background-color: #fff;
}

.learn-more.lay3 {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  color: var(--theme-color-green);
}

.learn-more.lay3::before {
  background-color: var(--theme-color-green);
}

.learn-more.lay3:hover {
  color: #fff;
  padding: max(8px, 16 * var(--px)) max(15px, 32 * var(--px));
}

.learn-more.lay3:hover img {
  filter: url(#white-overlay) !important;
}

.header-contact-us {
  width: max(120px, 150 * var(--px));
  height: 40px;
  padding: 5px 5px 5px 20px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 30px;
  border: 1px solid var(--header-color);
  cursor: pointer;
}

.index-banner {
  overflow: hidden;
}

.index-banner-line-top {
  width: 100%;
  height: 1px;
  position: absolute;
  top: var(--header-h);
  left: 0;
  background-color: rgba(255, 255, 255, .3);
  z-index: 2;
}

.index-banner-solution {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.label-lay {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
}

.label-lay::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--theme-color-green);
}

.border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.border {
  border: 1px solid rgba(255, 255, 255, .2);
}

.pic-lay {
  display: flex;
}

.pic-lay .item {
  width: var(--w);
  height: var(--w);
  border-radius: 50%;
  overflow: hidden;
}

.pic-lay .item:first-child {
  position: relative;
  z-index: 1;
}

.pic-lay .item:last-child {
  margin-left: calc(var(--w) * -.5);
}

.index-banner-swiper {
  padding: 20px 0 max(20px, 10vh);
}

.index-banner-swiper .swiper {
  width: 400px;
  margin-left: 0;
  padding-bottom: 26px;
}

.pb-20 {
  padding-bottom: 20px;
}

.index-banner-swiper .slide-cont {
  padding: 10px;
  backdrop-filter: blur(10px);
}

.index-banner-swiper .slide-cont .pic-lay {
  --w: 120px;
}

.index-banner-swiper .slide-cont .info {
  align-items: flex-end;
  color: #fff;
  padding-bottom: 10px;
}

.index-banner-swiper .slide-cont .info .serial {
  font-size: 12px;
  opacity: .5;
}

.index-banner-swiper .slide-cont .info-cont {
  align-items: flex-end;
}

.index-banner-swiper .slide-cont .info .icon {
  --w: 30px;
  --bg-color: rgba(255, 255, 255, .1);
}

.index-banner-swiper .slide-cont .info .icon img {
  filter: url(#white-overlay);
}

.index-banner-swiper .slide-cont .info .title {
  font-size: var(--font-24);
  margin-top: 5px;
}

.index-banner .swiper-pagination {
  bottom: 0;
}

.swiper-pagination-bullet {
  opacity: 1;
  background-color: rgba(255, 255, 255, .5);
  width: 6px;
  height: 6px;
}

.swiper-pagination-bullet-active {
  width: 30px;
  background-color: #fff;
  border-radius: 5px;
}

.index-banner-intro {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  padding: calc(var(--header-h) + max(20px, 80 * var(--px))) max(20px, 80 * var(--px)) 0;
  padding-right: max(40px, 140 * var(--px));
  backdrop-filter: blur(10px);
  z-index: 3;
  background-color: rgba(255, 255, 255, .15);
}

.index-banner-intro .title {
  font-size: var(--font-68);
  font-weight: bold;
  color: #fff;
  margin-bottom: var(--px-10-20);
}

.index-banner-intro .label {
  margin-top: max(30px, 10vh);
}

.index-banner {
  position: relative;
}

.index-sec1 .item {
  width: 50%;
}

.index-sec1 .item .ring {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1;
}

.index-sec1 .item .ring-1 {
  width: 70%;
  border: max(5px, 10 * var(--px)) solid transparent;
  border-top-color: rgba(0, 163, 164, .05);
  border-left-color: rgba(0, 163, 164, .05);
  animation: ring1 3s linear infinite;
}


.index-sec1 .item .ring-2 {
  width: 110%;
  border: var(--px-10-20) solid transparent;
  border-top-color: rgba(0, 163, 164, .05);
  border-left-color: rgba(0, 163, 164, .05);
  animation: ring2 2s linear infinite;
}


.index-sec1 .item .ring-3 {
  width: 150%;
  border: var(--px-20-40) solid transparent;
  border-top-color: rgba(0, 163, 164, .05);
  border-left-color: rgba(0, 163, 164, .1);
  animation: ring3 5s linear infinite;
}

@keyframes ring1 {
  from {
    transform: translate(50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(50%, -50%) rotate(360deg);
  }
}


@keyframes ring2 {
  from {
    transform: translate(50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(50%, -50%) rotate(0deg);
  }
}


@keyframes ring3 {
  from {
    transform: translate(50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(50%, -50%) rotate(360deg);
  }
}

.index-sec1 .sec-title {
  padding: max(30px, 86 * var(--px)) var(--main-margin) max(20px, 45 * var(--px));
}

/* .index-sec1 .fold-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
} */

.index-sec1 .fold-cont {
  --padding: max(15px, 32 * var(--px));
  padding: var(--padding) var(--main-margin);
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  position: relative;
  cursor: pointer;
}

.index-sec1 .fold-cont .title {
  font-size: var(--font-24);
}

.index-sec1 .fold-cont.active {
  padding-bottom: calc(var(--padding) * 2);
  flex: 1;
}

.index-sec1 .fold-cont.active .title {
  font-weight: bold;
}

.index-sec1 .fold-cont .icon {
  width: var(--px-20-40);
  position: absolute;
  bottom: 50%;
  right: calc(var(--main-margin) / 2);
  transform: translateY(50%);
  z-index: 1;
  filter: url(#green-overlay);
  border-radius: 50%;
  transition: transform .3s, bottom .3s;
  transition-delay: .1s;
}

.index-sec1 .fold-expand {
  margin-top: var(--px-20-40);
  font-size: 16px;
  display: none;
  flex: 1;
}

.index-sec1 .fold-cont.active .fold-expand {
  display: block;
}

.fold-area {
  height: 100%;
}

.index-sec1 .fold-expand p {
  margin-bottom: var(--px-10-20);
  gap: var(--px-10-20);
}

.index-sec1 .fold-cont.active .icon {
  width: max(60px, 120 * var(--px));
  height: max(60px, 120 * var(--px));
  border: 1px solid var(--theme-color-green);
  bottom: calc(var(--padding) * 2);
  transform: unset;
}

.index-sec1 .fold-cont.active .icon img {
  width: 60%;
}

.pic-cover {
  height: 100%;
  position: relative;
}

.pic-cover .pic-cont {
  height: 100%;
  background-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(100px);
  padding: max(30px, 5%);
  z-index: 1;
  position: relative;
}

.pic-cover .pic-cont .pic {
  width: 50%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}

.pic-cover .pic-cont .pic img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .3s;
}

.pic-cover .pic-cont .pic img.active {
  opacity: 1;
}


.pic-cover-bg img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .3s;
}

.pic-cover-bg img.active {
  opacity: 1;
}

.bg-color-gray {
  background-color: var(--theme-bg-color-gray);
}

.bg-color-green {
  background-color: var(--theme-color-green);
}

.index-sec2 .bg-wrap {
  width: 50%;
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.index-sec2 .btn-wrap {
  z-index: 1;
}

.index-sec2 .btn-wrap .btn {
  position: absolute;
}

.index-sec2 .btn-wrap .btn .serial {
  width: max(45px, 60 * var(--px));
  aspect-ratio: 1;
  border: 1px solid var(--theme-color-green);
  color: var(--theme-color-green);
  font-size: 14px;
  border-radius: 50%;
}

.index-sec2 .btn-wrap .btn:nth-child(1) {
  left: 27%;
  top: 31%;
}

.index-sec2 .btn-wrap .btn:nth-child(2) {
  left: 12.5%;
  top: 64%;
}

.index-sec2 .btn-wrap .btn:nth-child(3) {
  flex-direction: row-reverse;
  left: 59%;
  top: 31%;
}

.index-sec2 .btn-wrap .btn:nth-child(4) {
  flex-direction: row-reverse;
  left: 76%;
  top: 64%;
}

.index-sec2 .ring {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  border: 1px solid var(--theme-color-green);
  aspect-ratio: 1;
  width: 60%;
}

.index-sec2 .ring-1 {
  opacity: .6;
  /* animation: shake 2s linear infinite; */
}

.index-sec2 .ring-2 {
  /* animation: ripple 4s linear infinite;
  opacity: 0; */
  transform: translate(-50%, 50%) scale(1.4);
  opacity: .4;
}

.index-sec2 .ring-3 {
  /* animation: ripple 4s 2s linear infinite;
  opacity: 0; */
  transform: translate(-50%, 50%) scale(1.9);
  opacity: .2;
}

@keyframes shake {
  0% {
    width: 60%;
  }

  5% {
    width: calc(60% + 10px);
  }

  100% {
    width: calc(60% + 10px);
  }
}

@keyframes ripple {
  0% {
    transform: translate(-50%, 50%) scale(1);
    opacity: .6;
  }

  100% {
    transform: translate(-50%, 50%) scale(2);
    opacity: .2;
  }
}

.slide-area .slide-top {
  background-color: var(--theme-color-green);
  font-size: var(--font-24);
  position: relative;
  color: #fff;
  display: flex;
}

.slide-area .slide-top .title {
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--px-20-40);
}

.slide-area .slide-top .title p {
  font-size: 14px;
  width: 46em;
  margin-top: 10px;
}

.slide-area .slide-top .btn {
  aspect-ratio: 1;
  background-color: #008B8C;
  font-size: 14px;
  cursor: pointer;
  gap: 5px;
  padding: 0 var(--px-20-40);
  flex-shrink: 0;
}

.slide-area .slide-expand {
  max-width: 960px;
  margin: 0 auto;
  line-height: 2;
  font-size: 14px;
  color: #3B3B3B;
  padding: var(--px-20-40);
  display: none;
}

.custom-swiper-handle {
  gap: 20px;
}

.custom-swiper-handle .icon {
  border: 1px solid var(--theme-color-gray);
  --ratio: 3;
  cursor: pointer;
}

.custom-swiper-handle .icon img {
  filter: url(#gray-overlay);
}

.custom-swiper-handle .icon:hover {
  --bg-color: var(--theme-color-green);
  border-color: var(--theme-color-green);
}

.custom-swiper-handle .icon:hover img {
  filter: url(#white-overlay);
}

.custom-swiper-handle .swiper-pagination {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  bottom: unset;
  width: auto;
}

.custom-swiper-handle .swiper-pagination .swiper-pagination-bullet {
  background-color: rgba(0, 0, 0, .2);
}

.custom-swiper-handle .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--theme-color-gray);
}

.index-sec7 .intro {
  font-size: var(--font-24);
  line-height: 1.6;
  width: 26em;
}

.index-sec7 .info {
  align-items: flex-end;
  padding-top: 10px;
  position: relative;
  font-size: 16px;
}

.index-sec7 .info::after {
  content: '';
  width: 2.5em;
  height: 1px;
  background-color: var(--theme-color-green);
  position: absolute;
  top: 0;
  left: 0;
}

.index-sec7 .info .position {
  font-weight: bold;
  color: var(--theme-color-green);
  margin-right: 10px;
}

.index-sec7 .info .other {
  font-size: 14px;
}

.mark {
  padding-top: 2.5em;
  position: relative;
}

.mark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--theme-color-green);
  border: 1px solid var(--theme-color-green);
  width: 1.2em;
  aspect-ratio: 1;
  border-radius: 50%;
}

.mark::before {
  content: '';
  position: absolute;
  top: 0;
  left: .6em;
  border: 1px solid var(--theme-color-green);
  width: 1.2em;
  aspect-ratio: 1;
  border-radius: 50%;
}

.index-sec7 .custom-swiper-handle {
  margin: max(50px, 20%) 0 max(30px, 86 * var(--px));
}

.index-sec3 .item {
  /* transition: .3s; */
}

.index-sec3 .item:hover {
  box-shadow: var(--theme-box-shadow);
}

.index-sec3 .item .pic {
  aspect-ratio: 44 / 27;
}

.index-sec3 .item .txt {
  transition: .3s;
  padding-bottom: var(--px-10-20);
}

.index-sec3 .item:hover .txt {
  padding-left: var(--px-10-20);
  padding-right: var(--px-10-20);
}

.index-sec3 .item .learn-more img {
  filter: url(#green-overlay);
}

.index-sec3 .item .label {
  color: var(--theme-color-green);
}

.index-sec3 .item .title {
  font-size: var(--font-24);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.index-sec3 .item .intro {
  font-size: 14px;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  word-break: break-word;
}

.index-sec4 .sec-title,
.index-sec4 .sec-intro {
  position: relative;
  z-index: 11;
  width: max-content;
}

.index-sec4 .learn-more {
  margin-top: max(50px, 143 * var(--px));
  position: relative;
  z-index: 11;
}

.index-sec4 .sec-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.index-sec4 .sec-bg canvas {
  height: 100%;
  position: relative;
  z-index: 1;
}

.index-sec4 .sec-bg img {
  width: auto;
  position: absolute;
  top: 0;
  right: max(20px, 80 * var(--px));
}

.white {
  color: #fff;
}

.index-sec5 .sec-area {
  background-image: var(--theme-linear-gradient-right);
  padding: max(20px, 60 * var(--px));
  border-radius: var(--border-radius);
  color: var(--theme-color-green);
}

.index-sec5 .sec-area .info {
  font-size: max(14px, 32 * var(--px));
  vertical-align: bottom;
}

.index-sec5 .sec-area span {
  font-size: max(30px, 120 * var(--px));
  line-height: 1;
  display: inline-block;
}

.index-sec5 .sec-area .sec-intro {
  line-height: 3;
}

.index-sec5 .sec-area .sec-intro strong {
  font-size: var(--font-68);
  line-height: 1;
}

.index-sec5 .parter-wrap .info {
  background-color: var(--theme-color-green);
  border-radius: var(--border-radius);
  color: #fff;
  width: max(300px, 600 * var(--px));
  aspect-ratio: 1;
  align-items: flex-end;
  padding: max(20px, 60 * var(--px));
}

.index-sec5 .parter-wrap .info .icon {
  width: max-content;
}

.index-sec5 .parter-cont {
  flex: 1;
  position: relative;
}

.index-sec5 .parter-cont .card-wrap {
  height: 100%;
  --col: 2;
}

.index-sec5 .parter-cont .item .country {
  margin-top: var(--px-10-20);
  font-size: 14px;
}

.index-sec5 .parter-cont .parter-logo {
  width: 50%;
}

.index-sec5 .parter-cont .item .brand {
  font-size: 14px;
}

.index-sec5 .parter-cont .item .slogan {
  font-size: 16px;
  color: var(--theme-color-green);
  margin-top: 5px;
  opacity: 0;
  transform: translateY(16px);
  transition: .3s;
}

.index-sec5 .parter-cont .item-cont {
  transform: translateY(16px);
  transition: .3s;
}

.index-sec5 .parter-cont .item:hover .item-cont,
.index-sec5 .parter-cont .item:hover .slogan {
  transform: unset;
  opacity: 1;
}

.index-sec5 .parter-cont::before,
.index-sec5 .parter-cont::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, .1);
}

.index-sec5 .parter-cont::before {
  width: 1px;
  height: 85%;
}

.index-sec5 .parter-cont::after {
  height: 1px;
  width: 85%;
}

.index-sec5 .parter-cont .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme-bg-color-gray);
  z-index: 1;
  width: max(30px, 60 * var(--px));
  aspect-ratio: 1;
}

.index-sec5 .parter-cont .dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme-color-green);
  width: max(5px, 10 * var(--px));
  aspect-ratio: 1;
  border-radius: 50%;
}

.page-form .sec-top {
  width: 34em;
}

.page-form .contact-wrap .item {
  gap: var(--px-10-20);
  margin-bottom: var(--px-10-20);
}

.page-form .info-wrap {
  margin-bottom: 10px;
}

.page-form .info .label {
  font-size: var(--font-20);
}

.page-form .info .txt {
  font-size: var(--font-16);
}

.page-form .choose-wrap .card-wrap {
  --col: 4;
  --gap: 10px;
}

.page-form .sec-top .intro {
  font-size: var(--font-16);
}

.page-form .choose-wrap .card-wrap .item {
  background-color: #fff;
  height: max(50px, 80 * var(--px));
  cursor: pointer;
  transition: .3s;
  position: relative;
  font-size: var(--font-16);
  padding: 0 5px;
  text-align: center;
}

.page-form .choose-wrap .card-wrap .item::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/choose.svg) no-repeat center / 60%;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.page-form .choose-wrap .card-wrap .item:hover,
.page-form .choose-wrap .card-wrap .item.active {
  background-color: var(--theme-color-green);
  color: #fff;
}

.page-form .choose-wrap .card-wrap .item.active::after {
  display: block;
}

.form-wrap {
  width: calc(830 * var(--px));
}

.form-wrap .form {
  flex-wrap: wrap;
  gap: var(--px-10-20);
}

.form-wrap .form .item {
  width: calc((100% - var(--px-10-20)) / 2);
  position: relative;
}

.form-wrap .form .item.w100 {
  width: 100%;
  margin-right: 0;
}

.form-wrap .form .item input[type=text],
.form-wrap .form .item textarea,
.form-wrap .form .item select {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  background-color: transparent;
  color: #252525;
  font-weight: 400;
  font-size: var(--font-18);
}

.form-wrap .form .item select[disabled] {
  cursor: not-allowed;
}

.form-wrap .form .item input[type=text]::placeholder {
  color: #252525;
}

.form-wrap .form .item textarea::placeholder {
  color: rgba(37, 37, 37, .5);
}

.form-wrap .form .tips {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 12px;
  color: #f00;
  display: none;
}

.form-wrap .learn-more {
  width: max(120px, 240 * var(--px));
  height: 50px;
  background-color: var(--theme-color-green);
}

.form-wrap .learn-more:hover {
  background-color: #fff;
  box-shadow: var(--theme-box-shadow);
}

.index-sec6 .sec-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.index-sec6 .sec-bg-line {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.index-sec6 .sec-area {
  width: calc(780 * var(--px));
  padding: max(30px, 60 * var(--px)) 5% 0;
}

.index-sec6 .sec-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 30%;
  background-image: linear-gradient(to bottom, var(--theme-color-green), transparent);
  opacity: .19;
}

.index-sec6 .sec-area .bg-ring {
  background: url(../images/img1641_1.png) no-repeat center / contain;
  /* animation: spin 3s linear infinite; */
}

/* .index-sec6 .sec-area .bg-line {
  animation: spin 20s linear infinite;
} */

.index-sec6 .sec-area .bg-line .line1 {
  background: url(../images/img1508_1.svg) no-repeat center / contain;
  transform: scale(1.05);
  /* animation: bounce1 1s linear infinite; */
}

.index-sec6 .sec-area .bg-line .line2 {
  background: url(../images/img1508_1.svg) no-repeat center / contain;
  opacity: .6;
  transform: scale(1.1) rotate(15deg);
  /* animation: bounce2 1s .5s linear infinite; */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce1 {
  0% {
    transform: scale(1.05);
  }

  50% {
    transform: scale(1.1);
  }

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


@keyframes bounce2 {
  0% {
    transform: scale(1.05) rotate(15deg);
  }

  50% {
    transform: scale(1.1) rotate(15deg);
  }

  100% {
    transform: scale(1.05) rotate(15deg);
  }
}

.level-roof {
  position: relative;
  z-index: 99;
}

.index-sec6 .sec-area .txt {
  font-size: var(--font-24);
}

.index-sec6 .sec-area .txt strong {
  color: var(--theme-color-green);
  font-weight: bold;
}

.index-sec6 .sec-area .learn-more {
  border-color: var(--theme-color-green);
  color: var(--theme-color-green);
}

.index-sec6 .sec-area .learn-more:hover {
  background-color: var(--theme-color-green);
  color: #fff;
}

.index-sec6 .sec-area .learn-more img {
  filter: url(#green-overlay);
}

.index-sec6 .sec-area .learn-more:hover img {
  filter: url(#white-overlay);
}

.index-sec6 .sec-area .learn-more::before {
  background-color: var(--theme-color-green);
}

.btn-wrap {
  width: 100%;
}

footer {
  overflow: hidden;
}

footer .contact-wrap {
  padding: var(--px-20-40) 0;
  position: relative;
  z-index: 100;
}

footer .contact-wrap .main {
  padding-right: var(--px-20-40);
}

/* footer .contact-wrap::after {
  content: '';
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, .3);
} */

footer .contact-cont {
  gap: 20px;
  align-items: flex-start;
}

footer .contact-wrap .share-wrap {
  gap: 20px;
}

footer .contact-wrap .share-wrap .item {
  cursor: pointer;
  transition: .3s;
  position: relative;
}

footer .contact-wrap .share-wrap .item:hover {
  transform: translateY(-5px);
}

footer .contact-wrap .label::before {
  background-color: #fff;
}

footer .contact-wrap .share-wrap .item .qr-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 30px));
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  width: max(50px, 200 * var(--px));
}

footer .contact-wrap .share-wrap .item:hover .qr-wrap {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(100% + 20px));
}

footer,
footer a {
  color: #fff;
}

footer a:hover {
  text-decoration: underline;
}

.footer-info {
  padding-bottom: var(--px-20-40);
  margin-top: max(30px, 5%);
  gap: max(20px, 10%);
}

.footer-info .info {
  margin-left: var(--main-margin);
}

.footer-info .info .sec-title {
  line-height: 1.2;
  margin-top: 10px;
}

footer .logo-cont img {
  width: calc(380 * var(--px));
  filter: url(#white-overlay);
}

.footer-nav {
  margin-left: max(20px, 80 * var(--px));
  flex: 1;
  padding-top: var(--px-10-20);
  /* border-top: 1px solid rgba(255, 255, 255, .3); */
}

.footer-nav .icon {
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-right: 5px;
}

.footer-nav .icon img {
  filter: url(#white-overlay);
  width: 65%;
}

.footer-nav .title {
  display: block;
  margin-bottom: 10px;
}

.footer-nav .link {
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-nav .nav {
  gap: max(30px, 22%);
  margin-bottom: max(30px, 8%);
}

.footer-nav .copyright-wrap {
  font-size: 14px;
  opacity: .7;
  margin-right: var(--main-margin);
}

.ring-cont {
  position: absolute;
  bottom: -25%;
  right: -9%;
  --w-s: calc(421 * var(--px));
  --w-b: calc(677 * var(--px));
  --border-size: 4px;
  --border-color: #fff;
  width: var(--w-b);
  aspect-ratio: 1;
}

.ring-cont .ring-lay {
  position: absolute;
  border: var(--border-size) solid var(--border-color);
  border-radius: 50%;
  aspect-ratio: 1;
}

.ring-cont .ring-1 {
  opacity: .25;
  width: var(--w-s);
  bottom: 0;
  right: 82%;
}

.ring-cont .ring-2 {
  opacity: .5;
  width: var(--w-b);
  bottom: 0;
  right: 0;
}

.index-banner .ring-cont {
  bottom: -10%;
  --w-s: calc(206 * var(--px));
  --w-b: calc(338 * var(--px));
  --border-color: var(--theme-color-green);
  z-index: 5;
}

.header-expand {
  position: absolute;
  top: var(--header-h);
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, .2);
  padding-left: 10%;
  display: none;
  box-shadow: var(--theme-box-shadow);
}

.header-expand-nav .item {
  width: calc(480 * var(--px));
  padding: 20px 0;
  flex: 1;
  position: relative;
}

.header-expand-nav .item::after {
  content: '';
  width: 12px;
  height: 10px;
  background: url(../images/arrow-right-full.svg) no-repeat center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-20px, -50%);
  transition: .3s;
  filter: url(#gray-overlay);
  opacity: 0;
}

.header-expand-nav .item+.item {
  border-top: 1px solid rgba(0, 0, 0, .2);
}

.header-expand-nav .item:hover::after {
  transform: translate(0, -50%);
  opacity: 1;
}

.header-expand-nav .item .icon {
  border: 1px solid var(--theme-color-green);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-right: 5px;
}

.header-expand-nav .item .icon img {
  width: 65%;
}

.header-expand .pic-cover {
  width: max(300px, 400 * var(--px));
  aspect-ratio: 1;
}

.header-expand .pic-cover .pic-cont .pic {
  width: 82%;
}

.product-sec1 {
  margin-top: var(--header-h);
  position: relative;
}

.breadcrumb {
  position: absolute;
  top: 20px;
  left: var(--main-margin);
  gap: 10px;
  z-index: 5;
}

.breadcrumb img {
  filter: url(#gray-overlay);
}

.breadcrumb a:hover {
  color: var(--theme-color-green);
  text-decoration: underline;
}

.product-sec1 .sec-intro {
  width: 27em;
  margin-top: 1.5em;
  margin-bottom: 2.5em;
}

.product-sec1 .sec-wrap {
  padding-right: max(50px, 10%);
}

.product-sec1 .sec-wrap .pic img {
  height: calc(600 * var(--px));
}

.product-sec2 {
  overflow: initial;
  color: #fff;
}

.sec-bg-green {
  background-color: var(--theme-color-green);
  mix-blend-mode: multiply;
}

.product-sec2 .pic-lay {
  --w: max(60px, 260 * var(--px));
  margin-left: max(30px, 10%);
  margin-right: var(--px-20-40);
  transform: translateY(-50%);
}

.probiotics-sec1 .pic-lay .item:last-child {
  background-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(30px);
}

.product-sec2 .top {
  align-items: flex-start;
  font-size: var(--font-32);
}

.product-sec2 .top .title span {
  font-size: 16px;
}

.probiotics-sec1 .sec-cont {
  padding-bottom: max(30px, 76 * var(--px));
}

.probiotics-sec1 .sec-cont .item {
  padding: max(20px, 50 * var(--px)) 20px;
  flex: 1;
}

.probiotics-sec1 .sec-cont .item .title {
  font-size: max(26px, 69 * var(--px));
  line-height: 1.2;
  font-weight: bold;
}

.probiotics-sec1 .sec-cont .item .intro {
  font-size: var(--font-18);
}

.probiotics-sec1 .sec-cont .item+.item {
  border-left: 1px solid rgba(255, 255, 255, .5);
}

.product-sec3 .sec-area {
  justify-content: space-around;
  padding: var(--px-10-20) 0 var(--px-20-40);
}

.product-sec3 .item .icon {
  margin-bottom: var(--px-10-20);
  border: 1px solid var(--theme-color-green);
  --w: max(60px, 120 * var(--px));
}

.product-sec3 .item .title {
  font-size: var(--font-28);
  text-align: center;
}

.product-sec3 .item strong {
  font-weight: bold;
}

.probiotics-sec2 .card-wrap {
  --col: 4;
  --gap: 40px;
}

.probiotics-sec3 .item .title {
  font-size: var(--font-24);
}

.probiotics-sec2 .item {
  padding: 30px;
  aspect-ratio: 410 / 374;
  color: #fff;
  justify-content: flex-end;
  font-size: var(--font-20);
  overflow: hidden;
  position: relative;
}

.probiotics-sec2 .item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 80%);
  opacity: 0;
  transition: .3s;
}

.probiotics-sec2 .item .title {
  padding: 8px 20px;
  background-color: var(--theme-color-green);
  margin-bottom: 20px;
  transform: translateY(160%);
  transition: .3s;
}

.probiotics-sec2 .item .intro {
  transform: translateY(300%);
  transition: .3s;
}

.probiotics-sec2 .item .title,
.probiotics-sec2 .item .intro {
  position: relative;
  z-index: 1;
}

.probiotics-sec2 .item:hover .title,
.probiotics-sec2 .item:hover .intro {
  transform: unset;
}

.probiotics-sec2 .item:hover::after {
  opacity: 1;
}

.fish-oil-sec1 .pic-lay .item:last-child {
  margin-left: calc(var(--w) * -.2);
}

.fish-oil-sec1 .sec-cont {
  padding-bottom: max(50px, 13%);
  text-align: center;
  font-size: var(--font-24);
  margin-top: -3%;
}

.product-sec4 .item {
  border-left: 1px solid rgba(0, 0, 0, .1);
  padding: var(--px-20-40);
  cursor: pointer;
}

.custom-product-intro {
  position: relative;
}

.custom-product-intro .tips {
  --w: max(45px, 58 * var(--px));
  --bg-color: var(--theme-color-green);
  line-height: 1.1;
  color: #fff;
  font-size: var(--font-16);
}

.custom-product-intro .brand {
  width: max(40px, 110 * var(--px));
}

.custom-product-intro .title {
  font-weight: bold;
  font-size: var(--font-20);
}

.custom-product-intro .pic {
  padding: 80px max(50px, 15%) 0;
  flex: 1;
}

.custom-product-intro .txt {
  margin-top: var(--px-10-20);
}

.custom-product-intro .txt .intro {
  margin-top: 10px;
}

.custom-product-intro .txt .intro p {
  margin-top: 7px;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
}

.dialog.active {
  opacity: 1;
  visibility: visible;
}

.dialog-bg {
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(30px);
}

.dialog-wrap {
  position: relative;
  transform: translateX(10%);
  transition: .3s;
}

.dialog.active .dialog-wrap {
  transform: unset;
}

.dialog-cont {
  width: calc(785 * var(--px));
  height: 100%;
  padding: var(--px-20-40) max(40px, 105 * var(--px));
  overflow-y: auto;
}

.dialog-close {
  width: max(50px, 80 * var(--px));
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 50px), -50%);
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
}

.fish-oil-dialog-cont {
  display: none;
}

.fish-oil-dialog-cont .custom-product-intro .pic {
  padding-top: max(50px, 20%);
}

.fish-oil-dialog-cont .custom-product-intro .label {
  width: max-content;
  border-radius: 300px;
  padding: 7px 20px;
  background-color: var(--theme-color-green);
  font-size: 14px;
  color: #fff;
}

.dialog-wrap .area {
  padding-bottom: var(--px-10-20);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.fish-oil-dialog-cont .area .sec-title {
  color: var(--theme-color-green);
}

.dialog-wrap .product-info {
  margin-top: var(--px-20-40);
}

.dialog-wrap .product-info .item {
  margin-bottom: 25px;
}

.dialog-wrap .product-info .title {
  font-size: var(--font-24);
  font-weight: normal;
  margin-bottom: 15px;
}

.dialog-wrap .product-info .intro {
  background-color: #fff;
  padding: 10px 20px;
}

.dialog-wrap .product-info .intro p {
  padding-left: 15px;
  position: relative;
  margin-bottom: 5px;
}

.dialog-wrap .product-info .intro p::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--theme-color-gray);
  position: absolute;
  top: .7em;
  left: 0;
}

.probiotics-dialog-cont {
  display: none;
}

.probiotics-dialog-cont .area .label {
  width: max-content;
  border-radius: 300px;
  padding: 7px 20px;
  background-color: #10CAF1;
  font-size: 14px;
  margin-bottom: var(--px-10-20);
  color: #fff;
}

.probiotics-dialog-cont .area .sec-title {
  color: #10CAF1;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
}

.popup.active {
  opacity: 1;
  visibility: visible;
}

.popup-bg {
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(30px);
}

.nutritionist-popup .popup-cont {
  display: none;
}

.popup-wrap {
  width: calc(880 * var(--px));
  background-color: #fff;
  padding: var(--px-20-40);
  position: relative;
  z-index: 1;
  transition: .3s;
  transform: translateY(10%);
}

.popup.active .popup-wrap {
  transform: unset;
}

.popup-wrap .intro a {
  color: var(--theme-color-green);
  text-decoration: underline;
}

.popup-wrap .btn-wrap {
  gap: var(--px-10-20);
}

.popup-wrap .btn-wrap .btn {
  padding: 8px max(20px, 40 * var(--px));
  border: 1px solid var(--theme-color-green);
  color: var(--theme-color-green);
  font-size: 14px;
  cursor: pointer;
  border-radius: 300px;
  transition: .3s;
}

.popup-wrap .btn-wrap .btn.all {
  border-color: var(--theme-color-gray);
  color: var(--theme-color-gray);
}

.popup-wrap .btn-wrap .btn:hover {
  transform: scale(1.05);
}

.lactium-sec1 .sec-bg {
  background-color: rgba(0, 0, 0, .3);
}

.lactium-sec2 .approve-wrap .item {
  background-color: #fff;
}

.lactium-sec2 .approve-wrap .item-cont {
  background-color: rgba(26, 39, 88, .4);
  padding: var(--px-20-40);
  height: 100%;
  color: #fff;
}

.lactium-sec2 .approve-wrap .item-cont .sec-intro {
  font-weight: initial;
}

.lactium-sec2 .approve-wrap .item-cont .icon {
  background-color: #fff;
  --w: max(60px, 106 * var(--px));
  --ratio: 1.5;
}

.lactium-sec2 .effect {
  background-image: linear-gradient(to bottom, #1A2758, rgba(26, 39, 88, .4));
  padding: max(80px, 140 * var(--px)) 0 var(--px-20-40);
  margin-top: min(-40px, -80 * var(--px));
}

.lactium-sec2 .effect-wrap {
  font-size: var(--font-24);
  color: #fff;
  max-width: 890px;
  margin: 0 auto;
}

.lactium-sec2 .effect-wrap .title {
  font-weight: bold;
  padding-left: var(--px-20-40);
}

.lactium-sec2 .effect-cont p {
  padding: 5px var(--px-20-40);
  background-color: rgba(0, 27, 27, .08);
  border-radius: 10px;
}

.lactium-sec2 .effect-cont p+p {
  margin-top: 6px;
}

.lactium-sec2 .effect .tips {
  font-size: 16px;
  padding-left: var(--px-20-40);
}

.lactium-sec3 .card-wrap {
  --col: 2;
}

.custom-product-intro .tags {
  position: absolute;
  top: var(--px-20-40);
  left: var(--px-20-40);
  gap: 10px;
}

.fish-oil-dialog-cont .custom-product-intro .tags {
  top: 0;
  left: 0;
}

.lactium-sec3 .item .label {
  width: max-content;
  border-radius: 300px;
  padding: 7px 20px;
  background-color: #10CAF1;
  font-size: 14px;
  color: #fff;
}

.lactium-sec3 .item:nth-child(1) .label {
  background-color: #1A2758;
}

.lactium-sec4 .card-wrap {
  --col: 2;
}

.lactium-sec4 .item {
  background-color: #fff;
  padding: var(--px-20-40);
}

.lactium-sec4 .item .serail {
  --bg-color: #1A2758;
  --w: 40px;
  color: #fff;
}

.lactium-sec4 .item .line {
  background-color: #E0E0E0;
  height: 1px;
  position: relative;
}

.lactium-sec4 .item .line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 65px;
  background-color: #1A2758;
}

.lactium-sec4 .item .intro {
  color: #333;
  line-height: 2;
}

.lactium-sec5 .item {
  /* background-image: linear-gradient(to top right, #1A2758 50%, rgba(26, 39, 86, 0.3)); */
  border-radius: 50%;
  width: calc(367 * var(--px));
  aspect-ratio: 1;
  margin-left: -20px;
  border: 1px solid #1A2758;
}

.lactium-sec5 .item-cont {
  width: calc(100% - 2px);
  aspect-ratio: 1;
  /* background-color: #fff; */
  border-radius: 50%;
  padding: var(--px-20-40);
}

.lactium-sec5 .item-cont .serail {
  --w: 30px;
  --bg-color: #1A2758;
  color: #fff;
}

.lactium-sec5 .item-cont .icon img {
  height: max(40px, 68 * var(--px));
}

.lactium-sec5 .item-cont .title {
  margin-top: max(15px, 30 * var(--px));
  font-size: var(--font-24);
  color: #1A2758;
  font-weight: initial;
}

.lactium-sec6 .slide-top {
  background-color: #1A2758;
}

.lactium-sec6 .slide-top .btn {
  background-color: #767D9B;
}

sup {
  font-size: 12px;
}

.whey-proteinp-sec1 .card-wrap {
  --col: 4;
  --gap: 0px;
}

.whey-proteinp-sec1 .item {
  padding: max(30px, 65 * var(--px));
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.whey-proteinp-sec1 .item strong {
  font-weight: bold;
}

.whey-proteinp-sec1 .item+.item {
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.whey-proteinp-sec3 .card-wrap {
  --col: 2;
}

.whey-proteinp-sec3 .custom-product-intro .pic {
  padding-top: var(--px-20-40);
}

.news-sec1 {
  min-height: 70vh;
}

.news-sec1 .news-top:hover,
.news-sec1 .news-wrap .item:hover {
  transform: scale(1.02);
  box-shadow: var(--theme-box-shadow);
}

.news-sec1 .learn-more img {
  filter: url(#green-overlay);
}

.news-top {
  overflow: hidden;
  transition: .3s;
  background-color: #fff;
}

.news-top .pic {
  width: 50%;
  aspect-ratio: 44 / 27;
}

.news-top .txt {
  width: 50%;
  padding: var(--px-20-40);
  padding-right: max(20px, 6%);
  background-color: #F9F9F9;
}

.news-top .txt .time {
  color: var(--theme-color-green);
}

.news-top .txt .year {
  font-size: 14px;
}

.news-top .txt .other {
  font-size: var(--font-24);
  font-weight: bold;
}

.news-top .txt .title {
  font-size: var(--font-24);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  color: #3B3B3B;
  font-weight: bold;
}

.news-top .txt .intro {
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  word-break: break-word;
  color: #3B3B3B;
}

.news-wrap {
  margin-top: max(40px, 60 * var(--px));
}

.news-wrap .card-wrap {
  --gap: max(20px, 60 * var(--px));
}

.news-wrap .item {
  background-color: #F9F9F9;
  overflow: hidden;
  cursor: pointer;
  transition: .3s;
}

.news-wrap .wfEditorMode {
  margin-top: 0 !important;
}

.news-wrap .pic {
  overflow: hidden;
  aspect-ratio: 44 / 27;
  background-color: var(--theme-color-green);
}

.news-wrap .txt {
  padding: var(--px-20-40);
  font-weight: 300;
  min-height: 200px;
  position: relative;
  transition: .3s;
}

.news-wrap .txt .time {
  color: var(--theme-color-gray);
}

.news-wrap .txt .title {
  font-size: var(--font-24);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  margin-top: var(--px-10-20);
}

.news-wrap .txt .intro {
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-word;
  color: #3B3B3B;
  margin-top: 10px;
}

.page-banner {
  position: relative;
  margin-top: var(--header-h);
  background-color: #fff;
  padding: max(80px, 180 * var(--px)) 0 max(40px, 120 * var(--px));
}

.page-banner .sec-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page-banner .title {
  font-size: var(--font-68);
  font-weight: bold;
}

.page-banner .breadcrumb {
  color: #fff;
}

.page-banner .breadcrumb {
  filter: url(#white-overlay);
}

.filter {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.filter-curr {
  width: max(100px, 140 * var(--px));
  height: max(35px, 50 * var(--px));
  border-radius: 300px;
  overflow: hidden;
  border: 1px solid var(--theme-color-gray);
}

.filter .btn {
  height: 100%;
  color: var(--theme-color);
  font-size: 14px;
  line-height: 1;
  background-color: #fff;
  transition: .3s;
  gap: 10px;
}

.filter .btn img {
  filter: url(#gray-overlay);
}

.filter-choose {
  border-radius: 10px;
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(10px);
  z-index: 999;
  background-color: var(--theme-color-green);
  transition: .3s;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(71, 52, 26, 0.1);
  opacity: 0;
  visibility: hidden;
}

.filter-choose .btn {
  display: block;
  padding: 15px;
  border-radius: 0;
  text-align: center;
  border: 0;
}

.filter-choose .btn+.btn {
  border-top: 1px solid #E5E5E5;
}

.filter-choose .btn:hover {
  background-color: var(--theme-color-green);
  color: #fff;
}

.filter.active .filter-choose {
  opacity: 1;
  transform: translateY(5px);
  visibility: visible;
}

.filter-curr .icon {
  --icon-lay-w: 30px;
  --icon-lay-bg: var(--theme-color-green);
}

.filter-curr .icon img {
  filter: url(#green-overlay);
}

.filter-type-wrap {
  gap: 10px;
}

.filter-type-wrap .item {
  width: max(100px, 140 * var(--px));
  height: max(35px, 50 * var(--px));
  border-radius: 300px;
  color: var(--theme-color-green);
  font-size: 14px;
  border: 1px solid var(--theme-color-green);
  transition: .3s;
}

.filter-type-wrap .item.active,
.filter-type-wrap .item:hover {
  background-color: var(--theme-color-green);
  color: #fff;
}

.news-detail-content {
  max-width: 1200px;
  margin: 0 auto;
}

.news-detail-content .label-wrap {
  gap: var(--px-20-40);
}

.news-detail-content .label-wrap .label-lay {
  color: var(--theme-color-green);
}

.news-detail-content .content {
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  margin-top: calc(var(--px-20-40) * 2);
  padding: calc(var(--px-20-40) * 2) 0;
}

.news-detail-content .content h1 {
  font-size: var(--font-24);
  font-weight: bold;
  color: var(--theme-color-green);
}

.news-detail-content .content>*+* {
  margin-top: var(--px-20-40);
}

.news-detail-content .content img {
  margin: 0 auto;
  width: auto;
  height: auto;
}

.contact-us-sec1 .choose-wrap .card-wrap .item {
  background-color: #F4F3F3;
}

.agree-privacy-wrap {
  font-size: 14px;
  position: relative;
}

.agree-privacy-wrap .tips {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 12px;
  color: #f00;
  display: none;
}

.agree-privacy-wrap a {
  color: var(--theme-color-green);
}

.agree-privacy-wrap label {
  gap: 5px;
}

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-checkbox .checkmark {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #eee;
  border-radius: 3px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark {
  background-color: var(--theme-color-green);
  border-color: var(--theme-color-green);
}

.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 4.5px;
  top: 0;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
  display: block;
}

.about-us-banner {
  padding-top: 0;
  height: calc(100vh - var(--header-h));
}

.about-us-banner-bg {
  position: relative;
  z-index: 1;
}

.about-us-banner-bg .title {
  color: var(--theme-color-green);
}

.about-us-banner-bg .intro {
  font-size: max(26px, 38 * var(--px));
  font-weight: bold;
}

.banner-mask-ani {
  background-size: cover;
  z-index: 3;
}

.banner-mask-ani:not(.close-ani) {
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 50% 50%;
}

.banner-mask-ani.close-ani {
  mask-image: unset !important;
}

.banner-mask-ani.close-ani~.about-us-banner-bg {
  display: none;
}

.about-us-banner-cont {
  z-index: 3;
  color: #fff;
}

.about-us-banner-cont .sec-wrap {
  width: 50%;
  margin: 0 auto;
}

/* .about-us-banner-cont .sec-wrap .sec-top>* {
  opacity: 0;
  transform: translateY(20px);
} */

.about-us-banner-cont .sec-wrap .sec-top h1 {
  font-weight: bold;
  font-size: var(--font-24);
  margin-bottom: var(--px-10-20);
}

.about-us-banner-cont .sec-bg {
  /* opacity: .8; */
  opacity: 0;
  overflow: hidden;
}

.about-us-banner-cont .sec-intro {
  font-weight: bold;
}

.about-us-banner-cont .intro {
  font-size: var(--font-20);
}

.about-us-banner-cont .intro p+p {
  margin-top: var(--px-20-40);
}

.page-banner-ring {
  z-index: 2;
  overflow: hidden;
}

.page-banner-ring .ring-cont {
  bottom: -15%;
  right: -32%;
  --w-s: calc(764 * var(--px));
  --w-b: calc(1254 * var(--px));
  --border-color: var(--theme-color-green);
  --border-size: 10px;
  z-index: 5;
  opacity: .7;
}

.page-banner-ring.lay1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .3);
  z-index: 5;
}

.news-detail-banner .page-banner-ring {
  height: 300%;
}

.news-banner .page-banner-ring {
  height: 200%;
}

.contact-us-banner .page-banner-ring .ring-cont {
  bottom: 10%;
}

.about-us-sec1 .sec-area {
  padding: calc(var(--px-20-40) * 2) 0;
}

.about-us-sec1 .card-wrap {
  --gap: var(--px-20-40);
}

.about-us-sec1 .item .pic {
  aspect-ratio: 56 / 34;
}

.about-us-sec1 .item .txt {
  background-color: #F4F3F3;
  padding: var(--px-20-40);
  padding-bottom: max(40px, 100 * var(--px));
  font-size: var(--font-32);
  position: relative;
}

.about-us-sec1 .item .txt .intro {
  font-weight: bold;
}

.about-us-sec1 .item .txt .icon {
  position: absolute;
  bottom: var(--px-20-40);
  right: var(--px-20-40);
}

.about-us-sec2 .item {
  margin-bottom: var(--px-10-20);
  justify-content: flex-end;
}

.about-us-sec2 .item:nth-child(even) {
  flex-direction: row-reverse;
}

.about-us-sec2 .item .pic {
  width: 33.33%;
}

.about-us-sec2 .item .txt {
  background-color: #fff;
  width: 33.33%;
  padding: var(--px-20-40);
  position: relative;
}

.about-us-sec2 .item .txt .time {
  color: var(--theme-color-green);
  font-size: max(26px, 38 * var(--px));
}

.about-us-sec2 .item .txt .title {
  font-size: var(--font-22);
  font-weight: bold;
  margin-bottom: max(90px, 120 * var(--px));
}

.about-us-sec2 .item .txt .icon {
  position: absolute;
  bottom: var(--px-20-40);
  right: var(--px-20-40);
}

.nutritionist-collaboration-banner {
  background-color: var(--theme-color-green);
}

.nutritionist-collaboration-banner .page-banner-wrap {
  padding-top: max(30px, 100 * var(--px));
}

.nutritionist-collaboration-banner .sec-bg-img {
  opacity: .15;
  overflow: hidden;
}

.nutritionist-collaboration-banner .title {
  font-size: var(--font-68);
  color: #fff;
}

.nutritionist-collaboration-banner .btn-wrap {
  gap: 20px;
}

.nutritionist-collaboration-banner .btn-wrap .btn {
  animation: breathe 2s infinite ease-in-out;
}

@keyframes breathe {

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

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.nutritionist-collaboration-banner .btn-wrap .btn:nth-child(1) {
  animation-delay: 0s;
}

.nutritionist-collaboration-banner .btn-wrap .btn:nth-child(2) {
  animation-delay: 0.4s;
}

.nutritionist-collaboration-banner .btn-wrap .btn:nth-child(3) {
  animation-delay: 0.8s;
}

.nutritionist-collaboration-banner .btn-wrap .btn:nth-child(4) {
  animation-delay: 1.2s;
}

.nutritionist-collaboration-banner .btn-wrap .btn:nth-child(5) {
  animation-delay: 1.6s;
}

.nutritionist-collaboration-banner .btn-wrap .btn {
  --w: max(50px, 80 * var(--px));
  --bg-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(30px);
  cursor: pointer;
  transition: .3s;
  overflow: hidden;
}

.nutritionist-collaboration-banner .btn-wrap .btn:hover {
  background-color: #fff;
  transform: translateY(-5px);
}

.nutritionist-collaboration-banner .btn-wrap .btn:hover img {
  filter: url(#green-overlay);
}

.nutritionist-collaboration-banner .icon-wrap .icon {
  position: absolute;
  --bg-color: rgba(255, 255, 255, .3);
}

.nutritionist-collaboration-banner .icon-wrap .icon img {
  filter: url(#white-overlay);
}

.nutritionist-collaboration-banner .icon-wrap .icon:nth-child(1) {
  --w: max(50px, 100 * var(--px));
  top: -30%;
  left: 20%;
}

.nutritionist-collaboration-banner .icon-wrap .icon:nth-child(2) {
  --w: max(80px, 160 * var(--px));
  top: 110%;
  left: 10%;
}

.nutritionist-collaboration-banner .icon-wrap .icon:nth-child(3) {
  --w: max(80px, 160 * var(--px));
  top: -40%;
  left: 80%;
}

.nutritionist-collaboration-banner .icon-wrap .icon:nth-child(4) {
  --w: max(50px, 100 * var(--px));
  top: 100%;
  left: 70%;
}

.nutritionist-collaboration-banner {
  height: calc(100vh - var(--header-h));
}

.nutritionist-title {
  font-weight: 300;
}

.nutritionist-title strong {
  font-weight: bold;
}

.nutritionist-sec1 .sec-intro {
  line-height: 1.8;
}

.nutritionist-sec1 .sec-intro strong {
  color: var(--theme-color-green);
}

.icon-green img {
  filter: url(#green-overlay);
}

.nutritionist-icon img {
  width: max(50px, 80 * var(--px));
}

.nutritionist-sec2 .sec-bg {
  background-color: rgba(0, 0, 0, .5);
}

.nutritionist-sec2 .item {
  aspect-ratio: 56 / 38;
  padding: var(--px-20-40);
  position: relative;
  cursor: pointer;
  transition: .3s;
}

.nutritionist-sec2 .item:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--theme-box-shadow);
}

.nutritionist-sec2 .item strong {
  font-weight: bold;
}

.nutritionist-sec2 .item .icon {
  position: absolute;
  bottom: var(--px-20-40);
  right: var(--px-20-40);
  --bg-color: var(--theme-color-green);
  --ratio: 3;
}

.nutritionist-sec3 .card-wrap {
  --col: 3;
  --gap: var(--px-20-40);
}

.nutritionist-sec3 .item .pic {
  aspect-ratio: 41 / 20;
}

.nutritionist-sec3 .item .txt {
  background-color: #fff;
  padding: var(--px-20-40);
  padding-top: 0;
  flex: 1;
}

.nutritionist-sec3 .item .txt .title {
  font-size: var(--font-20);
  color: var(--theme-color-green);
}

.nutritionist-sec3 .item .txt .icon {
  --bg-color: var(--theme-color-green);
  --w: max(45px, 60 * var(--px));
  transform: translateY(-50%);
  --ratio: 1.8;
}

.nutritionist-sec3 .item .txt strong {
  font-weight: bold;
}

.nutritionist-sec3 .item .txt .intro p {
  padding-left: 30px;
  background: url(../images/icon1526_1.svg) no-repeat left .25em;
  margin-top: 8px;
}

.nutritionist-sec4 .sec-area {
  gap: var(--px-20-40);
  color: #fff;
  justify-content: space-around;
  padding: 0 max(30px, 8%);
}

.nutritionist-sec4 .item {
  cursor: pointer;
}

.nutritionist-sec4 .item .icon {
  gap: var(--px-10-20);
  background-color: rgba(255, 255, 255, .3);
  padding: 10px;
  border-radius: 50%;
  width: max(100px, 200 * var(--px));
  aspect-ratio: 1;
  font-weight: bold;
}

.nutritionist-sec4 .item .icon img {
  width: 30%;
}

.nutritionist-sec4 .item .intro {
  width: 15em;
  font-size: var(--font-20);
  text-align: center;
  transition: .3s;
  transform: translateY(20px);
  opacity: 0;
}

.nutritionist-sec4 .item:hover .intro {
  transform: unset;
  opacity: 1;
}

.nutritionist-sec5 .sec-area {
  gap: max(100px, 260 * var(--px));
  padding: 0 max(30px, 8%);
}

.nutritionist-sec5 .item {
  position: relative;
  width: 30%;
}

.nutritionist-sec5 .item+.item::after {
  content: '';
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url(../images/arrow-right-full-1.svg) no-repeat center / 30%;
  background-color: #F4F3F3;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(calc(max(100px, 300 * var(--px)) / -2 - 50%), -50%);
}

.nutritionist-sec5 .item .title {
  font-size: max(24px, 38 * var(--px));
  color: var(--theme-color-green);
  text-transform: uppercase;
  font-weight: normal;
}

.nutritionist-sec5 .item .label {
  border-radius: 300px;
  background-color: var(--theme-color-green);
  padding: 7px 20px;
  color: #fff;
  width: max-content;
}

.nutritionist-sec5 .qr-wrap {
  margin-top: max(50px, 100 * var(--px));
  padding: 0 max(30px, 10%);
}

.nutritionist-sec5 .qr-wrap .logo img {
  width: calc(830 * var(--px));
}

.nutritionist-sec5 .qr-wrap .qr {
  gap: 10px;
}

.nutritionist-sec5 .qr-wrap .qr img {
  width: max(100px, 200 * var(--px));
}

.nutritionist-sec5 .sec-bg {
  position: absolute;
  top: 0;
}

.nutritionist-sec5 {
  padding-bottom: max(50px, 5%);
}

.nutritionist-sec5 .ring-cont {
  bottom: 5%;
}

.nutritionist-popup .popup-wrap {
  padding: 0;
}

.nutritionist-popup .pic {
  aspect-ratio: 88 / 32;
}

.nutritionist-popup .txt {
  padding: var(--px-20-40);
}

.nutritionist-popup .txt .title {
  font-size: max(26px, 38 * var(--px));
  color: var(--theme-color-green);
}

.nutritionist-popup .txt .title strong {
  font-weight: bold;
}

.nutritionist-popup .txt .intro {
  max-height: calc(420 * var(--px));
  overflow-y: auto;
  padding-right: 10px;
  font-size: var(--font-18);
}

.nutritionist-popup .txt h1 {
  color: var(--theme-color-green);
  margin-bottom: 5px;
}

.nutritionist-popup .txt p {
  margin-bottom: 15px;
}

.nutritionist-popup .popup-close {
  position: absolute;
  top: var(--px-10-20);
  right: var(--px-10-20);
  --bg-color: var(--theme-color-green);
  --ratio: 3;
  cursor: pointer;
  transition: .3s;
}

.nutritionist-popup .popup-close:hover {
  transform: rotate(90deg);
}

.nutritionist-popup .popup-close img {
  filter: url(#white-overlay);
}

.action--site-nutritionist-collaboration .choose-wrap .card-wrap .item {
  background-color: #F4F3F3;
}

.about-us-banner .page-banner-ring .ring-cont {
  bottom: -43%;
}

.product-sec5 .sec-area {
  padding: 0 max(20px, 200 * var(--px));
}

.nutritionist-side-bar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  gap: 10px;
  z-index: 99;
  opacity: 0;
  transform: translateX(100%);
  transition: .3s;
}

.nutritionist-side-bar.active {
  transform: translateX(-10px);
  opacity: 1;
}

.nutritionist-side-bar .btn {
  --bg-color: #fff;
  cursor: pointer;
}

.nutritionist-side-bar .btn img {
  filter: url(#green-overlay);
}

.nutritionist-side-bar .btn:hover {
  --bg-color: var(--theme-color-green);
  box-shadow: var(--theme-box-shadow);
}

.nutritionist-side-bar .btn:hover img {
  filter: unset;
}

.index-sec2 .sec-intro {
  width: 24em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  word-break: break-word;
}

.yiiPager {
  display: flex;
  justify-content: center;
  margin: var(--px-20-40) 0;
}

.yiiPager li.first,
.yiiPager li.last {
  display: none;
}

.yiiPager li {
  width: clamp(30px, 50 * var(--px), 50px);
  aspect-ratio: 1;
  border-radius: 30px;
  margin: 0 5px;
  border: 1px solid var(--theme-color-gray);
}

.yiiPager li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #000;
}

.yiiPager li.selected {
  border-color: var(--theme-color-green);
}

.yiiPager li.previous,
.yiiPager li.next {
  background-repeat: no-repeat;
  background-position: center;
}

.yiiPager li.previous {
  background-image: url(../images/arrow-left-full.svg);
  filter: url(#gray-overlay);
}

.yiiPager li.next {
  background-image: url(../images/arrow-right-full.svg);
  filter: url(#gray-overlay);
}

.yiiPager li.selected a {
  color: var(--theme-color-green);
}

.yiiPager li:hover {
  box-shadow: 0px 0px 10px 0px rgba(71, 52, 26, 0.1);
}

.whey-proteinp-sec4 .item .icon {
  border-color: #005BA9;
}

.sec-title span.new {
  color: #005BA9;
  position: relative;
  margin-right: 55px;
}

.sec-title span.new::after {
  content: 'NEW';
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  padding: 3px 0;
  text-align: center;
  border-radius: 30px;
  background-color: #f00;
  color: #fff;
  font-weight: 300;
  font-size: var(--font-16);
  transform: translateX(calc(100% + 3px));
}

.whey-proteinp-sec4 .sec-title img {
  margin: 0 auto;
  width: max(120px, 270 * var(--px));
}

.lactium-sec1 .sec-title {
  font-size: var(--font-32);
}

.nutritionist-sec1 .sec-area {
  width: max(150px, 550 * var(--px));
}

.index-sec8 {
  padding-top: max(100px, 10%);
}

.index-sec8 .sec-title {
  color: var(--theme-color-green);
}

.index-sec8 .sec-intro {
  width: 28em;
  margin-top: max(30px, 100 * var(--px));
}

.index-sec8 .sec-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 30%;
  background-image: linear-gradient(to bottom, var(--theme-color-green), transparent);
  opacity: .19;
}