@keyframes yAnimate {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.item_hover {
  overflow: hidden;
}
.item_hover:hover img {
  transform: scale(1.05);
}
.item_hover img {
  width: 100%;
  transition: 0.6s ease;
  height: 100%;
}

.home {
  padding-top: 6.1979166667vw;
}
.home .section1 {
  padding: 5.2083333333vw 10.4166666667vw;
}
.home .section1 .types {
  display: flex;
  justify-content: flex-end;
}
.home .section1 .types .pt {
  background: linear-gradient(278deg, #2E2E5A 89.63%, #6262C0 92.62%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.home .section1 .types .btns {
  display: flex;
  border-radius: 5.2083333333vw;
  background: #FAF8F7;
}
.home .section1 .types .btns .ib {
  color: #2E2E5A;
  line-height: 1.5;
  font-weight: 500;
  padding: 0.5208333333vw 2.0833333333vw;
  cursor: pointer;
  border-radius: 5.2083333333vw;
  transition: all 600ms;
}
.home .section1 .types .btns .ib.on {
  background: #2E2E5A;
  color: #fff;
}
.home .section1 .big_cut {
  margin: 2.0833333333vw 0 0 0;
}
.home .section1 .big_cut .matter {
  display: none;
}
.home .section1 .big_cut .matter.on {
  display: block;
  animation: yAnimate 1s ease forwards;
}
.home .section1 .big_cut .content2 .pic {
  width: 100%;
}
.home .section1 .big_cut .content2 .pic img {
  width: 100%;
}
.home .section1 .content .flex {
  border-radius: 0.5208333333vw;
  background: #F8F6F4;
  overflow: hidden;
  padding: 2.7083333333vw 7.7083333333vw 2.0833333333vw 7.03125vw;
  display: flex;
  justify-content: space-between;
}
.home .section1 .content .flex .item .p1 {
  color: #000;
  font-weight: 500;
  margin: 0 0 0.8333333333vw;
}
.home .section1 .content .flex .item .dis {
  display: flex;
  gap: 0.8333333333vw;
}
.home .section1 .content .flex .item .dis .list {
  color: #8C8C8C;
  line-height: 150%;
}
.home .section1 .content .img {
  width: 100%;
  margin-top: -0.5208333333vw;
}
.home .section1 .content .img img {
  width: 100%;
}
.home .section2 {
  padding: 0 0 5.2083333333vw;
}
.home .section2 .content {
  display: flex;
  justify-content: center;
  gap: 13.0208333333vw;
  position: relative;
  z-index: 1;
  margin: 13.4375vw 0 14.21875vw 0;
}
.home .section2 .content .circle {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.home .section2 .content .circle1 {
  background: #2E2E5A;
  opacity: 0.3;
  top: 0.5729166667vw;
  left: 12.8125vw;
  width: 6.6145833333vw;
  height: 6.6145833333vw;
}
.home .section2 .content .circle2 {
  background: #A57A5B;
  top: -1.1979166667vw;
  left: 58.2291666667vw;
  width: 0.78125vw;
  height: 0.78125vw;
}
.home .section2 .content .circle3 {
  background: #2E2E5A;
  top: -6.7708333333vw;
  right: 12.7604166667vw;
  width: 4.2708333333vw;
  height: 4.2708333333vw;
}
.home .section2 .content:after {
  content: "";
  position: absolute;
  top: -5.2083333333vw;
  left: 13.9583333333vw;
  width: 36.71875vw;
  height: 36.71875vw;
  transform: rotate(-45deg);
  border-radius: 8.3333333333vw;
  background: #A57A5B;
  z-index: 1;
}
.home .section2 .content:before {
  content: "";
  width: 31.875vw;
  height: 31.9791666667vw;
  transform: rotate(-45deg);
  z-index: 1;
  border-radius: 8.3333333333vw;
  background: #2E2E5A;
  position: absolute;
  top: -1.5104166667vw;
  right: 15.3125vw;
}
.home .section2 .content .color1 {
  position: absolute;
  height: fit-content;
}
.home .section2 .content .l {
  position: relative;
  z-index: 5;
}
.home .section2 .content .l .l_list {
  display: none;
}
.home .section2 .content .l .l_list.on {
  display: block;
  animation: yAnimate 1s ease forwards;
}
.home .section2 .content .l .img {
  width: 19.4270833333vw;
  height: 23.2291666667vw;
  /* background: #FFF; */
  margin: 0 auto 0.8854166667vw;
}
.home .section2 .content .l .img img {
  width: 100%;
  height: 100%;
}
.home .section2 .content .l .text {
  color: #2E2E5A;
  text-align: center;
  font-weight: 500;
}
.home .section2 .content .r {
  width: 23.0208333333vw;
  margin: 4.6875vw 0 0 0;
  position: relative;
  z-index: 5;
}
.home .section2 .content .r .r_list {
  display: none;
  color: #fff !important;
}
.home .section2 .content .r .r_list.on {
  display: block;
  animation: yAnimate 1s ease forwards;
}
.home .section2 .content .r .p1 {
  color: #fff;
  font-weight: 500;
}
.home .section2 .content .r .p1:not(:first-child) {
  margin: 1.25vw 0 0 0;
}
.home .section2 .content .r .p2 {
  color: rgba(255, 255, 255, 0.7);
  line-height: 150%;
  text-transform: capitalize;
  margin: 0.5208333333vw 0 0 0;
}
.home .section2 .content2 {
  margin: 0 10.4166666667vw;
  display: flex;
  justify-content: space-between;
}
.home .section2 .content2 .swiper1 {
  width: 62.2395833333vw;
}
.home .section2 .content2 .swiper1 .swiper-slide.swiper-slide-active .item .more {
  opacity: 1;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .img {
  width: 100%;
  height: 8.3854166667vw;
  border-radius: 0.5208333333vw;
  background: linear-gradient(0deg, #EAEAEA 0%, #EAEAEA 100%);
  overflow: hidden;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .img img {
  width: 100%;
  height: 100%;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .more {
  width: fit-content;
  padding: 0.5208333333vw 1.5625vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
  transition: all 600ms;
  border-radius: 4px;
  background: #2E2E5A;
  opacity: 0;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .more:hover {
  background: #6666C4;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .more p {
  color: #FFF;
  line-height: 1.5;
}
.home .section2 .content2 .swiper1 .swiper-slide .item .more svg {
  width: 0.9375vw;
  display: block;
  margin-left: 0.5208333333vw;
}
.home .section2 .content2 .prev, .home .section2 .content2 .next {
  cursor: pointer;
  position: relative;
  top: 2.8645833333vw;
}
.home .section2 .content2 .prev:hover svg circle, .home .section2 .content2 .next:hover svg circle {
  opacity: 1;
}
.home .section2 .content2 .prev svg, .home .section2 .content2 .next svg {
  width: 3.125vw;
  height: fit-content;
}
.home .section2 .content2 .prev svg circle, .home .section2 .content2 .next svg circle {
  opacity: 0.5;
  transition: all 600ms;
}
.home .section3 {
  padding: 0 10.4166666667vw 5.2083333333vw 10.4166666667vw;
}
.home .section3 .content .item {
  display: flex;
  gap: 3.125vw;
  align-items: center;
}
.home .section3 .content .item:nth-child(2) {
  flex-direction: row-reverse;
  margin-top: -7.2916666667vw;
  position: relative;
  z-index: 5;
}
.home .section3 .content .item:nth-child(2) .l {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.home .section3 .content .item .l .p1 {
  font-weight: 500;
  color: #2E2E5A;
  margin: 0 0 1.25vw;
}
.home .section3 .content .item .l .more {
  width: fit-content;
  padding: 0.5208333333vw 1.5625vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 600ms;
  border-radius: 0.2083333333vw;
  background: #2E2E5A;
}
.home .section3 .content .item .l .more:hover {
  background: #6666C4;
}
.home .section3 .content .item .l .more p {
  color: #FFF;
  line-height: 1.5;
}
.home .section3 .content .item .l .more svg {
  width: 0.9375vw;
  display: block;
  margin-left: 0.5208333333vw;
}
.home .section3 .content .item .img {
  width: 28.125vw;
  height: 18.2291666667vw;
  border-radius: 0.5208333333vw;
}
.home .section4 {
  padding: 0 10.4166666667vw 5.2083333333vw 10.4166666667vw;
}
.home .section4 .content .item {
  background: #FEFCFA;
  border-radius: 0.5208333333vw;
}
.home .section4 .content .item:not(:last-child) {
  margin: 0 0 1.0416666667vw;
}
.home .section4 .content .item.on .show .add img:first-child {
  opacity: 0;
}
.home .section4 .content .item.on .show .add img:last-child {
  opacity: 1;
}
.home .section4 .content .item .show {
  height: 6.0416666667vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.125vw;
  cursor: pointer;
}
.home .section4 .content .item .show .l {
  display: flex;
  align-items: center;
  gap: 3.125vw;
}
.home .section4 .content .item .show .l .p1 {
  color: #C28F6A;
  font-weight: 500;
}
.home .section4 .content .item .show .l .p2 {
  font-weight: 500;
  color: #2E2E5A;
}
.home .section4 .content .item .show .add {
  width: 1.875vw;
  height: 1.8229166667vw;
  position: relative;
}
.home .section4 .content .item .show .add img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  transition: 0.3s ease;
}
.home .section4 .content .item .show .add img:nth-child(2) {
  opacity: 0;
}
.home .section4 .content .item .hide {
  overflow: hidden;
  display: none;
}
.home .section4 .content .item .hide > div {
  margin: 1.25vw 0 2.0833333333vw 9.3229166667vw;
  display: flex;
  align-items: center;
  gap: 3.6979166667vw;
}
.home .section4 .content .item .hide > div .img {
  width: 13.3333333333vw;
  height: 7.2916666667vw;
  border-radius: 0.5208333333vw;
}
.home .section4 .content .item .hide > div .text {
  width: 49.6875vw;
  color: #666;
  line-height: 150%; /* 24px */
  text-transform: capitalize;
}
.home .section5 {
  overflow: hidden;
  padding: 0 0 5.2083333333vw;
}
.home .section5 .content .swiper-pagination {
  position: static;
  width: fit-content;
  margin: 2.0833333333vw auto 0;
}
.home .section5 .content .swiper-pagination span {
  width: 0.4166666667vw;
  height: 0.4166666667vw;
  opacity: 1 !important;
  margin: 0 0.46875vw 0 0 !important;
  background: #EAEAEE;
  transition: 0.6s ease;
  border-radius: 5.2083333333vw;
}
.home .section5 .content .swiper-pagination span.swiper-pagination-bullet-active {
  background: #2E2E5A;
  width: 1.5625vw;
}
.home .section5 .content .swiper-pagination span:last-child {
  margin: 0 !important;
}
.home .section5 .content .swiper2 {
  width: 165.1041666667vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.home .section5 .content .swiper2 .swiper-slide .item {
  height: 25.5729166667vw;
  border-radius: 0.5208333333vw;
  background: #F9F9F9;
  overflow: hidden;
  padding: 2.3958333333vw 2.6041666667vw 2.34375vw 2.6041666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6041666667vw;
  position: relative;
  z-index: 1;
}
.home .section5 .content .swiper2 .swiper-slide .item .positionImg {
  position: absolute;
  width: 10.4166666667vw;
  height: 9.375vw;
  bottom: 2.0833333333vw;
  right: 2.0833333333vw;
  z-index: -1;
}
.home .section5 .content .swiper2 .swiper-slide .item .img {
  width: 16.7708333333vw;
  height: 20.8333333333vw;
  border-radius: 0.5208333333vw;
}
.home .section5 .content .swiper2 .swiper-slide .item .text {
  width: 26.9791666667vw;
}
.home .section5 .content .swiper2 .swiper-slide .item .text .p1 {
  color: #666;
  line-height: 150%; /* 24px */
  text-transform: capitalize;
}
.home .section5 .content .swiper2 .swiper-slide .item .text .p2 {
  margin: 2.0833333333vw 0 0.7291666667vw;
  color: #2E2E5A;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .home {
    padding-top: 60px;
  }
  .home .section1 {
    padding: 50px 5%;
  }
  .home .section1 .types {
    flex-direction: column;
  }
  .home .section1 .types .btns {
    margin-top: 20px;
  }
  .home .section1 .types .btns .ib {
    padding: 10px 20px;
    width: 50%;
    text-align: center;
  }
  .home .section1 .big_cut {
    margin: 30px 0 0 0;
  }
  .home .section1 .content .flex {
    padding: 25px 5%;
    flex-direction: column;
    gap: 15px;
  }
  .home .section1 .content .flex .item .p1 {
    margin: 0 0 10px;
  }
  .home .section1 .content .flex .item .dis {
    gap: 15px;
    flex-direction: column;
  }
  .home .section2 {
    padding: 0 5% 50px 5%;
  }
  .home .section2 .content {
    margin: 50px 0 70px;
    gap: 20px;
    flex-direction: column;
  }
  .home .section2 .content:after {
    display: none;
  }
  .home .section2 .content:before {
    display: none;
  }
  .home .section2 .content .circle {
    display: none;
  }
  .home .section2 .content .l {
    width: 100%;
    height: auto;
    background: #A57A5B;
    padding: 20px 5%;
  }
  .home .section2 .content .l .img {
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
  }
  .home .section2 .content .r {
    width: 100%;
    background: #2E2E5A;
    padding: 30px 5%;
    margin: 0;
  }
  .home .section2 .content .r .p1:not(:first-child) {
    margin: 10px 0 0 0;
  }
  .home .section2 .content .r .p2 {
    margin: 10px 0 0 0;
  }
  .home .section2 .content2 {
    margin: 0;
  }
  .home .section2 .content2 .prev, .home .section2 .content2 .next {
    top: 80px;
  }
  .home .section2 .content2 .prev svg, .home .section2 .content2 .next svg {
    width: 30px;
  }
  .home .section2 .content2 .swiper1 {
    width: 65vw;
  }
  .home .section2 .content2 .swiper1 .swiper-slide .item .img {
    height: 260px;
    border-radius: 10px;
  }
  .home .section2 .content2 .swiper1 .swiper-slide .item .more {
    padding: 10px 30px;
  }
  .home .section2 .content2 .swiper1 .swiper-slide .item .more svg {
    width: 18px;
    margin-left: 10px;
  }
  .home .section3 {
    padding: 0 5% 50px 5%;
  }
  .home .section3 .content .item {
    flex-direction: column-reverse !important;
    margin-top: 0 !important;
    align-items: unset;
    justify-content: unset;
    gap: 15px;
    margin: 0 0 40px;
  }
  .home .section3 .content .item .img {
    width: 100%;
    height: auto;
  }
  .home .section3 .content .item .l {
    align-items: unset !important;
  }
  .home .section3 .content .item .l .p1 {
    margin: 0 0 10px;
  }
  .home .section3 .content .item .l .more {
    padding: 10px 30px;
  }
  .home .section3 .content .item .l .more svg {
    width: 18px;
    margin-left: 10px;
  }
  .home .section4 {
    padding: 0 5% 50px 5%;
  }
  .home .section4 .content .item:not(:last-child) {
    margin: 0 0 20px;
  }
  .home .section4 .content .item .show {
    border-radius: 5px;
    height: 60px;
  }
  .home .section4 .content .item .show .l .p2, .home .section4 .content .item .show .l .p1 {
    font-size: 14px;
  }
  .home .section4 .content .item .show .add {
    width: 30px;
    height: 30px;
  }
  .home .section4 .content .item .hide > div {
    margin: 20px 0 30px;
    gap: 20px;
    flex-direction: column;
  }
  .home .section4 .content .item .hide > div .img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .home .section4 .content .item .hide > div .text {
    width: 100%;
  }
  .home .section5 {
    padding: 0 5% 50px 5%;
  }
  .home .section5 .content .swiper-pagination {
    margin: 25px auto 0;
  }
  .home .section5 .content .swiper-pagination span {
    width: 5px;
    height: 5px;
    margin: 0 6px 0 0 !important;
  }
  .home .section5 .content .swiper-pagination span.swiper-pagination-bullet-active {
    width: 30px;
  }
  .home .section5 .content .swiper-pagination span:last-child {
    margin: 0 !important;
  }
  .home .section5 .content .swiper2 {
    width: 100%;
    left: 0;
    transform: none;
  }
  .home .section5 .content .swiper2 .swiper-slide .item {
    height: auto;
    padding: 15px;
    border-radius: 10px;
    flex-direction: column;
  }
  .home .section5 .content .swiper2 .swiper-slide .item .img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0 0 10px;
  }
  .home .section5 .content .swiper2 .swiper-slide .item .text {
    width: 100%;
  }
  .home .section5 .content .swiper2 .swiper-slide .item .text .p2 {
    margin: 15px 0 10px;
  }
}