* { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Microsoft YaHei", "arial"; background: #edeefa; min-width: 1300px; } img { display: block; } a{ text-decoration: none; } ul li { list-style: none; } @font-face { font-family: DINPro-Light; src: url("../font/DINPro-Light_0.woff2") } @font-face { font-family: 'iconfont'; src: url('../font/iconfont.ttf?t=1622020743314') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { width: 100%; height: 95px; background: none; position: absolute; top: 0; left: 0; z-index: 999; } .header.floatHeader { width: 100%; height:95px; background: #02032F; position: fixed !important; -webkit-transition: all 300ms ease; transition: all 300ms ease; top: 0; animation: fadeInDown 0.3s; -moz-animation: fadeInDown 0.3s; -webkit-animation: fadeInDown 0.3s; } .header .navBar { width: 1300px; height: 100%; padding: 0 10px; margin: 0 auto; } .navBar .logo { width:127px; height:66px; background-size: contain; margin-top: 12px; float: left; margin-right:15px; } .navBar .slogan{ width:auto; height:55px; line-height:50px; font-size:22px; letter-spacing: 2px; color:#ffffff; float:left; margin-top:20px; padding:0 15px; border-left: solid 1px #ffffff; margin-right:40px; } .navBar .menu { width: auto; height: 100px; float: left; } .navBar .menu .menu_ul li { width: auto; float: left; height: 95px; font-size: 18px; color: #ffffff; padding: 0 16px; position: relative; line-height: 90px; } .navBar .menu .menu_ul li a { display: block; width: 100%; text-decoration: none; color: #f1f1f1; height: 95px; /*text-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/ position: relative; } .navBar .menu .menu_ul li.active a { color: #2275ff; } .navBar .menu .menu_ul li:hover a { color: #2275ff; } .navBar .menu .menu_ul li a:after { content: ''; width: 0; height: 4px; display: block; position: absolute; border-radius: 2px; bottom: 0; background: none; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .navBar .menu .menu_ul li:hover a:after { width: 100%; background: #2275FF; } .navBar .navMenus { width: 150px; height: auto; background: #FFFFFF; position: absolute; display: none; left: -10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } .navBar .navMenus.productMenus{ width:480px; } .navBar .navMenus.productMenus .left{ float:left; border-right:solid 1px #8AB6FF; width:170px; } .navBar .navMenus.productMenus .right .tabcot{ display:none; } .navBar .navMenus.productMenus .right{ width:310px; float:left; min-height:480px; } .navBar .navMenus a { height: 60px !important; color: #666666 !important; padding-left: 30px; font-size:16px; line-height: 60px !important; } .navBar .navMenus a:hover,.navBar .navMenus a.conmenu{ color: #2275FF !important; } .navBar .navMenus a:after { display: none !important; } .navBar .menu .menu_ul li:hover .navMenus { display: block !important; animation: fadeInUp 0.5s; -webkit-animation: fadeInUp 0.5s; -moz-animation: fadeInUp 0.5s; } .navBar .telePhone { font-family: DINPro-Light; color: #2275ff; font-size: 24px; font-weight: 700; line-height: 90px; float: right; padding-right: 16px; } .navBar .tool { width: 136px; padding-top: 33px; float: right; position: relative; } .navBar .tool .search { width: 76px; height: auto; border-radius: 20rem; position: absolute; right: 54px; font-size: 18px; line-height: 25px; padding: 0 30px 0 15px; background: #2275ff; overflow: hidden; -webkit-transition: all 200ms ease; transition: all 200ms ease; } ::-webkit-input-placeholder { /* Edge */ color: #ffffff; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; } ::placeholder { color: #ffffff; } .navBar .tool .search.active { width: 243px; } .navBar .tool span { display: block; width: 30px; height: 25px; text-align: center; position: absolute; right: 0; color: #FFFFFF; cursor: pointer; top: 0; } .navBar .tool .language { width: 50px; text-align: center; color: #f1f1f1; float: right; font-size: 18px; cursor: pointer; position:relative; } .navBar .tool .languageList{ width:150px; height:auto; background:#ffffff; position:absolute; right:0; top:40px; padding:5px 0; display:none; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } .navBar .tool .languageList.show{ display:block; animation: fadeInUp 0.5s; -webkit-animation: fadeInUp 0.5s; -moz-animation: fadeInUp 0.5s; } .navBar .tool .languageList ul li{ font-size:16px; text-align:center; line-height:45px; color:#666666; } .navBar .tool .languageList ul li:hover{ color:#0072fe; } .navBar .tool .search input { border: none; width: 100%; height: auto; font-size: 14px; outline: none; background: none; color: #ffffff; } .banner { width: 100%; height:6.2rem; overflow: hidden; } .banner video { width: 100%; height: 100%; object-fit: fill; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 50px; } .swiper-pagination-bullet { width: 30px; height: 5px; border-radius: 0; background: #42639b; opacity: 1; transform: skew(-30deg); } .swiper-button-next, .swiper-button-prev { width: 99px; height: 99px; background: url("../img/swiper_left.png") no-repeat; top: 50%; left: 20px; margin-top: -49px; } .swiper-button-next { background: url("../img/swiper_right.png") no-repeat; right: 20px; left: auto; } .swiper-button-prev:hover { background: url("../img/swiper_left_hover.png") no-repeat; } .swiper-button-next:hover { background: url("../img/swiper_right_hover.png") no-repeat; } .swiper-pagination-bullet-active { background: #2275ff; } .swiper-container { width: 100%; height: 100%; } .swiper-container .swiper-slide { width: 100%; height: 100%; } .introduce { width: 100%; height: 1000px; background: url("../img/introduce.jpg") no-repeat center top; position: relative; } .introduceInfo { width: 100%; height: 240px; position: absolute; bottom: 0; background: linear-gradient(rgba(76, 142, 253, 0.8), rgb(76, 142, 253), rgb(76, 142, 253), rgb(76, 142, 253)); } .introduceInfo .info { width: 1300px; margin: 0 auto; padding: 0 10px; } .introduceInfo .info dl { width: 16%; float: left; } .introduceInfo .info dl:first-child { width: 20%; } .introduceInfo .info dl dt { width: 195px; height: 128px; margin: 0 auto; } .introduceInfo .info dl dd p { font-size: 50px; text-align: center; color: #ffffff; line-height: 1; padding-bottom: 10px; } .introduceInfo .info dl dd p.small { font-size: 16px; /*font-family: "Microsoft YaHei", "arial";*/ font-weight: normal; } .skillInfo, .story { width: 1280px; margin: 0 auto; padding-bottom: 90px; background: #ffffff; position: relative; z-index: 99; /*box-shadow: 0px 1px 5px rgba(0,0,0,0.1);*/ } .skillInfo{ padding-bottom:30px; } .skillInfo .title, .product .title, .story .title, .service .title, .news .title { width: 100%; height: auto; padding: 70px 0 50px 0; } .skillInfo .title h4, .product .title h4, .story .title h4, .service .title h4, .news .title h4 { font-size: 26px; text-align: center; font-weight: normal; height: 48px; position: relative; margin-bottom: 24px; } .skillInfo .title h4 a, .product .title h4 a, .story .title h4 a, .service .title h4 a, .news .title h4 a{ color: #0072fe; } .skillInfo .title h4:after, .product .title h4:after, .story .title h4:after, .service .title h4:after, .news .title h4:after { content: ''; width: 70px; height: 2px; position: absolute; left: 50%; margin-left: -35px; bottom: 0; background: #0072fe; } .skillInfo .title p, .product .title p, .story .title p, .service .title p, .news .title p { text-align: center; font-size: 0.16px; color: #333333; line-height: 1; } .skillInfo .skill{ width:100%; height:auto; padding:0 40px; } .skill .skillBox{ width:33.33333%; float:left; margin-bottom:25px; } .skill .skillBox dl{ width:370px; height:240px; position:relative; margin:0 auto; } .skill .skillBox p{ text-align:center; color:#000000; font-size:20px; line-height:70px; } .skill .skillBox dl dt{ width:100%; height:100%; } .skill .skillBox dl dd{ background: rgba(34, 117, 255, 0.9); width:100%; height:100%; position:absolute; top:0; left:0; padding:25px 15px; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; } .skill .skillBox dl dd .icon{ width:96px; height:96px; margin:0 auto 18px auto; } .skill .skillBox dl dd p{ color:#ffffff; font-size:14px; text-align:center; line-height:28px; } .skill .skillBox dl:hover dd{ opacity: 1; } .product { width: 100%; height: auto; padding-bottom: 30px; background: #1e213a; } .product .title p, .news .title p { color: #e6e6e6; } .product .content { width: 1320px; padding: 0 10px; margin: 0 auto; } .productList { width: 100%; height: auto; } .productList .box { width: 25%; height: auto; float: left; padding: 30px 18px 90px 18px; } .productList .box dl { width: 100%; height: 197px; position: relative; cursor: pointer; } .productList .box dl:after { content: ''; width: 100%; height: 2px; background: linear-gradient(to right, #58adff, #2275ff); position: absolute; bottom: 0; left: -5%; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .productList .box dl:before { content: ''; width: 2px; height: 197px; background: linear-gradient(rgba(34, 117, 255, 0.1), #58adff); position: absolute; bottom: -14px; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .productList .box dl:hover:after { background: #2275ff; width: 33px; } .productList .box dl:hover:before { background: #2275ff; height: 30px; } .productList .box dl dt { width: 85%; height: 144px; margin: 0 auto 10px auto; } .productList .box dl dd { text-align: center; font-size: 16px; color: #e6e6e6; } .productList .box dl:hover dd { color: #2275ff; } .productList .box:first-child dl dt { background: url("../img/product/img01_full.png") no-repeat top center; } .productList .box:nth-child(2) dl dt { background: url("../img/product/img_02_full.png") no-repeat top center; } .productList .box:nth-child(3) dl dt { background: url("../img/product/img03_full.png") no-repeat top center; } .productList .box:nth-child(4) dl dt { background: url("../img/product/img04_full.png") no-repeat top center; } .productList .box:nth-child(5) dl dt { background: url("../img/product/img05_full.png") no-repeat top center; } .productList .box:nth-child(6) dl dt { background: url("../img/product/img06_full.png") no-repeat top center; } .productList .box:nth-child(7) dl dt { background: url("../img/product/img07_full.png") no-repeat top center; } .productList .box:last-child dl dt { background: url("../img/product/img08_full.png") no-repeat top center; } .productList .box dl:hover dt { background-position: bottom center; } .serviceLogo { width: 100%; padding: 0 50px; height: auto; overflow: hidden; } .serviceLogo ul li{ width:205px; height:92px; float:left; margin:15px 15px; -webkit-transition: all 700ms ease; transition: all 700ms ease; } .serviceLogo ul li:hover{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .service { width: 100%; height: 1400px; margin-top: -300px; padding-top: 300px; background: url("../img/serviceBg.jpg") no-repeat center center; } .service .title p { width: 1083px; margin: 0 auto; font-size: 17px; color: #89898d; line-height: 1.8em; } .news { width: 100%; height: auto; overflow: hidden; background: #1e213a; } .newsList { width: 1330px; margin: 0 auto; padding: 20px 10px 70px 10px; } .newsList .box { width: 33.3333%; height: auto; float: left; padding: 0 15px; } .newsList .box dl { cursor: pointer; overflow: hidden; } .newsList .box dl dt { width: 100%; height: 280px; margin-bottom: 45px; overflow: hidden; display: flex; justify-content: center; align-items: center; text-align: center; } .newsList .box dl dt img { width: 100%; height: auto; -webkit-transition: all 700ms ease; transition: all 700ms ease; } .newsList .box dl dd h4 { font-weight: normal; color: #ffffff; font-size: 18px; line-height: 30px; position: relative; height: 42px; margin-bottom: 10px; } .newsList .box dl dd h4:after { content: ''; display: block; width: 45px; height: 3px; background: #2275ff; position: absolute; bottom: 0; left: 0; } .newsList .box dl:hover dd h4:after { animation: fadeInLeft 0.7s; -moz-animation: fadeInLeft 0.7s; -webkit-animation: fadeInLeft 0.7s; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .newsList .box dl:hover dd h4 { color: #2275ff; } .newsList .box dl:hover dt img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .newsList .box dl dd p { color: #d5dfeb; font-size: 14px; line-height: 1.8em; } .footer { width: 100%; height: 738px; position: relative; } .footer .company { width: 100%; height: 510px; } .footer .logo { width: 426px; height: 307px; position: absolute; background-image: url("../img/logo_temp.png"); background-size: contain; top: 0; left: 50%; margin-left: -213px; } .footer .footerBar { width: 100%; height: 430px; position: absolute; bottom: 0; background: linear-gradient(rgba(18, 20, 33, 0.85), rgb(18, 20, 33), rgb(18, 20, 33), rgb(18, 20, 33)); } .footer .footerBar .content { width: 1300px; padding: 40px 10px 30px 10px; margin: 0 auto; position:relative; } .footer .content .navMenu { width: 40%; float: left; margin-right: 95px; } .footer .content .navMenu ul { float: left; padding-right: 50px; } .footer .content .navMenu ul:first-child { padding-right: 65px; } .footer .content .navMenu ul li { color: #cdd6e8; line-height: 30px; } .footer .content .navMenu ul li:first-child a{ margin-bottom: 10px; font-size: 16px; } .footer .content .navMenu ul li a { font-size: 12px; color: #cdd6e8; text-decoration: none; } .footer .content .navMenu ul li a:hover { color: #ffffff; } .footer .contact { float: left; } .footer .contact dl { width: 325px; height: auto; clear: both; margin-bottom: 30px; } .footer .contact dl dt { width: 57px; height: 59px; float: left; background: url("../img/call_icon.png") no-repeat; background-size: contain; margin-right: 10px; margin-top: 5px; } .footer .contact dd { color: #2275ff; font-size: 16px; } .footer .contact dd h4 { font-family: DINPro-Light; font-size: 36px; line-height: 1; } .footer .contact p { font-size: 21px; color: #cdd6e8; line-height: 2em; padding-left:12px; } .footer .contact p i { width: 31px; height: 31px; background: url("../img/email_icon.png") no-repeat; background-size: contain; display: inline-block; vertical-align: -10px; margin-right: 25px; } .footer .contact p.address { font-size: 16px; } .footer .contact p.address i { background: url("../img/address_icon.png") no-repeat; background-size: contain; vertical-align: -8px; } .footer .QrCode { width: 340px; height: 200px; float: right; } .footer .QrCode .imgBox { width: 160px; height: auto; float: left; } .footer .QrCode .imgBox p { font-size: 18px; text-align: center; color: #55586d; line-height: 2em; } .footer .QrCode .imgBox .eqCodeImg { width: 160px; height: 160px; padding: 15px; background: #383b4d; } .footer .copy { width: 100%; height: 62px; border-top: solid 1px #2d3357; position: absolute; bottom: 0; } .footer .copy .container { width: 1300px; padding: 0 10px; margin: 0 auto; } .footer .copy .container p { color: #55586d; font-size: 16px; line-height: 62px; text-align: center; } .footer .copy .container p a { color: #3a3c4a; text-decoration: none; } .footer .copy .container p i { width: 20px; height: 20px; display: inline-block; vertical-align: -3px; background: url("../img/6374795873529568214484059.png") no-repeat; background-size: contain; margin-right: 5px; } .footer .copy .container p img{ vertical-align: -4px !important; display: inline-block; margin-left: 10px; } .serviceLogo ul,.navBar .navMenus:after,.navMenu:after, .footer .content:after, .QrCode:after, .storyList:after, .navBar:after, .navBar .menu ul:after, .navBar .tool:after, .introduceInfo .info:after, .skill:after, .skill .right .bottom:after, .productList:after, .newsList:after { content: ''; width: 100%; height: 0; display: block; clear: both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /*宸︾澶?/ .arrow-box .left{ width:14px !important; height:14px; position:absolute; right:0; top:50%; margin-top:-7px; display:none; z-index: 2;/*鍏煎ie8-*/ } .left-arrow1,.left-arrow2{ width:0; height:0; display:block; position:absolute; left:0; top:0; z-index:5;/*鍏煎ie8-*/ border-top:7px transparent dashed; border-left:7px transparent dashed; border-bottom:7px transparent dashed; border-right:7px white solid; overflow:hidden; } .left-arrow1{ border-right:7px #8AB6FF solid; } .left-arrow2{ left:1px;/*閲嶈*/ border-right:7px white solid; } .productMenus .left .conmenu .arrow-box .left{ display:block; } .fodong { top: 25%; right: 0; z-index: 99999; position: fixed } .fodong .hezi { padding: 12px; height: 190px; width:70px; border-radius: 10px; background: #efefef; transition:all 400ms ease-in-out; } .fodong .hezi:hover{ width:161px; } .fodong .hezi li { margin-top: 12px; line-height: 46px; position: relative; } .fodong .hezi .cur:after{ top:-35px; left: -35px; content: ""; width: 51px; height: 53px; z-index:10; position: absolute; background: url(../images/fudong-1.png) no-repeat center center; } .fodong .hezi .cur-2:after{ top:-10px; left: -10px; content: ""; width: 51px; height: 53px; z-index:10; position: absolute; background: url(../images/fudong-1.png) no-repeat center center; } .fodong .hezi li a { color: #0075c1; display: block; font-size: 18px; transition:all 0s; width: 46px; height:46px; overflow: hidden; } .fodong .hezi li a span { display: inline-block; background: #fff; border-radius: 100% } .fodong .hezi li a em { display:inline-block; font-style: normal; vertical-align:top; } .fodong .hezi:hover li a { width: 137px; border-radius: 30px; background: #fff } .fodong .hezi:hover li:before { opacity: 0 } .fodong .hezi li:hover span{opacity:0;} .fodong .hezi li:first-child { margin-top: 0 } .fodong .hezi li:hover a { width: 137px; background: #e5f5ff; border-radius: 30px } .fodong .hezi li:hover a{ color:#137fc6; } .fodong .hezi li:hover:before { opacity: 1 } .fodong .hezi li:hover em { display: inline-block } .links{ width:52%; height:100px; clear:both; position:absolute; bottom:0; right:0; } .links h2{ font-size:16px; color:#55586d; font-weight:normal; line-height:40px; } .links ul li{ float:left; line-height:30px; } .links ul li a{ font-size:12px; color:#55586d; padding-right:15px; } .links ul li a:hover{ color:#ffffff; } .xzcontact { overflow:hidden; } .yqlj { float:left; padding-left:15px; } .yqlj a{ font-size:14px; color:#55586d; padding-right:10px; } .yqlj a:hover{ color:#fff; }