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

/* index-common */
.index-tit{position:relative;text-align:center}
.index-tit .cn{font-size:36px;color:#27292e;text-align:center;display: block}
.index-tit .en{display: block;font-family:'Arial';font-size:60px;text-shadow:-1px 1px 0 #d7d8dd,1px 1px 0 #d7d8dd,1px -1px 0 #d7d8dd,-1px -1px 0 #d7d8dd;color:#fff;font-weight:bold;position:absolute;left:50%;transform:translateX(-50%);z-index:-1;top:-20px;opacity:.6;line-height:48px}
.index-tip{font-size:18px;color:#555960;text-align:center;margin-top:20px}
.index-tit.startAnimate .cn{animation: to-up 1.5s ease both}
.index-tit.startAnimate .en{animation: to-down-tit 2s ease both}
.index-tip.startAnimate{animation: to-up 1.5s ease both .5s}
@keyframes to-down-tit{0%{opacity: 0;transform: translate3d(0, -50px, 0) translateX(-50%);}100%{opacity: 1;transform: translate3d(0, 0, 0) translateX(-50%);}}

/* banner */
.banner{height:100vh;position:relative;}
.banner-mb{display:none}
.banner .swiper-container,.banner-bg{height:100%}
.banner-cont{position:absolute;left:0;top:0;width:100%;height:100%}
.banner-cont .container-sm{display:flex;align-items:center;height: 100%}
.banner-lft{width:50%}
.banner-label{color:#fff;display:flex;font-size:36px;margin-bottom:10px}
.banner-label li+li{margin-left:20px;padding-left:20px;position:relative}
.banner-label li+li:after{content:'';position:absolute;left:0;top:14px;background:rgba(176,183,187,.6);width:2px;height:32px}
.banner h1{font-size:60px;font-weight:lighter;color:#fff}
.banner-list{display:flex;font-size:20px;color:#fff;margin-top:50px}
.banner-list li{white-space: nowrap}
.banner-list li+li{margin-left:20px;padding-left:20px;position:relative}
.banner-list li+li:after{content:'';position:absolute;left:-4px;top:12px;border-radius:50%;background:#cdcbd5;width:7px;height:7px}
.banner-rgt{width:50%;display:flex;align-items:center;justify-content:center}
.banner-rgt img{max-width: 80%;max-height: 80%;width: auto;height: auto}
.banner-btn{margin-top:85px}
.banner-btn a{display:block;width:180px;height:54px;background:#08a3f3;color:#fff;font-weight:700;font-size:16px;text-align:center;line-height:54px;transition: opacity .4s ease}
.banner-btn a:hover{opacity:.8}
.banner-nav{position:absolute;width:100%;height:100%;left:0;top:0}
.banner-nav .container-max{position:relative;height:100%}
.banner-nav .nav-btn{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;position:absolute;top:50%;z-index:2;cursor:pointer;transition:all .4s ease}
.banner-nav .arrow-icon{font-size:24px}
.banner-nav .nav-btn:hover{background:rgba(8,163,243,.2);user-select: none}
.banner-prev{left:20px}
.banner-next{right:20px}
.banner .swiper-pagination{bottom:60px;left:50%;transform: translateX(-50%)}
.banner .swiper-pagination-bullet{border-radius:10px;width:32px;height:3px;background:#fff;opacity:1;position:relative}
.banner .swiper-pagination-bullet:not(:first-child){margin-left:14px}
.banner .swiper-pagination-bullet-active{background:#08a3f3}
.banner .swiper-slide-active .banner-label{animation: to-upB 1.5s ease both}
.banner .swiper-slide-active h1{animation: to-upB 1.5s ease both .2s}
.banner .swiper-slide-active .banner-list{animation: to-upB 1.5s ease both .4s}
.banner .swiper-slide-active .banner-btn{animation: to-upB 1.5s ease both .6s}

/* 产品 */
.product{padding-top:160px}
.product-cell{display:flex;height:520px;margin-top:50px}
.product-item{width:25%;height:100%;position:relative;transition:width 1s ease;overflow:hidden;opacity: 0}
.product-cell.item-1 .product-item{width:100%}
.product-cell.item-2 .product-item{width:50%}
.product-cell.item-3 .product-item{width:33.33%}
.product-cell.item-4 .product-item{width:25%}
.product-bg{height:100%;width:100%}
.product-bg img{position:absolute;left:0;top:0;transition:opacity .8s ease}
.product-item .inner-bg{opacity: 0}
.product-item:hover{width:43%}
.product-item:hover .out-bg{opacity: 0}
.product-item:hover .inner-bg{opacity: 1}
.product-cont{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff}
.product-cont i{width:120px;height:120px;border-radius:50%;background:#08a3f3;display:flex;align-items:center;justify-content:center;transition:transform .8s ease}
.product-item:hover i{display: none}
.product-item:hover .inner-cont{display:block}
.product-item:hover h2{margin-top:0}
.product-cont h2{font-size:26px;font-weight:700;margin-top:20px}
.inner-cont{display:none}
.inner-cont p{max-width:350px;text-align:center;margin-top:20px;font-size:16px;line-height:24px}
.inner-cont a{display:flex;font-size:18px;color:#0093dd;align-items:center;justify-content:center;margin-top:50px;transition: color .4s ease}
.inner-cont a:hover{color: #fff}
.inner-cont .arrow-icon{padding-left:18px}
.inner-cont .inner-img{margin-top:50px;display:flex;justify-content:center}
.inner-cont .inner-img img{max-height:250px;max-width:100%}
.product-item:hover h2{animation:to-upB 1s ease both}
.product-item:hover p{animation:to-up 1s ease both .2s}
.product-item:hover a{animation:to-up 1s ease both .4s}
.product-item:hover .inner-img{animation:to-up 1s ease both .6s}
.startAnimate .product-item:nth-child(1){animation: to-upB 1s ease both}
.startAnimate .product-item:nth-child(2){animation: to-upB 1s ease both .2s}
.startAnimate .product-item:nth-child(3){animation: to-upB 1s ease both .4s}
.startAnimate .product-item:nth-child(4){animation: to-upB 1s ease both .6s}

/* 案例中心 */
.case{padding:165px 0 140px;overflow:hidden;position: relative}
.case-background{font-size: 380px;position: absolute;left: 0;top: 0;line-height: 260px;z-index: -1;color: #f7f8fa;font-family: montserrat;animation: font-tran 5s linear infinite}
.case .container-sm{float:right;max-width:1600px;position:relative}
.case .container-sm:after{content:'';background:url(../images/index/case-bg.png)no-repeat center /100%;width:454px;height:179px;position:absolute;bottom:0;left:-200px}
.case-lft{width:19%;float:left;padding-top:60px}
.case .index-tip,.case .index-tit .cn,.case .index-tit .en{text-align:left}
.case .index-tit .en{top:-60px;left:0;transform:none}
.case-btn{margin-top:100px}
.view-btn{display:block;border:2px solid #c2c2cc;color:#44464e;font-size:16px;width:180px;height:54px;text-align:center;line-height:54px;transition: all .4s ease}
.case-rgt{float:right;width:78%}
.case-rgt .swiper-container{width:calc(100% + 50px);padding:20px;height:550px}
.case-rgt .swiper-slide{text-align:center;display:flex;flex-direction:column;justify-content:center;width: 350px}
.case-rgt h2{font-weight:700;font-size:20px;color:#424652;line-height:24px;margin:20px 0 5px auto;transition: all .4s ease;width: 280px}
.case .swiper-slide:hover h2{color: #08a3f3}
.case-rgt .case-desc{color:#7b7f8a;font-size:14px;line-height:20px;opacity:0;transition:all .6s ease}
.case-rgt .swiper-slide .case-picture{width:280px;height:350px;margin-left: auto;transition:all .6s ease;overflow: hidden}
.case-rgt .swiper-slide-prev .case-picture{margin: 0 auto}
.case-rgt .swiper-slide-active .case-picture{width:100%;height:480px;box-shadow: 5px 5px 22px rgb(0 0 0 / 30%);}
.case-rgt .swiper-slide-active h2{margin:20px auto 5px}
.case-rgt .swiper-slide-active .case-desc{opacity:1}
.case-nav{display:flex;margin-top:50px;position:relative}
.case-nav-btn{width:48px;height:48px;background:#dddee2;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s ease}
.case-nav-btn:hover{background:#08a3f3;user-select: none}
.case .swiper-pagination-progressbar{width:calc(100% - 96px);left:96px;top:50%;height:1px;background:#dddde2}
.case .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#08a3f3;height:3px;top:-1px}
.case .swiper-slide a{display: block;position: absolute;left: 0;top: 0;width: 100%;z-index: 2;height: 100%}
.sensor-case .swiper-slide a{display: block;position: absolute;left: 0;top: 0;width: 100%;z-index: 2;height: 100%}
.case .swiper-slide img{transition: all .6s ease}
.case .swiper-slide:hover img{transform: scale(1.1)}
.sensor-case .swiper-slide img{transition: all .6s ease}
.sensor-case .swiper-slide:hover img{transform: scale(1.1)}
@keyframes font-tran{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-100px,0,0)}75%{transform:translate3d(100px,0,0)}}
.case .index-tit.startAnimate .en{animation: to-down 2s ease both}
@keyframes to-down{0%{opacity: 0;transform: translate3d(0, -50px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}


/* 定制 */
.customized .container-max{display:flex;justify-content:space-between}
.customized-item{width:49.5%;position:relative;height:560px;display:block}
.customized-bg{width:100%;height:100%}
.customized-cont{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.customized-cont h3{font-size:24px}
.customized-cont p{font-size:14px;line-height:24px;max-width:415px;margin:20px auto 0;height:72px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.customized-cont span{display:block;margin-top:50px;padding:10px 10px 15px;border:2px solid transparent;border-radius:10px;transition:all .6s ease}
.customized-cont:hover span{background:rgba(0,0,0,.2)}
.customized-cont span i{display:block;background:url(../images/common/btn-arrow.png) no-repeat center/100%;width:57px;height:11px}
.startAnimate .customized-item:nth-child(1){animation: to-lft 1.5s ease both}
.startAnimate .customized-item:nth-child(2){animation: to-rgt 1.5s ease both}

#loading-wrapper{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10002;}
.startAnimate #loading-wrapper .loading-el{position:absolute;width:calc(100% / 5);height:calc(100% / 5);z-index:10002;background:rgba(8,163,243,.1);animation: loading 2s ease both}
#loading-wrapper #loading-1{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-2{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-3{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-4{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-5{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-6{left:calc(100% / 6 * 0);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-7{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-8{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-9{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-10{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-11{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-12{left:calc(100% / 6 * 1);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-13{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-14{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-15{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-16{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-17{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-18{left:calc(100% / 6 * 2);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-19{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-20{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-21{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-22{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-23{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-24{left:calc(100% / 6 * 3);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-25{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-26{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-27{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-28{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-29{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-30{left:calc(100% / 6 * 4);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-31{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 0)}
#loading-wrapper #loading-32{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 1)}
#loading-wrapper #loading-33{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 2)}
#loading-wrapper #loading-34{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 3)}
#loading-wrapper #loading-35{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 4)}
#loading-wrapper #loading-36{left:calc(100% / 6 * 5);bottom:calc(100% / 6 * 5)}
#loading-wrapper #loading-37{left:calc(100% / 6 * 6);bottom:calc(100% / 6 * 0)}

@keyframes loading { 0%{width: 100%;height: 100%} 10%{width: 20%;height: 20%} 100%{width: 0;height: 0} }

/* 新闻 */
.news{padding:180px 0 140px}
.news-picture{width:100%;height:540px;position:relative}
.news-info{position:absolute;width:90%;bottom:0;left:5%;padding:32px 40px;background: #fff}
.news-picture:after{content:'';width:100%;left:0;bottom:0;height:60%;background: linear-gradient(0deg,#737171 0,transparent 90%);position:absolute}
.news-info h3{font-weight:700;color:#424652;font-size:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.news-info .time{font-family:bahnschrift;font-weight:700;color:#aeb2b9;text-align:center;margin:5px 0 15px;font-size:16px}
.news-info p{font-size:14px;color:#7b7f8a;line-height:24px;font-weight:700;text-align:center;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:48px}
.news-info span{font-family:bahnschrift;font-size:16px;font-weight:700;color:#484e5b;text-align:center;display:block;position:relative;padding-top:70px;transition:all .6s ease}
.news-info span:after{content:'';height:24px;width:1px;border-right:1px solid #08a3f3;position:absolute;top:22px;left:50%}
.news .swiper-slide:hover span{color:#08a3f3}
.news .swiper-slide:hover span:after{content:'';height:30px;width:102px;position:absolute;top:66px;left:calc(50% - 50px);border:1px solid #08a3f3;border-radius:14px;transition:all .6s ease;box-shadow:inset 0 0 0 1px #08a3f3}
.news .swiper-wrapper{padding-top:80px}
.news .swiper-slide{width:426px;transition:transform .6s ease;overflow:hidden}
.news .swiper-slide:hover{transform:translateY(-30px);box-shadow:0 10px 18px #e6e7ea}
.news .swiper-slide:after{content:'';top:0;left:0;height:100%;width:100%;position:absolute;background:linear-gradient(rgba(245,245,245,0) 0,#f5f5f5 100%);z-index:0;transition:all .6s ease;opacity:0}
.news .swiper-slide-next+.swiper-slide:after,.news .swiper-slide.active:after{opacity:1}
.news .swiper-slide-next+.swiper-slide,.news .swiper-slide.active{pointer-events:none}
.news .swiper-slide a{display: block;position: absolute;left: 0;top: 0;width: 100%;z-index: 2;height: 100%}
.news-btn{margin-top: 60px;display: flex;justify-content: center}
.view-btn:hover{border-color: #08a3f3}

/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
    .case .container-sm{max-width: 1400px}
    .banner-prev{left: -80px}
    .banner-next{right: -80px}
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
    .case .container-sm{max-width: 1200px}
    .banner h1{font-size: 54px}
    .banner-label{font-size: 32px}
    .banner-list{margin-top: 40px}
    .banner-btn{margin-top: 50px}
    .product{padding-top: 100px}
    .case{padding: 100px 0}
    .banner-nav .nav-btn{width: 50px;height: 50px}
    .banner-nav .arrow-icon{font-size: 20px}
    .banner-prev{left: -70px}
    .banner-next{right: -70px}
    .case .container-sm:after{width: 400px}
    .banner-list{font-size: 18px}
    .case-rgt{width: 75%}
    .case-rgt .swiper-slide{width: 300px}
    .case-rgt .swiper-slide .case-picture{width: 250px;height: 340px}
    .case-rgt h2{width: 250px}
    .case-rgt .swiper-slide-active .case-picture{width: 300px;height: 430px}
    .banner-list li+li:after{top: 9px}
    .news{padding: 100px 0}
    .news .swiper-slide{width: 370px}
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
    .banner-nav .nav-btn{display: none}
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .case .container-sm{max-width: 1000px}
    .banner-label{font-size: 28px}
    .product-cell{margin-top: 40px}
    .customized-item{height: 450px}
    .banner-label li+li:after{top: 10px}
    .banner h1{font-size: 50px}
    .banner-list{font-size: 15px}
    .product{padding-top: 100px}
    .case,.news{padding: 100px 0}
    .case-lft{width: 21%}
    .case-rgt{width: 73%}
    .news .swiper-slide{width: 300px}
    .news-picture{height: 440px}
    .news-info{padding: 20px 15px}
    .news-info h3{font-size: 18px}
    .news-info p{line-height: 20px;height: 40px}
    .view-btn{width: 160px;height: 44px;line-height: 44px}
    .news .swiper-wrapper{padding-top:80px}{padding-top: 40px}
}

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


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .case .container-sm{max-width: 92%}
    .case .container-sm:after{display: none}
    .banner-lft{margin-top: -120px}
    .banner-label{font-size: 28px}
    .banner-label li+li:after{height: 28px}
    .banner h1{font-size: 40px}
    .product{padding-top: 60px}
    .product-cont i{width: 60px;height: 60px}
    .product-cont i img{max-width: 50%;max-height: 50%}
    .product-cont h2{font-size: 20px}
    .inner-cont p{font-size: 14px;width: 90%;margin: 20px auto 0}
    .inner-cont .inner-img img{max-width: 80%}
    .case-lft{width: 100%}
    .case-rgt{width: 100%;margin-top: 30px}
    .case-btn{margin-top: 40px}
    .case .container-sm{float: unset}
    .customized-cont{padding: 30px}
    .customized-item{height: 450px}
    .news .swiper-wrapper{padding-top: 60px}
    .news .swiper-slide{width: 360px}
    .news-picture{width: 100%;height: 450px}
    .news-info{padding: 30px}
    .case, .news{padding: 80px 0 60px}
    .news-info h3{font-size: 18px}
    .news-info .time{font-size: 14px}
    .news-info p{font-size: 13px}
    .product-item{opacity: 1}
    .banner-btn a{width: 150px;height: 44px;line-height: 44px;font-size: 15px}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner-pc{display: none}
    .banner-mb{display: block}
    .banner{height: 450px}
    .banner-lft{width: 100%;margin-top: 0;z-index: 1}
    .banner-rgt{position: absolute;width: 100%;height: 100%;z-index: 0;opacity: .5;margin-top: 0}
    .banner-btn{margin-top: 20px}
    .banner-rgt img{max-width: 100%}
    .banner .swiper-pagination{bottom: 30px}
    .banner-label{font-size: 20px}
    .banner h1{font-size: 30px}
    .banner-list{flex-wrap: wrap;margin-top: 20px}
    .banner-list li{width: 50%;margin-bottom: 10px}
    .banner-list li+li{padding-left: 0;margin-left: 0}
    .banner-list li+li:after{display: none}
    .banner-btn a{width: 90px;height: 40px;font-size: 14px;line-height: 40px}
    .banner .swiper-slide-active .banner-label,.banner .swiper-slide-active h1,.banner .swiper-slide-active .banner-list ,.banner .swiper-slide-active .banner-btn{animation: none}
    .index-tit .cn{font-size: 30px}
    .index-tit .en{font-size: 40px}
    .index-tip{max-width: 100%;margin: 15px auto 0;font-size: 16px}
    .product-cell{margin-top: 30px;height: auto;flex-wrap: wrap}
    .product-item,.product-item.active{width: 100%!important;height: 400px}
    .case-rgt .swiper-slide{width: 100%}
    .case-rgt .swiper-slide .case-picture{width: 100%}
    .case-nav{margin-top: 0}
    .customized-item{width: 100%;height: 400px}
    .customized .container-max{flex-wrap: wrap}
    .customized-item:not(:first-child){margin-top: 20px}
    .inner-cont .inner-img img{max-height: 150px}
    .inner-cont .inner-img{margin-top: 20px}
    .inner-cont a{font-size: 16px;margin-top: 20px}
    .case-nav-btn{width: 40px;height: 40px}
    .case .swiper-pagination-progressbar{width: calc(100% - 80px);left: 80px}
    .case-background{font-size: 250px}
    .news .swiper-slide{width: 92%}
    .product-item:hover{width: 100%}
    .news-btn{margin-top: 40px}
    .news .swiper-slide:hover{transform: none}
    .news .swiper-wrapper{padding-top: 30px}
    .banner-label li+li:after{height: 12px}
    .banner-label li+li{padding-left: 10px;margin-left: 10px}
    .customized-cont h3{font-size: 22px}
    .case .index-tip{margin-left: 0}
    .case-rgt .swiper-container{width: 100%;margin: 0;padding: 0}
    .case-rgt .swiper-slide .case-picture{transition: none}
    .case-btn{margin-top: 30px}
}