@charset "utf-8";

/* CSS Document */


 
 

 
 
 
 
 
 
@keyframes scaleDraw {
	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
	-webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
	/*开始为原始大小*/
}

100% {
	-webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
}


.slideBox {
    /* width:100%; */
    position: relative;
    margin: 0 auto;
    background: #000;
}

.slideBox .bd {
    position: relative;
    height: 100%;
    overflow: hidden
}

.slideBox .bd li {
    vertical-align: middle;
    position: relative;
}

.slideBox .bd .b-img {
    width: 100%;
    display: block;
    animation: changeScale 1 2.5s;
}

.slideBox .bd .s-img {
    display: none;
}

.slideBox .hd {
    position: absolute;
    width: 100%; left:0;
    bottom: 40px;
    z-index: 4; text-align:center;
}

.slideBox .hd ul {
    zoom: 1;
    color: #fff;
    width: 100%;
}

.slideBox .hd ul li {
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    transition-duration: .5s; opacity:0.5; position:relative; width:10px; height:10px; border-radius:50%; background:#fff;
}
/*.slideBox .hd ul li:before{ content:""; width:2px; height:0; transition-duration:.5s; position:absolute; top:-28px; left:50%; margin-left:-2px; background:#fff;}
*/


.slideBox .hd ul li.on { opacity:1;}
.slideBox .hd ul li.on:before{ height:22px;}

