/* ********************** */
/* SWIPER SECTION */
/* ********************** */
.section-swiper {
  width: 100%;
  height: calc(100vw * 833 / 1920);
  position: absolute;
  top: 0;
}

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

.images {
  width: 400%;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: left 0.5s;
}

.img {
  width: 100%;
  background-size: cover;
  background-position: center;
  list-style: none;
}

.img:nth-child(1) {
  background-image: url("../img/home/001.jpg");
}
.img:nth-child(2) {
  background-image: url("../img/home/002.jpg");
}
.img:nth-child(3) {
  background-image: url("../img/home/003.jpg");
}
.img:nth-child(4) {
  background-image: url("../img/home/004.jpg");
}

.dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, calc(100vw * -36 / 1920));

  display: flex;
  gap: calc(100vw * 6 / 1920);
}

.dot {
  height: calc(100vw * 3 / 1920);
  width: calc(100vw * 39 / 1920);
  background-color: #fff;
  cursor: pointer;
  border: none;
}

.dot.dot--fill {
  background-color: #fa5559;
}

/* 
在所有现代浏览器下，链接元素<a>鼠标点击的时候是不会有焦点轮廓的，但是键盘访问的时候会出现，这是非常符合预期的体验。
但是在Chrome浏览器下，出现了一些特殊场景并不是这么表现的：

设置了背景的<button>按钮；
HTML5 <summary>元素；
设置了HTML tabindex属性的元素；
以上3个场景，在Chrome浏览器下鼠标点击的时候也会出现显眼的焦点轮廓，
*/
.btn {
  width: calc(100vw * 32 / 1920);
  height: calc(100vw * 35 / 1920);
  background-color: transparent;
  position: absolute;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  top: 50%;
}

.btn--left {
  left: 0;
  transform: translate(calc(100vw * 24 / 1920), -50%) rotate(180deg);
}

.btn--right {
  right: 0;
  transform: translate(calc(100vw * -24 / 1920), -50%);
}

/* ********************** */
/* INTRODUCTION SECTION */
/* ********************** */
.section-intro {
  width: 100%;
  padding-top: calc(100vw * 992 / 1920);
}

.intro-container {
  margin-top: calc(100vw * 42 / 1920);
  gap: calc(100vw * 42 / 1920);
}

.intro-box {
  width: calc(100vw * 855 / 1920);
    justify-content: space-between;
}

.intro-more {
  /*margin-bottom: calc(100vw * 52 / 1920);*/
}

.intro-more p {
  font-size: calc(100vw * 16 / 1920);
  line-height: calc(100vw * 26 / 1920);
  text-indent: calc(100vw * 32 / 1920);
}

.intro-more p a {
  color: #d80c18;
  display: inline-flex;
  /* flex会将元素变成block */
  /* display: flex; */
  align-items: center;
  text-indent: 0;
}

.intro-more p a i {
  font-size: calc(100vw * 20 / 1920);
}

.intro-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(100vw * 42 / 1920);
  align-items: center;
}

.intro-img {
  width: 100%;
}

.video-box {
  width: calc(100vw * 303 / 1920);
  height: calc(100vw * 360 / 1920);
  position: relative;
}

.video-box ion-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  cursor: pointer;
  font-size: calc(100vw * 60 / 1920);
  z-index: 99;
}

.video-box .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  cursor: pointer;
  width: calc(100vw * 64 / 1920);
  z-index: 99;
}

.video-title {
  position: absolute;
  width: 100%;
  height: calc(100vw * 33 / 1920);
  left: 0;
  bottom: 0;
  font-size: calc(100vw * 20 / 1920);
  color: #bfc0c2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 10;
}

.video-img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8));
}

.mask-video {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  left: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

.mask-video.active {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
}

:root {
  --video-left: 0;
  --video-top: 0;
  --img-width: calc(100vw * 334 / 1920 / 2);
  --container: calc(100vw * 1200 / 1920 / 2);
}

.video-container {
  position: absolute;
  width: 0;
  height: 0;
  left: var(--video-left);
  top: var(--video-top);
  transition: all 1s;
}

.video-container.active {
  transition-delay: 0.5s;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.video {
  width: 100%;
  /* 
  object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
  object-fit 一般用于 img 和 video 标签，
  fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
  */
  object-fit: fill;
}

.mask-video svg {
  position: absolute;
  stroke: #fff;
  cursor: pointer;
  width: calc(100vw * 72 / 1920);
  height: calc(100vw * 72 / 1920);
  right: calc(100vw * -96 / 1920);
  top: calc(100vw * -72 / 1920);
}

/* ********************** */
/* SUPPORT SECTION */
/* ********************** */
.section-support {
  width: 100%;
  margin-top: calc(100vw * 104 / 1920);
  position: relative;
}

.section-support::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100vw * 15 / 1920);
  background-color: #ececec;
  left: 0;
  top: calc(100vw * -47 / 1920);
}

