@charset "utf-8";
/* ===================首页样式========================== */

.banner_index .swiper-slide {position: relative;cursor:hand;}
.banner-center{width: 100%;position: relative;}		
.banner-center img { width: 100%; object-fit: cover;max-height: 800px;}		
.banner_index .swiper-slide video {width: 100%;height: 100%;}
.banner{width: 100%;height: auto;overflow: hidden;background-color: #000;}
.banner img{width: 100%;height: auto;overflow: hidden;object-fit: cover;min-height: 300px;}
.banner-pc{display: block;min-height: 400px;}
.banner-mb{display: none;min-height: 300px;}
.banner .swiper-button-next, .banner .swiper-button-prev{opacity: 0.6;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 20px;}
.banner .swiper-pagination-bullet{width: 40px;height: 2px;background-color: #fff;opacity: 1;border-radius:0;}
.banner .swiper-pagination-bullet-active{background-color: #999999;}

.banner-text{position: absolute;left: 14.5%;top: 50%;transform: translate( 0,-50% );}
.banner-text h4{font-size: 32px;color: #222;font-weight: bold;}
.banner-text h5{font-size: 22px;color: #222;font-weight: bold;padding-top: 6px;}
.banner-text p{font-size: 14px;color: #707070;margin-top: 30px;max-width: 320px;line-height: 28px;}
.banner-text h6{width: 180px;height: 44px;position: relative;background-color: #292a2e;border-radius: 3px;overflow: hidden;margin-top: 30px;}
.banner-text h6 b{display: block;width: 100%;height: 44px;background: url('../images/public/banner-ico.png') 140px center no-repeat;font-size: 12px;color: #fff;line-height: 44px;text-align: center;position: relative; z-index: 2;overflow: hidden;}
.banner-text h6::after{content: '';display: block;width: 0;height: 100%;background-color: #0085d0;transition: all 0.6s ease;position: absolute;
top: 0px;left: 0;}
.banner-text h6:hover::after{width: 100%;}
.banner .swiper-slide-active .banner-text h4{animation: bannertextup 1.2s ease both 300ms;}
.banner .swiper-slide-active .banner-text h5{animation: bannertextleft 1.2s ease both 500ms;}
.banner .swiper-slide-active .banner-text p{animation: bannertextleft 1.2s ease both 700ms;}
.banner .swiper-slide-active .banner-text h6{animation: bannertextleft 1.2s ease both 700ms;}

.banner-text2{position: absolute;left: 14.5%;top: 55%;transform: translate( 0,-50% );}
.banner-text2 h4{font-size: 32px;color: #fff;font-weight: bold;}
.banner-text2 h5{font-size: 22px;color: #fff;font-weight: bold;padding-top: 6px;}
.banner-text2 p{font-size: 14px;color: #fff;margin-top: 30px;max-width: 320px;line-height: 28px;}
.banner-text2 h6{width: 180px;height: 44px;position: relative;border: 1px solid #fff;border-radius: 3px;overflow: hidden;margin-top: 30px;}
.banner-text2 h6 b{display: block;width: 100%;height: 44px;background: url('../images/public/banner-ico.png') 140px center no-repeat;font-size: 12px;color: #fff;line-height: 44px;text-align: center;position: relative; z-index: 2;overflow: hidden;}
.banner-text2 h6::after{content: '';display: block;width: 0;height: 100%;background-color: #0085d0;transition: all 0.6s ease;position: absolute;
top: 0px;left: 0;}
.banner-text2 h6:hover::after{width: 100%;}
.banner-text2 h6:hover{border-color: #0085d0;}
.banner .swiper-slide-active .banner-text2 h4{animation: bannertextup 1.2s ease both 300ms;}
.banner .swiper-slide-active .banner-text2 h5{animation: bannertextleft 1.2s ease both 500ms;}
.banner .swiper-slide-active .banner-text2 p{animation: bannertextleft 1.2s ease both 700ms;}
.banner .swiper-slide-active .banner-text2 h6{animation: bannertextleft 1.2s ease both 700ms;}




@keyframes bannertextleft {0% {transform: translateX(150px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}
@keyframes bannertextup {0% {transform: translateY(-150px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}

/* 首页公共title */
.index-title{width: 100%;height: auto;position: relative;text-align: center;padding-bottom: 20px;}
.index-title h4{font-family: '思源黑体';font-weight: lighter;font-size: 30px;color: #001a4d;text-transform: uppercase;}
.index-title h4 span{font-weight: bold;}
.index-title i{width: 49px;height: 4px;position: absolute;left: 50%;bottom: 0;margin-left: -24px;background: url('../images/index/title-bg.png') no-repeat;}
/* 热门产品 */
.product-container{width: 100%;padding: 70px 0;overflow: hidden;position: relative;}
.product-bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.product{width: 100%;padding-top: 30px;overflow: hidden;position: relative;z-index: 2;}
.product ul{margin-left: -1%;}
.product ul li{width: 49%;margin-left: 1%;background-color: #f7f7f7;height: 570px;float: left;}
.product ul li .img{width: 100%;height: auto;text-align: center;height: 320px;line-height: 320px;margin-top: 70px;}
.product ul li .img img{max-width: 100%;transition: all .6s ease;}
.product ul li:hover .img img{transform: scale(1.06);}
.product ul li .text{width: 100%;margin-top: 20px;}
.product ul li .text h4{font-size: 16px;color: #666;text-align: center;}
.product ul li .text h5{color: #b1b0b0;font-size: 12px;text-align: center;padding-top: 10px;}
.product ul li .text h6{width: 60px;height: 24px;background-color: #fba162;border-radius: 3px;text-align: center;font-size: 12px;line-height: 24px;color: #fff;margin: 20px auto;overflow: hidden;}
.product ul li .text h6:hover{background-color: #2ec5f1;}
.product ul li:nth-child(2n) .text h6{background-color: #2ec5f1;}
.product ul li:nth-child(2n) .text h6:hover{background-color: #fba162;}

.view-more{width: 100%;margin-top: 30px;position: relative;z-index: 2;}
.view-more a{width: 110px;height: 34px;line-height: 34px;color: #c9c9c9;text-align: center;margin: 0 auto;display: block;background-color: #292a2e;font-size: 12px;}
.view-more a:hover{color: #fff;background-color: #2ec5f1;color: #fff;}

/* 案例 */
.case-container{width: 100%;background-color: #f5f5f5;overflow: hidden;padding: 50px 0;}
.case{width: 100%;margin-top: 30px;overflow: hidden;}
.case ul li{width: 25%;float: left;height: 340px;overflow: hidden;position: relative;}
.case ul li:nth-child(1)::after{content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, .8);position: absolute;left: 0;top: 0;transition: all .6s ease;}
.case ul li:nth-child(3)::after{content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, .8);position: absolute;left: 0;top: 0;transition: all .6s ease;}
.case ul li:nth-child(6)::after{content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, .8);position: absolute;left: 0;top: 0;transition: all .6s ease;}
.case ul li:nth-child(8)::after{content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, .8);position: absolute;left: 0;top: 0;transition: all .6s ease;}
.case ul li:hover::after{display: none;}

/* .case ul li a{} */
/* .case ul li a::before{ content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;transition: all 1s ease;}
.case ul li a:hover:before{-webkit-transform: scale(2);transform: scale(2);} */

/* .case ul li:nth-child(2) a{ content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 140, 228, 0.5);
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;transition: all 1s ease;}
.case ul li:nth-child(2) a:hover:before{-webkit-transform: scale(2);transform: scale(2);} */


.case ul li img{width: 100%;height: 100%;object-fit: cover;transition: all 0.6s ease;}
.case ul li:hover img{transform: scale(1.06);}
.case ul li p{position: absolute;width: 100%;padding: 0 10px;line-height: 30px;bottom: 10px;left: 0;height: 30px;font-size: 12px;color: #fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align: center;z-index: 4;}

/* .case ul li:hover p{} */

/* 新闻 */
.news-container{width: 100%;padding: 50px 0;overflow: hidden;}
.news{width: 100%;}
.news ul{margin-left: -10%;}
.news ul li{width: 23.333%;float: left;margin-left: 10%;}
.news-list{width: 100%;}
.news-list h5{padding-top: 35px;text-align: center;background: url('../images/index/news-bg1.png') no-repeat center center; transition: all 0.6s ease;}
.news-list:hover h5{background: url('../images/index/news-bg2.png') no-repeat center center; transform: translateY(-10px); }
.news-list h5 img{max-width: 100%;}
.news-list h6{margin-top: 20px;font-size: 20px;color: #111;text-align: center;transition: all .4s ease;}
.news-list:hover  h6{color: #2ec5f1;}
.news-list .text{width: 100%;margin-top: 20px;height: 144px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 6;font-size: 12px;color: #888;line-height: 24px;text-align: center;}

.news-list .text a{display: block;height: 24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height: 24px;color: #888;}
.news-list .text a:hover{color: #2ec5f1;}

/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
    .banner-text{left: 7.5%;}
    .banner-text2{left: 7.5%;}
    .case ul li{height: 282px;}
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
    .banner-text{left: 4%;}
    .banner-text2{left: 4%;}
    .case ul li{height: 252px;}
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
    .banner-text h4{font-size: 28px;}
    .banner-text h5{font-size: 20px;}
    .banner-text2 h4{font-size: 28px;}
    .banner-text2 h5{font-size: 20px;}

    .case ul li{height: 238px;}
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
    .case ul li{height: 224px;}
    .product ul li{height: 500px;}
    .product ul li .img{margin-top: 30px;}
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    /* .banner_index .swiper-slide.ban_video{display: none;} */
    .banner_index .swiper-button-next, .banner_index .swiper-button-prev{background-size: 30px 30px;}
    .banner-pc{display: none;}
    .banner-mb{display: block;}
    .banner_index .swiper-slide video{height: 300px!important;width: 100%;}
    .banner-text p{margin-top: 20px;}
    .banner-text{width: 100%;}
    .banner-text2 p{margin-top: 20px;}
    .banner-text2{width: 100%;}
    .index-title h4{font-size: 24px;}

    .case ul li{width: 50%;height: auto;}

    .product ul li .img{height: 150px;line-height: 150px;}
    .product ul li{height: 340px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner-text h4{font-size: 22px;}
    .banner-text h5{font-size: 15px;}
    .banner-text p{margin-top: 16px;line-height: 20px;}
    .banner-text h6 b{width: 140px;background: url('../images/public/banner-ico.png') 116px center no-repeat;height: 36px;line-height: 36px;}
    .banner-text h6 {width: 140px;height: 36px;margin-top: 16px;}
    .banner-text2 h4{font-size: 22px;}
    .banner-text2 h5{font-size: 15px;}
    .banner-text2 p{margin-top: 16px;line-height: 20px;}
    .banner-text2 h6 b{width: 140px;background: url('../images/public/banner-ico.png') 116px center no-repeat;height: 36px;line-height: 36px;}
    .banner-text2 h6 {width: 140px;height: 36px;margin-top: 16px;}
    .banner .swiper-pagination-bullet{width: 30px;}

    .view-more{margin-top: 20px;}
    .case ul li p{bottom: 0px;padding: 0 6px;}
    .product-container{padding: 40px 0;}
    .product ul li{width: 100%;margin-bottom: 20px;}
    .case-container{padding: 30px 0;}
    .news ul{margin-left: 0;}
    .news ul li{width: 100%;margin-left: 0%;}
    .news-container{padding: 30px 0;}
    .news ul li{margin-bottom: 20px;}
    .news-list .text{margin-top: 10px;}
}