.banner-txt{ width:100%; position:absolute; top:35%; left:1.55rem; color:#fff; z-index:3;}
.banner-txt h1{font-size:0.48rem; line-height:1.2;text-shadow:3px 2px 3px #333333; }
.banner-txt p{ text-transform:uppercase; padding-top:0.05rem;}
.banner-txt a{ display:block; width:1.7rem; line-height:0.52rem; border:1px solid #ffffff; text-align:center; color:#fff; font-size:0.2rem; border-radius:10px; margin-top:0.6rem; transition-duration:.5s;} 
.banner-txt a:hover{ background:#00ceca; border-color:#00ceca;} 
 
 .baner-ximg,.baner-ximg2 img{ position:absolute; bottom:0; left:0;animation: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) wingSlideIn forwards; z-index:2;}
.baner-ximg img,.baner-ximg1 img{ display:block;}
 .baner-ximg1{ position:absolute; bottom:-10px; left:0;animation: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) wingSlideIn forwards; z-index:1;}
 .baner-ximg2{ z-index:3; }
 
 /* banner右边的svg */
.hero__wing {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.hero__wing > svg {
  max-height: 100%;
  height: 100%;
}

.hero__wing > svg .hero-wave__wing {
  transform: translateX(110%);
  opacity: 0;
  animation: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) wingSlideIn forwards;
}

.hero__wing > svg .hero-wave__wing--back {
  animation-delay: .2s;
}

.hero__wing > svg .hero-wave__wing--mid {
  animation-delay: .28s;
}

.hero__wing > svg .hero-wave__wing--front {
  animation-delay: .36s;
}
 
 
@keyframes wingSlideIn {
	from {
		opacity: 0;
		transform: translateX(-150%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}


.home-about{ padding:1.5rem 0 0.8rem 0; position:relative;}
.in-ti{display: flex;justify-content: space-between; margin-bottom:0.5rem; position:relative; z-index:2;}
.title h1{ font-weight:bold; font-size:0.48rem;font-family: "base-font"; line-height:1.2; color:#074a7b}
.title p{ font-size:0.22rem;}
.in-ti a{ display:block; width:1.9rem;display: flex;justify-content: center;align-items: center; background:#00ceca; height:0.47rem; color:#fff; border-radius:30px; font-size:0.18rem; transition-duration:.5s;}
.in-ti a img{ margin-left:0.15rem;}
.in-ti a:hover{-moz-box-shadow:0px 0px 9px #333333; -webkit-box-shadow:0px 0px 9px #333333; box-shadow:0px 0px 9px #333333;}
.shu-list{ width:66%;}
.shu-list dl{ width:30%; position:relative; float:left; border-top:1px solid #b8bfc0; margin-right:5%; margin-bottom:0.5rem; position:relative; z-index:2;}
.shu-list dl:nth-child(3n){ margin-right:0;}
.shu-list dl dt{ color:#13b6be; font-size:0.18rem; line-height:1; padding-top:0.1rem;}
.shu-list dl dd{ font-size:0.28rem;}
.shu-list dl dt span{ font-size:0.72rem;}
.shu-list dl:before{ content:""; width:0; height:3px; background:#13b6be; position:absolute; top:-1px; left:0; transition-duration:.5s;}
.shu-list dl:hover:before{ width:100%;}
.ab-xz{position: relative;z-index: 2;}
.ab-xz h1{ font-size:0.4rem; font-weight:normal; line-height:1.2}
.ab-xz p{ font-size:0.22rem; color:#777777; opacity:0.8; padding-bottom:0.55rem;}


.ibg{ width:105%; height:100%; position:absolute; top:0; left:0; background:url(../images/bg1.jpg) no-repeat center; z-index:1;background-size: cover;}
.home-pro{background:url(../images/bg2.jpg) no-repeat center; padding:0.6rem 0 2rem 0;position:relative;}
.pro-ti{ padding-top:0.65rem;}
.home-pro-xi{display: flex;justify-content: space-between;}
.Menubox{ width:2rem;}
.Menubox li{ background:#fff; line-height:0.63rem; font-size:0.22rem; text-align:center; margin-bottom:0.35rem; border-radius:30px; cursor:pointer; transition-duration:.5s; cursor:pointer;}
.Menubox li.hover{ background:#13b6be; color:#fff;}

.Contentbox{width: calc(100% - 2.5rem);width: -webkit-calc(100% - 2.5rem); position: relative;  }
.pro-img{ position:absolute; top:-30%; left:15%; width:650px; }
.comm-menu{ position:absolute; top:10px; left:0; z-index:3;}
 
.comm-menu ul li{ cursor:pointer; color:#fff; position:relative; font-size:0.18rem; padding-left:15px;}
.comm-menu ul li:before{ content:""; width:5px; height:5px; background:#fff; border-radius:50%; position:absolute; left:0; top:50%; margin-top:-2.5px; opacity:0;}
.pro-Contentbox{ padding-left:0;}
.comm-menu ul li.hover:before{ opacity:1;}

.CbContainer:nth-child(4) .comm-menu{ top:110px;}
.CbContainer:nth-child(6) .comm-menu{ top:205px;}
.CbContainer:nth-child(8) .comm-menu{ top:305px;}


.zqq{ opacity:0;}
/*.tra360{animation: rotate 20s linear infinite;}*/
.zqq:hover .tra360{animation: rotate 20s linear infinite;}
.p-pic{ width:80%; height:80%; position:absolute; top:8%; left:10%; background:#efefef; border-radius:50%;box-shadow: rgba(66,114,150,0.6) 0px 0px 30px 5px inset; overflow:hidden}
.p-pic img,.bz img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:80%; max-height:80%;  }
.bz{ position: absolute; width:80px; height:80px; background:#fff; border:4px solid #39cfcd; border-radius:50%; bottom:40px; left:50%; margin-left:-40px; }
.pro-txt h1{ color:#00ceca; font-size:0.32rem;font-family: "base-font"; padding-bottom:0.28rem;}
.pro-txt dl{ font-size:0.19rem; color:#fff;display: flex; padding-bottom:0.2rem; }
.home-new{ padding:1rem 0 1.3rem 0;}
.new-le{ width:50%; margin-top:1.7rem;}
.new-le dl{ width:48%; float:left;}
.new-le dl dt,.new-ri dt{ overflow:hidden; border-radius:30px 0 30px 0; margin-bottom:0.13rem;transition-duration:.5s;}
.new-le dl dt img,.new-ri dt img{ width:100%; display:block;object-fit: cover; height:2.38rem; transition-duration:.5s;}
.new-le dl dd h1,.new-ri dd h1{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; font-size:0.22rem; line-height:1.4;}
.new-le dl dd span{ display:block; font-size:0.16rem; color:#00ceca; position:relative; transition-duration:.5s;}
.new-le dl dd span:before,.new-ri dd h1:before{ content:""; width:0; height:1px; background:#00ceca; position:absolute; top:50%; margin-top:-0.5px; left:0; transition-duration:.5s;}
.new-le dl dd p{ overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical; color:#777; font-size:0.16rem; line-height:1.2; margin-top:0.15rem;
}
.new-le dl:hover dd span{ padding-left:60px;}
.new-le dl:hover dd span:before{ width:50px;}
.new-le dl:hover dd h1{color:#00ceca;}
.new-le dl:nth-child(2n){ float:right;}
.new-le dl:hover dt,.new-ri:hover dt{ border-radius:0 30px 0 30px;}
.new-ri{ width:47.5%;}
.new-ri dt{ margin-bottom:0;}
.new-ri dt img{ height:4.72rem;}
.new-ri dd{ background:#00ceca; padding:0.22rem 0.15rem 0.22rem 0.3rem; border-radius:30px 0 0 0; position: relative; top:-40px; color:#fff;}
.new-ri dd h1{ width:70%; font-weight:normal; transition-duration:.5s; position:relative;}
.new-ri:hover dd h1{ padding-left:30px; font-weight:bold;}
.new-ri dd h1:before{ background:#fff}
.new-ri:hover dd h1:before{ width:20px;}
.new-ri dd span{ font-size:0.16rem; position:absolute; top:0.2rem; right:0.15rem;}
.new-ri dd p{ font-size:0.16rem; opacity:0.8}
.home-new .in-ti{ position:absolute; top:0; left:0; margin-bottom:0;}
.new-Menubox{ width:50%; text-align:right; position: absolute; left:0; top:20px;}
.new-Menubox li{ display:inline-block; cursor:pointer; font-size:0.18rem; margin-left:0.1rem; padding:0 0.17rem; line-height:0.4rem;}
.new-Menubox li.hover{ background:#00ceca; color:#fff; border-radius:20px;}

.traf360{ position:absolute; top:28px; left:30px;}
.zqq:hover .traf360{animation: rotate1 20s linear infinite;}

@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
.trasf{animation: trasf1 1.5s linear infinite;}
 @keyframes trasf1 {
    0%{ transform:scale(0.8)}
    100%{transform:scale(1)}
}
 @keyframes rotate1 {
    0%{-webkit-transform:rotate(0deg);}
   100%{-webkit-transform:rotate(-360deg);}
}


@media only screen and (max-width: 1650px){
	.pro-img{ width:580px; top:-45%}
	.shu-list{ width:62%;}
	}

@media only screen and (max-width: 1450px) {
	 .pro-img{ width:500px;}
	 .bz{ bottom:-20px;}
	 .new-Menubox li,.f-tel{ font-size:0.2rem;}
	 .shu-list dl dd,.f-menu li h1{ font-size:0.22rem;}
	 .new-le dl dd p,.new-ri dd p,.f-menu li p a{ font-size:0.18rem;}
	 .CbContainer:nth-child(4) .comm-menu{ top:85px;}
	 .CbContainer:nth-child(6) .comm-menu {
    top: 157px;
}
.CbContainer:nth-child(8) .comm-menu {
    top: 230px;
}
	}

@media only screen and (max-width: 1366px) {}

@media only screen and (max-width: 1280px) {
	.CbContainer:nth-child(4) .comm-menu{ top:75px;}
	.CbContainer:nth-child(6) .comm-menu{ top:140px;}
	.CbContainer:nth-child(8) .comm-menu{ top:205px;}
	}


@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 760px) {
	 
	.slideBox .hd{ bottom:10px;}
	.in-yyyw .owl-theme .owl-dots .owl-dot span{ display:block !important;}
    .slideBox .bd .mobile-banner,
   {
        display: block;
    }
    .slideBox .bd .s-img {
        display: block;
    }
    .slideBox .bd .b-img{
        display: none !important
    }
    .slideBox .bd .pc-banner,.rightbar,.r-xt {
        display: none;
    }
	.shu-list{ width:100%;}
.banner-txt{ left:10px; }
.banner-txt p,.shu-list dl dd,.pro-txt dl,.new-le dl dd span,.new-le dl dd p, .new-ri dd p, .f-menu li p a{ font-size:14px;}	
.banner-txt a{ font-size:14px; width:120px; line-height:35px;}
.slideBox .hd{ left:0; text-align:center;}
.home-about,.home-pro,.home-new{ padding:30px 20px; background-size:cover;}
.title h1{ font-size:20px;}
.title p,.shu-list dl dt,.new-le dl dd h1, .new-ri dd h1{ font-size:18px;}
.in-ti a{ width:110px; line-height:40px; font-size:14px;}
.in-ti a img{ width:20px;}
.shu-list dl{ width:46%; margin-bottom:10px;}
.shu-list dl:nth-child(2n){ margin-right:0;}
.shu-list dl:nth-child(3){ margin-right:5%}
 .ab-xz h1{ font-size:16px;}
.shu-list dl dt span{ font-size:30px;}
.pro-img{ position:relative; left:0; transform:none; width:100%;}
.home-pro-xi{ display:block;}
.Menubox,.Contentbox,.pro-txt,.new-le,.new-ri{ width:100%; float:none !important;}
.Menubox li,.new-Menubox li{ width:23%; float:left; margin:0 1%; font-size:14px;}
.p-pic{ height:76%; top:18%;}
.pro-txt{ padding-top:60px;}
.pro-txt h1{ font-size:20px;}
.home-new .in-ti{ position:relative;}
.new-Menubox{ position:relative; text-align:center; width:100%;}
.new-Menubox li{ line-height:38px;}
.new-ri{ clear:both; margin-top:20px;}
.new-le:after,.new-Menubox ul:after{ content:""; clear:both; display:block;}
.new-le{ margin-top:20px;}
.traf360{top: 50px;
    left: 4%;
    width: 92%;}
	.Contentbox{ clear:both;}
	.CbContainer:nth-child(4) .comm-menu{ top:10px;}
.CbContainer:nth-child(6) .comm-menu{ top:10px;}
.CbContainer:nth-child(8) .comm-menu{ top:10px;}
.comm-menu ul li{ width:100%; }
.comm-menu{ width:100%;}
.CbContainer:nth-child(4) .comm-menu {left: 110px;}
.CbContainer:nth-child(6) .comm-menu{ left:190px}
.CbContainer:nth-child(8) .comm-menu{ left:230px;}
.bz{  left:51%; }
}

@-webkit-keyframes grow {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(2);
    }
}

@-moz-keyframes grow {
    from {
        -moz-transform: scale(1);
    }
    to {
        -moz-transform: scale(2);
    }
}

@keyframes grow {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.5);
    }
}