@charset "UTF-8";
.common_title::after {
  content: "";
  display: inline-block;
  margin-top: 10px;
  width: 30px;
  height: 4px;
  background-color: var(--color-Primary);
}

.common_title p {
  font-size: 14px;
  margin-bottom: 5px;
}

.common_title h3 {
  font-size: 40px;
  color: var(--color-Primary);
  font-weight: bold;
}

@media screen and (max-width: 700px) {
  .common_title h3{
    font-size: 22px;
  }
}


.fullLoading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #ffffff;
  display: none;
}

.fullLoading .content {
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

header {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 999;
  transition: all 1.5s;
  box-shadow: 1px 1px 10px #dfdfdf;
}

header .box {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 10px 4%;
}

header .box .logo {
  height: 80%;
  object-fit:contain;
}

header .box .right {
  display: flex;
  align-items: center;
  gap: 20px;
}

header .box .right .search .icon {
  font-size: 30px;
}

header .box .right .search .icon:hover {
  color: #ff9641;
}

header .box .right .menuBtn .icon {
  font-size: 30px;
}

header .box .right .menuBtn .icon:hover {
  color: #ff9641;
}

header .mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  opacity: 0.5;
  z-index: 9;
  display: none;
}

header .Popup_fullBox4 {
  position: fixed;
  right: -100%;
  top: 0%;
  width: 400px;
  height: 100%;
  z-index: 99;
  background-color: white;
  transition: all 1s;
  display: none;
}

header .Popup_fullBox4 .content {
  width: 100%;
  height: 100%;
  padding-top: 20vh;
  align-items: flex-start;
}

header .Popup_fullBox4 .closeBtn {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
  padding: 10px;
  transition: all 0.6s;
}

header .Popup_fullBox4 .closeBtn .icon {
  font-size: 26px;
  display: inline-block;
  transition: all 1s;
}

header .Popup_fullBox4 .closeBtn .icon:hover {
  transform: rotate(180deg);
}

header .Popup_fullBox4 ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 75%;
}

header .Popup_fullBox4 ul li {
  text-align: center;
}
/* header .Popup_fullBox4 ul li:hover .down{
  display: flex;
} */

header .Popup_fullBox4 ul li > a {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: all 0.5s;
}

header .Popup_fullBox4 ul li:hover > a {
  color: #ff9641;
  /* transform: scale(1.2); */
  /* letter-spacing: 5px; */
}


header .Popup_fullBox4 ul li > a::before {
  content: "";
  width: 0px;
  height: 3px;
  background-color: var(--color-Primary);
  display: inline-block;
  transition: all 0.5s;
}
header .Popup_fullBox4 ul li:hover > a::before {
  width: 15px;
  margin-right: 5px;
}

header .Popup_fullBox4 ul li .down{
      /* background-color: #f9f9f9; */
    width: 100%;
    margin-top: 15px;
    padding-left: 20px;
    font-size: 15px;
    text-align: left;
    display: none;
}
header .Popup_fullBox4 ul li .down a{
  padding: 10px 0;
  display: block;
}

header .header_search_page {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
}

header .header_search_page .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

header .header_search_page .inputBox {
  display: flex;
  align-items: center;
  z-index: 3;
}

header .header_search_page .inputBox input {
  width: 60vw;
  font-size: 1.2rem;
  line-height: 2rem;
  padding: 10px;
}

header .header_search_page .inputBox button {
  font-size: 1rem;
  line-height: 2rem;
  padding: 10px 40px;
  background-color: var(--color-Primary);
  color: white;
  white-space: nowrap;
}

header .header_search_page .inputBox button:hover {
  background-color: var(--color-Primary);
}

@media screen and (max-width: 700px) {
  header .box .share {
    display: none;
  }
  header .box .right .notify {
    display: none;
  }
  header .box .logo {
    width: 120px;
  }
  header .Popup_fullBox4 {
    width: 100%;
  }
  header .Popup_fullBox4 ul .share {
    display: flex;
  }
}

