body{font-size: 16px;} .inner{ width:1480px; margin: 0 auto; } .pl-inner{ padding-left: calc((100vw - 1480px)/2);} .pr-inner{ padding-right: calc((100vw - 1480px)/2);} .ml-inner{ margin-left: calc((100vw - 1480px)/2);} .mr-inner{ margin-right: calc((100vw - 1480px)/2);} .smallInner{ width: 90%; max-width: 1200px; margin: 0 auto;} .zw{ margin-top: -100px; padding-top: 100px;} .zwHeader{ height: 100px;} header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100 ; color: #fff;} header .con{ padding: 0 5vw; } .logoImg{filter: grayscale(100%) brightness(500%); height: 56px;} .oneNav{ line-height:100px; white-space: nowrap; display: block; padding: 0 1.2vw; font-size: 18px; font-weight: bold;} .oneNav span { position: relative;} .oneNav span::after{ width: 100%; height: 2px; display: block; content: ''; background:#fff; transition: all .36s; transform:scale(0,1) ; position: absolute; left: 0; bottom: -10px; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; } /* nav li{ position: relative;} */ nav li.on .oneNav span::after,nav li:hover .oneNav span::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); } nav:hover > li:not(:hover) .oneNav{ color: #333; } nav:hover > li:not(:hover) .oneNav span::after{ transform:scale(0,1) ; } nav li dl{position:absolute;text-align: center; width: 100%;top:100%;left: 0; background:#fff; -webkit-box-shadow:0 13px 42px 11px rgba(0,0,0,.15);box-shadow:0 13px 42px 11px rgba(0,0,0,.15); border-bottom-left-radius:5px;border-bottom-right-radius:5px; } nav li dl .inner{display: grid; grid-gap: 10px; grid-template-columns: repeat(3,1fr);} .navIcon{ height: 1.5em;} nav li dl dd{min-width:0} nav li dl dd{white-space: nowrap; border-bottom:1px solid #eee;transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease} nav li dl dd:last-child{border-bottom:0} nav li dl dd a{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; padding: 1.5vw 1vw; color:#333!important; font-weight: normal!important; transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease;display:block } nav li dl dd:hover a{color:var(--color) !important} /* nav li dl dd:hover a{color:#fff!important;} */ /* nav li dl:before{content:"";position:absolute;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f6f1e1;top:-9px;left:50%;margin-left:-9px} */ nav li dl{ pointer-events: none; visibility:hidden; opacity:0; filter:alpha(opacity=0); transform: translateY(20px); transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } nav li:hover dl{ pointer-events: auto;visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateY(0); } header .line{ width: 1px; height: 1em; background: rgba(255, 255, 255, .6);} header::after{ position: absolute; left: 0; bottom: 0; display: block; content: ''; transition: all .36s; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .15); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .headerForm{ } .headerForm .text{ width: 8em;} .headerForm .submit{ width: 40px; height: 40px; background: url(../images/search-w.png) no-repeat center center; background-size: auto 40%;} .languageBtn{ height: 100px;} .languageBtn span{ font-size: 18px;} .languageBtn dl{ line-height: 40px; position:absolute;text-align: center;min-width:120%; width: auto;top:100%;left: 50%; background:#fff; -webkit-box-shadow:0 13px 42px 11px rgba(0,0,0,.15);box-shadow:0 13px 42px 11px rgba(0,0,0,.15); } .languageBtn dl a{ display: block; border-bottom: 1px solid #e5e5e5;} .languageBtn dl a:hover{ background: var(--blue); color: #fff;} .languageBtn dl{pointer-events: none; visibility:hidden; opacity:0; filter:alpha(opacity=0); transform:translateX(-50%) translateY(20px); -ms-transform:translateX(-50%) translateY(20px); -o-transform:translateX(-50%) translateY(20px); -webkit-transform:translateX(-50%) translateY(20px); -moz-transform:translateX(-50%) translateY(20px); transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } .languageBtn:hover dl{ pointer-events: auto;visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); } .languageBtn .iconfont{ transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } header.scroll .headerForm,header:hover .headerForm{ border-color: #aaa; color: #333;} header.scroll .headerForm .text,header:hover .headerForm .text{ color: #333;} header.scroll .headerForm .submit,header:hover .headerForm .submit{ background: url(../images/search.png) no-repeat center center; background-size: auto 40%;} header.scroll,header:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15); color: #333;} header.scroll::after,header:hover::after{ background-color: #fff; height: 100%;} header.scroll .oneNav span::after,header:hover .oneNav span::after{background: var(--color);} header.scroll nav li.on .oneNav ,header:hover nav li:hover .oneNav { color: var(--color);} header.scroll .logoImg,header:hover .logoImg{ filter: none; -webkit-filter: none; } header.scroll .line,header:hover .line{ background: #aaa; } .h_nav{ height: 60px; width: 60px; background-color:var(--color); padding: 18px 8px ; align-items: flex-end; display: flex;} .h_nav .burger{ width: 100%; height: 1px ; background: #fff; transition: .8s; display:inline-block; } .h_nav .burger:first-child{ animation: long 2s linear infinite; -webkit-animation:; } .h_nav .burger:nth-of-type(2){ width: 50%;} .h_nav .burger:nth-of-type(3){ animation: long 3s linear infinite; -webkit-animation: long 3s linear infinite; } .h_nav.close .burger:first-child{ display: none;} .h_nav.close .burger:nth-of-type(3){ display: none;} .h_nav.close .burger:nth-of-type(2) { position: relative; z-index: 1; width: 80%;} .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; z-index: 1;} .h_nav.close .burger:nth-of-type(2) { background: transparent; transform: rotate(-180deg); } .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { opacity: 1; transition: all .3s; } .h_nav.close .burger:nth-of-type(2):before { transform: rotate(45deg); } .h_nav .burger:nth-of-type(2):after { transform: rotate(-45deg); } .nav{ color: #fff !important; padding-bottom: 60px; width: 100%; height: calc(100vh - 60px) ; transition:all .6s ; transform: translateX(100%); background-color: #000; position: fixed; top: 60px; right: 0; flex-direction: column; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; } .nav.show{ transform:translateX(0) ; -webkit-transform:translateX(0) ; -moz-transform:translateX(0) ; -ms-transform:translateX(0) ; -o-transform:translateX(0) ; } .nav li.go-child{ border-top: 1px solid rgba(255, 255, 255, 0.25); position: relative;} .nav li.go-child>a{ line-height: 60px; padding: 0 20px; font-size: 16px;} .h_nav.close{align-items: center; justify-content: center;} .erji{ width: 60px; height: 60px; position: absolute; right: 0 ; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 10; background: url(../images/jia.png) no-repeat center center; background-size: 40% auto;} .nav li.go-child.on .erji{ background: url(../images/jian.png) no-repeat center center; background-size: 40% auto;} .nav-down li a{ line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.25); display: block; padding-left: 25px; font-size: 14px; opacity: 0.8; } .nav{ overflow-y: scroll; } .nav::-webkit-scrollbar {/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ width: 1px;} .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #555; width: 1px; } .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: #000; width: 1px; } /* animation: swiper_img_move 8s linear 0s infinite normal both; */ .idxBanImg { width: 100vw; height: 100vh; object-fit: cover; min-height: 360px; } .neiBanImg{ width: 100vw; max-height: 100vh; object-fit: cover; min-height: 360px; } .idxBanBot{ position: absolute; left: 0; bottom: -1vw; z-index: 10;} .neiBan::after,.aboutBan::after{ z-index: 10; display: block; content: ''; width: 100%; height: 20%; position: absolute; left: 0; top: 0; background-image: linear-gradient(to bottom,rgba(0, 0, 0, .5),transparent); } .aboutBanImg{ min-height: 300px; object-fit: cover;} .aboutBan .text{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .idxDevice .more{ height: 60px; border-radius: 0 50px 50px 0;} .idxDevice .more .iconfont{ transform: rotate(-45deg);} .idxDevice .more:hover .iconfont{ transform: rotate(0); margin-left: 25px;} .secureIcon{ position: absolute; left: 60%; top: 50%; transform: translateY(-50%); width: 90%;} .ul-proc1 li{position: absolute;z-index: 5;} .ul-proc1 li:hover{z-index: 6;} .ul-proc1 .l1{top: 40%;left: 66%; } .ul-proc1 .l2{top: 48%;left: 10%; } .ul-proc1 .l3{top: 86%;left: 20%; } .ul-proc1 li::after{content: '';position: absolute;bottom: 50%;left: 50%;width: 0;height: 0;background-image: url(../images/c-icn07.png);background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;z-index: -1;} .ul-proc1 .dot{position: relative;width: 12px;height: 12px;border-radius: 50%;background-color: var(--red);padding: 5px;z-index: 2;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .ul-proc1 li:hover .dot{width: 20px;height: 20px;background-color: #fff;border: 1px solid var(--red);} .ul-proc1 .dot::before{content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border-radius: 50%;background-color: var(--red);z-index: -1;animation: dotani 2s 1s infinite;-o-animation: dotani 2s 1s infinite;-ms-animation: dotani 2s 1s infinite;-moz-animation: dotani 2s 1s infinite;-webkit-animation: dotani 2s 1s infinite;} .ul-proc1 .dot::after{content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border-radius: 50%;background-color: var(--red);z-index: -1;animation: dotani 2s infinite;-o-animation: dotani 2s infinite;-ms-animation: dotani 2s infinite;-moz-animation: dotani 2s infinite;-webkit-animation: dotani 2s infinite;} @keyframes dotani{0%{width: 100%;height: 100%;opacity: 1;}100%{width: 300%;height: 300%;opacity: 0;}} @-o-keyframes dotani{0%{width: 100%;height: 100%;opacity: 1;}100%{width: 300%;height: 300%;opacity: 0;}} @-ms-keyframes dotani{0%{width: 100%;height: 100%;opacity: 1;}100%{width: 300%;height: 300%;opacity: 0;}} @-moz-keyframes dotani{0%{width: 100%;height: 100%;opacity: 1;}100%{width: 300%;height: 300%;opacity: 0;}} @-webkit-keyframes dotani{0%{width: 100%;height: 100%;opacity: 1;}100%{width: 300%;height: 300%;opacity: 0;}} .ul-proc1 .dot i{display: block;width: 100%;height: 100%;background-color: #fff;border-radius: 50%;} .ul-proc1 li:hover .dot i{background-color: var(--color);} .ul-proc1 .txt{position: absolute;top: 50%;left: 25px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);padding: 10px 20px;z-index: 2;border: 1px solid var(--color);border-radius: 20px;background-color: rgba(23,23,23,.9);-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .ul-proc1 .txt::after{content: '';position: absolute;top: 0;left: -25px;bottom: 0;width: 85px;z-index: -1;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} @media screen and (min-width:900px) { .ul-proc1 li:hover::after{width: 74px;height: 27px;} .ul-proc1 li:hover .dot::before, .ul-proc1 li:hover .dot::after{display: none;} .ul-proc1 li:hover .txt::after{left: -85px;} .ul-proc1 li:hover .txt{top: 40%;left: 85px;border-radius: 10px 0 10px 10px;padding: 25px 50px 40px 30px;background-color: rgba(23,23,23,.9);} .ul-proc1 li:hover .desc{width: 275px;height:220px;} .ul-proc1 li:hover .tit{margin-bottom: 10px;} .ul-proc1 li:hover .icn{width: 32px;} } .ul-proc1 .tit{display: flex;align-items: center;margin-bottom: 0;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .ul-proc1 .icn{display: block;width: 0;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .ul-proc1 .icn img{display: block;width: 100%;} .ul-proc1 .tit h3{flex: 1;display: block;font-size: 15px;line-height: 1;color: #fff;white-space: nowrap;} .ul-proc1 .desc{width: 0;height: 0;font-size: 12px;color: #fff;line-height: 1.6;padding-left: 15px;-webkit-box-orient: vertical;-webkit-line-clamp: 6;display: -webkit-box;overflow:hidden;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} .idxDeviceUl li .img::after { content: ' '; position: absolute; transform: rotate(45deg); left: -80px; top: -60px; bottom: -60px; background: rgba(255, 255, 255, 0.4); cursor:pointer; width: 40px; animation: aftermove .8s infinite ease; -webkit-animation: aftermove .8s infinite ease; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transition: all .4s ease; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; } @keyframes aftermove { from { left: -80px; } to { left: 200px; } } @-webkit-keyframes aftermove /*Safari and Chrome*/ { from { left: -80px; } to { left: 200px; } } .idxsmallBan .iconfont{ position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); font-size: 50px;} .idxsmallBan .prev{ left: 23%;} .idxsmallBan .next{ right: 23%;} .idxsmallBan .swiper-pagination{} .idxsmallBan .swiper-pagination .swiper-pagination-bullet{ width: 50px; height: 4px; background: #fff; border-radius: 0; opacity: .6;} .idxsmallBan .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;} .idxBan .swiper-pagination{} .idxBan .swiper-pagination .swiper-pagination-bullet{ width: 50px; height: 4px; background: #fff; border-radius: 0; opacity: .6;} .idxBan .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: var(--color); opacity: 1;} .outLink{ position: fixed; bottom: 5vw; right: 20px; z-index: 200; box-shadow: 0 0 15PX rgba(0, 0, 0, .1);} .outLink:hover{ opacity: .8;} .idxAppSwiper .text{ position: absolute; bottom: 0; left: 0; z-index: 10;} .idxAppSwiper .swiper-slide:hover .idxAppImg{ transform: scale(1.1);} .idxAppSwiper .swiper-slide:hover .text span{ transform: translateY(-2vw);} .idxWhy{ background: url(../images/idxWhyBg.jpg) no-repeat center center / cover; background-attachment: fixed;} /* .idxAboutImg{ width: 100%; object-fit: cover; min-height: 120vh;} */ .idxAboutUl li:last-child{ margin-right: 0;} .idxAboutCon{ background-size: cover; background-attachment: fixed; background-position: center center; background-repeat: no-repeat;} .idxAbout .more{ height: 60px; } .idxAbout .more::after{ display: block; content: ''; width:0; transition: all .36s; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); } .idxAbout .more:hover::after{ width: 100%;} .idxAbout .more:hover{ border-color: var(--color);} .idxWhy .more{ height: 60px; } .idxWhy .more::after{ display: block; content: ''; width:0; transition: all .36s; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); } .idxWhy .more:hover::after{ width: 100%;} .idxWhy .more:hover{ border-color: var(--color);} .proLeft dd.on a{ font-weight: bold; } .w58{ width: 58%;} .w38{ width: 38%;} .idxAboutBotUl{ margin-top: -4.5vw;} .idxAboutBotUlRight a::after{ display: block; content: ''; transition: all .36s; z-index: 1; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); } .idxAboutBotUlRight a.on::after{ width: 100%;} .idxAboutBotUlRight a.on{ color: #fff;} .idxAboutBotUlRight a.on .idxAboutIcon{filter: grayscale(100%) brightness(500%);} .idxNewsLeft .img{ width: 100%; padding-bottom: 62%; height: 0;} .idxNewsRight .img{ width: 100%; padding-bottom: 68%; height: 0;} footer .top{ background: #1c1f24;} footer .top a:hover{ color: #fff;} footer .bottom{ background: #2f363c;} /* background: rgba(255, 255, 255, .2);*/ .footEwm li{ width: 50px; height: 50px;} .footEwm li .img{ width: 120px; position: absolute; bottom: calc(100% + 8px); left: 50%; margin-left: -60px; display: none;} .footEwm li:hover .img{ display: block;} .footEwm li:hover{ color:#fff} .neiBan .text{ background: rgba(0, 0, 0, .5);} .w28{ width: 28%;}.w66{ width: 66%;} .prolist{display: grid; grid-gap: 1.8vw; grid-template-columns: repeat(3,1fr);} .prolist li{min-width:0} .prolist li .img{ width: 100%; height: 0; padding-bottom: 100%;} .prolist li:hover{ transform: translateY(-8px); box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .provideolist .iconfont{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .proinfoTop .img{ width: 100%; height: 0; padding-bottom: 70%;} .proinfoBot .img{ width: 100%; height: 0; padding-bottom: 70%;} .proinfoBot .swiper-slide.swiper-slide-thumb-active .img{ border-color: var(--color);} .proinfoSmallBan .text{} .proinfoSmallBan .line{ width: 2em; height: 1px;} .idxMore{ padding: 5px;} .idxMore::after{ display: block; content: ''; position: absolute; width: 50px; height: 50px; border-radius: 40px; top: 5px; right: 5px; background: #fff; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } .idxMore .round{ width: 50px; height: 50px;} .idxMore:hover{ color: var(--color);} .idxMore:hover::after{ width: 100%; right: 0; top: 0; height: 100%;} .proOem{ background: url(../images/proOemBg.png) no-repeat center top 36% #1d2127; background-size: auto 30%;} .proOemUl{ display: grid; grid-gap:4vw 1.5vw ; grid-template-columns: repeat(4,1fr);} .proOemUl li{min-width:0} /* .proOemUl{ display: grid; grid-gap: 1.5vw; grid-template-columns: repeat(4,1fr);} */ .proTjSwiper .swiper-slide{ background: #efefee;} .proTjSwiper .swiper-slide .img{ width: 100%; height: 0; padding-bottom: 100%;} .proLatest .more{ height: 60px; } .proLatest .more::after{ display: block; content: ''; width:0; transition: all .36s; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); } .proLatest .more:hover::after{ width: 100%;} .proLatest .more:hover{ color: #fff; border-color: var(--color);} .proLatestList li .tit span{ /*text-decoration: underline; */background-image: linear-gradient(currentColor 0, currentColor 0); background-image: linear-gradient(currentColor 0 0); background-position: 0 calc(100% - 1px); background-size: 0 1px; background-repeat: no-repeat; transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -webkit-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -moz-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -ms-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -o-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; } .proLatestList li:hover .tit span{ background-position: 100% calc(100% - 1px); background-size: 100% 1px} .proLatestList li:last-child{ margin-bottom: 0;} .w24{ width: 24%;} .proLatest .left .top{ width: 100%; height: 0; padding-bottom: 70%;} .proLatest .left .bot .img{ width: 100%; height: 0; padding-bottom: 70%;} .proTj .pagination .swiper-pagination-bullet{ margin: 0 2px;} .animateImg .float img:nth-child(1){ margin-left: 8%;} .animateImg .float img:nth-child(2){margin-top: -8%;} .animateImg .float img:nth-child(3){ margin-top: -25%;} .batterTitTab li span{ border-radius: 10px 0 10px 10px ;} .batterTitTab li .round{ width: 30px; height: 30px; display: none;} .batterTitTab li .round::after{ display: block; content: ''; border-radius: 50%; width: 70%; height: 70%; position: absolute; left: 15%; top: 15%; background: var(--color) } .batterTitTab li .round i{ width: 3px; height: 3px;} .batterTitTab li .line{ width: 1px; height: 3vw;display: none;} .batterTitTab li.on .round{ display: flex;} .batterTitTab li.on .line{ display: flex; } .batterLine .top{ width: 64%; height: 1px; margin-left: 16%;} .batterLine .center .line{ width: 1px; height: 6.6vw;} /* .batterConTab li{ display: none;} */ .batterTabSwiper .swiper-slide{ padding-right:4% ;} .batterConTab{display: grid; grid-gap: 35px; grid-template-columns: repeat(3,1fr);} .batterConTab li {min-width:0; } .batterConIcon{ height: 30px;} .batterBox{ transform: translateX(2%);} .batteryBtn::after{ display: block; content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); transition: all .36s; } .batteryBtn:hover{ color: #fff;} .batteryBtn:hover::after{ width: 100%;} .soluOneCon{ background: url(../images/soluOneConBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .soluOneCon::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, .9); } .soluSmallBan{ height: 10vw; background: url(../images/soluSmallBan.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .soluList li .desc{ height: 11em;} .soluList li .img{ max-width: 40%;} .w58{ width: 58%;} @media screen and (min-width:900px) { .soluList li:nth-child(2n) .inner{ flex-direction: row-reverse;} .soluList li:nth-child(2n) .inner .text{ display: flex; flex-direction: column; text-align: right; align-items: flex-end; } } .soluHonor .title{ position: absolute; left: 50%; transform: translateX(-50%); top: 10%;} .soluBanImg{ width: 100%; min-height: 320px; object-fit: cover;} .supporys{ background: url(../images/supporysBg.jpg) no-repeat center center / cover;} .contactMapTip{ position: absolute; left: 37.3%; top: 38.5%;} .contactMapTip .rouond{ width: .72vw; height: .72vw; background: #c3181f; font-size: 10px;} .contactMapTip .rouond:before,.contactMapTip .rouond::after{display: block; content: ''; border-radius: 50%; position: absolute; } .contactMapTip .rouond:before { height:150%; width:150%; left: -25%; top: -25%; background:transparent; background:rgba(195,24,31,0.3); -webkit-animation:warn 2s linear 0.4s infinite; -moz-animation:warn 2s linear 0.4s infinite; animation:warn 2s linear 0.4s infinite; opacity:0;} .contactMapTip .rouond:after { width:300%; height:300% ; left: -100%; top: -100%; background:transparent; /*background:#7e9ec3;*/ background:rgba(195,24,31,0.2); -webkit-animation:warn 2s linear 0s infinite; -moz-animation:warn 2s linear 0s infinite; animation:warn 2s linear 0s infinite; opacity:0;} .brandCon{ background: url(../images/brandBg.jpg) no-repeat right bottom ; background-size: cover;} .w28{ width: 28%;} .GlobalBox .tit{ background: url(../images/GlobalBoxBg.jpg) no-repeat bottom center / cover;} .dot{position:absolute;} .dot .dot_circle{ width:.72vw; height:.72vw; background:var(--color); position:relative; z-index:3; border-radius:50%;} .dot .dot_circle em{ width: 15%; height: 15%;} .GlobalBox .dot:after,.GlobalBox .dot:before{content:""; position:absolute; border-radius:50%; top:50%; left:50%; z-index:1;} .GlobalBox .dot:before {width:18px; height:18px; background:transparent; background:rgba(49,113,164,0.3); margin-top:-9px; margin-left:-9px; -webkit-animation:warn 2s linear 0.4s infinite; -moz-animation:warn 2s linear 0.4s infinite; animation:warn 2s linear 0.4s infinite; opacity:0;} .GlobalBox .dot:after {width:24px; height:24px;background:transparent; /*background:#7e9ec3;*/ background:rgba(49,113,164,0.2); margin-left:-12px; margin-top:-12px; -webkit-animation:warn 2s linear 0s infinite; -moz-animation:warn 2s linear 0s infinite; animation:warn 2s linear 0s infinite; opacity:0;} .newsNav a{ line-height: 4;} .newsNav a.on{ background: #fff; color: var(--color);} .newslistTop .img{ padding-bottom: 43%; height: 0; width: 100%;} .newlist .img{ width: 142px; height: 61px;} .PopularTitle{ border-width: 5px;} .PopularList li{ width: calc((100% - 25px)/2); margin-right: 25px;} .PopularList li:nth-child(2n){ margin-right: 0;} .PopularList li .img{ padding-bottom: 58%; height: 0; width: 100%;} .PopularList li .text{ left: 0; right: 0; bottom: 0; width: 100%; z-index: 10; position: absolute; background: rgba(49,113,164,0.8);} /* 英文版在线客服 */ #ey-mkf {position:fixed;right:5px;top:40%;transform:translateY(-50%);font-family:Arial,Helvetica,sans-serif;z-index:9999} #ey-mkf * {box-sizing:border-box;font-size:12px;line-height:1.1} .ey-list {padding:0; max-width:78px;border-radius:4px;margin:0} .ey-icon {display:inline-block;background:url(../images/ey-ico23.png)no-repeat;width:28px;height:28px;transform:scale(.8)} .ey-list>li {background-color:#FFF; width:100%; list-style:none;text-align:center;padding:2px 0 4px;transition:all .2s ease-in-out} .ey-list>li>a>p {margin:0;transform:scale(.9);text-transform:capitalize} .ey-list>li a {color:#555;text-decoration:none;display:block;padding:0 2px} .ey-wechat-img {position:absolute;right:calc(100% - 1px);bottom:0;width:120px;padding:10px 10px 6px;background-color:#FFF;border:1px solid #EEE;border-radius:4px;transform:scale(0);transform-origin:right bottom} .ey-wechat-img img {display:block;max-width:100%;max-height:100%} .ey-wechat-img p {margin:4px 0 0;transform:scale(.9);word-break:break-all} .ey-wechat-img em {display:inline-block;width:16px;height:16px;background:url(../images/ey-ico23.png)-76px -8px/99px no-repeat;vertical-align:middle;margin-right:4px} .ey-list>li:hover .ey-wechat-img {transition:transform .4s;transform:scale(1)} .ey-email-text {border: 1px solid #e5e5e5; font-size: 18px !important; position:absolute;right:calc(100% - 1px);bottom:0;width:auto;text-align:center; white-space: nowrap; height: 100%; display: flex; align-items: center; text-align:center; padding:10px 10px 6px;background-color:#FFF; transform:scale(0);transform-origin:right bottom} .ey-list>li:hover .ey-email-text {transition:transform .4s;transform:scale(1)} .ey-list>li:hover,.ey-list>li:hover+li {border-color:transparent} .ey-email .ey-icon {background-position:-8px -6px} .ey-whatsapp .ey-icon {background-position:-52px -50px} .ey-skype .ey-icon {background-position:-52px -6px} .ey-wechat .ey-icon {background-position:-144px -10px} .ey-list li:hover a {color:#FFF} .ey-email:hover {background-color:#f90} .ey-whatsapp:hover {background-color:#2cb740} .ey-skype:hover {background-color:#0091df} .ey-wechat:hover {background-color:#51c332} .ey-email:hover .ey-icon {background-position:-96px -6px} .ey-whatsapp:hover .ey-icon {background-position:-52px -94px} .ey-skype:hover .ey-icon {background-position:-96px -50px} .ey-wechat:hover .ey-icon {background-position:-144px -62px} .ey-list>li:first-child {border-radius:4px 4px 0 0;border:0} .ey-list>li:last-child {border-radius:0 0 4px 4px} @media (max-width:768px) {#ey-mkf {display:none}}