@charset "utf-8";
/* CSS Document */
.banner{ width: 100%; background: url(../images/yunku/bg.jpg)no-repeat center top; background-size: 100% 100%; padding: 206px 0 200px;}
.banner .banner_content{ width: 80%; display: flex; align-items: center; margin: 0 auto; justify-content: space-evenly;}
.banner .banner_content .text{ width: 40%;}
.banner .banner_content .text h1 .bb{ font-size: 18px; color: #fff; background: #3363ff; border-radius: 15px 15px 15px 0; position: absolute; top: 0px; right: -100px; display: block; width: 85px; height: 30px; line-height: 30px; text-align: center;}
.banner .banner_content .img{width: 50%;}
.banner .banner_content .img img{width: 100%;}
.banner .banner_content .text h1{ font-size: 54px; color: #000207; font-weight: bold; margin-bottom: 40px; position: relative; display: inline-block;}
.banner .banner_content .text ul{ display: flex;flex-direction: row; flex-wrap: wrap;}
.banner .banner_content .text ul li{ font-size: 22px; margin-right: 50px; margin-bottom: 15px;}
.banner .banner_content .text ul li i{ width: 22px; height: 22px; display: inline-block; background: url(../images/yunku/circle.png); background-size: 100% 100%; font-size: 0; vertical-align: middle; margin-right: 14px;}
.banner .banner_content .text a{ width: 180px; height: 55px; display: block; background: #3363ff; font-size: 18px; color: #fff; text-align: center; line-height: 55px; border-radius: 55px; margin-top: 50px;}
.banner .banner_content .text a i{ width: 18px; height: 18px; background: url(../images/yunku/call.png); background-size: 100% 100%; display: inline-block; font-size: 0; vertical-align: middle; margin-right: 20px;}

.content1{ width: 100%; background: url(../images/yunku/bg2.jpg);background-size: 100% 100%; padding: 100px 0;}
.content1 .content1_box{ width: 80%; margin:  0 auto;}
.content1 .content1_box h1{font-size: 36px; font-weight: bold; color: #fff; padding: 0px 0 50px; text-align: center;}
.content1 .content1_box ul{ display: flex; justify-content: space-between;;}
.content1 .content1_box ul li{ width: calc(25% - 30px); position: relative; display: flex; align-items: center;}
.content1 .content1_box ul li img{width: 100%; border-radius: 12px;}
.content1 .content1_box ul li h2{ font-size: 28px; font-weight: bold; color: #fff; position: absolute; left: 15%;}



.content2{ width: 100%;  padding: 100px 0;}
.content2 .content2_box{ width: 80%; margin:  0 auto;}
.content2 .content2_box h1{font-size: 36px; font-weight: bold; color: #000; padding: 0px 0 50px; text-align: center;}
.content2 .content2_box ul{ display: flex; justify-content: space-between;;}
.content2 .content2_box ul li{ width: calc(25% - 10px);  padding: 20px;}
.content2 .content2_box ul li img{width: 100%; }
.content2 .content2_box ul li p{ font-size: 20px; color: #000; text-align: left; line-height: 30px; padding: 20px; text-align: justify;}


.content3{  background: url(../images/yunku/bg3.jpg);}

.swiper2{  background: #e8edf5; position: relative; width: 100%;}
 
.mySwiper3{ background: #e8edf5; position: absolute; top: 0;  width: 100%; margin-top: 0;}
.mySwiper3 .scroll_btn{ height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; }
.mySwiper3 .scroll_btn p{ font-size: 18px; color: #000; text-align: center; width: 100%;border-right: none;border-left: none;}
.mySwiper3 .scroll_btn1 p{   width: calc(100% - 1px); border-left:1px solid #c5ccd7;}
.mySwiper2 .swiper-slide{ }
.mySwiper3 .swiper-slide{ }

.mySwiper2{   position: absolute; top: 0px; left: 0; background:#fff; margin-top: 0; }
.mySwiper2 .swiper-wrapper1 .swiper-slide{ width: 100%;padding: 80px 0;}
.mySwiper2 .swiper-wrapper1 .produce_text{ margin: 0 auto; display: flex; align-items: center; justify-content: space-evenly; text-align: left;   width:calc(100% - 200px);}
.mySwiper2 .swiper-slide .produce_text div h2{font-size: 30px; font-weight: bold; margin-bottom: 20px;}
.mySwiper2 .swiper-slide .produce_text .text{width: 500px;}
.mySwiper2 .swiper-slide .produce_text div p{ font-size: 16px; line-height: 32px;}
.mySwiper2 .swiper-slide .produce_text img{height: 300px;}

.mySwiper3 .swiper-slide-thumb-active .scroll_btn { background: #fff;border-top: 4px #618aff solid; }
  .mySwiper3 .swiper-slide-thumb-active .scroll_btn1 p{ font-weight: bold; color: #618aff;border-right: none; border-left: none;}

  .mySwiper3 .swiper-slide-thumb-active .scroll_btn p{ font-weight: bold; color: #618aff;border-right: none; border-left: none;}




  .mySwiper5{ background: #ebecee; position: absolute; top: 0;  width: 100%; margin-top: 0;}
  .mySwiper5 .scroll_btn{ height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; }
  .mySwiper5 .scroll_btn p{ font-size: 18px; color: #000; text-align: center; width: 100%;border-right: none;border-left: none;}
  .mySwiper5 .scroll_btn1 p{   width: calc(100% - 1px); border-left:1px solid #d3c9bf;}
  .mySwiper2 .swiper-slide{ }
  .mySwiper3 .swiper-slide{ }
  
  .mySwiper4{   position: absolute; top: 0px; left: 0; background:#fff; margin-top: 0; }
  .mySwiper4 .swiper-wrapper1 .swiper-slide{ width: 100%;padding: 80px 0;}
  .mySwiper4 .swiper-wrapper1 .produce_text{ margin: 0 auto; display: flex; align-items: center; justify-content: space-evenly; text-align: left;   width:calc(100% - 200px);}
  .mySwiper4 .swiper-slide .produce_text div h2{font-size: 30px; font-weight: bold; margin-bottom: 20px;}
  .mySwiper4 .swiper-slide .produce_text .text{width: 600px;}
  .mySwiper4 .swiper-slide .produce_text div p{ font-size: 16px; line-height: 32px;}
  .mySwiper4 .swiper-slide .produce_text img{height: 300px;}
  
  .mySwiper5 .swiper-slide-thumb-active .scroll_btn { background: #fff;border-top: 4px #ef8402 solid; }
    .mySwiper5 .swiper-slide-thumb-active .scroll_btn1 p{ font-weight: bold; color: #ef8402;border-right: none; border-left: none;}
  
    .mySwiper5 .swiper-slide-thumb-active .scroll_btn p{ font-weight: bold; color: #ef8402;border-right: none; border-left: none;}

    .mySwiper4 .swiper-slide .produce_text ul{ display: flex; flex-wrap: wrap; width: 100%;}

    .mySwiper4 .swiper-slide .produce_text ul li i{ width: 16px; height: 16px; display: inline-block; background: url(../images/yunku/circle.png); background-size: 100% 100%; font-size: 0; vertical-align: middle; margin-right: 14px;}
    .mySwiper4 .swiper-slide .produce_text ul li{ width: 40%; font-size: 16px;}

    .content2 .content2_box .btn4{ width: 200px; height: 55px;border-radius: 55px; line-height: 55px; text-align: center; background: #ef8402; color: #fff; font-size: 18px; display: block; margin: 0 auto; margin-top: 50px;}









    .content4{ width: 100%; background: #3363ff;}
    .content4 .content4_box{ width: calc(100% - 50px); margin-left: 50px; background: #fff;}

    .content4 .content4_box .swiper .swiper-slide{ display: flex; align-items: center; justify-content: space-between;}
    .content4 .content4_box .swiper .swiper-slide .text{ width: 26%;  padding: 50px 10%;}
    .content4 .content4_box .swiper .swiper-slide img{ width: 54%;}
    .content4 .content4_box .swiper .swiper-slide .text h1{ font-size: 36px; font-weight: bold; padding-bottom: 30px;}
    .content4 .content4_box .swiper .swiper-slide .text p{ font-size: 16px; line-height: 24px;}
    .swiper-pagination-bullet{ width: 19px!important; height: 3px!important; border-radius: 0px!important; background: #dfe8ff!important; ;opacity: 1!important;}
    .swiper-pagination-bullet-active{ background: #618aff!important; width: 38px!important;}
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ width: 26%!important; left: 10%!important; bottom: 50px!important;}
    .swiper-pagination{ text-align: left!important;}





    .content5 .content2_box ul{ flex-wrap: wrap;}
    .content5 .content2_box ul li{ width: calc(25% - 30px); box-sizing: content-box; padding: 0;}
    .content5 .content2_box ul li img{ width: 100%; border-radius: 14px;}
.content5 .content2_box li p i{ width: 16px; height: 16px; display: inline-block; background: url(../images/yunku/circle.png); background-size: 100% 100%; font-size: 0; vertical-align: middle; margin-right: 14px;}


.content6{ background: #2a69f7; width: 100%; padding: 50px 0;}
.content6 .content6_box{  width: 80%; margin:  0 auto; display: flex; align-items: center; justify-content: space-between;}
.content6 .content6_box h1{ font-size: 36px; color: #fff; font-weight: bold; width: 25%;}
.content6 .content6_box ul{ display: flex; width: 75%;}
.content6 .content6_box ul li{ width: calc(33.3% - 1px); border-left: 1px solid #5587f9; display: flex; justify-content: center; align-items: center;}
.content6 .content6_box ul li img{ margin-right: 20px; width: 36px; height: auto;}
.content6 .content6_box ul li h3{ font-size: 18px;font-weight: bold; color: #fff;}
.content6 .content6_box ul li p{font-size: 18px; font-weight: normal; color: #fff;}

.table-container {
  overflow-y: auto;
  max-height: 560px;
  position: relative;
  width: 80%;
  margin: 0 auto;
  border-radius: 10px; 
  overflow-x: hidden;
}
.list{ width: 100%; /* 原60%导致问题 */
  min-width: 800px; /* 防止小屏幕挤压 */ border-collapse:collapse ; border-radius: 10px;  }
.list thead {
  position: sticky;
  top: 0;
  z-index: 100; /* 提高层级 */
}
.list tbody{ }
.list tbody tr{ }
.list tr th{ border: 1px solid#fff;}
.list tr td{ border: 1px solid#fff;}
.list tr td p{ text-align: center; height: 44px; line-height: 44px;}
.list tr th p{ text-align: center; height: 60px; line-height: 60px;}
.t_bg1{ background: #dadfe2;}
.t_bg2{ background: #f5f7f8;}
.t_title {
  background: linear-gradient(to right, #1a1a1a, #2d2d2d);
  color: white;
}

        
        /* 滚动条样式 */
        .table-container::-webkit-scrollbar {
          width: 8px;
          height: 8px;
      }
      
      .table-container::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 10px;
      }
      
      .table-container::-webkit-scrollbar-thumb {
          background: #696969;
          border-radius: 10px;
      }
      









@media(max-width:1660px){
  .banner .banner_content .text{ width: 50%;}
  .content1 .content1_box ul li h2{ font-size: 22px;}
}
@media(max-width:1366px){
  .content1 .content1_box ul li h2{ font-size: 18px;}
}
@media(max-width:960px)
{ 
  .banner .banner_content { flex-direction: column;}
  .banner .banner_content .text{ width: 100%;}
  .banner .banner_content .img{width: 100%; margin-top: 40px;}
  .banner{ padding: 100px 0 50px;}
  .banner .banner_content .text h1{ font-size: 36px;}
  .banner .banner_content .text ul li{ font-size: 14px;}
  .banner .banner_content .text ul li i{ width: 14px; height: 14px;}
  .content1,.content2 { padding: 50px 0;}
  .content1 .content1_box{ width: calc(100% - 30px);}
  .content1 .content1_box h1{ font-size: 18px; padding: 0 0 20px;}
  .content1 .content1_box ul{ flex-wrap: wrap; justify-content: space-between;}
  .content1 .content1_box ul li{width: calc(50% - 10px); margin-bottom: 20px;}
  .content1 .content1_box ul li h2{ font-size: 14px;}
  .content2 .content2_box{  width: calc(100% - 30px);}
  .content2 .content2_box h1{ font-size: 18px; padding: 0 0 20px; }
  .content2 .content2_box ul { flex-wrap: wrap; justify-content: space-between;}
  .content2 .content2_box ul li{width: calc(50% - 10px); margin-bottom: 20px; padding: 0;}
  .content2 .content2_box ul li p{ font-size: 14px; padding: 10px; line-height: 20px;}
  .mySwiper3 .scroll_btn p{ font-size: 12px; padding: 10px; box-sizing: border-box;}
  .mySwiper2 .swiper-wrapper1 .produce_text{ width: calc(100% - 30px); flex-direction: column;}
  .mySwiper2 .swiper-slide .produce_text div p{ font-size: 12px;}
  .mySwiper2 .swiper-slide .produce_text .text{ width: 100%;}
  .mySwiper2 .swiper-slide .produce_text img{ width: 100%; height: auto;}
  .mySwiper2 .swiper-wrapper1 .swiper-slide{ padding: 30px 0 0;}
  .mySwiper5 .scroll_btn p{ font-size: 12px; padding: 10px; box-sizing: border-box;}
  .mySwiper4 .swiper-wrapper1 .produce_text{width: calc(100% - 30px); flex-direction: column;}
  .mySwiper4 .swiper-slide .produce_text .text{ width: 100%;}
  .mySwiper5 .swiper-slide-thumb-active .scroll_btn p{ font-size: 12px;}
  .mySwiper4 .swiper-slide .produce_text ul li{ width: calc(50% - 10px); font-size: 12px;}
  .mySwiper4 .swiper-slide .produce_text img{ width: 100%; height: auto;}
  .mySwiper4 .swiper-wrapper1 .swiper-slide{ padding: 30px  0 0;}
  .mySwiper4 .swiper-slide .produce_text ul li i{ width: 12px; height: 12px; margin-right: 8px;}
  .content4 .content4_box{ width: 100%; margin-left: 0px;}
  .content4 .content4_box .swiper .swiper-slide { flex-direction: column;}
  .content4 .content4_box .swiper .swiper-slide .text{ width: 100%; box-sizing: border-box;}
  .content4 .content4_box .swiper .swiper-slide .text h1{font-size: 18px;}
  .content4 .content4_box .swiper .swiper-slide img{ width: 100%;}
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ width: 100%!important; bottom: 10px!important; left: 0!important; align-items: center!important;}
  .content6 .content6_box{ width: calc(100% - 30px); flex-direction: column;}
  .content6 .content6_box h1{ width: 100%; font-size: 18px; text-align: center;}
  .content6 .content6_box ul{ width: 100%; align-items: flex-start;}
  .content6 .content6_box ul li{ flex-direction: column; justify-content: center; align-items: center; border-left: none; text-align: center;white-space: normal;}
  .content6 .content6_box ul li img{ padding: 10px; width: 18px; margin-right: 0;}
  .content6 .content6_box ul li h3{ font-size: 12px; text-align: center;}
  .content6 .content6_box ul li div{ width: 100%;}
  .content6 .content6_box ul li p{ font-size: 12px; text-align: center; width: 100%;white-space: normal;overflow-wrap: break-word;}
}