@charset "utf-8";
.swiper-pagination{z-index: 1;position: static;font-size: 0;text-align: left;}
.swiper-pagination-clickable .swiper-pagination-bullet{height: 8px;width: 2.6vw;margin-right: 1vw;background-color: #aaaaaa;border-radius: 0;}
.swiper-pagination-bullet-active{background: #00b4e9 !important;}
.arrow{border-radius: 18px;overflow: hidden;box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);}
.arrow div{opacity: 1; width: 60px;height: 37px;float: left;line-height: 37px;text-align: center;background: #ffffff;color: #000;font-size: 26px; 
  position: static;margin: 0;font-family: Arial;
  transition: .2s all ease;-ms-transition: .2s all ease;-webkit-transition: .2s all ease;
}
.arrow .swiper-button-next{color: #a2d91c;}
.arrow .swiper-button-next.swiper-button-disabled,.arrow .swiper-button-prev.swiper-button-disabled{opacity: 0.8;}
.arrow .swiper-button-prev{background-color: #00b4e9;color: #fff;}
.BannerShow_c1 img{display: block; width: 100%;}
.banner{width: 100%;overflow: hidden;position: relative;}
.banner .swiper-container{height: 100%;}
.banner .arrow{position: absolute;right: 6.5%;left: auto;bottom: 4.5vw;z-index: 1;}
.banner .swiper-slide a{display: block;width: 100%;height: 100%;overflow: hidden;height: 50vw;max-height: 960px;}
.banner .swiper-slide img{width: 100%;height: 100%;display: block;object-fit: cover;}
.banner .swiper-pagination{display: none;}
.banner .swiper-slide img{transform: scale(1.03) ;-ms-transform: scale(1.03) ;-webkit-transform: scale(1.03) ;
  transition: 3s linear 0s;}
.banner .swiper-slide-active img{opacity: 1;transform: scale(1) ;-ms-transform: scale(1) ;-webkit-transform: scale(1) ;}

.mymore{width: 80px;text-align:left;padding: 0 1vw;color: #fff;background-color: #00b4e9;display: block;height: 37px;line-height: 37px;
  border-radius: 18px;overflow: hidden;font-size: 14px; 
  transition: .3s all ease;-ms-transition: .3s all ease;-webkit-transition: .3s all ease;
}
.mymore span{float: right;}
.mymore.mob{display: none;}

.line{margin-top: 5px;}
.title{padding-bottom: 30px;background: url(../images/line.png) left bottom no-repeat;line-height: 1.5;position: relative;}
.title span{font-size:3vw;font-family: Arial;position:absolute;top:-0.4em; left:-0.3em;z-index: 1;text-transform: uppercase;font-weight: bold;}
.title *{position:relative;z-index: 2;}

.bg1{background: url(../images/bg1.jpg) center no-repeat;background-size: 100% auto;}
.bg2{background: url(../images/bg2.jpg) bottom no-repeat;background-size: 100% auto;}
.bg3-1{background: url(../images/bg3-1.jpg) #fff left bottom no-repeat;background-size: 40% auto;}
.bg4{background: url(../images/bg4.jpg) #f6fbfc bottom no-repeat;background-size:  100% auto;}

.b1 .L{width: 57.5%;background: url(../images/abl.png) no-repeat;background-size: contain;height: 32vw;padding-bottom: 3vw; position:relative;}
.b1 .L>img{position:absolute;top: 1vw;left: 7vw;z-index: 1;width: 31vw;max-width: 617px;}
.b1 .R{width: 36.7%;position: relative;padding-top: 4.2vw;}
.b1 .L li {position: absolute;border-radius: 50%;color: #fff;display: block;text-align: center;box-sizing: border-box;min-width: 6em;min-height: 6em;}
.b1 .L li a{display: inline-block;vertical-align: middle;width: 80%;}
.b1 .L li::after{content: "";height: 100%; display: inline-block;vertical-align: middle;}
.b1 .L li img{max-width: 80%;}
.b1 .L li.i1{top: 7.8vw;left: 2.4vw;background-color: #00b4e9;width:8vw;height: 8vw;}
.b1 .L li.i2{top: 18vw;left: 1vw;background-color: #eeeeee;width:14vw;height: 14vw;z-index: 2;color: #282828;}
.b1 .L li.i3{top: 21.5vw;left: 30vw;background-color: #a2d91c;width: 6.6vw;height: 6.6vw;z-index: 2;}
.b1 .B {background-color: #f6fbfc;width: 90%;box-sizing: border-box;padding: 4.5vw 0 4.5vw 4.5vw;
   margin: 4.5vw 0 0 auto;border-top-left-radius: 9vw;border-bottom-left-radius: 9vw;
  box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
}
.b1 .B li{float: left;padding-left: 4.5vw;padding-top: 0.5vw;position: relative;box-sizing:border-box;min-width: 12vw;}
.b1 .B li+li{margin-left: 4vw;}
.b1 .B li+li:after{content: "";display: block;background-color: #afafaf;width: 1px; height: 60%;top: 20%;position: absolute;left: -3.5vw;}
.b1 .B li>i{position: absolute;left: 0;width: 3.9vw;max-width: 78px; top: 0;}
.b1 .B li i img{max-width: 100%;width: auto;}

.b2{padding: 5.2vw 0 7vw 0;}
.b2 .B .img{height: 227px;box-sizing: border-box;}
.b2 .B .img img{width:100%;height: 100%;object-fit: cover;display:block;}
.b2 .B .txt{height: 227px;padding-top: 2vw;padding-left: 2.6vw;box-sizing: border-box;}
.b2 .B .txt .tit{line-height: 1.5;padding-right: 1.5em;background: url(../images/more2.png) right 0.5em no-repeat;background-size: 0.6em auto;display: inline-block;
  transition: .6s all ease;-ms-transition: .6s all ease;-webkit-transition: .6s all ease;
}
.b2 .B ul{border-top-left-radius: 5.2vw;border-bottom-right-radius: 5.2vw;overflow: hidden;display: block;}
.b2 .B ul li{float: left;width: 50%;display: block;}
.b2 .B .p1{box-sizing: border-box;border-right: 2px solid #fff;}
.b2 .B .p1 .img,.b2 .B .p2 .txt{border-bottom: 2px solid #fff;}
.b2 .B .p1 .txt{background: url(../images/p3.jpg) no-repeat;background-size: cover;}
.b2 .B .p2 .txt{background: url(../images/p2.jpg) no-repeat;background-size: cover;}

.b3 {position: relative;padding-top:3vw;padding-bottom: 5.2vw;}
.b3 .fl{position: absolute;left: 10%;top: 0;width: 38%;padding-top: 10vw;padding-left: 5.2vw;padding-bottom: 6.5vw;padding-right: 1vw;box-sizing: border-box;
  border-bottom-left-radius: 3.5vw;
}
.b3 .fr{position: relative;z-index: 1; background: url(../images/bg3-2.png) left center no-repeat;
  background-size: contain;width: 66%;height: 44vw;position: relative;
}
.b3 .fl .title>img{height: 6..5vw;max-height: 117px;min-height: 40px;}
.b3 .R li a{display: inline-block;vertical-align: middle;width: 80%;}
.b3 .R li::after{content: "";height: 100%; display: inline-block;vertical-align: middle;}
.b3 .R li img{width: 3.5vw;}
.b3 .R li{font-size: 0;position: absolute;background-color: #fff;display:block;border-radius: 50%;text-align:center;box-sizing: border-box;padding: 1vw;}
.b3 .R li .f-20{margin-top: 0.3vw;}
.b3 .R li .f-14{margin-top: 0.8vw;}
.b3 .R li.i4,.b3 .R li.i2{border: 1px solid #a7a7a7;z-index: 2;}
.b3 .R li.i1{border: 1px solid #00b4e9;top: 2vw;right: 13vw;width:250px;height: 250px;}
.b3 .R li.i2{top: 14vw;right: 0;width:330px;height: 330px;}
.b3 .R li.i3{top: 20vw;left: 5.2vw;width: 290px;height: 290px;z-index: 2;background-color: rgba(158,201,70,0.85);}
.b3 .R li.i4{bottom: 1vw;right: 14.5vw;width: 325px;height: 325px;}
.b3 .R li.i5,.b3 .R li.i6,.b3 .R li.i7,.b3 .R li.i8{padding: 0;background:none; width:auto;height: auto;border-radius: 0;}
.b3 .R li.i5{top: 6vw; right: 8vw;}
.b3 .R li.i6{top: 21vw; left: 1vw;}
.b3 .R li.i7{top: 13vw; right: -4vw;}
.b3 .R li.i8{bottom: 3vw; right: 7.5vw;}

.b3 .R li.i1{width: 12.5vw;height: 12.5vw;}
.b3 .R li.i2{width: 17vw;height: 17vw;}
.b3 .R li.i3{width: 14.5vw;height: 14.5vw;}
.b3 .R li.i4{width: 16.9vw;height: 16.9vw;}


.bg4{padding: 5.2vw 0;}
.bg4 .fl{background: url(../images/bgnews.jpg) no-repeat;background-size: cover; width: 33%;box-sizing: border-box;padding: 4vw 1vw 1.5vw 3vw;border-radius: 15px;}
.bg4 .fl .title{background-image: url(../images/line2.png);}
.bg4 .fl .arrow{position: static;margin-top: 12vw;width: auto;display: inline-block;}
.bg4 .fr{width: 61%;}
.bg4 .fr li{border-bottom: 1px solid #e6f0f2;
  transition: .6s all ease;-ms-transition: .6s all ease;-webkit-transition: .6s all ease;
}
.bg4 .fr em{position: absolute;left: 27px;top: 2.2vw;font-weight: bold;color: #282828;
  transition: .6s all ease;-ms-transition: .6s all ease;-webkit-transition: .6s all ease;
}
.bg4 .fr h2,.bg4 .fr h3{width: calc(100% - 140px);margin: 0 0 0 auto;font-weight: normal;box-sizing: border-box;padding-right: 1em;}
.bg4 .fr h2{padding-top: 2vw; font-size: 20px;color: #282828;}
.bg4 .fr h2 a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background: url(../images/more3.png) right center no-repeat;padding-right:1em;background-size: 1em auto;
  transition: .6s all ease;-ms-transition: .6s all ease;-webkit-transition: .6s all ease;
}
.bg4 .fr h3{margin: 1.5vw 0 1.5vw auto  ; font-size: 14px;color: #637e88;line-height: 1.5; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.bg4 .arrow .swiper-button-prev{background-color: #fff;color: #00b4e9;}
.bg4 .arrow .swiper-button-next{background-color: #a2d91c;color: #fff;}

@media screen and (min-width: 1024px){
  .bg4 .fr li:hover em,.bg4 .fr li:hover a{color:#00b4e9;}
  .bg4 .fr li:hover {background:#e6f0f2;}
  .bg4 .fr h2 a:hover {background-image: url(/images/more.png);}
  .mymore:hover{background: #a2d91c;}
  .b1 .L li:hover,.b3 .R li:hover {
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: beat 0.5s 1;
  }
  @keyframes beat { 
    0%, 100% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(0.9, 1.1);
    }
    50% {
      transform: scale(1.1, 0.9);
    }
    75% {
      transform: scale(0.95, 1.05);
    }
  }

  .b2 .B .txt:hover .tit{padding-right: 2em;}

}
@media screen and (max-width: 1250px){
  .b3 .R li img{width: 2.5vw;}

  .b1 .B{padding: 2.5vw 0 2.5vw 4.5vw;}
  .b1 .B li{padding-left:3.5vw;padding-top:0;}
  .b1 .B li i{width: 3vw;top: 0.8vw;}
  .b3 .R li.i1{width: 18vw;height: 18vw;}
  .b3 .R li.i3{width: 19vw;height: 19vw;}

  .b2 .B .txt{padding-top: 5vw;}
}
@media screen and (max-width: 1100px){
  .b1 .L{width: 47%;}
  .b1 .R{width: 50%;margin-left: 1%;}

  .b3 .R li .f-14{display: none;}
}
@media screen and (max-width: 640px){
  .swiper-pagination{text-align: center;}
  .swiper-pagination-clickable .swiper-pagination-bullet{width: 6.8vw;height: 1vw;min-height: 4px;margin: 0 1.5vw;}
  .swiper-pagination-clickable .swiper-pagination-bullet{background-color: #b5b5b5;}
  .p_tb_80{padding: 8vw 0;}
  .mymore.pc,.more.pc,.box-product .L .more{display: none;}
  .mymore.mob{display: block;}
  .mymore{border-radius: 1.2em;width: 6em;margin: 8vw auto 0 auto;padding: 1.5vw 3vw !important;font-size: 3.8vw;height: auto;line-height: 1.5;
    background: url(../images/more.png) #00b4e9 8em center no-repeat;background-size: 1em auto;}
  .banner .swiper-slide a{height: 124vw;}
  .arrow div{width: 3em;height: 7vw;line-height: 7vw;font-size: 3.8vw;}
  
  .title{margin-bottom: 0;background-position: center bottom;text-align:center;width: 100%;padding-bottom:4vw;background-size: auto 2vw;}
  .bg1{background: none;}
  .bg2{background: #eef4f8;}
  .bg3-1{background: url(../images/mbg-32.jpg) center bottom no-repeat;background-size: cover;}
  .bg4{background-image: url(../images/mbgnews.jpg);background-size: 100% auto;background-color: #fff;background-position: center top;}

  .b1{padding: 9.3vw 0;}
  .b1 .title{text-align: left;background-position: left bottom;}
  .b1 .R,.b1 .L{float: none;width: 100%;padding: 0;margin: 0 auto;}
  .b1 .L{display: block;width: 100%;margin-top: 5vw;height: 65vw;}
  .b1 .L>img{width:70vw;left:14vw;}
  .b1 .L li{padding: 0;min-height: 0;min-width: 0;}
  .b1 .L li img{max-width: 60%;}
  .b1 .L li.i1{top: 16vw;width: 18vw;height: 18vw;}
  .b1 .L li.i2{top: 36vw;left: 2vw;width: 25vw;height: 25vw;}
  .b1 .L li.i3{top: 46vw;left: 68vw; width: 14vw;height: 14vw;}

  .b2{padding: 12vw 0;}
  .b2 .B ul{border-top-left-radius: 14.2vw;border-bottom-right-radius: 14.2vw;}
  .b2 .B .txt .tit{background:none ;white-space: nowrap;}
  .b2 .B .txt{padding: 7vw 3vw 8vw 3vw;height: 59vw;}
  .b2 .B .img{height: 59vw;}

  .b3 .main-w{width: 100%;}
  .b3{padding: 12vw 0;}
  .b3 .fl{position: static;width: 100%;padding: 0;}
  .b3 .fr{position: relative;width: 100%;padding: 0;background: none;height: 92vw;}
  .b3 .R li.pc{display: none;}
  .b3 .R li{padding: 0;}
  .b3 .R li.i1 img{max-width: 50%;}
  .b3 .R li img{max-width: 28%;width: auto;}
  .b3 .R li .f-20{font-weight: bold;}
  .b3 .R li.i1{top: 6vw;width: 36vw;height: 36vw;right: auto;left: 12vw;}
  .b3 .R li.i2{top: 13vw;left: auto;width: 40vw;height: 40vw;right: 6vw;}
  .b3 .R li.i3{top: 45vw;left: 5vw; width: 40vw;height: 40vw;right: auto;}
  .b3 .R li.i4{top: 57vw;left: auto; width: 38vw;height: 38vw;right: 16vw;}
  .b3 .R li .f-14{display: block;}
  .bg4 .fr h3{display: block;height: 3em;overflow: hidden;}

  .b4{padding: 12vw 0;}
  .b4 .main-w{width: 100%;}
  .b4 .fl,.b4 .fr{float: none;width: 100%;box-sizing: border-box;padding: 0 5%;}
  .b4 .fl{background:none; border-radius: 0;padding-top: 0;}
  .b4 .fl .title{margin-bottom: 0;text-align:center;}
  .b4 .fr li{background-color: #e9eff3;border-radius: 2vw;}
  .b4 .fr em{position: static;margin:5vw auto 0 auto;color: #00b4e9;display:block;width:90%;padding-bottom: 4.3vw;font-size: 3.8vw;}
  .b4 .fr h2, .b4 .fr h3{width: 90%;padding: 0;margin:0 auto;}
  .b4 .fr h2 a{background: none;}
  .b4 .fr h2{font-size: 4.8vw;padding-top: 4.2vw;}
  .b4 .fr h3{font-size: 3.8vw;margin-top: 4vw;}
  .b4 .fr.mymore{width: 40%;}
  .bg4 .fl .arrow{display: none;}

}