.allBox {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.allBox > .swiper-wrapper {
  width: 100%;
  height: 100%;
  transition: 0s cubic-bezier(0.5, 1, 0.89, 1) 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide {
  height: auto;
  width: 100%;
  height: 100%;
  height: calc(100% - 70px) !important;
  margin-top: 70px;
  position: relative;
}

.allBox > .swiper-wrapper > .swiper-slide section {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn {
  position: absolute;
  height: 100%;
  z-index: 3;
  width: 4%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .allBox > .swiper-wrapper > .swiper-slide .switchBtn {
    display: none;
  }
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox::after {
  content: "";
  position: absolute;
  height: 30%;
  width: 1px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
  border-left: 0.5px solid #dbdbdb;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox::before {
  content: "";
  position: absolute;
  height: 30%;
  width: 1px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  border-left: 0.5px solid #dbdbdb;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox button {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #cecece;
  background-color: #fff;
  height: 50px;
  width: 30px;
  border-radius: 50px;
  transition: all 2s;
  position: absolute;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox button .icon {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  transform: rotate(-90deg);
  transition: all 0.5s;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox button:hover {
  border: 1px solid var(--color-Primary);
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox button:hover .icon {
  color: var(--color-Primary);
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox .top {
  top: 20%;
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox .top .icon {
  display: inline-block;
  transform: rotate(90deg);
}

.allBox > .swiper-wrapper > .swiper-slide .switchBtn .switchBox .bottom {
  bottom: 20%;
}

.allBox > .swiper-wrapper > .swiper-slide .ani_left {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%);
  transition: all 1s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide .ani_right {
  visibility: hidden;
  opacity: 0;
  transform: translateX(50%);
  transition: all 1s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide .ani_top {
  visibility: hidden;
  opacity: 0;
  transform: translateY(50%);
  transition: all 1s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide .ani_sizeBig {
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
  transition: all 1s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide .ani_sizeBig2 {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
  transition: all 1s ease 0.3s;
}

.allBox > .swiper-wrapper > .swiper-slide-active section {
  visibility: visible;
  opacity: 1;
}

.allBox > .swiper-wrapper > .swiper-slide-active .switchBtn .top {
  top: 20px !important;
}

.allBox > .swiper-wrapper > .swiper-slide-active .switchBtn .bottom {
  bottom: 20px !important;
}

.allBox > .swiper-wrapper > .swiper-slide-active .ani_left {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

.allBox > .swiper-wrapper > .swiper-slide-active .ani_right {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

.allBox > .swiper-wrapper > .swiper-slide-active .ani_top {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.allBox > .swiper-wrapper > .swiper-slide-active .ani_sizeBig {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.allBox > .swiper-wrapper > .swiper-slide-active .ani_sizeBig2 {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.allBox .pagination1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  left: 0px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 3vw;
  min-width: 30px;
  max-width: 45px;
  margin-left: 15px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .allBox .pagination1 {
    display: none !important;
  }
}

.allBox .pagination1 .swiper-pagination-bullet {
  background-color: #b6b6b6;
  height: 0.5px !important;
  opacity: 1;
  width: 50%;
  transition: all 0.3s;
}

.allBox .pagination1 .swiper-pagination-bullet-active {
  width: 90% !important;
  height: 0.5px !important;
  border-radius: 20px;
  background-color: var(--color-Primary);
}

.module1 .container .swiper {
  width: 100%;
  height: 100%;
}

.module1 .container .swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.module1 .container .swiper .swiper-slide .box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.module1 .container .swiper .swiper-slide .box .bc {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -2;
  object-fit: cover;
  transition: linear 3s;
}

.module1 .container .swiper .swiper-slide .box .bc2{
  width: 100%;
  position: absolute;
  left: 0;
  top: 35%;
  transform: translateY(-50%);
  z-index: -1;
  display: none;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module1 .container .swiper .swiper-slide .box .bc{
     filter: blur(8px);
  }

  .module1 .container .swiper .swiper-slide .box .bc2{
    display: block;
  }

}


.module1 .container .swiper .swiper-slide .box .content {
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.module1 .container .swiper .swiper-slide .box .content .t1 {
  font-size: 16px;
  color: white;
  margin: 5px 0;
  width: 40%;
  min-width: 300px;
}



.module1 .container .swiper .swiper-slide .box .content .t2 {
  font-size: 14px;
  color: white;
  margin: 5px 0;
  width: 40%;
  min-width: 300px;
}



.module1 .container .swiper .swiper-slide .box .content button {
  margin-top: 20px;
  background-color: var(--color-Primary);
  color: white;
  padding: 10px 20px;
  font-size: 12px;
  transition: all 0.5s;
}

.module1 .container .swiper .swiper-slide .box .content button:hover {
  background-color: var(--color-Primary2);
}

.module1 .container .swiper .swiper-slide .box .content2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module1 .container .swiper .swiper-slide .box .content2 {
    height: 85vh;
    justify-content: flex-end;
  }
}

.module1 .container .swiper .swiper-slide .box .content2 h3 {
  font-size: 46px;
  font-weight: bold;
  color: var(--color-Primary);
}

.module1 .container .swiper .swiper-slide .box .content2 .t1 {
  font-size: 20px;
  line-height: 30px;
  margin: 10px 0;
  width: 40%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module1 .container .swiper .swiper-slide .box .content2 .t1 {
    width: 100%;
  }
}

.module1 .container .swiper .swiper-slide .box .content2 .t2 {
  width: 50%;
  font-size: 16px;
  line-height: 26px;
  color: #535353;
  margin: 10px 0;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module1 .container .swiper .swiper-slide .box .content2 .t2 {
    width: 100%;
  }
}

.module1 .container .swiper .swiper-slide .box .content2 button {
  margin-top: 20px;
  background-color: var(--color-Primary);
  color: white;
  padding: 10px 20px;
  font-size: 14px;
  transition: all 0.5s;
}

.module1 .container .swiper .swiper-slide .box .content2 button:hover {
  background-color: var(--color-Primary2);
}

.module1 .container .swiper .swiper-slide-active .bc {
  transform: scale(1.1);
}

.module1 .container .swiper .paginationBox {
  position: absolute;
  width: auto;
  left: 4%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
}

.module1 .container .swiper .paginationBox .pagination-num {
  font-size: 18px;
  color: white;
}

.module1 .container .swiper .paginationBox .swiper-pagination {
  position: static;
}

.module1 .container .swiper .paginationBox .swiper-pagination-bullet {
  width: 50px;
  height: 3px;
  border-radius: 0px;
  background-color: white;
  opacity: 1;
  position: relative;
}

.module1 .container .swiper .paginationBox .swiper-pagination-bullet .progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: var(--color-Primary);
  z-index: 2;
}



@media (min-width: 0px) and (max-width: 700px) {
  .module1 .container .swiper .swiper-slide .box .content .t1{
    width: 100%;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .module1 .container .swiper .swiper-slide .box .content .t2{
    width: 100%;
    font-size: 12px;
     margin-bottom: 5px;
  }
  .module1 .container .swiper .swiper-slide .box{
    padding-bottom: 90px;
  }
  .module1 .container .swiper .paginationBox{
    bottom: 90px;
  }
  .module1 .container .swiper .swiper-slide .box .content button{
        padding: 7px 15px;
  }
}



.module2 {
  width: 100%;
  height: 100%;
}

.module2 .container {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #505050;
}

.module2 .container .left {
  height: 100%;
  width: 20%;
  flex-shrink: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 1px;
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module2 .container .left {
    width: 140px;
  }
}

.module2 .container .left li {
  background-color: #1b1b1b;
  padding: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: all 0.5s;
  overflow: hidden;
  cursor: pointer;
}

.module2 .container .left li:hover {
  background-color: var(--color-Primary);
}

.module2 .container .left li:hover .t3 {
  right: 20px;
}

.module2 .container .left li:hover p {
  text-align: left;
}

.module2 .container .left li p {
  color: white;
  text-align: center;
  transition: all 0.5s;
}

@media (min-width: 0px) and (max-width: 700px){
  .module2 .container .left li p{
    font-size: 14px;
  }
}

.module2 .container .left li .t3 {
  position: absolute;
  bottom: 10%;
  right: -140px;
  transition: all 0.5s;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (min-width: 0px) and (max-width: 700px){
  .module2 .container .left li .t3{
    font-size: 12px;
  }

}


.module2 .container .left li .t3::before {
  content: "";
  display: inline-block;
  width: 30px;
  border-top: 1px solid white;
}

.module2 .container .left .select {
  background-color: var(--color-Primary);
}

.module2 .container .right {
  width: 100%;
  height: 100%;
}

.module2 .container .right .swiper .swiper-slide {
  overflow: hidden;
}

.module2 .container .right ul {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  gap: 1px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module2 .container .right ul {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 25%);
  }
}

.module2 .container .right ul li {
  position: relative;
  width: 100%;
  height: 100%;
}

.module2 .container .right ul li:hover img {
  transform: scale(1.1);
}

.module2 .container .right ul li a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.module2 .container .right ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
  display: block;
}

.module2 .container .right ul li p {
  width: 100%;
  padding: 0 5%;
  position: absolute;
  color: white;
  left: 0;
  bottom: 10px;
  z-index: 2;
}
@media (min-width: 0px) and (max-width: 700px){
  .module2 .container .right ul li p{
    font-size: 12px;
    margin: 0;
  }

}


.module3 {
  width: 100%;
  height: 100%;
}

.module3 .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 7%;
  overflow: hidden;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module3 .container {
    padding: 0;
  }
}

.module3 .container .card {
  width: 35%;
  padding: 50px;
  background-color: #fff;
  min-width: 600px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module3 .container .card {
    min-width: 0;
    padding: 20px;
    width: 100%;
  }
}

.module3 .container .card .t1 {
  font-size: 14px;
}

.module3 .container .card .t2 {
  font-size: 36px;
  width: 70%;
  line-height: 40px;
}

.module3 .container .card .t3 {
  color: var(--color-Primary);
  font-size: 18px;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px 0;
}

.module3 .container .card .t4,
.module3 .container .card .t5 {
  margin: 30px 0;
  text-align: justify;
}

.module3 .container .card .more {
  display: flex;
  justify-content: flex-end;
}

.module3 .container .card .more a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  color: #2e2e2e;
}

.module3 .container .card .more a:hover {
  color: var(--color-Primary);
}

.module3 .container .card .more a::before {
  content: "";
  display: inline-block;
  width: 30px;
  border-top: 1px solid #303030;
}

.module4 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module4 .bc {
  position: absolute;
  z-index: -1;
  width: 1300px;
  top: -100px;
  right: -300px;
}

.module4 .container {
  height: 100%;
  position: relative;
}

.module4 .container > div {
  height: 100%;
}

.module4 .container .cardBox {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 80%;
  background-color: rgba(234, 234, 234, 0.9);
  padding: 50px;
  display: flex;
  gap: 5%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox {
    flex-direction: column;
    width: 96%;
    max-height: 90%;
    padding: 15px;
    gap: 10px;
  }
}

.module4 .container .cardBox .leftBox {
  width: 30%;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox {
    display: block;
    width: 100%;
    max-width: 100%;
    gap: 20px;
  }
}

.module4 .container .cardBox .leftBox img {
  width: 100px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox img {
    display: none;
  }
}

.module4 .container .cardBox .leftBox .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.module4 .container .cardBox .leftBox .content .top h3 {
  font-size: 36px;
  margin-bottom: 10px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox .content .top h3 {
    font-size: 20px;
  }
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox .content .top p {
    font-size: 12px;
  }
}

.module4 .container .cardBox .leftBox .content .top2 .common_title {
  margin-bottom: 30px;
}

.module4 .container .cardBox .leftBox .content .top2 .t1 {
  font-size: 24px;
}

.module4 .container .cardBox .leftBox .content ul {
  margin: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox .content ul {
    flex-direction: row;
    justify-content: space-around;
    margin: 10px 0;
  }
}

.module4 .container .cardBox .leftBox .content ul li {
  font-size: 18px;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}


@media (min-width: 0px) and (max-width: 700px){
.module4 .container .cardBox .leftBox .content ul li{
  width: 100%;
  font-size: 16px;
}

}


.module4 .container .cardBox .leftBox .content ul li:hover {
  color: var(--color-Primary);
}

.module4 .container .cardBox .leftBox .content ul li:hover::after {
  width: 100%;
}

.module4 .container .cardBox .leftBox .content ul li:hover::before {
  width: 100%;
}

.module4 .container .cardBox .leftBox .content ul li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  border-top: 1px solid #b9b9b9;
  transition: all 0.5s;
}

.module4 .container .cardBox .leftBox .content ul li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  border-top: 1px solid #b9b9b9;
  transition: all 0.5s;
}

.module4 .container .cardBox .leftBox .content ul .select {
  color: var(--color-Primary);
  font-weight: bold;
}

.module4 .container .cardBox .leftBox .content ul .select::after {
  width: 100%;
}

.module4 .container .cardBox .leftBox .content ul .select::before {
  width: 100%;
}

.module4 .container .cardBox .leftBox .content button {
  padding: 6px 12px;
  color: black;
  font-size: 14px;
  transition: all 0.5s;
  background-color: #fff;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .leftBox .content button {
    display: none;
  }
}

.module4 .container .cardBox .leftBox .content button:hover {
  background-color: var(--color-Primary);
  color: white;
}

.module4 .container .cardBox .rightBox {
  width: 100%;
}

.module4 .container .cardBox .rightBox .box {
  display: none;
}

.module4 .container .cardBox .rightBox .box .swiper {
  width: 60vw;
  height: 65vh;
  padding-bottom: 40px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox .rightBox .box .swiper {
    min-height: 50vh;
  }
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6,1fr);
  gap: 10px;
}

@media (min-width: 0px) and (max-width: 700px){
  .module4 .container .cardBox .rightBox .box .swiper .swiper-slide{
    height: 80%;
  }
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-slide .card {
  width: 100%;
  height: calc((65vh - 40px) / 6 - 10px);
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  justify-content: center;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 0px) and (max-width: 700px){
  .module4 .container .cardBox .rightBox .box .swiper .swiper-slide .card{
    height: calc(40vh / 6);
    padding: 0px;
  }
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-slide .card img {
  width: 100%;
  height: 100%;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.module4 .container .cardBox .rightBox .box .swiper .paginationBox {
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
}

.module4 .container .cardBox .rightBox .box .swiper .paginationBox .pagination-num {
  font-size: 18px;
  margin-right: 20px;
}

.module4 .container .cardBox .rightBox .box .swiper .paginationBox .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
}

.module4 .container .cardBox .rightBox .box .swiper .paginationBox .swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 3px;
  border-radius: 0px;
  background-color: white;
  opacity: 1;
}

.module4 .container .cardBox .rightBox .box .swiper .paginationBox .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-Primary);
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-button-next,
.module4 .container .cardBox .rightBox .box .swiper .swiper-button-prev {
  border: 2px solid white;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.5s;
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-button-next:hover,
.module4 .container .cardBox .rightBox .box .swiper .swiper-button-prev:hover {
  background-color: var(--color-Primary);
  border: 2px solid var(--color-Primary);
}

.module4 .container .cardBox .rightBox .box .swiper .swiper-button-next:after,
.module4 .container .cardBox .rightBox .box .swiper .swiper-button-prev:after {
  font-size: 20px;
  color: white;
}

.module4 .container .cardBox2 {
  position: static;
  transform: translate(0, 0);
  padding: 0;
  background-color: transparent;
  width: 100%;
  height: 100%;
  max-height: 90vh;
  min-height: auto;
}

.module4 .container .cardBox2 .leftBox .content {
  margin-top: 10vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox2 .leftBox .content {
    margin-top: 10px;
  }
}

.module4 .container .cardBox2 .leftBox .content .common_title h3 {
  color: black !important;
}

.module4 .container .cardBox2 .rightBox {
  margin-top: 10vh;
  max-height: 60vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module4 .container .cardBox2 .rightBox {
    margin-top: 10px;
    max-height: auto;
  }
}

.module4 .container .cardBox2 .rightBox .paginationBox .swiper-pagination .swiper-pagination-bullet {
  background-color: #e7e7e7 !important;
}

.module4 .container .cardBox2 .rightBox .paginationBox .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-Primary) !important;
}

.module5 .container {
  height: 100%;
  position: relative;
}

.module5 .container .content {
  text-align: center;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module5 .container .content {
    width: 80%;
  }
}

.module5 .container .content h3 {
  font-size: 50px;
  font-weight: bold;
  color: white;
}

.module5 .container .content h4 {
  font-size: 30px;
  color: var(--color-Primary);
}

.module5 .container .content p {
  margin-top: 100px;
  color: var(--color-Primary);
  font-size: 20px;
  white-space: break-spaces;
}

.module5.ids_9 {
  margin-top: 70px;
  height: 50%;
}

.module6 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module6 .bc {
  position: absolute;
  z-index: -1;
  width: 1300px;
  top: -100px;
  right: -300px;
}

.module6 .container {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  gap: 3%;
}

.module6 .container .leftBox {
  width: 30%;
  min-width: 450px;
  flex-shrink: 0;
  height: 100%;
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module6 .container .leftBox {
    min-width: auto;
    width: 100%;
  }
}

.module6 .container .leftBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module6 .container .leftBox .card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 8%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module6 .container .leftBox .card {
    padding: 10px;
  }
}

.module6 .container .leftBox .card .card2 {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 6%;
}

.module6 .container .leftBox .card .card2 table {
  width: 100%;
  color: white;
}

.module6 .container .leftBox .card .card2 table tr {
  display: grid;
  grid-template-columns: 50% 50%;
  border-bottom: 1px solid white;
}

.module6 .container .leftBox .card .card2 table tr:last-child {
  border-bottom: none;
}

.module6 .container .leftBox .card .card2 table tr td {
  padding: 20px;
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid white;
}

.module6 .container .leftBox .card .card2 table tr td:last-child {
  border-right: none;
}

.module6 .container .leftBox .card .card2 table tr td div {
  display: flex;
  align-items: baseline;
}

.module6 .container .leftBox .card .card2 table tr td .timer {
  font-size: 36px;
  font-weight: bold;
  color:#EA6000;
}

.module6 .container .leftBox .card .card2 table tr td p {
  white-space: nowrap;
  margin: 10px 0;
}

#module6_swiper{
  height:98%;
}

.module6 .container .rightBox {
  padding-right: 5%;
  overflow: auto;
  /* 滚动条整体 */
  /* 轨道 */
  /* 滑块 */
  /* 滑块悬停效果 */
}

@media (min-width: 0px) and (max-width: 700px) {
  .module6 .container .rightBox {
    display: none;
    padding: 0 10px;
    overflow: hidden;
  }
  .module6 .container .rightBox2{
    display: block;
  }
}

.module6 .container .rightBox::-webkit-scrollbar {
  width: 6px;
}

.module6 .container .rightBox::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.module6 .container .rightBox::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.module6 .container .rightBox::-webkit-scrollbar-thumb:hover {
  background: var(--color-Primary);
}

.module6 .container .rightBox p {
  margin: 20px 0;
  font-size: 15px;
  line-height: 25px;
  text-align: justify;
}



@media (min-width: 0px) and (max-width: 700px) {
  .module6 .container .rightBox p {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 0px) and (max-width: 700px) {
  .module6_2 .container .leftBox {
    display: none;
  }
}

@media (min-width: 0px) and (max-width: 700px) {
  .module6_2 .container .rightBox {
    display: block;
  }
}

.module7 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module7 .bc {
  position: absolute;
  z-index: -1;
  width: 60vw;
  top: 0px;
  left: -300px;
}

.module7 .container {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3%;
  padding: 20px 10%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module7 .container {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(1, 1fr);
    padding: 5px;
    gap: 5px;
  }
}

.module7 .container .leftBox p {
  margin-top: 20px;
  width: 340px;
      font-size: 18px;
    line-height: 32px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module7 .container .leftBox p {
    width: 100%;
    font-size: 14px;
    line-height: 16px;
    margin: 10px 0;
  }
}

.module7 .container .rightBox ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.module7 .container .rightBox ul li {
  background-color: #d0d0d0;
  padding: 50px;
  position: relative;
  max-width: 500px;
}

.module7 .container .rightBox ul li:nth-child(1) {
  transition: all 1s ease 0.3s;
}

.module7 .container .rightBox ul li:nth-child(2) {
  transition: all 1s ease 0.5s;
}

.module7 .container .rightBox ul li:nth-child(3) {
  transition: all 1s ease 0.7s;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module7 .container .rightBox ul li {
    padding: 15px;
  }
  .module7 .container .rightBox ul{
    gap: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
  }
}

.module7 .container .rightBox ul li img {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  width: 25%;
  max-width: 100px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module7 .container .rightBox ul li img {
    width: 50px;
  }
}

.module7 .container .rightBox ul li .tag {
  position: absolute;
  left: -10px;
  bottom: -15px;
  font-size: 60px;
  font-weight: bold;
  color: white;
  margin: 0;
  line-height: 60px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module7 .container .rightBox ul li .tag {
           font-size: 40px;
        line-height: 45px;
        bottom: -9px;
        left: -3px;
        z-index: -1;
        opacity: 0.6;
  }

}

.module7 .container .rightBox ul li h3 {
  font-size: 26px;
  font-weight: bold;
}

.module7 .container .rightBox ul li .t1 {
  margin: 15px 0;
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 0px) and (max-width: 700px){
    .module7 .container .rightBox ul li h3{
    font-size: 18px;
  }
  .module7 .container .rightBox ul li .t1{
            margin: 5px 0;
        font-size: 14px;
  }
  .module7 .container .rightBox ul li .t2{
    font-size: 12px;
  }
}


.module8 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module8 .bc {
  position: absolute;
  z-index: 2;
  width: 1000px;
  top: -100px;
  right: -300px;
}

.module8 .container {
  height: 100%;
  background-color: #fbfbfb;
}

.module8 .container .box1 {
  padding: 2vh 4%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container .box1 {
    padding: 10px;
  }
}

.module8 .container .box1 p {
  margin-top: 20px;
  max-width: 900px;
}

.module8 .container .swiper {
  position: relative;
  z-index: 3;
  overflow: hidden;
  height: 60vh;
  width: 100%;
      background-color: #cfcfcf;
}

.module8 .container .swiper .swiper-pagination {
  right: 5%;
  bottom: 20px;
  left: auto;
  width: auto;
}

.module8 .container .swiper .swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  border-radius: 0px;
  opacity: 1;
  background-color: #fff;
  height: 3px;
}

.module8 .container .swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-Primary);
}

.module8 .container .swiper .box2 {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container{
    display: flex;
    flex-direction: column;
  }
  .module8 .container .swiper{
    height: 100%;
  }
  .module8 .container .swiper .box2 {
    display: flex;
    flex-direction: column;
    padding-bottom: 10%;
  }
}

.module8 .container .swiper .box2 .imgBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container .swiper .box2 .imgBox {
    width: 100%;
    /* padding: 0 10%; */
    margin: auto;
    background-color: #cfcfcf;
    /* display: none; */
  }
}

.module8 .container .swiper .box2 .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module8 .container .swiper .box2 .content {
  padding: 8%;
  background-color: #cfcfcf;
}

.module8 .container .swiper .box2 .content h3 {
  display: flex;
  flex-direction: column;
  font-size: 30px;
  font-weight: bold;
  color: black;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container .swiper .box2 .imgBox img{
   
  }
  .module8 .container .swiper .box2 .content h3 {
    font-size: 16px;
  }
}

.module8 .container .swiper .box2 .content h3::after {
  content: "";
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 4px;
  background-color: var(--color-Primary);
}

.module8 .container .swiper .box2 .content p {
  margin: 20px 0;
  line-height: 24px;
  text-align: justify;
}

.module8 .container .swiper .box2 .content .t1 {
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container .swiper .box2 .content .t1 {
    font-size: 12px;
    line-height: 14px;
    margin: 5px 0;
  }
}

.module8 .container .swiper .box2 .content .t2 {
  color: #535353;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module8 .container .swiper .box2 .content .t2 {
    font-size: 12px;
    line-height: 14px;
    margin: 5px 0;
  }
}

.module9 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module9 .container {
  height: 100%;
  padding: 5%;
  display: flex;
  overflow: hidden;
  gap: 5%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container {
    flex-direction: column;
  }
}

.module9 .container .leftBox {
  width: 200px;
  flex-shrink: 0;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container .leftBox {
    width: 100%;
  }
}

.module9 .container .leftBox .common_title p {
  color: white;
}

.module9 .container .leftBox .btnList {
  margin-top: 30%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container .leftBox .btnList {
    margin-top: 20px;
    flex-direction: row;
  }
}

.module9 .container .leftBox .btnList button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid white;
  padding: 10px 0;
  font-size: 20px;
  font-weight: bold;
  color: #646464;
}

.module9 .container .leftBox .btnList button .text{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.module9 .container .leftBox .btnList button span{
  font-size: 16px;
}

.module9 .container .leftBox .btnList button:hover {
  color: var(--color-Primary);
}

.module9 .container .leftBox .btnList button .icon {
  color: white;
}

.module9 .container .leftBox .btnList .select {
  color: var(--color-Primary);
}

.module9 .container .rightBox {
  width: calc(95% - 200px);
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container .rightBox {
    width: 100%;
  }
}

.module9 .container .rightBox .box {
  width: 100%;
  padding: 0 30px;
  display: none;
  position: relative;
}

.module9 .container .rightBox .box .swiper {
  width: 100%;
  padding-bottom: 30px;
}
.module9 .container .rightBox .box .swiper .swiper-wrapper{
  height: auto !important;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container .rightBox .box .swiper {
    max-height: 55vh;
  }
}

.module9 .container .rightBox .box .swiper .swiper-slide {
  width: 100%;
  height: calc((100% - 60px) / 2) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.module9 .container .rightBox .box .swiper .swiper-slide .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.module9 .container .rightBox .box .swiper .swiper-slide .card .imgBox {
  max-width: 350px;
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module9 .container .rightBox .box .swiper .swiper-slide .card .imgBox {
    aspect-ratio: 4 / 3;
  }
}

.module9 .container .rightBox .box .swiper .swiper-slide .card .imgBox .border {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.module9 .container .rightBox .box .swiper .swiper-slide .card .imgBox .img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module9 .container .rightBox .box .swiper .swiper-slide .card p {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 20px;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0 20px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.module9 .container .rightBox .box .swiper .paginationBox {
  position: absolute;
  right: 5%;
  bottom: 0px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.module9 .container .rightBox .box .swiper .paginationBox .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
}

.module9 .container .rightBox .box .swiper .paginationBox .swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 3px;
  border-radius: 0px;
  background-color: white;
  opacity: 1;
}

.module9 .container .rightBox .box .swiper .paginationBox .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-Primary);
}

.module9 .container .rightBox .box .swiper .paginationBox .pagination-num {
  font-size: 18px;
  color: white;
  margin-right: 20px;
}

.module9 .container .rightBox .box .swiper-button-next,
.module9 .container .rightBox .box .swiper-button-prev {
  top: calc(50% - 15px);
  transform: translateY(-50%);
  border: 2px solid white;
  width: 32px;
  height: 32px;
  border-radius: 50px;
  transition: all 0.5s;
}

.module9 .container .rightBox .box .swiper-button-next:hover,
.module9 .container .rightBox .box .swiper-button-prev:hover {
  background-color: var(--color-Primary);
  border: 2px solid var(--color-Primary);
}

.module9 .container .rightBox .box .swiper-button-next:after,
.module9 .container .rightBox .box .swiper-button-prev:after {
  font-size: 14px;
  color: white;
}

.module9 .container .rightBox .box .swiper-button-next {
  right: 0px;
}

.module9 .container .rightBox .box .swiper-button-prev {
  left: 0px;
}

footer {
  width: 100%;
  height: 100%;
  position: relative;
}

footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  background-color: #f6f6f6;
}

@media (min-width: 0px) and (max-width: 700px) {
  footer .container {
    gap: 10px;
  }
}

footer .container .box1 {
  width: 80%;
  display: flex;
  justify-content: space-evenly;
  gap: 4%;
}

@media (min-width: 0px) and (max-width: 700px) {
  footer .container .box1 {
    width: 90%;
    flex-direction: column;
    gap: 10px;
  }
}

footer .container .box1 li h4 {
  min-width: 10vw;
  font-size: 20px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #b8b8b8;
  margin-bottom: 15px;
}

footer .container .box1 li .imgList {
  display: flex;
  align-items: center;
  gap: 20px;
}

footer .container .box1 li .imgList img {
  height: 80px;
}

footer .container .box1 li .imgList p {
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}

footer .container .box1 li .btnList {
  display: flex;
  gap: 10px;
}

footer .container .box1 li .btnList a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #b6b6b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .container .box1 li .btnList a:hover .icon {
  color: var(--color-Primary);
}

