/*
Theme Name: Sika
Version: 1.0
Description: 三鸟科技提供一站式服务——网站搭建,谷歌SEO优化,谷歌竞价,谷歌SNS社媒营销等。
Author: 版权所有：三鸟科技
*/
@charset "utf-8";

@font-face {
  font-family: "Popping";
  src: url("./static/fonts/Poppins-Light.otf") format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Popping";
  src: url("./static/fonts/Poppins-Regular.otf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Popping";
  src: url("./static/fonts/Poppins-Bold.otf") format("truetype");
  font-weight: bold;
}

* {
  font-family: "Popping", Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  line-height: 150%;
  font-size: 18px;
}

main {
  overflow: hidden;
  background-color: var(--bc_color);
}

:root {
  --i_color: #233d94;
  --i_color2: #118161;
  --bc_color: #f7f7f7;
  --i_shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  /* --header_height: 0.8rem; */
  --header_height: 1.2rem;
  --border_color: rgb(51, 51, 51, 0.2);
  --f_menu_height: 50px;
}

@media screen and (max-width: 1440px) {
  :root {
    /* --header_height: 0.8rem; */
    --header_height: 1.2rem;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --header_height: 0.9rem;
    --border_color: rgb(0 0 0 / 6%);
  }
}

.wrap {
  width: 83.33%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1600px) {
  .wrap {
    width: 86%;
  }
}

@media screen and (max-width: 1024px) {
  .wrap {
    width: 92%;
  }
}

.wrap_l {
  padding-left: 8.335%;
}

.wrap_r {
  padding-right: 8.335%;
}

@media screen and (max-width: 1600px) {
  .wrap_l {
    padding-left: 7%;
  }

  .wrap_r {
    padding-right: 7%;
  }
}

@media screen and (max-width: 1024px) {

  .wrap_l,
  .wrap_r {
    padding-left: 4%;
    padding-right: 4%;
  }
}

/* common style */
/* btn */
.btn {
  height: 36px;
  line-height: 34px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: #222;
  border: solid 1px #ced3d9;
  background-color: #f5f7fa;
  padding: 0 15px;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

iconify-icon {
  vertical-align: middle;
}

/* Breadcrumb */
.in_position {
  padding: 0.16rem 0;
  background: var(--bc_color);
}

.in_position .wrap {
  height: 20px;
}

.in_position a {
  display: block;
  float: left;
  font-size: 16px;
  color: #666;
  position: relative;
  line-height: 20px;
}

.in_position a:not(:last-child):after {
  content: ">";
  margin: 0 6px;
  color: #666;
}

.in_position a:last-child {
  color: var(--i_color) !important;
}

.in_position a:hover {
  color: var(--i_color);
}

@media screen and (max-width: 959px) {
  .in_position a {
    font-size: 15px;
  }

  .in_position {
    bottom: 0.3rem;
  }
}

@media screen and (max-width: 767px) {
  .in_position a {
    font-size: 14px;
  }

  .in_position {
    bottom: 0.2rem;
  }
}

@media screen and (max-width: 560px) {
  .in_position a {
    font-size: 12px;
  }

  .in_position {
    bottom: 0rem;
  }
}


/* animation */
.come-in--top {
  transform: translateY(-1.5rem)
}

.come-in--bot {
  transform: translateY(1.5rem)
}

.come-in--left {
  transform: translateX(-100vw)
}

.come-in--right {
  transform: translateX(100vw)
}

.come-in--animate {
  animation: come-in 2s ease forwards
}

@keyframes come-in {
  to {
    transform: translate(0);
    visibility: visible
  }
}

/* in_banner */
.in_banner img {
  width: 100%;
}

/* section title */
.section_title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-top: 0.3rem;
}

/* 图片模态框 */
/* #image {
    width: 100%;
    max-width: 300px;
    cursor: pointer;
} */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 99999;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  cursor: pointer;
}