.container-hidden {
  overflow: hidden;
  position: relative;
  height: calc(100vw * 256 / 1920);
}

.support-container-box {
  position: absolute;
  width: 300%;
  left: 0;
  transition: left 0.5s;
}

.support-container {
  margin-top: calc(100vw * 94 / 1920);
  gap: calc(100vw * 40 / 1920);
}

.support-container .info {
  width: 100%;
  gap: calc(100vw * 15 / 1920);
}

.support-container .info img {
  width: calc(100vw * 288 / 1920);
}

.support-container .info p {
  width: calc(100vw * 277 / 1920);
  font-size: calc(100vw * 14.5 / 1920);
  font-weight: 500;
}

.pagination-container {
  margin-top: calc(100vw * 104 / 1920);
  gap: calc(100vw * 12 / 1920);
}

.pagination-container div {
  width: calc(100vw * 13 / 1920);
  height: calc(100vw * 13 / 1920);
  background-color: #d2d2d2;
  border-radius: 50%;
  cursor: pointer;
}

.pagination-container div.active {
  background-color: #e50913;
}

/* ********************** */
/* HONOR SECTION */
/* ********************** */
.section-honor {
  margin-top: calc(100vw * 62 / 1920);
  background: linear-gradient(
      to right,
      rgba(170, 3, 3, 0.8),
      rgba(170, 3, 3, 1) 30% 70%,
      rgba(170, 3, 3, 0.8)
    ),
    url("../img/honor/jpg/底图.jpg");
  background-size: cover;
  padding-top: calc(100vw * 72 / 1920);
  padding-bottom: calc(100vw * 72 / 1920);
  position: relative;
  height: calc(100vw * 756 / 1920);
}

.section-honor::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100vw * 18 / 1920);
  background-color: #ececec;
  top: 0;
}

.section-honor .container-header h2,
.section-honor .container-header h3 {
  color: #fff;
}

/* .honor-container {
  margin-top: calc(100vw * 54 / 1920);
} */

.honor-container {
  margin-top: calc(100vw * 54 / 1920);
  height: calc(100vw * 473 / 1920);
  position: relative;
}

/* .honor-box {
  position: relative;
  height: calc(100vw * 473 / 1920);
} */

.honor-box {
  position: relative;
  display: flex;
}

/* .honor-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  transition: all 0.5s;

  opacity: 0;
} */

.honor-box .honor-item {
  position: absolute;
  left: calc(50% - var(--img-width));
  height: calc(100vw * 473 / 1920);
  transition: 1s;

  opacity: 0;
}

/* .honor-item.active {
  opacity: 1;
}

.honor-item.prev {
  opacity: 1;
  transform: translate(-189.297%, -50%) scale(0.8);
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
}

.honor-item.next {
  opacity: 1;
  transform: translate(89.297%, -50%) scale(0.8);
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
} */

.honor-box .honor-item:nth-child(1) {
  transform: translate(-229.641%, 0) scale(0.8);
  opacity: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
}

.honor-box .honor-item:nth-child(2) {
  transform: translate(-139.297%, 0) scale(0.8);
  opacity: 1;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
}

.honor-box .honor-item:nth-child(3) {
  opacity: 1;
}

.honor-box .honor-item:nth-child(4) {
  transform: translate(139.297%, 0) scale(0.8);
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
  opacity: 1;
}

.honor-box .honor-item:nth-child(5) {
  transform: translate(229.641%, 0) scale(0.8);
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1)
  );
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1));
  opacity: 0;
}

/* .honor-box .button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * 471 / 1920);
  z-index: 99;
} */

.honor-container .button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * 471 / 1920);
  z-index: 99;
}

.button-container img {
  width: calc(100vw * 19 / 1920);
  cursor: pointer;
  opacity: 0.5;
}

.button-container .honor-btn-left {
  transform: rotate(180deg);
  float: left;
}

.button-container .honor-btn-right {
  float: right;
}

/* ********************** */
/* CUSTOMER SECTION */
/* ********************** */
.section-customer {
  margin-top: calc(100vw * 62 / 1920);
  margin-bottom: calc(100vw * 83 / 1920);
}

.partner-container {
  margin-top: calc(100vw * 62 / 1920);
  gap: calc(100vw * 61 / 1920);
  width: calc(100vw * 1261 / 1920);
}

.customer-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-title img {
  width: calc(100vw * 402 / 1920);
}

.customer-box {
  grid-template-columns: repeat(8, 1fr);
  row-gap: calc(100vw * 28 / 1920);
  column-gap: calc(100vw * 125 / 7 / 1920);
}

.customer-item {
  width: calc(100vw * 142 / 1920);
  height: calc(100vw * 184 / 1920);
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 27 / 1920);
  justify-content: space-between;
  text-align: center;
  padding-top: calc(100vw * 26 / 1920);
  padding-bottom: calc(100vw * 26 / 1920);
  padding-left: calc(100vw * 25 / 1920);
  padding-right: calc(100vw * 25 / 1920);

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), 0 -2px 5px rgba(0, 0, 0, 0.05),
    5px 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 400ms transform, 400ms box-shadow;
}