footer .container .box1 li .btnList a .icon {
  font-size: 20px;
}

footer .container .box2 {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #646464;
}

@media (min-width: 0px) and (max-width: 700px) {
  footer .container .box2 {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
}

footer .container .box2 .left a {
  display: inline-block;
  padding: 0 15px;
  border-right: 1px solid #d8d8d8;
}

footer .container .box2 .left a:last-child {
  border: none;
}

footer .container .box2 button {
  border: 1px solid #a5a5a5;
  padding: 8px 20px;
  font-size: 14px;
  color: #646464;
  position: relative;
}

footer .container .box2 button:hover {
  background-color: var(--color-Primary);
  color: white;
}

footer .container .box2 button .down {
  position: absolute;
  bottom: 120%;
  background-color: #eeeeee;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: none;
}

footer .container .box2 button .down a {
  display: block;
  padding: 10px 20px;
}

footer .container .box2 button .down a:hover {
  background-color: var(--color-Primary);
  color: white;
}

footer .container .box3 {
  width: 80%;
  padding: 10px 0;
  text-align: right;
  font-size: 14px;
}

.module10 {
  width: 100%;
  height: 100%;
  position: relative;
}

.module10 .bc {
  position: absolute;
  z-index: -1;
  width: 1300px;
  top: -100px;
  right: -300px;
}

.module10 .container {
  height: 100%;
  padding: 20px 0;
}

.module10 .container .box1 {
  display: flex;
  align-items: center;
  gap: 50px;
}

.module10 .container .box1 .leftBox {
  text-align: center;
  height: 100%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box1 .leftBox {
    display: none;
  }
}

.module10 .container .box1 .leftBox img {
  max-height: 33vh;
}

.module10 .container .box1 .rightBox .t1 {
  margin-top: 20px;
}

.module10 .container .box1 .rightBox .textBox {
  margin-top: 20px;
}

.module10 .container .box1 .rightBox .textBox .t2 {
  font-weight: bold;
  font-size: 18px;
}

.module10 .container .box1 .rightBox button {
  margin-top: 5vh;
  background-color: var(--color-Primary);
  color: white;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.5s;
}

.module10 .container .box1 .rightBox button:hover {
  background-color: var(--color-Primary2);
}

.module10 .container .box1 .rightBox button:hover .icon {
  margin-left: 10px;
}

.module10 .container .box1 .rightBox button .icon {
  transition: all 0.5s;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box1 .rightBox button {
    margin-top: 10px;
  }
}

.module10 .container .box2 {
  margin-top: 5vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box2 {
    margin-top: 30px;
  }
}

.module10 .container .box2 h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: bold;
}

