/* * Created by Edward on 16/03/09 * Copyright (c) 2016 shuwon.com All rights reserved */ @charset "utf-8"; *{ margin:0; padding:0; } body,blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button,input, textarea,th, td,img{border:medium none;margin: 0;padding: 0; outline:none;} body,button, input, select, textarea {font: 1.4rem "Microsoft YaHei",tahoma, Srial, helvetica, sans-serif; outline:none;} ul, ol,li { list-style: none; } a { text-decoration: none; color: #3E3E3E;} a:hover{ color: #15499a;} html,body{width: 100%;height: auto; margin: 0;padding: 0; font-size:14px;background: #f9f9f9;color: #3E3E3E; overflow-x: hidden;} img{ border:0px;} .animate{-webkit-transition-duration:.5s;transition-duration:.5s; -moz-transition-duration:.5s;} .animate20{-webkit-transition-duration:.25s;transition-duration:.25s; -moz-transition-duration:.25s;} .animate2ms{-webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -ms-transition-duration:0.3s;transition-duration:0.3s;} .animate{-webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -ms-transition-duration:0.5s;transition-duration:0.5s;} .animate1{-webkit-transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s;transition-duration:1s;} .animate2{-webkit-transition-duration:2s; -moz-transition-duration:2s; -ms-transition-duration:2s;transition-duration:2s;} .animate5{-webkit-transition-duration:5s; -moz-transition-duration:5s; -ms-transition-duration:5s;transition-duration:5s;} ::selection{background: #15499a; color: #fff;} ::-moz-selection{background: #15499a; color: #fff;} .model_modileNav_list a.active{ background: #FFFFFF; color: #113F87; border-color: #FFFFFF;} /**************************************HOME*********************************************/ .topBar{ width: 100%; height: 30px; background: #2c2c2c;} .topBarBox{ max-width: 1000px; height: 30px; margin: auto; position: relative;} .topBarBox .topMap{ width: 200px; height: 30px; float: right;} .topBarBox .topMap img{ float: left; margin-top: 5px;} .topBarBox .topMap b{ font-weight: normal; float: left; font-size: 12px; color: #7d7d7d; line-height: 30px; margin-left: 5px;} .topBarBox .topMap span{ display: block; width: 0px; height: 0px; border-top: 5px solid transparent;border-bottom: 5px solid transparent; border-left: 5px solid #7d7d7d; float: left; margin-left: 5px; margin-top: 10px;} .topBarBox a{ float: right; margin-left:10px; margin-top: 1.5px; padding: 2px;} .header{ width: 100%; height: 80px; background: #f9f9f9; position: relative; z-index: 100;} .header.cur{ position: fixed; top: 0px; border-bottom: 1px solid #E4EDF0;} .navBox{ max-width: 1000px; height: 100%; margin: auto;} .navBox h1{ float: left; position: relative; top: 50%; margin-top: -12.5px;} .navBox h1 img{ display: block;} .navIconUrl{ width: 80px; height: 100%; float: right; cursor: pointer; position: relative;} .navIcon{ padding: 16px 17.5px; width: 18px; height: 15px; top: 50%; margin-top: -25px; left: 15px; position: relative; background: url(../images/navIcon.png) no-repeat; overflow: hidden;} .navIconUrl:hover{ background: #14a6e1;} .navIconUrl:hover .navIcon{ background-position: 0px -50px;} .navIconUrl:hover span{ display: block;} .navIconUrl:hover .navUrlDonw{ display: block;} .navUrlDonw{ width: 768px; height: 69px; position: absolute; bottom: -69px; left: 50%; margin-left: -728px; background:#2c2c2c; display: none; cursor: default;} .navUrlDonw ul{ margin-left: 50px;} .navUrlDonw ul li{ width: 160px; height: 20px; float: left; text-align: center; line-height: 20px; border-right: 1px solid #3f3f3f; border-left: 1px solid #5e5d5d; margin-top: 24px;} .navUrlDonw ul li a{ display: block; width: 100%; height: 20px; color: #FFFFFF;} .navUrlDonw ul li a .icon{ width: 20px; height: 20px; float: left; margin-left: 15px;} .navUrlDonw ul li a .text{ width: 80px; float: left; margin-left: 5px;} .navUrlDonw ul li a:hover .text{ text-decoration: underline;} .navIconUrl span{ display: block; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #14a6e1; position: absolute; left: 50%; margin-left: -10px; bottom: -10px; display: none;} /*.nav{ width: 665px; height: 100%; float: right;} .nav a{ display: block; width: 95px; height: 100%; float: left; position: relative; cursor: pointer; -webkit-transition-duration:.5s;transition-duration:.5s;} .nav a .navCn{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url(../images/navText.png) 0px center no-repeat; } .nav a .navEn{ width: 100%; height: 50px; position: absolute; left: 0px; top: 50%; margin-top: -25px; line-height: 50px; font-weight: bold; text-align: center; color: #FFFFFF; opacity: 0;} .nav a.b .navCn{ background: url(../images/navText.png) -95px center no-repeat;} .nav a.c .navCn{ background: url(../images/navText.png) -190px center no-repeat;} .nav a.d .navCn{ background: url(../images/navText.png) -285px center no-repeat;} .nav a.e .navCn{ background: url(../images/navText.png) -385px center no-repeat;} .nav a.f .navCn{ background: url(../images/navText.png) -480px center no-repeat;} .nav a.g .navCn{ background: url(../images/navText.png) -575px center no-repeat;} .nav a:hover{ background: #15499a;} .nav a:hover .navCn{ opacity: 0;} .nav a:hover .navEn{ opacity: 1;}*/ .nav { width: 665px; height: 100%; float: right; } .nav a { display: block; width: 95px; height: 100%; float: left; position: relative; cursor: pointer; -webkit-transition-duration: .5s; transition-duration: .5s; perspective: 200px;position: relative; overflow: hidden;} .nav a .three-d{transition: all .3s ease-out;transform: translateZ(-40px);transform-style: preserve-3d;pointer-events: none;position: absolute; top: 0; left: 0; height: 100%; width: 100%;} .nav a .navCn {transform: rotatex(0deg) translatez(40px);width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url(../images/navText.png) 0px center no-repeat; } .nav a .navEn {transform: rotatex(90deg) translatez(40px); width: 100%; height: 100%; position: absolute; left: 0px; top: 0; line-height: 80px; font-weight: bold; text-align: center; color: #FFFFFF; /*opacity: 0;*/ background: #15499a;opacity: 0;transition:all .5s;-webkit-transition:all .5s;} .nav a .navCn,.nav a .navEn{pointer-events: none;box-sizing: border-box;} .nav a:hover .three-d,.nav a.active .three-d{transform: translateZ(-40px) rotatex(-90deg);} .nav a:hover .navEn,.nav a.active .navEn{opacity: 1;} .nav a.b .navCn { background: url(../images/navText.png) -95px center no-repeat; } .nav a.c .navCn { background: url(../images/navText.png) -190px center no-repeat; } .nav a.d .navCn { background: url(../images/navText.png) -285px center no-repeat; } .nav a.e .navCn { background: url(../images/navText.png) -385px center no-repeat; } .nav a.f .navCn { background: url(../images/navText.png) -480px center no-repeat; } .nav a.g .navCn { background: url(../images/navText.png) -575px center no-repeat; } .nav a:hover {/* background: #15499a;*/ } /*.nav a:hover .navCn { opacity: 0; } .nav a:hover .navEn { opacity: 1; }*/ #banner { width: 100%; height: 535px; background: #15499A; position: relative; } /*#banner ul li{ width: 100%; height: 535px; position: absolute; left: 0px; top: 0px; background: url(../images/banner1.jpg) center top no-repeat;}*/ .banner{ width:100%; height:535px; position:relative;} .banner .bannerImg{ width:10000px; height:100%; position:absolute; top:0; left:0;} .banner .bannerImg li{ height:100%; float:left; transition:1s ease;transition:1s ease;-webkit-transition:1s ease;-moz-transition:1s ease;position: relative;} .banner .bannerImg li.cur1{ background:url(../images/banner1.jpg) center; background-size:cover;} .banner .bannerImg li.cur1 .font1{ position:absolute; left:50%; top:50%; margin-left:-270px; margin-top:20px; display:none;} .banner .bannerImg li.cur1 .font2{ position:absolute; left:50%; top:50%; margin-left:-130px; margin-top:80px; display:none; } .banner .bannerImg li.cur1 .font3{ position:absolute; left:50%; top:50%; margin-left:-500px; width:450px; height:auto; color:#fff; margin-top:-30px; display:none; } .banner .bannerImg li.cur2{ background:url(../images/banner2.jpg) center; background-size:cover;} .banner .bannerImg li.cur2 .font1{ position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-150px; display:none;} .banner .bannerImg li.cur2 .font2{ position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-110px; display:none; } .banner .bannerImg li.cur2 .font3{ position:absolute; left:50%; top:50%; margin-left:-500px; width:450px; height:auto; color:#6092b7; margin-top:-30px; display:none; } .banner .bannerImg li.cur3{ background:url(../images/banner3.jpg) center; background-size:cover;} .banner .bannerImg li.cur3 .font1{ position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-150px; display:none;} .banner .bannerImg li.cur3 .font2{ position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-110px; display:none; } .banner .bannerImg li.cur3 .font3{ position:absolute; left:50%; top:50%; margin-left:-500px; width:450px; height:auto; color:#fff; margin-top:-30px; display:none; } .banner .bannerImg li.cur4{ background:url(../images/banner4.jpg) center; background-size:cover; } .banner .bannerImg li.cur4 .font1{ position:absolute; left:50%; top:50%; margin-left:-105px; margin-top:-180px; display:none;} .banner .bannerImg li.cur4 .font2{ position:absolute; left:50%; top:50%; margin-left:-192px; margin-top:-140px; display:none; } .banner .bannerImg li.cur4 .font2 .l{ display: block; width: 200px; height: 1px; background: #FFFFFF; position: absolute; left: 50%; margin-left: -405px; top: 25px;} .banner .bannerImg li.cur4 .font2 .r{ display: block; width: 200px; height: 1px; background: #FFFFFF; position: absolute; left: 50%; margin-left: 190px; top: 25px;} .banner .bannerImg li.cur4 .font3{ position:absolute; left:50%; top:50%; margin-left:-500px; width:450px; height:auto; color:#fff; margin-top:-30px; display:none; } .banner .bannerDian{ height:12px; width:260px; position:absolute; bottom:50px; left:50%; margin-left:-90px;} .banner .bannerDian li{ width:45px; height:10px; float:left; margin-right:10px; cursor:pointer; border-bottom: 2px solid #FFFFFF; position: relative;} .banner .bannerDian li .dotImg{ width: 44px; height: 33px; position: absolute; top: -30px; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0);transform: scale(0);} .banner .bannerDian li.cur{border-bottom: 2px solid #60d2ff;} .banner .bannerDian li.cur .dotImg{ opacity: 1;-webkit-transform: scale(1); -moz-transform: scale(1);transform: scale(1);} .banner .bannerDian li:hover{border-bottom: 2px solid #60d2ff;} .banner .bannerDian.cur{ opacity:0; filter:alpha(opacity=0);-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2);} .notice{ width: 100%; height: 55px; background: #FFFFFF;} .noticeBox{ max-width: 1000px; height: 55px; margin: auto; position: relative;} .noticeBox .noticeIcon{ width: 20px; height: 20px; float: left; margin-top: 17.5px;} .noticeBox .noticeList{ width: 500px; height: 20px; float: left; margin-left: 10px; margin-top: 17.5px; line-height: 20px; position: relative; overflow: hidden; margin-right: 15px;} .noticeBox .noticeList ul{ width: 100%; height: 150px; position: absolute; left: 0px; top: 0px;} .noticeBox .noticeList ul li{ width: 100%; height: 20px; line-height: 20px; position: relative; overflow: hidden;} .noticeBox .noticeList ul li span{ font-size: 12px; margin-left: 15px; opacity: .5;} .noticeBox .noticeBtn{ width: 12px; height: 11px; background: #00A1DF; float: left; margin-right: 5px; margin-top: 22px; background: url(../images/noticeBtn.png) no-repeat; cursor: pointer; opacity: .5;} .noticeBox .noticeBtn.next{ background-position: -12px 0px;} .noticeBox .noticeBtn:hover{ opacity: 1;} .noticeBox .noticeMore{ position: absolute; right: 0px; width: 90px; height: 25px; border: 2px solid #15499A; border-radius: 25px; top:12.5px; display: block; line-height: 25px; text-align: center; font-size: 12px;} .noticeBox .noticeMore:hover{ background: #15499A; color: #FFFFFF;} .aboutBox{ width: 100%; height: auto;} .homeAboutContent{ max-width: 1000px; height: auto; margin: auto;} .homeAboutContent .des{ font-size: 12px; line-height: 24px; text-align: center;} .homeServieList{ width: 100%; height: auto; overflow: hidden; padding: 50px 0px;} .homeServieList ul li{ width: 30%; height: auto; float: left; margin-right: 5%; text-align: center; line-height: 24px; font-size: 12px; color: #838e95;} .homeServieList ul li.three{ margin-right: 0%;} .homeServieList ul li .icon{ width: 75px; height: 75px; position: relative; margin: auto;} .homeServieList ul li .text{ width: 100%; margin-top: 10px;} .cyBox{ width: 100%; height: 700px; position: relative; background: url(../images/bg.jpg) center top no-repeat; background-attachment: fixed;} .cyBoxImg{ width: 100%; height: 700px; position:absolute; left: 0px; top: 0px; overflow: hidden;} .cyBoxImg ul li{ width: 100%; height: 700px; position: absolute; left: 0px; top: 0px; background: url(../images/bg1.jpg) center top no-repeat; -webkit-transform: scale(1.2); -moz-transform: scale(1.2);transform: scale(1.2); opacity: 0;} .cyBoxImg ul li.b{ background-image: url(../images/bg2.jpg);} .cyBoxImg ul li.c{ background-image: url(../images/bg3.jpg);} .cyBoxImg ul li.d{ background-image: url(../images/bg4.jpg);} .cyBoxImg ul li.e{ background-image: url(../images/bg5.jpg);} .cyBoxImg ul li.active{ -webkit-transform: scale(1); -moz-transform: scale(1);transform: scale(1); opacity: 1;} .cyBox .cyBoxCenter{ max-width: 1000px; height: auto; margin: auto; position: relative;} .cyBox .cyTips{ width: 100%; height: 50px; position: absolute; top: 0px;} .cyBox .cyTips ul li{ width: 100%; font-size: 14px; font-weight: bold; text-align: right; color: #FFFFFF; position: absolute; left: 100px; top: 0px; opacity: 0;} .cyBox .cyTips ul li.active{ opacity: 0.6; top: 50px;} .cyList{ /*width: 100%;*/ height: auto; margin-top: 105px;margin-left:8%} .cyList ul{ width: 660px; height: auto; margin: auto;} .cyList ul li{ width: 154px; height: auto; float: left; position: relative; cursor: pointer; margin-left: -30px;} .cyList ul li .thum{ width: 154px; height: 154px; position: relative;} .cyList ul li .thum .linkImg{ position: absolute; left: 0px; top: 0px; opacity: 1;} .cyList ul li .thum .hoverImg{ position: absolute; left: 0px; top: 0px; opacity: 0;-webkit-transform: rotate(270deg);} .cyList ul li .thum .sjx{ width: 10px; height: 10px; position: absolute; left: 50%; margin-left: -5px; bottom: 0px; background: #f90001; -webkit-transform: rotate(45deg); opacity: 0;} .cyList ul li img{ display: block;} .cyList ul li .text{ position: absolute; left: 0px; top: 0px; line-height: 154px; font-size: 18px; font-weight: bold; color: #FFFFFF; text-align: center; width: 100%; -webkit-transform: rotate(0deg);} .cyList ul li.five{ margin-right: 0px;} .cyList ul li:hover .thum .linkImg,.cyList ul li.active .thum .linkImg{ opacity: 0; -webkit-transform: rotate(270deg);} .cyList ul li:hover .thum .hoverImg,.cyList ul li.active .thum .hoverImg{ opacity: 1;-webkit-transform: rotate(0deg);} .cyList ul li:hover .thum .sjx,.cyList ul li.active .thum .sjx{ bottom: -5px; opacity: 1;} .cyList ul li:hover .text,.cyList ul li.active .text{-webkit-transform: rotate(360deg);} .cyBoxInfo{ width: 80%; line-height: 28px; color: #FFFFFF; opacity: .8; text-align: center; padding: 75px 10% 125px 10%; float: left; position: relative;} .cyBoxInfo .box{ width: 80%; height: auto; position: absolute; opacity: 0; top: 150px;} .cyBoxInfo .box.active{ opacity: 1; top: 75px;} .homeService{ width: 100%; height: 250px; position: relative; overflow: hidden; background: #e4e6e9;} .homeService ul li{ width: 28%; height: 350px; position: absolute; overflow: hidden; -webkit-transform: rotate(10deg) translateZ(0); -moz-transform: rotate(10deg) translateZ(0);transform: rotate(10deg) translateZ(0); background: #000; left: -3%; top: -50px;} .homeService ul li.b{ background: #14A6E1; left: 50%;} .homeService ul li.c{ background: #6092B7; left: 75%;} .homeService ul li.d{ background: #E4E6E9; left: 25%;} .homeService ul li .serviceBg{ width: 120%; height: 100%; background:url(../images/service1.jpg) no-repeat; position: absolute; left: -10%; -webkit-transform: rotate(-10deg) translateZ(0); -moz-transform: rotate(-10deg) translateZ(0);transform: rotate(-10deg) translateZ(0); position: relative; background-size: cover;} .noRotaion{-webkit-transform: rotate(-10deg) translateZ(0); -moz-transform: rotate(-10deg) translateZ(0);transform: rotate(-10deg) translateZ(0);} .homeService ul li .serviceBg.b2{ background-image: url(../images/service2.jpg);} .homeService ul li .serviceBg.b3{ background-image: url(../images/service3.jpg); background-position: center top;} .homeService ul li .serviceBg.b4{ background-image: url(../images/service4.jpg);} .homeService ol{ width: 100%; height: auto; position: absolute; left: 0px; top: 0px;} .homeService ol li{ width: 25%; height: 250px; float: left; position: relative;} .homeService ol li a{ display: block; width: 100%; height: 100%; display: block;} .homeService ol li .serviceImg{ width: 250px; height: 75px; position: absolute; left: 20px; top: 50%; margin-top: -37.5px;} .homeService ol li .serviceImg.two{ left: 50%; margin-left: -75px;} .homeService ol li .serviceImg.four{ height: 100px; margin-top: -36px;} .homeService ol li .ewm{ width: 100px; height: 100px; position: absolute; right: 10px; top: 50%; margin-top: -50px; background: #FFFFFF;} .homeService ol li .logoShadow{ width: 160px; height: 190px; position: absolute; left: 50%; top: 50%; margin-left: -80px; margin-top: -95px;} .footer{ width: 100%; height: auto; background: #272727;} .footerBox{ max-width: 1000px; height: auto; margin: auto; padding: 50px 0px; overflow: hidden;} .footerNav{ width: 600px; height: auto; float: left;} .footerNav ul li{ width: 25%; height: auto; line-height: 30px; float: left;} .footerNav ul li a{ margin-right: 10px; color: #FFFFFF; display: block; width: 100%; opacity: .6; font-size: 12px;} .footerNav ul li a.first{ font-weight: bold; opacity: 1; font-size: 14px;} .footerNav ul li a:hover{ opacity: 1;} .tel{ width: 100%; height: 30px; float: left; margin-top: 25px;} .tel img{ display: block;} .footerChat{ width: 300px; height: auto; float: right; color: #FFFFFF;} .footerChat h2{ width: 100%; font-size: 24px; font-weight: normal;} .footerChat .text{ line-height: 30px; text-transform: uppercase; opacity: .6;} .chatList{ width: 100%; overflow: hidden; margin: 15px 0px;} .chatList li{ width: 78px; height: 115px; float: left; margin-right: 10px;} .chatList li p{ display: block; width: 100%; text-align: center; color: #FFFFFF; font-size: 12px; opacity: .6;} .chatList li .icon{ width: 78px; height: 78px; background: url(../images/oa.jpg) no-repeat;} .chatList li:hover .icon{ background-position: -78px 0px;} .navFooter{ width: 100%; height: 12px; line-height: 12px;} .navFooter a{ color: #FFFFFF; height: 12px; line-height: 12px; padding:0px 13px; font-size: 12px; position: relative;} .navFooter a.first{ padding-left: 0px;} .navFooter a span{ width: 1px; height: 10px; position: absolute; right: 0px; top: 3px; display: block; background: #FFFFFF;} .navFooter a:hover{ text-decoration: underline;} .copyright{ width: 100%; height: 38px; background: #313131;} .copyrightBox{ max-width: 1000px; height: 38px; margin: auto; line-height: 38px; color: #707070; font-size: 12px; text-transform: uppercase;} .copyrightBox a{ color: #707070;} .copyrightBox a:hover{ color: #FFFFFF;} .copyrightBox a.cp{ cursor: default;} .copyrightBox a.cp:hover{ color: #707070;} .backTop{ width: 80px; height: 80px; position: fixed; right: 50px; bottom: -100px; background:#FFFFFF url(../images/backTop.png) 0px 0px no-repeat; cursor: pointer; z-index: 500; border: 1px solid #15499a; z-index: 500;} .backTop:hover{ background:#15499a url(../images/backTop.png) 0px -80px no-repeat;} .backTop.active{ bottom: 100px;} /**************************************CONTACT*4-7************************************************/ #subBanner { width: 100%; height: 200px; background:#a7daf5 url(../images/joinBanner.jpg) center top no-repeat; } .moblieSubBanner{ width: 100%; height: auto; display:none;} #map { width: 100%; height: 475px; } #contact { width: 100%; height: auto; overflow: hidden; } #contact ul { max-width: 1000px; height: auto; margin: auto; padding: 25px 0px 100px; overflow: hidden; } #contact ul li { width: 23%; height: auto; float: left;margin: 0 1%;position: relative; cursor: pointer;} #contact ul li .cTop { width: 100%; height: 167px;position: relative; z-index: 10;} #contact ul li .cTop .icon { width: 70px; height: 70px; margin: auto; border-radius: 70px;text-align: center;} #contact ul li .cTop .text { width: 100%; text-align: center; line-height: 30px; color: #174fa3; font-weight: bold;} #contact ul li .cBottom { width: 90%; height: 65px;line-height: 24px; text-align: center; background: #f6f6f6;position: absolute;left: 0; padding: 45px 5% 0; text-align: left; opacity: 0; bottom: -20px;} #contact ul li .cBottom .row{ width: 220px; height: auto; overflow: hidden; color: #174fa3;} #contact ul li .cBottom .row .icons{ width: 18px; height: 18px; float: left; font-weight: bold; color: #17499e; margin-left: 35px;} #contact ul li .cBottom .row .des{ width: 140px; height: auto; float:left; font-size: 12px; line-height: 18px; margin-left: 10px;} #contact ul li:hover .cTop{ -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px);transform: translateY(-10px);} #contact ul li:hover .cBottom{ opacity: 1; bottom: 10px;} /**********************NEWS*************************/ .container1000{ max-width: 1000px; margin: auto; position: relative;} #title{ font-size: 0px; text-align: center;} #news{ width: 100%; height: auto; position: relative; background: #f6f6f6; overflow: hidden;} #news .newBanner{ width: 100%; font-size: 0px;} #news #title{ padding-top: 50px; padding-bottom: 30px;} #news .changeTit{ text-align: center;} #news .changeTit li{ display: inline-block; margin: 0 30px; line-height: 30px; cursor: pointer;} #news .changeTit li .boxB{ position: relative; width: 14px; height: 14px; top: 6px; border: 1px solid #c9c9c9; float: left; background: #FFFFFF;} #news .changeTit li .boxB .box{ position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; background: #FFFFFF;} #news .changeTit li.cur .boxB .box{ background: #15499a;} #news .changeTit .text{ float: left; margin-left: 14px;} .newBox{ width: 100%; height: auto; margin-top: 35px;} .newBox { width: 100%; height: auto; overflow: hidden;} .newBox li{ float: left; width: 24.6%; margin: 0 .2% 4px;} .newBox li:hover .textBox{ transform: rotateX(-90deg); } .newBox li a{ display: block; width: 100%; height: 100%; perspective: 1000000; -webkit-perspective: 1000000;} .newBox li .imgs{font-size: 0px;width: 100%;height: 140px;overflow: hidden;} .newBox .textBox{ height: 130px; position: relative;-webkit-transform-style: preserve-3d;transform-style: preserve-3d; transition-duration: .5s; -webkit-transition-duration: .5s;} .newBox .textBox>div{ height: 130px; width: 100%; position: absolute; top: 0px; left:0px;} .newBox .textBox .tit{ font-size: 14px; height: auto; color: #3E3E3E; line-height: 20px; width: 90%; margin:10px auto 0; font-weight: bold;} .newBox .textBox .text{ color: #545454; font-size: 12px; width: 90%; margin:5px auto; line-height: 22px; opacity: .5; filter:alpha(opacity=50);} .newBox .textBox .date{ width: 90%; height: auto; padding: 0px 5%; line-height: 24px; color: #545454; opacity: .5; font-size: 12px;} .newBox .textBox .t1{ transform: translateZ(65px); background: #FFFFFF; -webkit-transform: translateZ(65px);} .newBox .textBox .t2{ transform:rotateX(90deg) translateZ(65px) ; -webkit-transform:rotateX(90deg) translateZ(65px) ; background: #15499a;} .newBox .textBox .t2 .tit{ color: #FFFFFF;} .newBox .textBox .t2 .text{ color: #FFFFFF;} .newBox .textBox .t2 .date{ color: #FFFFFF;} .spinner {margin:auto; padding: 50px 0; width: 50px;height: 60px;text-align: center;font-size: 10px; cursor: pointer;} .spinner.cur > div{-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;} .spinner > div {background-color: #15499a;height: 100%;width: 6px;display: inline-block; -webkit-transform: scaleY(0.4); -moz-transform: scaleY(0.4);transform: scaleY(0.4); } .spinner.cur .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;} .spinner.cur .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;} .spinner.cur .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;} .spinner.cur .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;} .joinDemo1{ width: 1200px; height: auto; margin: auto;} @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } /***************li********************************************************li*************/ .in_banenr{ width: 100%;position:relative; height: auto;} .in_banenr img{position: relative;left: 50%; margin-left: -960px;display: block;} .content1200x{ max-width: 1000px; margin: 0 auto;} /***product**/ .l_product{ width: 100%; height: auto; position: relative;} .box_l_product.content1200x{overflow: hidden;} .box_l_product .summary_G.floatL{ float:left; color: #3E3E3E;} .box_l_product .summary_G.floatL .morae span{ background: url(../images/Product_more_pic.png) no-repeat 0 0px;} .box_l_product .summary_G.floatL.three{background-image: url(../images/blank70.png); color: #FFFFFF;} .box_l_product .summary_G.floatL.three a{ color: #FFFFFF;} .summary_G.floatL article{margin-top: 10px;} .summary_G.floatR{ float:right;} .summary_G.floatR .morae span{ background: url(../images/Product_more_pic.png) no-repeat 0 0;} .summary_G.floatR .title span{text-transform: uppercase;} .box_l_product .summary_G.floatL:hover,.box_l_product .summary_G.floatR:hover{ background: #15499A; color: #FFFFFF;} .box_l_product .summary_G.floatL:hover a{ color: #FFFFFF;} .box_l_product .summary_G.floatR:hover a{ color: #FFFFFF;} .box_l_product .summary_G.floatL.three:hover{ color: #FFFFFF;} .box_l_product .summary_G:hover .morae{ color: #FFFFFF;} .box_l_product .summary_G:hover a{ color: #FFFFFF;} .l_product .box1{ padding: 54px 0;} .l_product .box1 .BIg_title{ font-size: 24px; color: #cca05c; font-weight: bold;text-align: center;} .l_product .box1 .BIg_title span{display: block; font-weight: 100; padding-top: 5px;} .summary_G{ width: 435px; height: 300px; padding:25px; position: relative; background:url(../images/summary_G.png);} .summary_G .title{ font-size: 24px; font-weight: bold;} .summary_G .title span{display: block;font-size: 16px; font-weight: 100; line-height: 32px;position: relative;text-indent:18px; text-transform: uppercase;} .summary_G .title span:after{ width: 6px; height: 16px; content: ""; position: absolute; left: 0; top:9px; background:#ffa00c;} .summary_G article{ font-size: 12px; line-height: 22px;} .summary_G .morae{ position: absolute; bottom:32px; left: 30px; font-size: 12px; display: block;} .summary_G .morae span{ width: 15px; height: 10px;display: inline-block; margin-right: 10px;} .box2.box_l_product{ background: url(../images/l_product_box1.jpg) center top no-repeat;} .box3.box_l_product{ background: url(../images/l_product_box2.jpg) center top no-repeat;} .box4.box_l_product{ background: url(../images/l_product_box3.jpg) center top no-repeat;} .box5.box_l_product{ background: url(../images/l_product_box4.jpg) center top no-repeat;} .box6.box_l_product{ background: url(../images/l_product_box5.jpg) center top no-repeat;} .box7.box_l_product{ background: url(../images/l_product_box6.jpg) center top no-repeat;} /*l_product_int*/ #productList{ width: 100%; height: auto; padding: 75px 0px;} #productList ul{ max-width: 1000px; height: auto; margin: auto;} #productList ul li{ width: 100%; height: auto; overflow: hidden; padding: 15px 0px; border-top: 1px solid #e6e6e6; } #productList ul li .thum{ width: 30%; height: auto; float: left; position: relative;} #productList ul li .thum .lineTop{ width: 100%; height: 1px; position: absolute; top: -15px; left: 0px; background: #3E3E3E; display: block;} #productList ul li .thum .lineBottom{ width: 100%; height: 1px; position: absolute; bottom: -15px; left: 0px; background: #3E3E3E; display: block;} #productList ul li .focus{ width: 68%; height: auto; float: right;} #productList ul li .focus .title{ width: 100%; height: auto; line-height:35px; font-size: 18px; font-weight: bold; position: relative; overflow: hidden;} #productList ul li .focus .title strong{ width: auto; float: left; border-bottom: 1px solid #e6e6e6;} #productList ul li a{ color: #3E3E3E;} #productList ul li a:hover{ color: #15499a;} #productList ul li .focus .title .website{ width: 100px; height: 30px; border: 1px solid #e6e6e6; display: block; position: absolute; right: 0px; top: 1.5px; font-size: 14px; font-weight: normal; text-align: center; line-height: 30px; color: #999;} #productList ul li .focus .des{ width: 100%; height: auto; line-height: 24px; font-size: 12px; color: #3E3E3E; opacity: .8; margin-top: 25px;} #productList ul li .focus .more{ width: 100px; height: 30px; border: 1px solid #e6e6e6; display: block; font-size: 14px; font-weight: normal; text-align: center; line-height: 30px; color: #999; margin-top: 25px;} #productList ul li .focus .more:hover,#productList ul li .focus .title .website:hover{ background: #15499a; color: #FFFFFF; border: 1px solid #15499a;} /***************JOIN***************************************/ .talent{ width: 100%; height: 450px; overflow: hidden; position: relative; margin-top: 25px;} .talent ul li{ width: 100%; height: 450px; position: absolute; top: 450px; left: 0px;} .talent ul li .talentLeft,.talent ul li .talentRight{ width: 50%; height: 450px; float: left;} .talent ul li .talentLeft{ background: url(../images/j1.jpg) no-repeat; background-size: cover;} .talent ul li .talentRight{ background: #15499a;} .talentBox{ width: 460px; position: relative; height: auto; padding: 30px 20px 20px 60px; color: #FFFFFF;} .talentBox .talenTitle{ width: 100%; height: auto; line-height: 35px; font-size: 18px; color: #f7dd00; position: relative;} .talentBox .talenTitle span{ width: 2px; height: 20px; display: block; position: absolute; left: -20px; top: 7.5px; display: block; background: #f7dd00;} .talentBox .talenDetails{ width: 100%; height: auto; line-height: 20px; font-size: 12px; margin-bottom: 35px;} .talent ul li.cur{ top: 0%;} .joinList{ max-width: 1000px; height: auto; margin: auto;} .joinList ul{ margin: 25px 0px;} .joinList li{ width: 100%; height: auto; text-align: center; margin-bottom: 10px;} .joinList li.first{ font-weight: bold; color: #3E3E3E;} .joinList li.first .top{ cursor: default;} .joinList li .top{ width: 100%; height: 50px; line-height: 50px; border: 1px solid #f6f6f6; cursor: pointer;} .joinList li .top>div{ width: 25%; float: left; height: 50px;} .joinList li .bottom{ width: 94%; height: auto; line-height: 28px; padding:15px 3%; text-align: left; border: 1px solid #f6f6f6; color: #3e3e3e; display: none;} .joinList li.list .top{ background: #959595; color: #FFFFFF; border: 1px solid #959595;} .joinList li.cur .top{ background: #15499a; border: 1px solid #15499a;} .joinList li.cur .bottom{border: 1px solid #15499a;} #subTitle{ width: 100%; height: auto; padding: 50px 0px; position: relative;} #subTitle .title{ width: 290px; height: 60px; margin: auto; position: relative; z-index: 10;} #subTitle .title img{ display: block;} #subTitle .logoShadow{ width:126px; height: 150px; position: absolute; left: 50%; margin-left: -63px; top: 50%; margin-top: -75px;} #forms{ width: 100%; height: auto; padding-bottom: 50px; position: relative;} #forms .lineBox{ width: 100%; margin: 20px 0; overflow: hidden;} #forms .userName{ width: 48%; float: left;} #forms .email{ width: 48%; float: right;} #forms textarea{ resize: none; width: 100%; border: 1px solid #d2d2d2; box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 14px; padding: 25px 2%; height: 250px;} #forms .text{ font-size: 18px; color: #666666; line-height: 40px;} #forms .upLoad{ width: 98%; height: 55px; border-top: 1px solid #CCCCCC; bottom: 115px; position: absolute; z-index: 10; left: 1%;} #forms .upLoad a{ width: 115px; height: 30px; display: block; background: #022E72; color: #FFFFFF; line-height: 30px; text-align: center; margin-top: 10px;} #forms .bt{ font-size: 27px; color: #ea2700; position: relative; top: 5px; margin-left: 3px;} #forms input{ width:100%; padding: 0 2%; font-size: 14px; height: 68px; border: 1px solid #d2d2d2;box-sizing: border-box; -webkit-box-sizing: border-box;} #forms .sub{ width: 150px; height: 40px; text-align: center; line-height: 40px; border-radius: 5px; background: #15499a; color: #FFFFFF; margin: auto; display: block; cursor: pointer;} #forms .sub:hover{ background: #022e72; border-radius: 40px;} #forms input.focus,#forms textarea.focus{ border: 1px solid #00a1df;} .demos{ max-width: 1200px; height: 1069px; margin: auto;} /**************************************ABOUT*************************************************/ #one{ width:100%; height:auto; padding-bottom: 25px; } .introduction{ max-width: 1000px; margin:auto; height: auto; padding-top: 0px; } .introduction_title{ font-size: 32px; color: #15499a; font-weight: bold; text-align: center; } .introduction_title2{ font-family: 华文中宋; color: #dee3ed; text-align: center; font-size: 24px; } .introduction_content{ width: 90%; padding: 0px 5%; font-size: 14px; color: #666666; line-height: 24px; text-indent: 28px; } #two{ width:100%; height:auto; background-color: #e4edf0; position: relative; } .picture{ position: relative; height: auto; width: 100%; } .work{ max-width: 1000px; height: auto; position: relative; overflow: hidden; z-index: 20; margin: auto; display: block; overflow: hidden; } .work li{ float: left; width: 33.33333%; height: auto; position: relative; } .work li .img1{ width: 100%; height: 100%; font-size: 0px; overflow: hidden; } .work .block1 .img_title{ position: absolute; width: 100%; top: 165px; font-size: 26px; color:#fff; text-align: center; } .work .block1 .img_text{ position: absolute; width: 90%; padding: 0px 5%; top: 240px; font-size: 14px; color: #fff; text-align: center; line-height: 24px; } .work .block1 .img_more{ position: absolute; width: 100%; top: 350px; left: 39%; font-size: 15px; color: #fff; } .work .block1 .img1{ width: 100%; height: 100%; font-size: 0px; overflow: hidden; } .work li .img_title{ position: absolute; width: 100%; top: 50px; font-size: 26px; color:#fff; text-align: center; } .work li .img_text{ position: absolute; width: 90%; padding: 0px 5%; top: 100px; font-size: 14px; line-height: 24px; color: #fff; text-align: center; } .work li .img_more{ position: absolute; width: 100%; top: 240px; left: 39%; font-size: 15px; color: #fff; } .back1{ background-color: #725f99; position:absolute; bottom: 0px; width:50%; height: 50%; z-index:0; } .back2{ background-color: #7d6b7a; position:absolute; top: 0px; right: 0px; width:50%; height: 50%; z-index:0; } #three{ width:100%; height:auto; } .back3{ width: 100%; height: auto; background-image: url(../images/back3.png); } #four{ width:100%; height:auto; } .back3{ width: 100%; height: auto; background-image: url(../images/back4.jpg); } #five{ width:100%; height:auto; } .back5{ width: 100%; height: auto; background-image: url(../images/back5.jpg); } #swNewsContent{max-width:1000px; margin:auto; position:relative; margin-bottom: 50px;} .backList{ width: 100%; height: 50px; position: relative;} .backList a{ display: block; width: 150px; height: 40px; display: block; right: 0px; background: #FFFFFF; color: #1BD0DA; line-height: 40px; text-align: center; top: 20px; position: absolute; border: 1px solid #1BD0DA;} .backList a:hover{ background: #1BD0DA; color: #FFFFFF;} .swNewsTitle{ width:90%; height:auto; line-height:35px; text-align:center; font-size:24px; font-weight:bold; padding:35px 5% 15px 5%; font-family: "microsoft yahei";} .swNewsInfo{ width:100%; height:auto; line-height:20px; font-size:12px; text-align:center; color:#666; padding-bottom:15px; border-bottom:1px dotted #ccc;} .swNewsInfo span{ font-size:14px; font-family:Georgia, "Times New Roman", Times, serif; color:#ff0000; font-weight:bold;} .swNewsContent{ width:100%; min-height:300px; margin:25px 0px; line-height:28px; text-indent:28px; color: #3E3E3E;} .swNewsContent img { text-indent: 0px; max-width: 100%; } .swShare{ width:100%; height:25px; position:relative; margin:15px 0px 35px 0px;} .swShare strong{ float:right; margin-right:10px;} .swNewsNext{ width:96%; height:auto; padding:0px 2%;} .swNewsNext div{width:100%;line-height:20px; border-bottom:1px dotted #ccc; font-size:14px; height:auto; padding: 5px 0px; font-weight: bold;} .swNewsNext a{ color:#101010; font-weight: normal;} .swNewsNext a:hover{ color:#C00;} .nDNext{ width:100%; height:auto;} .nDNext div{width:100%;line-height:20px; border-bottom:1px dotted #ccc; font-size:14px; height:auto; padding: 5px 0px; font-weight: bold;} #tips{ width: 500px; padding: 0px 50px; height: 50px; position: fixed; left: 50%; margin-left: -300px; bottom: -60px; background: #b82525; text-align: center; line-height: 50px; color: #FFFFFF; z-index: 100;} #tips.green{ background: #09bb26;} #tips strong{ font-weight: normal;} #tips .close{ width: 30px; height: 30px; position: absolute; right: 5px; top: 10px; background: url(../images/close.png) no-repeat; cursor: pointer;} #tips .close:hover{ -webkit-transform: rotate(90deg);transform: rotate(90deg);} /**************荣誉资质*************/ .honor{padding-top: 80px; padding-bottom: 40px; background: url(../images/honorBg.jpg) no-repeat center; background-size: cover; } .honor .titText{ width: 710px; text-align: center; margin:15px auto 0; color: #4b4b4b; line-height: 26px;} .honor .imgBox { max-width: 1000px; margin: auto; height: 380px; position: relative; overflow: hidden; margin-top: 40px; } .honor .imgBox .btn { width: 60px; height: 60px; background-image: url(../images/honorBtn.png); background-repeat: no-repeat; position: absolute; top: 40%; margin-top: -23px; z-index: 20; cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s; opacity: .4; filter: alpha(opacity=40);} .honor .imgBox .btnPrev { background-position: left center; left: 0px;} .honor .imgBox .btnPrev:hover {opacity: 1; filter: alpha(opacity=100);} .honor .imgBox .btnNext { background-position: -66px center; right: 0px; } .honor .imgBox .btnNext:hover { opacity: 1; filter: alpha(opacity=100);} .honor .imgBox .imgList { width: 800px; margin: auto; height: 320px; position: relative; } .honor .imgBox .imgList li { position: absolute; background-color: #FFFFFF; text-align: center; transition-duration: .5s; -webkit-transition-duration: .5s; z-index: 0; width: 0px; height: 0px; top: 50%; left: 50%; } .honor .imgBox .imgList li .imgs { width: 100%; background-color: #FFFFFF; font-size: 0px;} .honor .imgBox .imgList li.cur1 { width: 348px; height: 242px;left: 0px; z-index: 5; top: 25px; opacity: .4; filter: alpha(opacity=40); } .honor .imgBox .imgList li.cur2 { width: 420px; height: 292px;left: 190px; z-index: 10; top: 0px; opacity: 1; filter: alpha(opacity=100); } .honor .imgBox .imgList li.cur3 { width: 348px; height: 242px;left: 452px; z-index: 5; top: 25px; opacity: .4; filter: alpha(opacity=40); } .honor .imgBox .textList { width: 100%; height: 40px; position: relative; text-align: center; margin-top: 10px; } .honor .imgBox .textList li { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; } .honor .imgBox .textList li.cur { display: block; } .honor .imgBox .textList .info { display: inline-block; height: 36px; line-height: 36px; position: relative; background: #1c5993; font-size: 14px; color: #FFFFFF; padding: 0px 80px; border-radius: 20px; } .honor .imgBox .textList .info .sj { width: 0px; height: 0px; border-style: solid; position: absolute; border-width: 7px; left: 50%; margin-left: -7px; border-color: transparent transparent #1c5993 transparent; top: -14px; } /**************企业文化*************/ .culture{ width: 100%; height: auto; padding-top: 45px; padding-bottom: 55px; background: url(../images/curBg.jpg) no-repeat center; background-size: cover; } .culture .mr0{ margin-right: 0px !important;} .culture .list{ width: 100%; overflow: hidden; margin-top: 40px;} .culture .list li{ float: left; width: 22%; margin-right: 4%; margin-bottom: 24px; background: #000000; overflow: hidden; position: relative;} .culture .list a{ display: block; width: 100%; height: 100%;} .culture .list .imgs{ font-size: 0px; width: 100%; opacity: .4;filter: alpha(opacity=40);} .culture .list .textBox{ font-size: 18px;height: 100%; position: absolute; top: 0px; z-index: 10; color: #FFFFFF; text-align: center; width: 80%; left: 10%;} .culture .list .ch{ font-size: 24px; font-weight: bold; padding-top: 60%;} .culture .list .en{ text-transform: uppercase;} .culture .list .text{ margin-top: 10%; font-weight: 100; font-size: 16px; line-height: 28px; opacity: 0; color: #00a1df;} .culture .list .lineTop{ width: 100%; height: 4px; position: absolute; left: -100%; top: 0px; background: #00a1df;} .culture .list .lineBottom{ width: 100%; height: 4px; position: absolute; left: 100%; bottom: 0px; background: #00a1df;} .culture .list .lineLeft{ width: 4px; height: 100%; position: absolute; left: 0px; top: 100%; background: #00a1df;} .culture .list .lineRight{ width: 4px; height: 100%; position: absolute; right: 0px; top: -100%; background: #00a1df;} .culture .list a:hover .textBox{ top: -20px; color: #00a1df;} .culture .list a:hover .imgs{ -webkit-transform: scale(1.1); opacity: 0.2;} .culture .list a:hover .lineTop{ left: 0%;} .culture .list a:hover .lineBottom{ left: 0%;} .culture .list a:hover .lineLeft{ top: 0%;} .culture .list a:hover .lineRight{ top: 0%;} .culture .list a:hover .text{ opacity: 1;} /**************组织架构*************/ .groups{ width: 100%; height: auto; background: url(../images/orBg.jpg) no-repeat center; background-size: cover; padding-top: 28px; padding-bottom: 30px; text-align: center;} .groups .border{ width: 1px; height: 500px; position: absolute; top: 0; transition-duration: .5s; -webkit-transition-duration: .5s; left:47%; background: #2581e7;} .groups .border.cur1{ height: 670px;} .groups .imgs{ float: left; width: 100%; position: relative;} .groups .imgBox{ width: 100%; height: auto; float: left; font-size: 0px; position: relative;margin-top: 30px;} .groups .three{ text-align: left; text-indent: 58px; position: relative; z-index: 10;width: 100%; float: left; padding-bottom: 30px;} .groups .two{ position: relative; z-index: 10; padding-bottom: 30px; width: 100%; float: left;} .groups .one{ position: relative; z-index: 10; padding-bottom: 30px; width: 100%; float: left;} .groups .imgBox .switch{ float: left; position: relative; display: none; opacity: 0;} .groups .imgBox .switch span{ width: 19px; height: 19px; cursor: pointer; background: url(../images/open.png) no-repeat center; position: absolute; top: -10px;} .groups .imgBox .open{ width: 19px; height: 19px; cursor: pointer; background: url(../images/open.png) no-repeat center; transition-duration: .5s; -webkit-transition-duration: .5s; position: absolute; bottom: -10px; z-index: 300;} .groups .imgBox .open.close{ background: url(../images/close2.png) no-repeat center; } .groups .imgBox .open1{ left: 80px;} .groups .imgBox .open2{ left: 344px;} .groups .imgBox .open3{ left:160px;} .groups .imgBox .open4{ left:344px;} .groups .imgBox .open5{ left:518px;} .groups .imgBox .open6{ left:708px;} .groups .imgBox .open7{ left:898px;} .groups .imgBox .open8{ left:80px; top: 170px !important;} .groups .imgBox .open9{ left:222px; top: 170px !important;} .groups .imgBox .open10{ left:162px; top: 150px !important;} .groups .imgBox .open11{ left:82px; top: 198px !important;} .groups .imgBox .zc{left: 25px; margin-top: -2px; width: 32px;} .groups .imgBox .cw{left: 244px; margin-top: -1px; width: 125px;} .groups .imgBox .jr{ width: 174px; left: -30px; margin-top: -1px;} .groups .imgBox .jr2{ width: 172px; left: -72px; margin-top: -35px;} .groups .imgBox .jr3{ width: 103px; left: 106px; margin-top: -192px;} .groups .imgBox .djk{ width: 114px; left: 3px; margin-top: -1px;} .groups .imgBox .djk2{ width: 33px; left: 83px; margin-top: -49px;} .groups .imgBox .jy{ width: 33px; left:110px; margin-top: -1px;} .groups .imgBox .ly{ width: 32px; left:271px; margin-top: -1px;} .groups .imgBox .ly2{ width: 105px; left:-35px; margin-top: -1px;} .groups .imgBox .fdc{ width: 456px; margin-top: 460px; left: 24px;} .groups .imgBox .fdc .bb{ width: 1px; height: 460px; background: #2581e7; position: absolute; left: 469px; bottom: 227px;} .join_information{ height: 90px; width: 1000px; background: #f2f2f2; margin: 0 auto;position:relative;overflow: hidden;border-bottom: 50px solid #F6F6F6;} .join_information:after{position: absolute; content: ''; width: 2px; height: 120px; right: 30%; top:-7px;transform: rotate(25deg);-webkit-transform: rotate(25deg); background: #fff; } .join_informationL{ width: 100%; height: 30px; margin-bottom: 100px;} .join_information .join_informationR{ width: 30%; height:100%;overflow: hidden;float: right;text-align: center; } .join_informationL ul{ overflow: hidden; height: 100%;} .join_informationL ul li{ float: left; line-height: 30px; width: 20%;} .join_informationL ul li.first{width:32%;} .join_informationL ul li.second{ width: 25%;} .join_informationL ul li.four{ width: 23%;} .join_informationL ul li.three{ width: 20%;} .join_informationL ul li span{ color: #15499a; font-size: 14px;} .join_informationL ul li img{text-indent: 0px; float:left; margin-right: 10px;} .join_information .join_informationR img{display: inline-block;vertical-align: middle; margin: 19px 5px 0;} .lightBox{ width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background:url(../images/blank7.png); z-index: 500; display: none;} .joinTipBox{ width: 800px; height: 550px; position: fixed; left: 50%; margin-left: -400px; top: 50%; margin-top: -275px; background: #FFFFFF; z-index: 500; display: none;} .joinTipBox .joinTipBoxTitle{ width: 100%; height: 45px; background: #15499A; color: #FFFFFF; line-height: 45px;} .joinTipBox .joinTipBoxTitle span{ font-size: 12px; position: absolute; right: 50px; line-height: 45px; opacity: .5;} .joinTipBox .joinTipBoxTitle strong{ float: left; margin-left: 15px;} .joinTipBox .joinTipBoxTitle .close{ width: 45px; height: 45px; float: right; cursor: pointer;} .joinTipBox .joinTipBoxTitle .close img{ display: block; float: left; margin-left: 7.5px; margin-top: 7.5px;} .joinTipBox .joinTipBoxTitle .close:hover{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);transform: rotate(90deg);} .joinTipBox .joinTipBoxInfo{ width: 96%; padding: 0px 2%; height: 490px; overflow-y: auto; color: #3E3E3E;} .joinTipBox .joinTipBoxInfo .joinTipName{ width: 100%; height: 50px; line-height: 50px; font-weight: bold; position: relative;} .joinTipBox .joinTipBoxInfo .joinTipName b{ position: absolute; right: 10px; font-size: 12px; font-weight: normal;} .joinTipBox .joinTipBoxInfo .joinTipName span{ color: #15499A;} .joinTipBox .joinTipBoxInfo .joinTipBt{ width: 100%; height: auto; line-height: 30px; font-weight: bold;} .joinTipBox .joinTipBoxInfo .joinTipDetail{ width: 100%; height: auto; line-height: 24px; font-size: 12px; margin-bottom: 15px;} /**************登录默认页面*************/ #joinDefault{ width: 100%; height: 700px; position: relative; background: url(../images/joinDefault.jpg) center top no-repeat; overflow: hidden;} #joinDefault .joinQzz{ width: 90px; height: 130px; position: absolute; top: 60%; left: 50%; margin-left: -135px; display: block;} .joinIcons{ width: 86px; height: 86px; border: 2px solid #00a1df; border-radius: 90px; background:#FFFFFF url(../images/joinIcons.png) no-repeat;} .joinIcons.b{ background-position: -86px 0px;} .joinTitles{ width: 100%; height: auto; line-height: 30px; margin-top: 10px; color: #FFFFFF; font-weight: bold; text-align: center;} #joinDefault .joinSh{ width: 90px; height: 130px; position: absolute; top: 60%; left: 50%; margin-left: 45px; display: block;} .joinEwm{ width: 239px; height: 38px; position: absolute; left: 50%; margin-left: -119px; bottom: 0px; cursor: pointer;} .joinEwm .sys{ width: 239px; height: 38px;background: url(../images/ewmBg.png) no-repeat; position: absolute; left: 0px; top: 0px;} .joinEwm .ewms{ width: 239px; height: 182px; position: absolute; left: 0px; top: 38px; background: url(../images/ewmImg.png) no-repeat;} .joinEwm.active .ewms{ top: -150px;} /**************登录默认页面*************/ .joinTop{ width: 100%; height: 160px; background: url(../images/joinTopBg.jpg) no-repeat; position: relative; margin: 15px auto;} .joinTop.j2{ height: 250px; background-image: url(../images/joinTopBg2.jpg);} .joinTop .line{ width:99%; height: calc(100% - 10px); border: 1px solid #FFFFFF; position: absolute;top:4px; left: 4px; opacity: .5;} .joinTop span{width: 200px; height: 40px; position: absolute; left: 50%; bottom: 0%; margin-left: -100px; margin-top: -25px; background: #15499A; color: #FFFFFF; line-height: 40px; text-align: center; display: block;} .joinTop a{ width: 50%; height: 160px; display: block; float: left; position: relative; overflow: hidden;} .joinTop a img{ -webkit-transition-duration: .5s; -moz-transition-duration: .5s;transition-duration: .5s;} .joinTop a:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1);transform: scale(1.1);} .joinTopCenter{ width: 400px; height: 50px; position: absolute; left: 50%; margin-left: -200px; top: 50%; margin-top: -25px; background: #FFFFFF;} .joinTopCenter a{ width: 200px; height: 50px; float: left; display: block; position: relative;} .joinTopCenter span{ width: 1px; height: 40px; position: absolute; right: 0px; top: 5px; background: #e5e5e5; display: block;} .joinTopCenter b{ display: block; width: 100%; height: 30px; line-height: 30px; color: #FFFFFF; text-align: center; position: absolute; top: -30px;} .joinUsList{ width: 100%; height: auto; border: 1px solid #c9c9c9; border-bottom: none;} .joinUsList ul li{ width: 100%; height: 50px; border-bottom: 1px solid #c9c9c9; color: #3E3E3E; cursor: pointer;} .joinUsList ul li>div{ float: left; line-height: 50px; position: relative; } .joinUsList ul li>div span{ width: 1px; height: 50px; position: absolute; right: 0px; top: 0px; background: #c9c9c9;} .joinUsList ul li.first{ background: #15499A; color: #FFFFFF; font-weight: bold; cursor: default;} .joinUsList ul li>div.a{ width: 30%; text-indent: 20px;} .joinUsList ul li>div.b{ width: 10%; text-align: center;} .joinUsList ul li>div.c{ width: 20%; text-align: center;} .joinUsList ul li>div.d{ width: 20%;} .joinUsList ul li.active{ background: #eaf2ff;} .joinPage{ width: 100%; height: 30px; text-align: center; padding: 50px 0px;} .joinPage a{ width: 30px; height: 30px; margin:0 5px; display:inline-block; line-height: 30px; text-align: center; cursor: pointer;} .joinPage a:hover,.joinPage a.active{ color: #022E72;} .joinPage a.btn{ background: #b2b2b2; color: #FFFFFF;} .joinPage a.btn:hover{ background: #1c60b9;} .recruitList{ width: 100%; height: auto; overflow: hidden; margin: 50px 0px;} .recruitList li{ width: 33%; height: auto; float: left;} .recruitList li.two{ width: 34%;} .recruitList li .titles{ width: 100%; height:auto; line-height: 35px; text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 10px; color: #aa4096;} .recruitList li .detail{ width: 92%; line-height: 20px; padding: 0px 4%; min-height: 185px; font-size: 12px; text-indent: 24px;} .recruitList li .names{ width: 92%; padding: 0px 4%; height: auto; line-height: 30px; margin-bottom: 15px;} .recruitList li.two .titles{ color: #eb6101;} .recruitList li.three .titles{ color: #24a905;} .recruitList li .thum{ width: 194px; height: auto; margin: auto;} .reN{ width: 100%; height: auto; text-align: center;} .reN .rTitle{ width: 100%; height: auto; font-weight: bold; font-size: 30px; color: #15499a; padding-bottom: 50px;} .reN .rTitle p{ font-size: 12px; text-transform: uppercase; letter-spacing: 2.7px;} .reLine{ width: 100%; height: 30px; position: relative;} .reLine .lineW{ width: 60%; height: 1px; position:absolute; left: 20%; background: #dbdbdb;} .reLine .lineH{ width: 1px; height: 50px; position: absolute; left: 50%; background: #dbdbdb; top: -40px;} .reList{ width: 100%; height: auto; overflow: hidden; overflow: hidden; margin-bottom: 50px;} .reList li{ width: 225px; height: 95px; float: left; margin-right: 33px;} .reList li.four{ margin-right: 0px;} .reList li .thum{ width: 225px; height: 65px; background: url(../images/d1.jpg) no-repeat; position: relative;} .reList li .thum .border{ width: 219px; height: 59px; border: 1px solid #FFFFFF; position: absolute; left: 2px; top: 2px; opacity: .5;} .reList li .name{ width: 100%; line-height: 20px; font-weight: bold; color: #646464; margin-top: 10px;} .reList li.b .thum{ background-image: url(../images/d2.jpg);} .reList li.c .thum{ background-image: url(../images/d3.jpg);} .reList li.d .thum{ background-image: url(../images/d4.jpg);} .jdTopTips{ width: 100%; line-height: 24px; color: #3E3E3E; margin-bottom: 35px; margin-top: 45px;} .jdTop{ width: 100%; height: 350px; background: #fff; position: relative;} .jdIcon{ width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #15499a; position: absolute; right: -10px; top: 0px;} .jdList{ width: 250px; height: 360px; float: left; position: relative; background:#15499a url(../images/jdLeftBg.jpg) no-repeat; margin-top: -10px;} .jdDetaiList{ width:750px; height: 360px; float: right; position: relative;} .jdDetaiList ul li{ width: 720px; height: 310px; position: absolute; left: 0px; top: 0px; overflow-y: auto; display: none; color: #3E3E3E; line-height: 28px; margin: 25px 15px;} .jdDetaiList ul li.active{ display: block;} .jdList .jdName{ width: 100%; height: 50px; line-height: 50px; margin-top: 25px; font-size: 24px; color: #FFFFFF; text-indent: 30px; position: relative;} .jdList .jdName .icon{ width: 30px; height: 50px; background: url(../images/jdIcon.png) center top no-repeat; position: absolute; right: 25px; top: 0px;} .jdList .jdMenu{ width: 146px; height: auto; position: absolute; right: 0px; top: 120px;} .jdList .jdMenu a{ display: block; width: 145px; height: 40px; line-height: 40px; background: #416bad; margin-bottom: 10px; border: 1px solid #8fa8cf; cursor: pointer; text-align:center; color: #FFFFFF; border-right: none;} .jdList .jdMenu a:hover,.jdList .jdMenu a.active{ background: #f8f8f8; color: #15499a;} .jdSubmit{ width: 100%; height: 50px;} .jdSubmit a{ display: block; width: 130px; height: 40px; margin: auto; background: #15499A; line-height: 40px; text-align: center; color: #FFFFFF; cursor: pointer;} .jdSubmit a:hover{ background: #022E72;} .chatList li .icon{ width: 78px; height: 78px; background: url(../images/oa.jpg) no-repeat; background-position: -78px 0px;} /********************************2016-05-31 Response**********************************/ .model_mobileNav{ width: 30px; height: 30px; position: absolute; right: 5px; top: 50%; margin-top: -25px; padding: 10px; cursor: pointer; display: none; } .model_mobileNav span{ width: 30px; height: 3px; background: #15499a; border-radius: 5px; position: absolute; top: 12.5px; display: block; left: 10px; -webkit-transition-duration: .5s; } .model_mobileNav span:nth-child(2){ top: 22.5px; } .model_mobileNav span:nth-child(3){ top: 32.5px; } .model_mobileNav.active span:nth-child(2){ width: 20px; left: 15px; } .model_modileNav_list{ width: 100%; height: auto; position: fixed; top: 50px; text-align: center; line-height: 50px; display: none; } .moblieNavMask{ width: 100%; height: calc(100% - 50px); position: fixed; left: 0px; top: 50px; background: rgba(0,0,0,.7); display: none; } .model_modileNav_list a{ width: 101%; height: 40px; line-height: 40px; background: #15499a; border-bottom: 1px solid #113f87; border-top: 1px solid #1851aa; display: block; color: #FFFFFF; font-size: 16px; font-weight: bold; position: relative; } .moblieMap{ width: 100%; height: 47px; text-align: center; padding: 5px 0px; background: #FFFFFF; } .moblieMap a{ width: 35px; height: auto; display:inline-block; border: none; background: none; padding: 10px 0px; margin: auto 15px; } .moblieMap a img{ display: block; } .swiper-container { height: 200px; width: 100%; } .pagination { position: absolute; left: 0; text-align: center; bottom:5px; width: 100%; z-index: 10; } .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff; margin: 0 3px; cursor: pointer; opacity: .5; } .swiper-active-switch { background: #fff; opacity: 1; } .moblieBanner{ position: relative; width: 100%; height: auto; display: none; } #subTitle .title360{ width: 360px;} @media screen and (max-width:1365px) { .cyBox .cyTips ul li{ left: -50px;} .work li .img_more{ top: 220px;} .talentBox{ padding-left: 40px;} } .t0{ text-indent: 0;} @media screen and (max-width:999px) { .newBox li .imgs{ height: 120px; } #productList{ width: 96%; margin: auto;} #swNewsContent{ width: 96%;} .culture .list .ch{ font-size: 18px;} .joinUsList ul li{ height: auto; overflow: hidden;} .joinUsList ul li>div{ height: 100%; vertical-align: middle; line-height: 20px; text-indent: 0 !important; text-align: center !important; padding: 5px 0;} .joinUsList ul li>div span{ height: 100px;} .work li .img_text{ font-size: 12px; line-height: 18px; top: 60px;} .work li .img_title{ top: 20px;} .work li .img_more{ top: 170px;} .work li .img_more{ display:none;} .container1000,.join_information{ width: 96%;} .join_informationL{ height: auto; margin-bottom: 5%;} .join_informationL ul li{ width: 50% !important;} .joinList{ width: 96%;} .model_mobileNav { display: block; } .notice,.topBar,.navIconUrl,.nav{ display: none; } .navBox h1{ margin-left: 10px; position: relative; } .header{ height: 50px; } .reList li{ width: 48%; margin-right: 4%;} .reList li .thum{ width: 100%; background-size:cover;} .reList li .thum .border{ width: auto; height: auto; top: 3px; left: 3px; right: 3px; bottom: 3px;} .reList li:nth-child(2n){ margin-right: 0px;} } @media screen and (max-width:770px) { .joinTitles{ color:#15499A;} .newBox .textBox .tit{ height: 40px; overflow: hidden;} .newBox .textBox>div,.newBox .textBox{ height: 150px;} #map{ height: 300px;} .summary_G{ float: none !important;} .talent ul li .talentLeft{ width: 40%;} .talent ul li .talentRight{ width: 60%;} .talentBox{ width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;} #title{ padding: 25px 0px;} #title img{ max-width: 100%; } .footerNav{ width: 400px;} .footerChat{ width: 350px;} .cyBox .cyTips ul li{ left: -50px;} .homeServieList ul li,.homeAboutContent .des{ width: 94%; padding: 10px 3%; } .homeServieList ul li{ margin: 0px; } .homeService{ height: 500px; } .homeService ul li{ width: 50%; top: 0px; left: 0%; height: 250px; transform: rotate(0deg) translateZ(0); -webkit-transform: rotate(0deg) translateZ(0); } .homeService ul li .serviceBg{transform: rotate(0deg) translateZ(0);-webkit-transform: rotate(0deg) translateZ(0);} .homeService ol li{ width: 50%;} .homeService ul li.c{ left: 0%; top: 250px;} .footer{ display: none;} .copyright{ height: auto; text-align: center;} .copyright a{ text-align: center; float: none !important;} .copyrightBox{ width: 96%; height: auto;} .homeService ul li.d{ left: 50%; top: 250px;} #contact ul li{ width: 46%;} #contact ul li .cBottom .row{ width: 100%;} #contact ul li .cBottom{ width: 80%; padding: 45px 10% 0;} .jdDetaiList{ width: 487px;} .jdDetaiList ul li{ width: 460px;} .l_product .box1 .BIg_title{ width: 96%; margin: auto;} } @media screen and (max-width:560px) { .newBox li{ height: auto !important;} .joinTop.j2{ background-position: -500px;} .joinTop{ height: auto; overflow: hidden;} .joinTop span{ top: 50%; margin-top: -20px;} #contact ul li .cBottom{ width: 100%; padding: 45px 0 0;} .jdList{ width: 100%; height: 130px;} .jdDetaiList{ width: 100%; background: #FFFFFF; } .jdDetaiList ul li{ width: 100%; margin: auto;box-sizing: border-box; -webkit-box-sizing: border-box; padding: 3%; } .jdList .jdMenu{ width: 100%; top: auto; bottom: 0px;} .jdList .jdMenu a{ float: left; width: 33.33%; margin: auto; box-sizing: border-box; -webkit-box-sizing: border-box;} .summary_G{ width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; height: auto;} .summary_G .title{ width: 100%;} #productList ul li .focus,#productList ul li .thum{ width: 100%;} #productList ul li .focus .title strong{ font-size: 14px;} .summary_G{ padding-bottom: 60px;} #joinDefault .joinQzz{ top: 30%;} #joinDefault .joinSh{ top: 30%;} .work .block1 .img1 img{ width: 100%; } .work li .img1 img{ width: 100%; } } @media screen and (max-width:415px) { .jdList .jdMenu { right: 0px !important; } .work li .img_text{ line-height: 19px;} .joinTop .line{ width: auto; height: auto; left: 5px; right: 5px; bottom: 5px; top: 5px;} .recruitList li{ width: 100% !important;} .work li .img_title{ top:10px !important;} .work li .img_text{ top:45px;} .honor .imgBox .textList .info{ line-height:15px;font-size:10px; padding: 0px 10px;} .box2.box_l_product,.box3.box_l_product,.box4.box_l_product,.box5.box_l_product,.box6.box_l_product{ background-size: cover;} #contact ul li:hover .cBottom{ bottom:-5px} .joinTop a{ width: 100%;} .join_informationL ul li{ width: 100% !important; margin-bottom: 2%;} #contact ul li .cBottom .row{ width: 220px;} #contact ul li{ width: 23%;} #contact ul li:nth-child(n+2) .cBottom{ left: -100%;} /*#contact ul li:nth-child(2n) .cBottom{ left: -65px;}*/ #subTitle{ padding: 25px 0px;} .groups{ display: none;} .copyrightBox{ line-height: 22px; padding: 10px 0;} .copyright{ width: 100%; text-indent: 15px; font-size: 10px; overflow: hidden; } .homeService ol li .serviceImg{ width: 150px; height: 45px; left: 50%; margin-left: -75px; top: 50%; margin-top: -22.5px; } .honor{ padding-top: 50px;} .honor .imgBox .imgList{ -webkit-transform: scale(.5);transform: scale(.5); left: 50%; margin-left: -400px; margin-top: 0px;} .honor .imgBox .btn{ -webkit-transform: scale(.7);transform: scale(.7);} .culture .list li{ width: 47%; margin-left: 2%; margin-right: 0%; margin-bottom: 10px;} .newBox li{ width: 47%; margin-left: 2%;} .honor .imgBox .textList{ margin-top: -50px;} #subTitle .title360,.work li,.honor .titText{ width: 100%;} #subBanner,#banner{ display: none;} .moblieSubBanner,.moblieBanner{ display: block;} .cyList{ width: 100%; margin: auto; position: relative; height: 150px; margin-top: 100px; } .cyBoxInfo{ padding-top: 0px;} .cyList ul{ width: 100%; } .cyBoxInfo .box.active{ top: 25px; } .cyBoxInfo .box{ top: 50px; } .cyList ul li{ position: absolute; left: 50%; margin-left: -77.5px; top: 0px; -webkit-transform: scale(.6); } .cyList ul li:nth-child(1){ top: -90px; margin-left: -125px; } .cyList ul li:nth-child(2){ top: -90px; margin-left: -25px; } .cyList ul li:nth-child(3){ margin-left: -175px; } .cyList ul li:nth-child(4){ } .cyList ul li:nth-child(5){ margin-left: 20px; } .backTop{ display: none; } .cyBox .cyTips{ display: none;} #forms .userName,#forms .email{ width: 100%;} } @media screen and (max-width:321px) { .swiper-container { height: 170px; } } @media screen and (min-width:1200px){ .joinEwm:hover .ewms{ top: -150px;} } /*************英文版****************/ .joinUsList ul li > div{word-wrap: break-word;} .joinUsList ul li > div.a { width: 20%; } .joinUsList ul li > div.b { width: 15%;} .joinUsList ul li > div.b {text-align: center; width: 20%;} .joinUsList ul li > div.c {text-align: center; width: 10%;} .navFooter { margin-left: -250px; position: absolute;} #subTitle{padding: 50px 0 0px;} .culture .list .ch{padding-top: 50%;} .work .block1 .img_more{top:450px;} #subTitle .logoShadow{margin-left:-32px;margin-top:-60px;} #subTitle .logoShadow img{width:70%;} /*#subTitle .title{width:400px;}*/ #subTitle .title{ max-width: 96%;} .nav a .navCn{color:#6e6e6e;background:none !important;text-align:center;line-height:80px;font-weight:bold;} .cyList ul li .text{top: 50px;line-height: 25px;font-size: 16px;} .homeServieList ul li .text,.homeAboutContent .des,.summary_G.floatL article{text-align:justify;text-justify:inter-ideograph} .banner .bannerImg li.cur1 .font1{margin-left:-504px;} .banner .bannerImg li.cur1 .font2{margin-left:-422px;} #productList ul li .focus .title .website{width:150px;} #joinDefault .joinQzz{width:150px;margin-left:-155px;} #joinDefault .joinSh{width:100px;margin-left:65px;} .joinTop span{width:220px;margin-left:-110px;} .join_informationL ul li.second {width: 29%;} .join_informationL ul li.first{width: 30%;} .join_informationL ul li.four{width: 21%;} .joinUsList ul li > div.b {text-align: center; width: 17%;} .joinUsList ul li > div{font-size:12px;} .joinTipBox .joinTipBoxInfo .joinTipName { font-weight: bold; height: 50px; line-height: 25px; padding-bottom: 20px; padding-top: 30px; position: relative; width: 100%;} .apply_biao{width: 165px !important;} .l_product .box1{text-transform: uppercase;} .groups .imgBox .jr3{margin-top: -247px;} .chatList li{float:right;} .navFooter { margin-left: -130px;} .footerChat{width:400px;} .footerChat .text{font-size:23px;}