.img-height {
  width: 100%;
  height: calc(100vw * 83 / 1920);
  object-fit: contain;
}

.customer-name {
  width: 100%;
  font-size: calc(100vw * 22 / 1920);
  line-height: calc(100vw * 22 / 1920);
  font-weight: 500;
  color: #000;
}

.customer-item:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.china-partner-container-box {
    margin-top: calc(100vw * 98 / 1920);
    width: 100%;
    position: relative;
}

.china-partner-container-box::before {
    content: "";
    width: 100%;
    height: calc(100vw * 12 / 1920);
    position: absolute;
    background-color: #ececec;
    top: 0;
}

.china-partner-container {
    width: calc(100vw * 1260 / 1920);
}

#china-partner {
    width: calc(100vw * 1000 / 1920);
    height: calc(100vw * 800 / 1920);
}

.province {
    width: 100%;
    gap: calc(100vw * 98 / 1920);
}

.province-header-container {
    width: 100%;
}

.province-header {
    width: calc(100vw * 606 / 1920);
    gap: calc(100vw * 21 / 1920);
    position: relative;
}

.red-underline {
    position: absolute;
    background-color: #e20a17;
    width: calc(100vw * 84 / 1920);
    height: calc(100vw * 4 / 1920);
    bottom: 0;
    left: calc(100vw * 89 / 1920);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.red-underline.switch {
    left: calc(100vw * 445 / 1920);
}

.customer-distribution {
    width: calc(100vw * 536 / 1920);
    height: calc(100vw * 24 / 1920);
    gap: calc(100vw * 176 / 1920);
}

.distribution {
    font-size: calc(100vw * 24 / 1920);
    line-height: calc(10vw * 24 / 1920);
    color: #333333;
    cursor: pointer;
}

.gray-underline {
    width: 100%;
    height: calc(100vw * 4 / 1920);
    background-color: #dcdcdc;
}

.customer-province {
    width: 100%;
    grid-template-columns: repeat(12, 1fr);
    row-gap: calc(100vw * 32 / 1920);
    column-gap: calc(100vw * 36 / 1920);
}

.customer-province span {
    font-size: calc(100vw * 22 / 1920);
    line-height: calc(100vw * 22 / 1920);
    /* text-align: center; */
}

.customer-province .span {
    grid-column: auto / span 2;
}

.customer-province.hidden{
    display: none;
}

/* ********************** */
/* FOOTER */
/* ********************** */
address {
  font-style: normal !important;
}

.footer {
  background-color: #f4f4f4;
}

.footer-container {
  padding-top: calc(100vw * 84 / 1920);
  padding-bottom: calc(100vw * 20 / 1920);
  padding-left: calc(100vw * 60 / 1920);
  padding-right: calc(100vw * 60 / 1920);
  gap: calc(100vw * 90 / 1920);
  width: calc(100vw * 1000 / 1920)
}

.footer-top {
  gap: calc(100vw * 56 / 1920);
  grid-template-columns: 1fr 1fr 1fr;
}

.footer-header {
  margin-bottom: calc(100vw * 26 / 1920);
  color: #000;
  display: flex;
  align-items: center;
  gap: calc(100vw * 10 / 1920);
}

.bx.bxs-square {
  width: calc(100vw * 20 / 1920);
  height: calc(100vw * 20 / 1920);
  font-size: calc(100vw * 5 / 1920);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-title {
  font-size: calc(100vw * 15 / 1920);
  line-height: calc(100vw * 15 / 1920);
  font-weight: 500;
}

.footer-address {
  margin-bottom: calc(100vw * 19 / 1920);
  color: #555;
  display: flex;
  align-items: center;
  gap: calc(100vw * 10 / 1920);
}

.address-svg {
  width: calc(100vw * 20 / 1920);
  height: calc(100vw * 20 / 1920);
}

.address-title {
  font-size: calc(100vw * 13 / 1920);
  line-height: calc(100vw * 13 / 1920);
  font-weight: 300;
}

.telephone {
  margin-bottom: calc(100vw * 10 / 1920);
  color: #555;
  display: flex;
  align-items: center;
  gap: calc(100vw * 10 / 1920);
}

.bx.bxs-phone {
  width: calc(100vw * 20 / 1920);
  height: calc(100vw * 20 / 1920);
  font-size: calc(100vw * 20 / 1920);
}

.footer-link:link,
.footer-link:visited {
  color: #555;
  text-decoration: none;
  font-size: calc(100vw * 13 / 1920);
  line-height: calc(100vw * 13 / 1920);
  font-weight: 300;
  display: inline-block;
}

.telephone:last-child {
  margin-bottom: 0;
}

.record {
  text-align: center;
  font-size: calc(100vw * 12 / 1920);
  line-height: calc(100vw * 12 / 1920);
  color: #555;
}

.record a:link,
.record a:visited {
  color: #555;
}