.module10 .container .box2 ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
  width: 80%;
  margin: 0 auto;
  margin-top: 5vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box2 ul {
    width: 100%;
    margin-top: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.module10 .container .box2 ul li {
  background-color: #f5f5f5;
  height: 35vh;
  padding: 20% 10%;
  border-radius: 0px 40px 0px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box2 ul li {
    padding: 20px;
    height: auto;
  }
}

.module10 .container .box2 ul li h4 {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module10 .container .box2 ul li h4 {
    margin: 0;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .module10 .container .box2 ul li p{
    font-size: 12px;
  }
}

.module11 {
  width: 100%;
  height: 100%;
}

.module11 .bc {
  position: absolute;
  z-index: 1;
  width: 1000px;
  top: -100px;
  right: -400px;
}

.module11 .container {
  height: 100%;
  padding: 8% 4% 8% 4%;
  background-color: #f8f8f8;
  display: grid;
  grid-template-columns: 40% 60%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.module11 .container .leftBox .t1 {
  margin-top: 4vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container .leftBox .t1 {
    margin-top: 10px;
    font-size: 14px;
  }
}

.module11 .container .leftBox .textBox {
  margin-top: 4vh;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container .leftBox .textBox {
    margin-top: 10px;
  }
  .module11 .container .leftBox .textBox h3{
    font-size: 20px;
  }
}

.module11 .container .leftBox .textBox .t2 {
  font-weight: bold;
  font-size: 18px;
}

.module11 .container .leftBox button {
  margin-top: 5vh;
  background-color: var(--color-Primary);
  color: white;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.5s;
}

.module11 .container .leftBox button:hover {
  background-color: var(--color-Primary2);
}

.module11 .container .leftBox button:hover .icon {
  margin-left: 10px;
}

.module11 .container .leftBox button .icon {
  transition: all 0.5s;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container .leftBox button {
    margin-top: 10px;
  }
}

.module11 .container .rightBox {
  position: relative;
  z-index: 3;
}

.module11 .container .rightBox h3 {
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 0px) and (max-width: 700px){
  .module11 .container .rightBox h3{
    font-size: 20px;
  }
}


.module11 .container .rightBox ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 5vh;
}

.module11 .container .rightBox ul li {
  background-color: #dfdfdf;
  height: 25vh;
  padding: 5vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container .rightBox ul li {
    height: auto;
    padding: 15px 10px;
        justify-content: flex-start;
  }
}

.module11 .container .rightBox ul li h4 {
  font-size: 24px;
  font-weight: bold;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module11 .container .rightBox ul li h4 {
    margin: 0;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
  }
  .module11 .container .rightBox ul li p{
    font-size: 12px;
  }
}

.module11 .common_bc .rightBox ul li {
  background-color: var(--color-Primary);
  color: white;
}

.module12 {
  width: 100%;
  height: 60vh;
  margin-top: 70px;
}

.module12 .container {
  height: 100%;
  position: relative;
}

.module12 .container .bc {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module12 .container .content {
  text-align: center;
}

.module12 .container .content h3 {
  font-size: 44px;
  font-weight: bold;
  margin: 20px 0;
}

.module12 .container .content h4 {
  margin: 20px 0;
  font-size: 30px;
  color: var(--color-Primary);
}

.module12 .container .content .t1 {
  font-size: 16px;
  margin: 20px 0;
}

.module12 .container .content .t2 {
  margin-top: 30px;
}

.module12 .container .content .t3 {
  color: white;
  font-weight: 500;
}

.module13 {
  padding: 50px 0;
}

.module13 .container .box1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box1 {
    flex-direction: column;
  }

  .module13 .container .box1 .left{
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
}

.module13 .container .box1 .left{
  display: flex;
  align-items: center;
}

@media (min-width: 0px) and (max-width: 700px) {

  .module13 .container .box1 .left{
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

.module13 .container .box1 .left span {
  color: black;
}



.module13 .container .box1 .left a {
  display: inline-block;
  margin: 0 20px;
  padding: 5px;
  font-size: 18px;
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box1 .left a{
    width: 100%;
    padding:5px 0;
    margin: 0;
  }
}

.module13 .container .box1 .left a:hover::after {
  width: 100%;
}

.module13 .container .box1 .left a:hover::before {
  width: 100%;
}

.module13 .container .box1 .left a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  border-top: 1px solid #b9b9b9;
  transition: all 0.5s;
}

.module13 .container .box1 .left a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  border-top: 1px solid #b9b9b9;
  transition: all 0.5s;
}
.module13 .container .box1 .left a p{
  font-size: 12px;
  margin: 0;
}

.module13 .container .box1 .left .select {
  color: var(--color-Primary);
  font-weight: bold;
}

.module13 .container .box1 .left .select::after {
  width: 100%;
}

.module13 .container .box1 .left .select::before {
  width: 100%;
}

.module13 .container .box1 .search {
  border: 1px solid #d1d1d1;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  gap: 3px;
  background-color: #fcfcfc;
}

.module13 .container .box1 .search .icon {
  font-size: 26px;
}

.module13 .container .box1 .search input {
  height: 100%;
  font-size: 14px;
  width: 200px;
  background-color: transparent;
}

.module13 .container .box1 .search button {
  width: 60px;
  height: 100%;
  font-size: 14px;
  border-left: 1px solid #d1d1d1;
  background-color: white;
}

.module13 .container .box1 .search button:hover {
  background-color: var(--color-Primary);
  color: white;
}

.module13 .container .box2 {
  margin-top: 30px;
}

.module13 .container .box2 ul {
  background-color: #1c1c1c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box2 ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}

.module13 .container .box2 ul li {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5/3;
}

.module13 .container .box2 ul li:hover img {
  transform: scale(1.1);
}

.module13 .container .box2 ul li:hover p {
  color: var(--color-Primary);
}

.module13 .container .box2 ul li a {
  width: 100%;
  height: 100%;
}

.module13 .container .box2 ul li a img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  object-fit: cover;
}

.module13 .container .box2 ul li p {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 20px;
  color: white;
  font-size: 14px;
  transition: all 0.5s;
}

.module13 .container .box3 {
  text-align: center;
  padding: 100px;
  font-size: 20px;
  font-weight: bold;
}

.module13 .container .box4 {
  display: grid;
  grid-template-columns: 66.66% 33.33%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.module13 .container .box4 .left {
  padding: 5%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 5%;
}

.module13 .container .box4 .left button {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #a7a7a7;
  transition: all 0.5s;
  flex-shrink: 0;
}

.module13 .container .box4 .left button:hover {
  background-color: var(--color-Primary);
}

.module13 .container .box4 .left button:hover .icon {
  color: white;
}

.module13 .container .box4 .left button .icon {
  color: #535353;
}

.module13 .container .box4 .right {
  position: relative;
  aspect-ratio: 5/3;
  padding: 10%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  background-color: #ececec;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box4 .right {
    height: 250px;
    padding: 10px;
    width: 80%;
  }
}

.module13 .container .box4 .right h3 {
  font-size: 40px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module13 .container .box4 .right h3 {
    font-size: 30px;
  }
}

.module13 .container .box4 .right .line {
  display: inline-block;
  width: 5px;
  height: 3px;
  background-color: #1d1d1d;
}

.module13 .container .box4 .right p {
  font-size: 26px;
}

.module14 {
  margin-top: 80px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module14 {
    height: 40vh;
  }
}

.module14 .container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.module14 .container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module14 .container .title {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 15px;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 0px) and (max-width: 700px) {
  .module14 .container .title {
    padding: 10px;
  }
}

.module14 .container .title .line {
  display: inline-block;
  width: 100px;
  height: 4px;
  background-color: white;
  margin-bottom: 10px;
}

.module14 .container .title p {
  color: white;
  font-size: 28px;
  font-weight: bold;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module14 .container .title p {
    font-size: 14px;
  }
}


.module15 {
  position: relative;
}

.module15 .bc {
  position: absolute;
  z-index: 1;
  width: 1200px;
  top: 0px;
  right: -500px;
}

.module15 .container {
  padding: 50px 0;
  position: relative;
  z-index: 2;
}

.module15 .container .content {
  max-width: 1200px;
  margin: auto;
}

.module15 .container .content img {
  max-width: 100%;
}

.module15 .container .content p {
  margin: 0;
  line-height: 30px;
  font-size: 18px !important;
  font-family: '微软雅黑';
}

.module15 .container .pageBox {
   margin: auto;
  margin-top: 50px;
  max-width: 1200px;
 
}

.module16 {
  padding: 60px;
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module16 {
    padding: 30px 0px;
  }
}

.module16 .bc {
  position: absolute;
  z-index: -1;
  width: 1200px;
  top: -50px;
  right: -600px;
}

.module16 .container {
  display: flex;
  gap: 10%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module16 .container {
    flex-direction: column;
    gap: 20px;
  }
}

.module16 .container .leftBox .common_title {
  margin-bottom: 30px;
}

.module16 .container .leftBox .common_title p {
  font-size: 26px;
  font-weight: bold;
  color: #8a8a8a;
}

.module16 .container .leftBox .common_title h3 {
  color: black;
}

.module16 .container .leftBox .common_title::after {
  background-color: black;
  height: 2px;
}

.module16 .container .rightBox ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module16 .container .rightBox ul {
    grid-template-columns: repeat(1, 1fr);
  }
}

.module16 .container .rightBox ul li {
  background-color: #dfdfdf;
  padding: 40px;
  transition: all 0.5s;
}

.module16 .container .rightBox ul li:hover {
  transform: translateY(-10px);
}

.module16 .container .rightBox ul li .icon {
  font-size: 50px;
  color: var(--color-Primary);
  font-weight: bold;
}

.module16 .container .rightBox ul li .t1 {
  margin: 15px 0;
  font-weight: bold;
  font-size: 18px;
}

.module17 {
  padding: 60px;
  position: relative;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module17 {
    padding: 30px 0px;
  }
}

.module17 .bc {
  position: absolute;
  z-index: -1;
  width: 1300px;
  top: 0px;
  right: -300px;
}

.module17 .container {
  display: flex;
  gap: 10%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module17 .container {
    flex-direction: column;
    gap: 20px;
  }
}

.module17 .container .leftBox .common_title {
  margin-bottom: 30px;
}

.module17 .container .leftBox .common_title p {
  font-size: 26px;
  font-weight: bold;
  color: #8a8a8a;
}

.module17 .container .leftBox .common_title h3 {
  color: black;
}

.module17 .container .leftBox .common_title::after {
  background-color: black;
  height: 2px;
}

.module17 .container .rightBox {
  width: 60%;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module17 .container .rightBox {
    width: 100%;
  }
}

.module17 .container .rightBox .flexBox {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module17 .container .rightBox .flexBox {
    flex-direction: column;
    gap: 0;
  }
}

.module17 .container .rightBox .inputBox {
  margin: 15px 0;
  width: 100%;
  border-bottom: 1px solid silver;
  display: flex;
  align-items: center;
  gap: 10px;
}

.module17 .container .rightBox .inputBox span {
  color: #646464;
  white-space: nowrap;
}

@media (min-width: 0px) and (max-width: 700px) {
  .module17 .container .rightBox .inputBox span {
    width: 100px;
  }
}

.module17 .container .rightBox .inputBox input {
  width: 100%;
  height: 45px;
}

.module17 .container .rightBox .inputBox2 {
  margin: 15px 0;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid silver;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.module17 .container .rightBox .inputBox2 span {
  color: #646464;
  white-space: nowrap;
}

.module17 .container .rightBox .inputBox2 textarea {
  width: 100%;
  border: none;
}

.module17 .container .rightBox button {
  margin-top: 30px;
  background-color: var(--color-Primary);
  color: white;
  padding: 10px 50px;
  transition: all 0.5s;
}

.module17 .container .rightBox button:hover {
  background-color: var(--color-Primary2);
  padding: 10px 60px;
}

.module20 {
  padding: 100px 0;
}


@media (min-width: 0px) and (max-width: 700px){
  body{
    font-size: 14px;
  }
  .module5 .container .content h3{
    font-size: 36px;
  }
  .module10 .container .box2 h3{
    font-size: 20px;
  }
  .module13 .container .box1 .left a{
    text-align: center;
  }

  .module3 .container .card .t2{
font-size: 18px;
        width: 100%;
        line-height: 22px;
  }

  .module3 .container .card .t4, .module3 .container .card .t5{
    margin: 10px 0;
    font-size: 14px;
  }
  footer .container .box3{
        width: 100%;
    padding: 5px 0;
    text-align: center;
    font-size: 12px;
  }
  footer .container .box2 .left a{
        padding: 0 10px;
        font-size: 14px;
  }
  footer .container .box1 {
    
    margin: 0 0 5px;
    font-size: 14px;
  }
  footer .container .box1 li h4{
    font-size: 16px;
        margin-bottom: 10px;
  }
  .module8 .container .box1 p{
    font-size: 14px;
    margin: 5px 0;
    line-height: 18px;
  }

  .module9 .container .rightBox .box .swiper .swiper-slide .card p{
    font-size: 12px;
    line-height: 16px;
        padding: 0 5px;
            height: 34px;
  }

  .module9 .container .leftBox .btnList button .text{
    font-size: 16px;
  }
  .module9 .container .leftBox .btnList button span{
    font-size: 12px;
  }

  .module10 .container .box1 .rightBox .t1{
    
        font-size: 14px;
        margin: 0;
        margin-top: 10px;
  }
  .module10 .container .box1 .rightBox .textBox{
     margin-top: 10px;
     
  }
  .module10 .container .box1 .rightBox .textBox h3{
    font-size: 20px;
  }
  .module12 .container .content{
    width: 90%;
  }
  .module12 .container .content h3{
    font-size: 34px;
  }
  .module13 .container .box2 ul li p{
    font-size: 12px;
  }
  .module16 .container .rightBox ul li{
    padding: 20px;
  }
  .module2 .container .left li{
    justify-content: flex-start;
  }
  .module6 .container .leftBox .card .card2 table tr td .timer{
    font-size: 30px;
  }
  .module8 .container .swiper .box2 .content{
    padding: 10px;
  }
      .module7 .container .rightBox{
        height: 100%;
      }
  .module10 .container,.module11 .container{
    display: flex;
    flex-direction: column;
        justify-content: space-evenly;
  }

  
    
}