@charset "utf-8";


/* 通用 */
.swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}
.swiper-container .swiper-slide{z-index: 22;}


/* banner */
.zc-index-banner {background: #000;}

.zc-index-banner a {display: block;width: 100%;height:100%;overflow: hidden;position: relative;}
.zc-index-banner a .text { position: absolute;left:5%;top: 50%;width:40%;height: auto; margin-top: 0px;z-index: 33;transform: translateY(-50%);}
.zc-index-banner a .text h3{ color: #fff;font-size: 20px;text-transform: uppercase;position: relative;font-family: 'Conv_AMSANSL';font-weight: normal;}
.zc-index-banner a .text h2{ color: #fff;font-size: 40px;line-height:50px;padding-bottom:8px; font-weight: bold;}
.zc-index-banner a .text h4{ color:#fff;font-size: 16px;font-weight: normal;width:80%;}
.zc-index-banner a .text line { display: block;width: 100px;height: 2px;background: #fff;margin-top: 80px;}
.zc-index-banner a .pic {position: relative;}
.zc-index-banner a .pic img {display: block;width: 100%;height: auto;}
.zc-index-banner .pic::before {content: '';width: 100%;height: 20%;position: absolute;left: 0;top: 0;z-index: 1;background-image: linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0));}

.zc-index-banner .swiper-pagination {left:8%;text-align: left;bottom:8%;}
.zc-index-banner .swiper-pagination span{border-radius:0;background: #fff;opacity: .5;width:40px;height: 2px;margin-right: 20px!important;}
.zc-index-banner .swiper-pagination-bullet-active{opacity: 1!important;}


.zc-index-banner .swiper-slide a.left .text h3{ transform:translateX(200px);opacity:0;transition:all .4s;}
.zc-index-banner .swiper-slide a.left .text h2{ transform:translateX(200px);opacity:0;transition:all .6s;}
.zc-index-banner .swiper-slide a.left .text h4{ transform:translateX(200px);opacity:0;transition:all .9s;}
.zc-index-banner .swiper-slide a.left .text h6{ transform:translateX(200px);opacity:0;transition:all 1.2s;}
.zc-index-banner .swiper-slide.swiper-slide-active a.left .text h3,
.zc-index-banner .swiper-slide.swiper-slide-active a.left .text h2,
.zc-index-banner .swiper-slide.swiper-slide-active a.left .text h4{ transform:translateX(0px);opacity:1;}

.zc-index-banner .swiper-slide a.center .text{position: absolute;left:9%;top: 50%;width:82%;}
.zc-index-banner .swiper-slide a.center * {text-align: center;}
.zc-index-banner .swiper-slide a.center line {margin: 80px auto auto auto;}
.zc-index-banner .swiper-slide a.center .text h3{ transform:translateY(200px);opacity:0;transition:all .4s;}
.zc-index-banner .swiper-slide a.center .text h2{ transform:translateY(200px);opacity:0;transition:all .6s;}
.zc-index-banner .swiper-slide a.center .text h4{ transform:translateY(200px);opacity:0;transition:all .9s;}
.zc-index-banner .swiper-slide a.center .text h6{ transform:translateY(200px);opacity:0;transition:all 1.2s;}
.zc-index-banner .swiper-slide.swiper-slide-active a.center .text h3,
.zc-index-banner .swiper-slide.swiper-slide-active a.center .text h2,
.zc-index-banner .swiper-slide.swiper-slide-active a.center .text h4{ transform:translateY(0px);opacity:1;}

.zc-index-banner .swiper-slide a.none  .text {display: none;}



.rolling { width: 30px; height: 80px;position:absolute;right:3%;bottom:3%;cursor: pointer;z-index: 10;}
.rolling h6 {font-size: 12px;color: #fff;width: 100px;position:absolute;right:-55px;top:90px;font-weight: normal;text-transform: uppercase;-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.rolling span { position: relative;width:100%;height:100%; display: block;}
.rolling i{ display: block;height:10px; width: 1px;position:absolute;left:50%;top:10%; margin-left: -1px; background: #fff;animation: height1 1000ms infinite ease-out;-webkit-animation: height1 1000ms infinite ease-out;}
@keyframes height1{
	0%{height:10px;top:10%;opacity: 1;} 
	100%{height:80px;top:85%;opacity: 0;}
}



 

/* brand */
.zc-index-content {padding:90px 0;overflow: hidden;}
.zc-index-content .zc-content{width: 84%;margin: auto;}

.zc-title{position: relative;}
.zc-title h2 {font-size: 40px;font-weight: bold;text-transform: uppercase;font-family: 'ariblk';}
.zc-title line {display: block;width: 45px;height: 2px;background: #90cdb1;margin:15px 0;}
.zc-title h3 {font-size: 30px;color: #000;font-weight: normal;}

.zc-index-brand {position: relative;overflow: hidden;}
.zc-index-brand .zc-top,.zc-index-brand .zc-bottom {width:80%;height: 60px;background: #f3f3f3;}
.zc-index-brand .zc-center {position: relative;overflow: hidden;}
.zc-index-brand .zc-center .zc-left {width:40%;padding:2% 10% 2% 10%;float: left;overflow: hidden;position: relative;z-index: 3;}
.zc-index-brand .zc-center .zc-text  {font-size: 16px;line-height: 30px; color: #000;padding: 45px 0;overflow: hidden;width:100%;text-align: justify;}
.zc-index-brand .zc-more a {color: #000;}
.zc-index-brand .zc-more a::after {background: #000;}
.zc-index-brand .zc-more a i::before {color: #000;}
.zc-index-brand .zc-more a:hover {color: #90cdb1;}
.zc-index-brand .zc-more a:hover::after {background: #90cdb1;}
.zc-index-brand .zc-more a:hover i::before {color: #90cdb1;}

.zc-more  {position: relative;padding-right: 30px;overflow: hidden;}
.zc-more a {color: #90cdb1;font-size: 16px;position: relative;display:block;float: left;padding: 10px 0;}
.zc-more a::after {content: '';width:100%;height: 1px;display: block;background: #90cdb1;position: absolute;right: 0;bottom: 0;}
.zc-more a::before{content: '';width:0;height: 1px;display: block;background: #90cdb1;position: absolute;left: 0;bottom: 0;}
.zc-more a:hover::after {-webkit-animation: widthain1 500ms 1 ease forwards;animation: widthain1 500ms 1 ease forwards;}
.zc-more a:hover::before {-webkit-animation: widthain2 500ms 1 500ms ease forwards;animation: widthain2 500ms 1 500ms ease forwards;}
@keyframes widthain1{0%{width:100%;} 100%{width:0;}}
@keyframes widthain2{0%{width:0;} 100%{width:100%;}}
.zc-more a i {display:block;width: 20px;height: 20px;position:absolute;right: -30px;top: 12px;text-align: right;}
.zc-more a i::before {content: '\e60d';font-family: 'font_family';font-size: 20px;line-height: 20px; color: #90cdb1;display: block;}


.zc-index-brand .zc-center .zc-right {width:40%;float: left;background: #000;overflow: hidden;position: relative;z-index: 3;}
.zc-index-brand .zc-center .zc-right img {display: block;margin: auto;}
.zc-index-brand .zc-center .zc-right ul{display: table;width: 100%;} 
.zc-index-brand .zc-center .zc-right ul li{}
.zc-index-brand .zc-center .zc-bg1 {width:80%;height:100%;background: #f3f3f3;position: absolute;left: 0;top: 0;}

 

/* product */
.zc-index-product {position: relative;overflow: hidden;margin-top: 30px;}
.zc-index-product .zc-content{position: relative; z-index: 3;}
.zc-index-product .zc-bg2 { background:#f3f3f3;position: absolute;left: 0;top: 0;width:50%;height:100%;}
.zc-index-product .zc-bg2.hover{ background:#90cdb1;}
.zc-index-product .zc-left{width: 50%;overflow: hidden;float: left;}
.zc-index-product .zc-text{padding:50px 0 0px 0;overflow: hidden;}
.zc-index-product .zc-text *{ color: #000;} 
.zc-index-product .zc-text h4{font-size: 28px;padding-bottom: 20px;}
.zc-index-product .zc-text h5{font-size: 24px;line-height: 24px; font-weight:normal;margin: 20px 0;}
.zc-index-product .zc-text h6{font-size: 16px;line-height: 24px;font-weight:normal;color: #000;width: 90%;text-align: justify;}
.zc-index-product .zc-text span.more{font-size: 16px;margin-top: 50px;display: block;position: relative;}
.zc-index-product .zc-text span.more::after {content: '\e60d';font-family: 'font_family';font-size: 17px;line-height: 30px; color: #000;display: inline-block;vertical-align: middle;}
.zc-index-product .zc-pic {width: 50%;text-align:right;position: absolute;left: 0;bottom: 2%;}
.zc-index-product .zc-pic img{display: inline-block;width: 100%;}
.zc-index-product .zc-right{width: 50%;overflow: hidden;float: left;}
.zc-index-product .zc-right .zc-title{text-align: right;}
.zc-index-product .zc-right .zc-title line {display: inline-block;}
.zc-product4 {margin-top: 40px;overflow: hidden;position: relative; border-top: 1px solid #dddddd;border-right: 1px solid #dddddd;border-bottom: 1px solid #dddddd;}
.product4 {width:50%; float: left;overflow: hidden;position: relative;}
.product4 a{display: block;padding:20px;overflow: hidden;height: 100%;box-sizing: border-box;position: absolute;width: 100%;}
.product4 a h4{font-size: 22px;color: #000;}
.product4 a h5{font-size: 18px;color: #000;font-weight:normal;padding-top: 10px;padding-bottom: 5px;}
.product4 a h6{font-size: 12px;color: #000;font-weight:normal;padding-bottom: 10px;text-transform: uppercase;}
.product4 a span.more{font-size: 14px;color: #666666; padding-top: 20px;overflow: hidden; }
.product4 a span.more::after {content: '\e60d';font-family: 'font_family';font-size: 14px;line-height: 24px; color: #666;display: inline-block;vertical-align: middle;}
.product4 a .pic{float: right;clear: both;width: 80%;overflow: hidden;text-align: center;position: absolute;right: 0;bottom: 5%;}
.product4 a .pic ul {display: table;width: 100%;height: 100%;position: relative;}
.product4 a .pic ul li{display: table-cell;vertical-align: middle;}
.product4 a .pic ul li img {display: inline-block;}
.zc-product4::before {content: '';display: block;position: absolute;width: 100%;height:1px;background: #dddddd;top: 50%;left: 0;}
.zc-product4::after {content: '';display: block;position: absolute;width: 1px;height: 100%;background: #dddddd;top: 0;left: 50%;}
.product4 a:hover {background: #90cdb1;}
.product4 a:hover h4{color: #fff;}
.product4 a:hover h5{color: #fff;}
.product4 a:hover h6{color: #fff;}
.product4 a:hover span.more{color: #fff;}
.product4 a:hover span.more::after{color: #fff;}



/* solution */
.zc-index-solution {overflow: hidden;margin-top: 30px;position: relative;}
.zc-index-solution .zc-left{width: 50%;overflow: hidden;float: left;}
.zc-index-solution .zc-left .zc-title {margin-left:16%;}
.zc-index-solution .zc-right{width: 50%;height: 160px; overflow: hidden;float: left;background: #f3f3f3;}
.zc-index-solution .zc-bottom {position: absolute;bottom: 0;width: 50%;}
.zc-index-solution-pic {width: 100%;position: relative;float: left;background: #000;max-height: 440px;overflow: hidden;}
.zc-index-solution-pic .zc-pic {position: relative;width: 100%;height: 100%;font-size: 0;}
.zc-index-solution-pic .table {display: table;width: 100%;height: 100%;}
.zc-index-solution-pic .table-cell {display: table-cell;vertical-align: middle;}
.zc-index-solution-li {width: 50%;position: relative;float: right;background: #f3f3f3;max-height: 440px;overflow: hidden;}
.zc-index-solution-li .zc-text {}
.zc-index-solution-li .zc-text a {display: block;padding:0 20%;}
.zc-index-solution-li .zc-text a * {color: #000;overflow: hidden;}
.zc-index-solution-li .zc-text a h2 {font-size: 30px;font-weight: normal;padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,.2);}
.zc-index-solution-li .zc-text a h4 {font-size: 16px;font-weight: normal;padding: 20px 0;line-height: 24px;}
.zc-index-solution-li .zc-text a h3 {font-size: 16px;font-weight: normal;padding-top:10px;border-top: 1px solid rgba(0,0,0,.2);opacity: .8;}
.zc-index-solution-li .zc-text a h3::after {content: '\e60d';font-family: 'font_family';font-size: 18px;color: #000;display: inline-block;vertical-align: middle;}
.zc-index-solution-li .zc-text a:hover  h2{color: #90cdb1;}
.zc-index-solution-li  .swiper-button-next,.zc-index-solution-li .swiper-button-prev {width: 100px;height: 80px;background: rgba(0,0,0,.2);text-align: center;}
.zc-index-solution-li  .swiper-button-next {bottom: 0;left: 101px;top: auto;right: auto;}
.zc-index-solution-li  .swiper-button-prev {bottom: 0;left: 0;top: auto;right: auto;}
.zc-index-solution-li  .swiper-button-next::after {content: '\e63e';font-family: 'font_family';font-size: 38px;line-height: 80px;color: #fff;opacity: 0.5;}
.zc-index-solution-li  .swiper-button-prev::after {content: '\e63d';font-family: 'font_family';font-size: 38px;line-height: 80px;color: #fff;opacity: 0.5;}
.zc-index-solution-li  .swiper-button-next:hover::after,.zc-index-solution-li .swiper-button-prev:hover::after {opacity: 1;}
.zc-index-solution-li  .swiper-button-next:hover,.zc-index-solution-li .swiper-button-prev:hover{background: #90cdb1;}


/* news */
.zc-index-news {padding: 10px 0 100px 0 ;overflow: hidden;position: relative;}
.zc-index-news .zc-more {position: absolute;top:80px;right: 0;}
.zc-index-news .zc-more a {color: #999;}
.zc-index-news .zc-more a::after,.zc-index-news .zc-more a::before {background:#999;}
.zc-index-news .zc-more a i::before {color: #666;}
.zc-index-news .zc-more a:hover {color: #90cdb1}
.zc-index-news .zc-more a:hover i::before {color: #90cdb1;}
.zc-index-news .zc-more a:hover::after,.zc-index-news .zc-more a:hover::before {background:#90cdb1;}


.zc-news3  {overflow: hidden;padding-top: 50px;}
.news3 {float: left;width: 33%;position: relative;margin:0 0.1%;overflow: hidden;}
.news3 a{display: block;background: #fff;overflow: hidden;}
.news3 a .zc-pic{background-color: #000;position: relative;overflow: hidden;background-size: cover;}
.news3 a .zc-pic ul {display: table;width: 100%;height: 100%;}
.news3 a .zc-pic ul li{display: table-cell;vertical-align: middle;}
.news3 a .zc-pic img {display: block;margin: auto;width: 100%;opacity: 0;}
.news3 a .zc-text{padding: 5%;overflow: hidden;}
.news3 a .zc-text h4{font-size: 18px;font-weight: normal;color:#2e2e2e;padding-bottom: 10px;}
.news3 a .zc-text h5{font-size: 14px;line-height: 24px; font-weight: normal;color:#2e2e2e;padding-bottom: 20px;opacity: .6;}
.news3 a .zc-text h6{font-size: 14px;font-weight: normal;opacity: .6;position: absolute;right: 5%;bottom:25px;font-family: Arial;}
.news3 a .zc-text span.more{font-size: 14px;opacity: .8;}
.news3 a .zc-text span.more::after {content: '\e60d';font-family: 'font_family';font-size: 15px;line-height: 24px; color: #666;display: inline-block;vertical-align: middle;}
.news3 a:hover {background: #90cdb1;}
.news3 a:hover .zc-text h4{color: #fff;}
.news3 a:hover .zc-text h5{color: #fff;} 
.news3 a:hover .zc-text h6{color: #fff;} 
.news3 a:hover .zc-text span.more{color: #fff;} 
.news3 a:hover .zc-text span.more::after {color: #fff;} 






/* min&&max */
.product4 a h4,.product4 a h5,.product4 a h6,.news3 a .zc-text h4{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.zc-index-brand .zc-center .zc-right {max-height: 554px;}
.product4 {min-height: 300px;max-height: 300px; }
.news3 a .zc-text h5 {text-overflow: ellipsis;overflow: hidden;}
.news3 a .zc-pic{min-height: 299px;max-height: 300px;}
.zc-index-solution-li .zc-text {min-height: 440px;}