/*兼容性写法， 确保在webkit内核的浏览器能正常使用*/
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* 关闭按钮 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: burlywood;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.i_tit {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.i_tit>h4 {
  font-size: 0.36rem;
  color: var(--i_color);
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 0.1rem;
}

.i_tit>h5 {
  width: 60%;
  margin: 0 auto;
  font-size: 16px;
  color: #222;
  font-weight: normal;
}

@media screen and (max-width: 1024px) {
  .i_tit>h4 {
    font-size: 0.3rem;
  }
}

@media screen and (max-width: 768px) {
  .i_tit>h4 {
    font-size: 0.24rem;
  }

  .i_tit>h5 {
    font-size: 14px;
    width: 90%;
  }
}

.i_tit.left {
  text-align: left;
}

.i_tit.left h5 {
  margin-left: 0;
}



/* header */
header {
  position: fixed;
  width: 100%;
  height: var(--header_height);
  background-color: #FFFF;
  z-index: 999;
  box-shadow: var(--i_shadow);
}

header .top_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

header .logo {
  height: 60%;
  padding-right: 4%;
}

header .logo img {
  height: 100%;
}

header .top_container .header_other {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
}

.top_search {
  align-content: center;
  /* width: 100%; */
  width: 600px;
}

@media screen and (max-width: 1300px) {
  .top_search {
    width: 400px;
  }

}

.top_search .top_search_container {
  width: 100%;
  height: 37px;
  border: 2px solid red;
  overflow: hidden;
  display: flex;
}

.top_search_tit {
  border-right: 1px solid #dadada;
  padding: 0 0.1rem;
  align-content: center;
}

.top_search_tit .search_tit_ul li {
  display: flex;
  justify-content: space-around;
  align-content: center;
  display: none;
}

.top_search_tit .search_tit_ul li.li_active {
  display: block;
}

.top_input {
  display: flex;
  flex: 1;
}

.top_input .input_ul {
  align-content: center;
}

.top_input .input_ul li {
  display: none;
}

.top_input .input_ul li.li_active {
  display: block;
}

.search_icon1 {
  align-content: center;
  margin: 0 0.1rem;
}

.search_icon2 {
  align-content: center;
  text-align: center;
  background-color: red;
}

.search_icon2 button {
  background-color: red;
}


.actions {
  align-content: center;
}

.actions .actions_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.actions_item {
  display: flex;
  flex-direction: column;
}

.actions_item .item_icon,
.actions_item .item_text {
  text-align: center;
}

.actions_item .item_icon iconify-icon {
  font-size: 0.25rem;
}

.actions_item .item_text span {
  font-size: 14px;
}

@media screen and (max-width: 1440px) {

  /* 隐藏actions_container的第二和第四子项 */
  .actions_container> :nth-child(2),
  .actions_container> :nth-child(4) {
    display: none;
  }

  .actions .actions_container {
    grid-template-columns: 1fr 1fr;
  }

}

.header_full {
  width: 100%;
  height: var(--header_height);
}


/* banner */
.banner {
  background-color: var(--bc_color);
  margin-top: 20px;
}

.banner .container {
  /* width: 100%; */
  background: #fff;
  margin-top: 20px;
  padding: 20px 30px;
  border: 1px solid #e6ecf2;
  display: flex;
  overflow: visible;
}

.left_nav {
  width: 270px;
}

.nav_tit {
  margin-bottom: 0.2rem;
}

.nav_list li {
  font-size: 14px;
  color: #555;
  margin-bottom: 0.2rem;
  transition: all 0.3s ease;
  position: relative;
}

.nav_list li a:hover {
  color: red;
}

.cat-level-1 {
  display: none;
  position: absolute;
  z-index: 9999;
  left: 100%;
  top: -2px;
  background-color: #fff;
  border: 2px solid #ff9a03;
  min-width: 240px;
  padding: 10px 15px 15px;
}

.cat-level-1 li.level-1 {
  font-size: 14px;
  color: #222;
  font-weight: bold;
  margin-bottom: 0.2rem;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cat-level-1 li.level-1 a:hover {
  color: #ff9a03;
}

.cat-level-1 li.level-1 .cat-level-2 li.level-2 {
  box-sizing: border-box;
  width: 100%;
  float: left;
  margin-bottom: 0.1rem;
  color: #555;
  font-size: 12px;
  line-height: 18px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cat-level-1 li.level-1 .cat-level-2 li.level-2 a:hover {
  color: #ff9a03;
}

/* bannner-img */
.banner .container .middle_section {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* background-color: pink; */
  width: 800px;
}

.middle_section .banner_img {
  width: 100%;
  height: 400px;
}

.banner_img .swiper {
  width: 100%;
  height: 100%;
}

.banner_img .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner_img .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner_img .swiper {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1440px) {
  .left_nav {
    display: none;
  }

  .banner_img {
    width: 100%;
  }

}

/* main */
/* trending_products */
.trending_products .container {
  background: #fff;
  border: 1px solid #e6ecf2;
  margin-top: 20px;
  padding: 30px 30px 10px 30px;
  margin-bottom: 0.5rem;
}

.trending_products .container .title {
  font-weight: 500;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 30px;
}

.trending_products .container .content .trending_products_ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0.2rem;
}

.trending_products .container .content .trending_products_ul li {
  display: flex;
  flex-direction: column;
}

.trending_products .container .content .trending_products_ul li p {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.trending_products .container .content .trending_products_ul li .img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.trending_products .container .content .trending_products_ul li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s ease;
}

.trending_products .container .content .trending_products_ul li img:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 1440px) {
  .trending_products .container .content .trending_products_ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

}

@media screen and (max-width: 1024px) {
  .trending_products .container .content .trending_products_ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 540px) {
  .trending_products .container .content .trending_products_ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 270px) {
  .trending_products .container .content .trending_products_ul {
    grid-template-columns: 1fr;
  }
}


/* product */
.product1_left {
  width: 300px;
  height: 380px;
}

.product1 .container {
  background: #fff;
  border: 1px solid #e6ecf2;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 300px 1fr;
  position: relative;
}

.product1 .container .bgc {
  height: 100%;
  position: absolute;
}

.product1_left {
  position: relative;
  z-index: 2;
  padding: 30px 30px 30px 31px;
}

.product1_left .title {
  font-weight: 500;
  margin-bottom: 20px;
  font-size: 22px;
  line-height: 30px;
  color: #222;
}

.product1_left .btn {
  color: #fff;
  border: solid 1px #e64545;
  background-color: #e64545;
}

.product1_left .btn a {
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
}

.product1_right_ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* gap: 0.2rem; */
}

.product1_right_ul li {
  display: flex;
  flex-direction: column-reverse;
  border-bottom: 1px solid #e6ecf2;
  border-right: 1px solid #e6ecf2;
  padding: 29px 30px 15px 30px;
}

.product1_right_ul li p {
  font-size: 16px;
  line-height: 24px;
  height: 48px;
  color: #555;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  position: relative;
  z-index: 2;
  color: #555;
}

.product1_right_ul li .img {
  width: 120px;
  height: 120px;
  overflow: hidden;
  float: inline-end;
}

.product1_right_ul li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s ease;
}

