@charset "utf-8";
/* CSS Document */

.banner{ width: 100%; background: url(../images/Selectorol/bg.jpg)no-repeat center top; background-size: 100% 100%; margin-top: 66px; position: relative; height: 683px;}
.banner .text{ position: absolute; left: 10%; top: 200px; z-index: 3;}
.banner .text h1{ font-size: 48px; color: #fff; font-weight: bold;}
.banner .text .btn{ position: relative; margin-top: 60px;}
.banner .text .btn a{ font-size: 20px; color: #032d2f; background: #54f8ff; border-radius: 50px; padding: 15px 80px; font-weight: bold;}
.banner .text .btn .ewm{ display: none; position: absolute; left: 250px; width: 127.5px; height: auto; top: -15px;}
.banner .text .btn:hover .ewm{display: block;}
.banner .img{ position: absolute; bottom: 0; right: 5%; z-index: 2;}
.banner .img img{ height: 683px; width: auto;}

.content1{ width: 100%; background: #edf4fc; padding: 100px 0;}
.content{ width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.content .text{ width: 40%; margin: 0 5%;}
.content .text h2{ font-size: 36px; font-weight: bold;}
.content .text p{ font-size: 18px; line-height: 27px; padding-top: 38px;}
.content .content_img{ width: 40%; text-align: center;}
.content .content_img img{ width: 100%;}
.content2{ width: 100%; background: #fff; padding: 100px 0;}
.content2 h1{font-size: 36px; text-align: center; font-weight: bold; padding-bottom: 50px;}
.content2 .content .text h2{font-size: 30px;}


.swiper2{ position: relative; width: 80%; margin: 0 auto;}
 
.mySwiper3{ position: absolute; top: 0;  width: 60%; margin-top: 0 auto;}
.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: #676767; text-align: center; width: 100%;border-right: none;border-left: none;}
.mySwiper3 .swiper-slide-thumb-active .scroll_btn { border-bottom: 4px #618aff solid; }
  .mySwiper3 .swiper-slide-thumb-active .scroll_btn1 p{ font-weight: bold; color: #618aff; font-size: 24px;}

  .mySwiper3 .swiper-slide-thumb-active .scroll_btn p{ font-weight: bold; color: #618aff;font-size: 24px;}

  .mySwiper2{   position: absolute; top: 50px; left: 0; background: #edf4fc; border-radius: 20px; overflow: hidden; width: 80%;}
  .mySwiper2 .swiper-wrapper1 .swiper-slide{ width: 100%; }
  .mySwiper2 .swiper-wrapper1 .produce_text{ margin: 0 auto; display: flex; align-items: center; justify-content: space-between; text-align: left;  }
  .mySwiper2 .swiper-slide .produce_text .text{  height: 300px; display: flex; align-items: center; justify-content: center; padding: 50px; box-sizing: border-box;}
  .mySwiper2 .swiper-slide .produce_text div p{ font-size: 16px; line-height: 32px;}
  .mySwiper2 .swiper-slide .produce_text img{height: 300px; width:auto;}
  .fixed_ewm{ width: 120px; position: fixed; z-index: 999; right: 30px; bottom: 170px; background: #6696ff; border-radius: 6px; text-align: center; padding: 10px 0;}
  .fixed_ewm p{ font-size: 12px; color: #fff; padding-bottom: 10px;}
  .fixed_ewm img{ width: 100px;}
@media(max-width:1920px)
  {
    .banner .text{ left: 6%;}
    .content{ width: 84%;}
  }

@media(max-width:1669px)
{
    .banner .text{ left: 5%;}
    .banner .img img{ height: 623px; width: auto;}
}
@media(max-width:1500px)
{
    .banner{ height: 423px;}
    .banner .text{transform:scale(0.8,0.8); top: 80px;}
    .banner .img img{ height: 423px; }

}
@media(max-width:1366px)
{
    .swiper2{ width: 90%;}
    .content{ width: 90%;}
}



@media(max-width:960px)
{
    .banner{ height: 623px;}
    .banner .text{  top: 40px;}
    .banner .img img{ width:auto; height: 250px;}
    .banner .img{ right: 0; }
    .content{ width: 100%; flex-direction: column;}
    .content .text{ width: 100%; padding: 30px; box-sizing: border-box;}
    .content .content_img{ width: 100%; padding: 30px; box-sizing: border-box;}
    .mySwiper2 .swiper-slide .produce_text img{  width: 100%; height: auto;}
    .mySwiper3{  width: 100%; }
    .mySwiper2 .swiper-wrapper1 .produce_text{ flex-direction: column;}
}





