@import "init.css";

/*首页banner*/
.indexbanner {
   width: 100%;
   height: auto;
   max-height: 1000px;
   overflow: hidden;
   margin-bottom: 140px;
}

.indexbanner .swiper-container .swiper-slide img {
   width: 100%;
   height: auto;
   object-fit: cover;
}
.swiper-scrollbar{
   display: none;
}

/* 让 swiper-pagination 在右侧垂直排列 */
.swiper1 .swiper-pagination {
   position: absolute !important;
   top: 0 !important;
   right: 10px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   height: 100% !important;
   z-index: 10 !important;
}

/* 强制分页器圆圈样式 */
.swiper1 .swiper-pagination-bullet {
   width: 37px !important;
   height: 37px !important;
   border-radius: 50% !important;
   background-color: transparent !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   font-size: 12px !important;
   color: #fff !important;
   --swiper-pagination-bullet-inactive-opacity: 0.4 !important;
   margin: 50% 0 !important;
   position: relative;
}

.swiper1 .swiper-horizontal>.swiper-pagination-bullets,
.swiper1 .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper1 .swiper-pagination-custom,
.swiper1 .swiper-pagination-fraction {
   bottom: auto !important;
   left: auto !important;
   right: 5% !important;
   top: 0 !important;
   width: auto !important;
}

/* 选中的分页器样式 */
.swiper1 .swiper-pagination-bullet-active {
   color: #fff !important;
   background-color: transparent;
}

/* 转圈动画 */ 
 .swiper1 .swiper-pagination-bullet svg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform: rotate(-90deg); 
 }
 
 .swiper1 .swiper-pagination-bullet circle {
   fill: none;
   stroke-width: 2;
   stroke: #ccc;
 }
 
 .swiper1 .swiper-pagination-bullet .progress {
   stroke: #fff; 
   stroke-dasharray: 251.2; 
   stroke-dashoffset: 251.2;
   transition: stroke-dashoffset 10s linear;
 }


/*公司介绍*/
.container {
   padding-left: 10%;
   width: 100%;
   margin-bottom: 185px;
   overflow: hidden;
}

.company-container  {
   padding-left: 10%;
   width: 100%;
   margin-bottom: 9.5%;
   overflow: hidden;
}

.company-title {
   display: flex;
   align-items: center;
   padding: 40px 0 50px;
   border-top: 1px solid #fff;
   font-size: clamp(40px, 3vw, 50px);
   justify-content: space-between;
}

.main-title {
   display: flex;
   align-items: center;
   padding: 40px 0 100px;
   border-top: 1px solid #fff;
   font-size: 16px;
   justify-content: space-between;
}

.main-title .text1 {
   font-size: clamp(40px, 3vw, 50px);
   line-height: 1;
   margin-right: 14%;
}

.main-title .text2 {
   font-size: clamp(12px, 1vw, 14px);
   flex: 1;
   line-height: 1.5;

}

.main-title .text3 {
   font-size: 16px;
   margin-right: 10%;
}

.main-title .text3 .icon-uprightArrow {
   font-size: 12px;
   margin-left: 5px;
}

.underline {
   width: 100%;
   height: 1px;
   background-color: #fff;
   margin-top: 5px;
}

.company {
   display: flex;
   width: 100%;
   align-items: flex-start;
   justify-content: space-between;
}

.subtitle {
   font-size: 16px;
}

.leftpart {
   width: 34%;
}

.rightpart {
   width: 66%;
   padding: 0 10.5%;
}

.companyinfo {
   font-size: clamp(12px, 1vw, 16px);
   margin-top: 18%;
   line-height: 2;
   text-align: justify;
}

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

/* Swiper 控制按钮样式 */
.swiper-controls {
   display: flex;
   justify-content: space-between;
   margin-top: 20%;
   gap: 10px;
}

.swiper-btn {
   height: 34px;
   line-height: 34px;
   border-radius: 34px;
   background-color: #2c2726;
   padding: 0 3.5%;
   color: #fff;
   border: none;
   cursor: pointer;
   position: relative;
   text-align: center;
   font-size: clamp(12px, 1vw, 15px);
   transition: background-color 0.3s;
}