.product1_right_ul li img:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 1440px) {

  .product1 .container .product1_left,
  .product1 .container .bgc {
    display: none;
  }

  .product1 .container {
    grid-template-columns: 1fr;
  }

  .product1 .container .product1_right {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .product1_right_ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* form */
.form .container {
  margin-top: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.form .container .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.form .container .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.form .container .main_content {
  display: flex;
}

.form .container .content {
  position: relative;
  flex-grow: 1;
  z-index: 2;
}

.from .container .content .text {
  padding-top: 20px;
  padding-left: 30px;
  overflow: hidden;
}

.form .container .content .text .title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  transform: scaleX(1.2);
  transform-origin: left;
}

.form .container .content .text p {
  margin-bottom: 24px;
  font-size: 16px;
  color: #555;
}

.form .container .content .text a {
  margin-top: 45px;
  font-weight: 500;
  font-size: 14px;
}

.quotation-form {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  /* margin: 50px auto; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  height: 120px;
  resize: vertical;
}

.quantity {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.2rem;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background-color: #d32f2f;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #c2185b;
}

@media screen and (max-width: 1000px) {
  .form .container .main_content {
    display: grid;
    grid-template-columns: 1fr;
  }


}

/* home-img */
.home_img {
  margin-top: 20px;
}

.home_img .container img {
  width: 100%;
}

/* solution */
.solutions {
  margin-top: 40px;
}

.solutions .container .title {
  font-size: 22px;
  line-height: 30px;
  text-align: center;
  font-weight: normal;
}

.solutions .container .solution_list {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.solution_list .solution_item {
  margin-top: 20px;
  width: 25%;
  padding: 0 10px;
  box-sizing: border-box;
}

.solution_list .solution_item .item_inr {
  background: #fff;
}

.solutions .solution-banner,
.solutions .solution-banner,
.solutions .solution-banner {
  background-position: right center;
  background-repeat: no-repeat;
}

.solution_item .solution-banner {
  height: 220px;
  box-sizing: border-box;
  position: relative;
}

.solution_banner .solution-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.solutions .solution-bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  text-align: right;
  overflow: hidden;
}

.solutions .solution-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.solutions .solution-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px 50px 30px 30px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .3);
  transition: background .3s ease-out;
}

.solutions .banner-title {
  color: #fff;
  font-size: 24px;
  line-height: 30px;
  height: 60px;
  font-weight: 500;
  margin-bottom: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.solutions .banner-desc {
  color: #fff;
  font-size: 14px;
}

.solutions .banner-arr {
  visibility: hidden;
  opacity: 0;
  margin-top: 14px;
  width: 25px;
  height: 12px;
  background: url(https://www.micstatic.com/mic-search/img/home-2019/ani-arr_4b4e8f60.png) no-repeat center;
}


.solutions .solution-prods {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  padding: 0 10px 20px 10px;
  border: 1px solid #e6ecf2;
  flex-wrap: wrap;
  border-top: 0
}

.solutions .prod-item {
  width: 33.33%
}

.solutions .prod-inr {
  padding: 20px 5px 10px 5px
}

@media only screen and (max-width: 1024px) {
  .solutions .prod-inr {
    padding: 20px 5px 0px 5px
  }
}

.solutions .prod-link {
  display: block;
  width: 100%;
  height: 100%
}

.solutions .prod-link:hover .prod-txt {
  color: #e64545
}

.solutions .prod-link:hover .prod-pic:after {
  visibility: visible;
  opacity: 1
}

.solutions .prod-pic {
  border-radius: 100px;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative
}

.solutions .prod-pic .img-wp {
  width: 80px;
  height: 80px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  overflow: hidden
}

.solutions .prod-pic .img-wp img {
  position: static;
  margin: initial;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%
}

.solutions .prod-pic:after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, .1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-out;
  border-radius: 100%;
  overflow: hidden
}

.solutions .item-4 .prod-pic:after {
  background: rgba(0, 0, 0, .2)
}

.solutions .prod-txt {
  font-size: 12px;
  color: #555;
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  height: 42px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word
}

@media only screen and (max-width: 1280px) {
  .solutions .prod-txt {
    height: 21px;
    -webkit-line-clamp: 1
  }
}

@media only screen and (max-width: 1024px) {
  .solutions .prod-txt {
    height: 42px;
    -webkit-line-clamp: 2
  }
}

@media screen and (max-width: 1280px) {
  .solutions .container .solution_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .solution_list .solution_item {
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  .solutions .container .solution_list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .solution_list .solution_item {
    width: 100%;
  }
}

/* company */
.company {
  margin-top: 40px;
}

.company-title h2 {
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: normal;
}

.company-content {
  font-size: 14px;
  background: #fff;
  padding: 30px;
  border: 1px solid #e6ecf2;
}

.company-content .company-info {
  float: left;
  position: relative;
  width: 100%;
  padding: 0 0 15px 0
}

.company-content .company-info .item {
  float: left
}

.company-content .company-info .company-logo {
  font-size: 0;
  padding: 0 20px 0 0;
  float: left;
  margin-bottom: 0px
}

.company-content .company-info .company-logo img {
  max-width: 100px;
  max-height: 50px
}

.company-content .company-info .compnay-info-content {
  overflow: hidden;
  width: calc(100% - 240px);
  float: left;
  margin-right: 120px
}

.company-content .company-info .company-name {
  font-size: 18px;
  font-weight: bold
}

.company-content .company-info .company-name a {
  color: #222
}

.company-content .company-info .company-name a:hover {
  color: #e64545
}

.company-content .company-info .company-members {
  padding-top: 2px;
  overflow: hidden
}

.company-content .company-info .company-members .company-member {
  height: 21px;
  line-height: 21px;
  white-space: nowrap;
  float: left;
  padding-right: 20px
}

.company-content .company-info .company-members .auth-icon {
  padding-right: 5px;
  vertical-align: middle;
  margin-top: -4px
}

.company-content .company-info .company-members .diamond-since {
  color: #e64545
}

.company-content .company-info .company-btn {
  padding-top: 0;
  position: absolute;
  right: 0;
  top: 10px
}

.company-content .company-info .company-btn .btn {
  font-size: 14px
}

.company_full {
  height: 50px;
}

.company_img {
  display: grid;
  grid-template-columns: 50% 20% 20%;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.company_img .img_item {
  position: relative;
  width: 100%;
  height: 200px;
}

.company_img .img_item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}


/* trade */
.trade {
  margin-top: 40px;
}

.trade .container {
  background: #fff;
  margin-top: 20px;
  padding: 30px;
  border: 1px solid #e6ecf2;
}

.trade .container .trade-header {
  text-align: center;
  overflow: hidden;
  position: relative
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-header {
    text-align: left
  }
}

.trade .container .trade-title {
  display: block;
  margin: 0 auto;
  width: 440px
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-title {
    width: 380px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-title {
    width: auto;
    display: flex;
    margin-right: 100px;
    align-items: baseline
  }
}

.trade .container .trade-title-main {
  display: block;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  color: #222
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-title-main {
    font-size: 20px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-title-main {
    font-size: 20px;
    margin-right: 15px
  }
}

.trade .container .trade-title-main a {
  color: #222
}

.trade .container .trade-title-main a:hover {
  color: #e64545
}

.trade .container .trade-title-sub {
  display: block;
  font-size: 14px;
  color: #222
}

.trade .container .trade-more {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  background-color: #e64545;
  float: right;
  right: 0;
  width: 96px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #fff
}

.trade .container .trade-body {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  max-height: 400px
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body {
    margin-top: 15px
  }
}

.trade .container .trade-body-left {
  flex: 1 1;
  position: relative;
  overflow: hidden
}

.trade .container .trade-body-left .trade-body-main {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-image .loadingImage {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-shandow {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(1, 0, 0, 0.8))
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-info {
  width: 400px;
  position: absolute;
  left: 20px;
  bottom: 20px
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-body-left .trade-body-main .trade-body-main-info {
    width: auto;
    max-width: 400px;
    left: 20px;
    right: 20px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-left .trade-body-main .trade-body-main-info {
    width: auto;
    left: 20px;
    right: 20px
  }
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-info .main-info-booth-no {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  background-color: #e64545;
  margin-bottom: 10px
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-info .main-info-title {
  height: 25px;
  display: block;
  line-height: 25px;
  font-size: 18px;
  color: #fff;
  margin-bottom: 5px
}

.trade .container .trade-body-left .trade-body-main .trade-body-main-info .main-info-detail {
  height: 21px;
  display: block;
  line-height: 21px;
  font-size: 14px;
  color: #fff
}

.trade .container .trade-body-left .trade-body-main .opening-flag {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background-color: transparent
}

.trade .container .trade-body-left .trade-body-main .opening-flag .opening-content {
  width: 70px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background-color: #22ac38
}

.trade .container .trade-body-left .trade-body-main .opening-flag .opening-bottom {
  height: 10px;
  width: 70px;
  box-sizing: border-box;
  border-left: 35px solid #22ac38;
  border-right: 35px solid #22ac38;
  border-bottom: 10px solid transparent
}

.trade .container .trade-body-middle {
  position: relative;
  width: 60px
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-middle {
    width: 40px
  }
}

.trade .container .trade-body-middle .middle-line {
  position: absolute;
  left: calc(50% - 1px);
  height: 100%;
  width: 0;
  margin: 0 auto;
  border-left: 2px solid #e6e6e6
}

.trade .container .trade-body-right {
  flex: 1 1;
  margin-bottom: -15px
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right {
    margin-bottom: -10px
  }
}

.trade .container .trade-body-right .trade-body-list {
  width: 100%;
  display: flex;
  flex-direction: column
}

.trade .container .trade-body-right .trade-body-list .trade-body-item {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 15px
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item {
    padding-bottom: 10px
  }
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-circle {
  position: absolute;
  height: 18px;
  width: 18px;
  left: -30px;
  top: 0;
  box-sizing: border-box;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid #06c;
  background-color: #fff
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-circle {
    width: 15px;
    height: 15px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-circle {
    width: 10px;
    height: 10px;
    left: -20px
  }
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-image {
  width: 30%;
  max-width: 185px;
  max-height: 123px;
  position: relative;
  overflow: hidden
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-image .image-size {
  width: 100%;
  height: 0;
  padding-bottom: 66.6%
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-image img {
  max-width: 100%
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info {
  padding-left: 20px;
  flex: 1 1 auto;
  width: 0
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-main-title {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
  color: #222;
  line-height: 27px;
  font-weight: bold
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-main-title {
    font-size: 16px;
    line-height: 24px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-main-title {
    font-size: 14px;
    line-height: 18px
  }
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-main-title a {
  color: #222
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-main-title:hover a {
  color: #e64545
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-booth-no {
  font-size: 12px;
  line-height: 18px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #e64545;
  border: 1px solid #e64545;
  display: inline-block;
  margin-bottom: 10px
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-duration {
  display: block;
  font-size: 14px;
  color: #888;
  line-height: 21px
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-duration {
    line-height: 21px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-duration {
    line-height: 18px
  }
}

.trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-location {
  display: block;
  font-size: 14px;
  color: #888;
  line-height: 21px
}

@media only screen and (max-width: 1280px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-location {
    line-height: 21px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .item-location {
    line-height: 18px
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .trade-body-right .trade-body-list .trade-body-item .trade-body-item-info .hide-message {
    display: none
  }
}

.trade .container .trade-body-right .trade-body-list .trade-body-item.trade-hover .trade-body-item-circle {
  background-color: #177ee6 !important
}

.trade .container .under-resolution-rxl {
  display: block !important
}

@media only screen and (max-width: 1280px) {
  .trade .container .under-resolution-rxl {
    display: none !important
  }
}

.trade .container .under-resolution-rl {
  display: none !important
}

@media only screen and (max-width: 1280px) {
  .trade .container .under-resolution-rl {
    display: block !important
  }
}

@media only screen and (max-width: 768px) {
  .trade .container .under-resolution-rl {
    display: none !important
  }
}

.trade .container .under-resolution-rs {
  display: none !important
}

@media only screen and (max-width: 768px) {
  .trade .container .under-resolution-rs {
    display: block !important
  }
}

/* hot_items */
.hot_items .container {
  margin-top: 40px;
  margin-bottom: 60px;
}

.hot_items_title {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 5px;
}

.hot_items_list {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.hot_items .hot_item {
  width: 16.66%;
  margin-top: 5px;
  padding-right: 20px;
  box-sizing: border-box;
}

.hot_items .hot_item a {
  color: #888;
  font-size: 12px;
}

/* footer */

footer {
  background: #e3e4e6;
}

footer .link1 .container {
  border-color: #cacbcc;
  padding: 30px 0 20px 0;
}

.link1 .m-footer-links-col {
  float: left;
  width: 33.33%;
}

.m-footer-links-title {
  margin-bottom: 10px;
  padding: 0 10px;
}

.m-footer-links-title {
  color: #222;
  font-weight: 500;
  font-size: 14px;
}

.m-link-ul.Language_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.m-link-li {
  margin-bottom: 5px;
  padding: 0 10px;
}

.m-footer-link-list .m-link-li a {
  color: #555 !important;
  white-space: nowrap;
  font-size: 14px;
}

/* link2 */
.link2 .container {
  color: #555;
  font-size: 14px;
  border-bottom: 1px solid #dae0e6;
  border-top: 1px solid #dae0e6;
  /* height: 30px; */
  /* line-height: 30px; */
  margin-bottom: -10px;
  border-color: #cacbcc;
  padding: 15px 20px;
}

.link2-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}

.link2-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.link2-item span {
  font-size: 14px;
}

.link2-item .content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.link2-item .app1 {
  margin-left: 0.2rem;
  background: #4d4d4d;
  color: #fff;
  border-radius: 5px;
  padding: 0 0.1rem;
}

.link2-item .app2 {
  margin-left: 0.2rem;
  background: #669900;
  color: #fff;
  border-radius: 5px;
  padding: 0 0.1rem;
}

.link2-item .icon {
  display: flex;
  gap: 0.1rem;
}

@media screen and (max-width: 768px) {
  .link2-items {
    grid-template-columns: 1fr;
  }

}

/* link3 */
.link3 .container {
  padding: 30px 0 40px;
  text-align: center;
  color: #666;
  font-size: 0;
}

.m-footer-simple-links-group {
  margin-bottom: 20px;
}

.m-footer-simple-links-row {
  margin-bottom: 5px;
}

.link3 a {
  color: #666;
  font-size: 12px;
  white-space: nowrap;
}

.m-gap-line {
  border-left: 1px solid #ccc;
  margin: 3px 10px 0 10px;
  display: inline-block;
  height: 12px;
  /* vertical-align: top; */
}

.m-footer-simple-links .m-gap-line {
  border-color: #4d4d4d;
}

.m-footer-simple-links-title {
  font-size: 12px;
}

/* product */
.product_nav .container {
  border: 1px solid #e6ecf2;
  margin-top: 20px;
  background-color: #fff;
  display: flex;
}

.product_nav .container .nav_left {
  position: relative;
  float: left;
  width: 358px;
  height: 393px;
  border-right: 1px solid #e6ecf2;
  padding: 30px 0;
}

.nav_left .title {
  padding: 0 30px 10px;
  font-size: 14px;
  font-weight: bold;
}

.nav_left_next .cate-items .cate-item {
  margin-left: 20px;
  padding: 0 30px 0 10px;
  padding: 20px 0;
  border-top: 1px solid #e6ecf2;
}





/* about */
.about_banner {
  position: relative;
  height: 925px;
}

.about_banner img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.about_banner .banner_text .title h1 {
  color: white;
  font-size: 0.5rem;
  text-align: center;
  position: relative;
  padding-top: 0.5rem;
  z-index: 999;
}

.about_banner .banner_text .desc p {
  color: white;
  font-size: 0.2rem;
  text-align: center;
  position: relative;
  padding-top: 0.5rem;
  z-index: 999;
}

.about_banner .banner_number {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  color: white;
  z-index: 999;
}

.about_banner .num {
  font-size: 32px;
  font-weight: 500;
  line-height: 38px;
  margin-bottom: 10px
}

.about_banner .sm-tip {
  font-size: 14px;
  line-height: 20px
}

.about_banner .item {
  flex: auto
}

.about_products {
  background: #f3f4f5;
  padding: 70px 0 80px 0;
}

.about_products .title h2 {
  font-size: 36px;
  line-height: 42px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

.about_products .desc p {
  font-size: 16px;
  line-height: 27px;
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.about_products .pds {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px
}

.about_products .pd-item {
  box-sizing: border-box;
  padding: 20px 0 0 20px;
  width: 33.3%
}

.about_products .pic {
  position: relative;
  font-size: 0
}

.about_products .pic img {
  width: 100%
}

.about_products .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s
}

.about_products .txts {
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.about_products .txt-item {
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  margin: 10px 0
}

.about_products .txt {
  line-height: 70px;
  padding: 0 60px 0 20px;
  font-size: 24px;
  color: #222;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  position: relative
}

.about_products .txt .ob-icon {
  position: absolute;
  top: 25px;
  right: 20px;
  color: #888;
  line-height: 70px;
  font-size: 16px
}

.about_products a {
  text-decoration: none;
  background: #fff;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  width: 100%
}

.about_products a:hover .mask {
  opacity: 1;
  visibility: visible
}

.abt-sp {
  padding: 70px 0 80px 0
}

.abt-sp .sp-item {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  margin-bottom: 20px;
  min-height: 380px
}

.abt-sp .sp-pic {
  font-size: 0
}

.abt-sp .sp-pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.abt-sp .sp-info {
  flex: 672;
  background: #f3f4f5
}

.abt-sp .sp-info .info-inr {
  box-sizing: border-box;
  padding: 70px 80px 70px 80px
}

.abt-sp .sp-pic {
  flex: 540;
  position: relative
}

.abt-sp .sp-pic .btn {
  position: absolute;
  bottom: 32px;
  border-radius: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 40px;
  height: 40px;
  white-space: nowrap;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4)
}

.abt-sp .title {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 42px
}

.abt-sp .desc {
  font-size: 16px;
  color: #555;
  line-height: 27px;
  margin-bottom: 10px
}

.abt-sp .link {
  font-size: 16px;
  line-height: 27px
}

.abt-sp .link a {
  text-decoration: none;
  display: inline-block;
  padding-right: 30px;
  background: url("https://www.micstatic.com/micen/img/about/abt-more-sm_3d630947.png?t=1") no-repeat right center;
  background-size: 23px 8px
}

.abt-sp .link a:hover {
  background: url("https://www.micstatic.com/micen/img/about/abt-more-sm-hover_dbcbacec.png?t=1") no-repeat right center;
  background-size: 23px 8px
}

.abt-sp .reversal .sp-pic {
  order: 1
}

.abt-sp .reversal .sp-info {
  order: 0
}

.abt-storie {
  background: #f3f4f5;
  padding: 70px 0 80px 0
}

.abt-storie .title {
  font-size: 36px;
  line-height: 42px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center
}

.abt-storie .desc {
  font-size: 16px;
  line-height: 27px;
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 20px;
  text-align: center
}

.abt-storie .review {
  text-align: center;
  margin-bottom: 30px
}

.abt-storie .review .btn {
  border-radius: 40px;
  line-height: 40px;
  height: 40px;
  padding: 0 40px;
  font-size: 16px
}

.abt-storie .content {
  display: flex;
}

.abt-storie .content .content_img {}


/* contact */
.contact_us .container .connect {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.5rem;
}

.contact_us .container .connect .item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.2rem;
  color: #555;
}

.contact_us .container .connect .item iconify-icon {
  font-size: 0.4rem;
  font-weight: 700;
}

.contact_us .container .form {
  display: flex;
  gap: 0.2rem;
}

.contact-form-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-form-container h2 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.contact-form-container p {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin-bottom: 30px;
}

.contact-form-container form label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}

.contact-form-container form input,
.contact-form-container form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.contact-form-container form textarea {
  height: 150px;
  resize: none;
}

.contact-form-container form button {
  width: 100%;
  padding: 12px;
  background-color: #e60000;
  /* 红色 */
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form-container form button:hover {
  background-color: #b30000;
  /* 深红色 */
}

.map {
  width: 50%;
  position: relative;
  overflow: hidden;
}

.map::before {
  content: "";
  display: block;
  padding-bottom: 38.125%;
}

.map iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contact_us .container .social_media {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  gap: 0.2rem;
  color: #555;
}

.contact_us .container .social_media .title {
  align-content: center;
}

.contact_us .container .social_media .icon {
  display: flex;
  gap: 0.1rem;
  font-size: 0.2rem;
}


/* FAQ */
.in_faq {
  padding: 70px 0 80px 0;
}

.in_faq .in_title {
  font-size: 36px;
  line-height: 42px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

.in_faq .in_desc {
  font-size: 16px;
  line-height: 27px;
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 20px;
  text-align: center;
}

.in_faq .in_faq_list {
  color: #555;
  border: 1px solid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
}

.in_faq .in_faq_list .in_faq_item {
  padding: 0.2rem 0.1rem;
  text-align: center;
  border: 1px solid;
}

.main_faq .container .accordion {
  margin-bottom: 0.8rem;
}

.main_faq .container .accordion__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main_faq .container .accordion__item {
  margin-top: 0.25rem;
  border-radius: 6px;
  box-shadow: 1px 1px 2px 1px rgba(39, 39, 39, .1);
}

.accordion__button {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.25rem;
  width: 100%;
  text-align: left;
  font-family: Raleway-SemiBold, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  position: relative
}

.accordion__button,
.accordion__button:after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.accordion__button:after {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  font-family: icomoon;
  content: "\2B9F";
  color: #fb5863;
  font-size: 0.18rem
}

.accordion__button.focus,
.accordion__button:focus,
.accordion__button:hover {
  background-color: hsla(0, 0%, 39.2%, .05)
}

.accordion__checkbox:checked~label .accordion__button:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90def)
}

.accordion__checkbox:checked~label .accordion__button.focus,
.accordion__checkbox:checked~label .accordion__button:focus,
.accordion__checkbox:checked~label .accordion__button:hover {
  background-color: unset
}

.accordion__checkbox:checked~.accordion__text {
  max-height: 600px;
  padding: 0.25rem
}

.accordion__text {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  padding: 0 0.25rem
}

.accordion__text p {
  font-family: NunitoSans-Light, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important
}


/* products */
.in_p_r {
  margin-top: 0.5rem;
}

.in_c_name {
  text-align: center;
}

.in_c_name h6 {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
  text-transform: capitalize;
}

.in_c_name p {
  margin: 0.2rem 0 0.3rem;
  font-size: 0.16rem;
  color: #666;
  line-height: 170%;
}

@media screen and (max-width: 1440px) {
  .in_c_name h6 {
    font-size: 0.28rem;
  }

  .in_c_name p {
    margin: 0.14rem 0 0.2rem;
  }
}

@media screen and (max-width: 1024px) {
  .in_c_name h6 {
    font-size: 0.22rem;
  }

  .in_c_name p {
    margin: 0.1rem 0 0.14rem;
  }
}

.in_p_r {
  margin-left: auto;
  width: 100%;
}

.in_p_r a {
  position: relative;
}

.in_p_list {
  /* display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  gap: 0.2rem; */
  display: grid;
  gap: 0.2rem;
  grid-template-columns: repeat(6, 1fr);
}

.in_p_list li {
  width: 100%;
  background: var(--bc_color);
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .in_p_list li {
    width: calc((100% - 0.2rem) / 2);
  }
}

@media screen and (max-width: 560px) {
  .in_p_list li {
    width: 100%;
  }
}

.in_p_list .img {
  position: relative;
  overflow: hidden;
}

.in_p_list .img::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.in_p_list .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.in_p_list .more {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  background: var(--bc_color);
  padding: 0.1rem 0;
  border: none;
  border-radius: 0;
}

.in_p_list .more span {
  display: block;
  width: 50%;
  border-right: 1px solid #999;
  text-align: center;
  color: #333;
}

.in_p_list .more span:last-child {
  border: none;
}

.in_p_list .more iconify-icon {
  font-size: 0.2rem;
}

.in_p_list p {
  font-size: 0.16rem;
  font-weight: bold;
  color: var(--i_color);
}

.in_p_list b {
  font-size: 0.16rem;
  color: var(--i_color);
  text-decoration: underline;
  font-weight: normal;
  background: var(--bc_color);
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}

.in_p_list h6 {
  font-size: 0.18rem;
  color: #222;
  text-transform: capitalize;
  margin: 0.1rem 0;
}

.in_p_list .more,
.in_p_list b {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.in_p_list .more {
  transition-delay: 0.1s;
}

.in_p_list li:hover .more,
.in_p_list li:hover b {
  transform: translateY(0);
}

.in_p_list h6:hover,
.in_p_list span:hover {
  color: var(--i_color2);
}

@media screen and (max-width: 1024px) {
  .in_p_r {
    width: 100%;
    margin: 0 0;
  }
}

@media screen and (max-width: 560px) {
  .in_p_list h6 {
    font-size: 16px;
  }

  .in_p_list p {
    font-size: 14px;
  }
}

/* Number of pages */
.in_page_box {
  margin: 0.3rem 0;
  text-align: center;
  overflow: hidden;
}

.in_page {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.in_page li {
  min-width: 0.32rem;
  margin: 0 0.04rem;
}

.in_page a,
.in_page span {
  display: block;
  padding: 0 0.12rem;
  line-height: 0.32rem;
  font-size: 0.14rem;
  color: #666;
  background: #fff;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border_color);
  overflow: hidden;
}

.in_page>i {
  margin-top: 0.14rem;
  width: 100%;
  font-size: 0.13rem;
  color: #888;
}

.in_page a:hover,
.in_page .active_page a,
.in_page .active_page span {
  border-color: var(--i_color) !important;
  background: var(--i_color);
  color: #fff !important;
}

@media screen and (max-width: 1024px) {
  .in_page_box {
    margin-top: 0.4rem;
  }
}

@media screen and (max-width: 768px) {
  .in_page li {
    min-width: 0.28rem;
  }

  .in_page a,
  .in_page span {
    line-height: 0.28rem;
    padding: 0 0.1rem;
  }
}

@media screen and (max-width: 560px) {
  .in_page_box {
    margin-top: 0.3rem;
  }
}


/* single-product */
.pd_content {
  margin-bottom: 0.5rem;
}

.pd_content .wrap {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
  position: relative;
  z-index: 2;
  gap: 0.4rem;
}

.pd_brief {
  /* flex-grow: 1; */
  width: 55%;
  overflow: hidden;
  padding: 24px;
  min-height: 389px;
  font-size: 12px;
}

.pd_content .gallery {
  width: 40%;
  border-radius: 0.1rem;
  position: relative;
  overflow: hidden;
  padding: 24px 24px 20px;
  border: 1px solid #e9e9e9;
}

.pd_content h1 {
  font-size: 0.24rem;
  color: #555;
  margin-bottom: 0.2rem;
}

@media screen and (max-width: 1440px) {
  .pd_content h1 {
    font-size: 0.24rem;
  }
}

@media screen and (max-width: 1150px) {
  .pd_content h1 {
    font-size: 0.2rem;
  }

  .pd_brief {
    width: 100%;
  }

  .pd_content .gallery {
    display: none;
  }
}


.p_atlas_show {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.p_atlas_show .swiper-wrapper {
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
}

.p_atlas_show .swiper-slide {
  flex-shrink: 0;
  position: relative;
}

.p_atlas_show .swiper-slide .img {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 24px 24px 20px;
  border-right: 1px solid #e9e9e9;
}

.p_atlas_show .swiper-slide .img::before {
  content: "";
  display: block;
  padding-bottom: 80.45%;
}

.p_atlas_show .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p_atlas_list {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0.1rem 0;
}

.p_atlas_list .swiper-wrapper {
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
}

.p_atlas_list .swiper-slide {
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.p_atlas_list .swiper-slide::before {
  content: "";
  display: block;
  padding-bottom: 80.45%;
}

.p_atlas_list .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.1rem;
}

.p_atlas_list .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p_atlas_list .swiper-slide-thumb-active .img {
  border: 1px solid var(--i_color);
}

.atlas-prev,
.atlas-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  font-size: 0.2rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: 1px solid var(--i_color);
  color: var(--i_color);
}

.atlas-prev {
  left: 0;
}

.atlas-next {
  right: 0;
}

.i_project_list .swiper-button-disabled {
  cursor: not-allowed;
}

.atlas-prev:hover,
.atlas-next:hover {
  background: var(--i_color);
  color: #fff;
}

.atlas-pagination {
  text-align: center;
  margin-top: 0.2rem;
  display: none;
}

.atlas-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 8px;
  background: #cbcbcb;
  outline: none;
  cursor: pointer;
  position: relative;
}

.atlas-pagination .swiper-pagination-bullet::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: none;
  border: 2px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.atlas-pagination .swiper-pagination-bullet-active {
  background: var(--i_color);
}

.atlas-pagination .swiper-pagination-bullet-active::after {
  width: 200%;
  height: 200%;
  border-color: var(--i_color);
}

.pd_brief .txt {
  font-size: 0.16rem;
  color: #333;
  line-height: 150%;
}

.pd_brief .tit span {
  font-size: 12px;
  color: #333;
  margin-bottom: 0.2rem;
}



.pd_brief .but {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.pd_share {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem;
}

.pd_share p {
  font-size: 0.18rem;
  color: #333;
  font-family: "bold";
  margin-right: 0.15rem;
}

.pd_share {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}

.pd_share_dl {
  display: flex;
  gap: 0.3rem;
}

.pd_share_dl dt a {
  display: block;
  width: 100%;
}

.price-box {
  margin: 22px 0;
  width: 629px;
  margin-left: -24px;
  background-color: #fff2e1;
  border-top: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9
}

.price-box .ladder .clearfix {
  display: flex;
  justify-content: space-around;
}

.price-box .ladder li {
  position: relative;
  /* float: left; */
  width: 20%;
  color: #666;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

.price-box .ladder li strong {
  display: inline-block;
  padding-top: 12px;
  font-size: 14px;
  color: #333
}

/* .price-box .ladder li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 2px;
  border-right: 1px solid #f1d6b4
} */

.price-box .ladder li:last-child::after {
  display: none
}

.price-box .base {
  padding-left: 24px;
  color: #999
}

.price-box .base strong {
  display: inline-block;
  padding: 12px 0;
  font-size: 14px;
  color: #333
}

.price-box .base-price {
  padding-right: 16px;
  border-right: 1px solid #f1d6b4
}

.prop-box {
  line-height: 26px;
  color: #333;
}

.prop-box ul li {
  font-size: 12px;
  margin-bottom: 10px;
}

.prop-name {
  color: #666;
  display: inline-block;
  font-size: 12px;
  min-width: 90px
}

.payment-item {
  line-height: 13px;
  margin-right: 16px
}

.payment-item img {
  vertical-align: middle;
  margin-top: -2px
}

.btn-box {
  margin-bottom: 0.25rem;
}

.btn-box a span {
  display: inline-block;
  width: 180px;
  background-color: #0084cb;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px;
}

.props-box ul li {
  margin-bottom: 10px;
  font-size: 12px;
}

.pd_content .wrap .desc {
  /* width: 300px; */
  padding: 24px 24px 20px;
  border: 1px solid #e9e9e9;
}

.pd_content .wrap .desc article,
.pd_content .wrap .desc_all article {
  white-space: normal;
  /* 确保文本换行 */
  word-wrap: break-word;
  /* 长单词换行 */
  word-break: break-word;
  /* 强制单词换行 */
}

.pd_content .wrap .desc_all {
  width: 100%;
  padding: 24px 24px 20px;
  border: 1px solid #e9e9e9;
  display: none;
}

@media screen and (max-width: 1440px) {
  .pd_content .wrap .desc {
    display: none;
  }

  .pd_content .wrap .desc_all {
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .price-box .ladder .clearfix {
    flex-direction: column;
  }

}



/* detial */
.detial .container {
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 24px;
}


/* disclaimer */
.product-prop-ft {
  padding: 24px;
  background-color: #fafafa;
  line-height: 1.5;
  font-size: 14px;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9
}

/* related products */
.relate_p .wrap {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 24px;
}

.r_p {
  overflow: hidden;
}

.r_p .swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0.1rem 0;
  z-index: 1;
}

.r_p .swiper-wrapper {
  display: flex;
  position: relative;
  width: 100%;
  z-index: 1;
}

.r_p .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.r_p-button-prev,
.r_p-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.44rem;
  height: 0.44rem;
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background: var(--i_color);
  z-index: 10;
  font-size: 20px;
  color: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.r_p-button-prev {
  left: 0;
}

.r_p-button-next {
  right: 0;
}

.r_p-button-prev:hover,
.r_p-button-next:hover {
  background-color: #fff;
  color: var(--i_color);
}

.r_p-pagination {
  text-align: center;
  margin-top: 20px;
}

.r_p-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin: 0 8px;
  background: #666;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}

.r_p-pagination .swiper-pagination-bullet::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--i_color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
}

.r_p-pagination .swiper-pagination-bullet-active {
  background: var(--i_color);
}

.r_p-pagination .swiper-pagination-bullet-active::after {
  width: 18px;
  height: 18px;
  opacity: 1;
}