.swiper-btn span {
   display: inline-block;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.swiper-btn:hover {
   background-color: #bcb09d;
   color: #332d2b;
}

.swiper-btn.active {
   background-color: #bcb09d;
   color: #332d2b;
}

.swiper-btn i {
   display: none;
   position: absolute;
   top: -45px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 22px;
}

.swiper-btn.active i {
   display: block;
   color: #bcb09d;
   ;
}

.swiper2 .swiper-pagination {
   left: 43% !important;
}


/*产品*/
.swiper3 img,
.swiper4 img {
   aspect-ratio: 0.902;
}
/*
.swiper3 .swiper-slide,
.swiper4 .swiper-slide {
   cursor: url(/images/nextbtn.png),auto;
}*/

.image-wrap {
   position: relative;
   display: inline-block;
   border-radius: 10px;
   overflow: hidden;
   width:100%;
}

.image-wrap::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 4px solid #948885;
   border-radius: 10px;
   opacity: 0;
   transition: opacity 0.4s ease;
   pointer-events: none;
   box-sizing: border-box;
}

.image-wrap:hover::after {
   opacity: 1;
}

.image-wrap img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: 10px;   
   transition: all 0.5s;
}

.image-wrap img:hover {
   scale: 1.1;
}

.me-swiper-nextbutton {
   width: 102px !important;
   height: 102px !important;
   right: 20% !important;
   top: 34% !important;
   color: white !important;
   position: absolute;
   z-index: 10;
   cursor: pointer;
   background-image: url("../images/nextbtn.png");
}

.text-panel {
   margin-top: 33px;
}

.text-panel .more {
   display: flex;
   justify-content: space-between;
   margin-top: 12px;
}

.text-panel .text1 {
   font-size: clamp(16px, 1.5vw, 20px);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   line-height: 1.3;
}

.text-panel .text2 {
   font-size: clamp(10px, 1vw, 14px);
   max-width: 75%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

.text-panel .text3 {
   font-size: clamp(10px, 1vw, 14px);
   margin-right: 10px;
}

.text-panel .text3 .icon-uprightArrow {
   font-size: clamp(10px, 1vw, 12px);
}

.text-panel .more .underline {
   width: 100%;
   height: 1px;
   background-color: #948885;
   margin-top: 5px;
}

/*AD1*/
.ad1 {
   width: 100%;
   height: auto;
   margin-bottom: 187px;
   image-rendering: pixelated;
}

@media (max-width: 1440px) {
   .ad1 {
      image-rendering: auto;
   }
}

@media (max-width: 960px) {

   .swiper-scrollbar{
      display: block;
   }
   .container {
      padding-left: 6.4%;
      margin-bottom: 0.92rem;
   }

   .swiper1 .swiper-pagination {
      display: none !important;
   }

   .indexbanner {
      margin-bottom: 0.92rem;
      margin-top: 1.32rem;
   }


   .company {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
   }

   .company-title {
      font-size: 0.58rem;
      padding: 0.66rem 0 0.44rem;
  }
   .leftpart {
      width: 93.6%;
   }

   .companyinfo {
      font-size: 0.29rem;
      margin-top: 1rem;
      text-align: left;
   }

   .subtitle {
      font-size: 0.25rem;
  }

   .swiper-controls {
      margin-top: 1.09rem;
      justify-content: flex-start;
      flex-wrap: wrap;
   }

   .swiper-btn {
      font-size: 0.25rem;
  }

   .swiper-btn.active i {
      display: none;
   }

   .rightpart {
      width: 93.6%;
      padding: 0.56rem 0 0;
   }

   .main-title {
      flex-wrap: wrap;
      align-items: flex-end;
      padding: 0.66rem 0 1.1rem;
   }

   .main-title .text1 {
      width: 100%;
      margin-bottom: 0.73rem;
      font-size: 0.58rem;
   }

   .main-title .text2 {
      flex: 0 0 60%;
   }

   .main-title .text3 {
      font-size: 0.25rem;
      margin-right: 6.4%;
   }

   .main-title .text3 .icon-uprightArrow {
      font-size: 10px;
   }

   .text-panel {
      margin-top: 0.45rem;
  }

   .text-panel .text1 {
      font-size: 0.37rem;
  }
   .text-panel .text3 .icon-uprightArrow {
      font-size: 0.2rem;
   }

   .me-swiper-nextbutton {
      width: 1.45rem !important;
      height: 1.45rem !important;
      right: 5% !important;
      top: 34% !important;
      background-size: 1.45rem;
   }

   .ad1 {
      margin-bottom: 1.2rem;
   }

   .ad2 {
      padding-top: 0.3rem;

}
}