@font-face {font-family: 'iconfont'; src: url('../font/iconfont.eot'); /* IE9*/ src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/iconfont.woff') format('woff'), /* chrome、firefox */ url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } *{ padding:0; margin: 0;} html{ height: 100%; } body{font-family: Helvetica,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif,"\9ED1\4F53"; background: #fff; height: 100%;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; height: 100%;} img{ display: block; border: none; font-size: 0; } a{ text-decoration: none; } .clear{ clear:both; } .hide{ /*visibility: hidden;*/ display: none; } .fl{float: left;} .fr{float: right;} .black{ color:#000; }; .white{ color:#fff; } .construct{ width: 100%; margin: 0 auto; height: auto; position: relative;} .container{ width: 1330px; margin: 0 auto; position: relative;} .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} .dot:after{ content: '·'; position: absolute; right: 0; top: 0; color: #fff; } .border-bottom{ border-bottom: transparent 1px solid; } /*隐藏站长统计*/ #cnzz_stat_icon_1260368529{ display: none; } #header{ position: fixed; background:#fff; z-index: 99999; top: 0; /*transition: top 0.5s;*/} #header .headerContainer div{ } #header .headerContainer{height: 86px; width: 1330px; margin: 0 auto} /*#header .headerContainer */ .logo{ width: 200px; height: 88px; padding-top: 25px; /*background: url('../image/logoHeader.png') no-repeat center center;*/ transition: background 0.3s; -webkit-transition: background 0.3s; cursor: pointer;} #header .headerContainer .logo:hover{ /*background: url('../image/logoHeaderHover.png')*/ no-repeat center center; } #header .headerContainer .nav{ height: auto; width: 470px; margin-left: 100px; } #header .headerContainer .nav ul li{height: 86px; padding: 0 18px; line-height: 86px; font-size: 19px; font-weight: bold; color: #404040; list-style: none; float: left; cursor: pointer;} #header .headerContainer .nav ul li:hover{ color: #aece00 } #header .headerContainer .tel{ width: 151px; height: 86px; background:url('../image/phoneHeader.png') no-repeat center center; transition: background 0.3s; -webkit-transition: background 0.3s; margin-left: 85px;} #header .headerContainer .tel:hover{ background:url('../image/phoneHeaderHover.png') no-repeat center center; } #header .headerContainer .contact{ width: 90px; height: 86px; background:url('../image/consult.png') no-repeat center center; transition: background 0.3s; -webkit-transition: background 0.3s; margin-left: 60px;} #header .headerContainer .contact:hover{ background:url('../image/consultHover.png') no-repeat center center; } #header .headerContainer .qr{ width: 73px; height: 86px; background: url('../image/qrHeader.png') no-repeat center center; margin-left: 60px;} #header.fixed.scroll{position: fixed; top:0; background: #a2c220; } #header.fixed{ top: -86px; position: fixed; background: #a2c220; transition: top 0.5s; } #header.scroll .headerContainer{height: 86px;} #header.scroll .headerContainer .logo{ width: 199px; height: 86px; background: url('../image/logoHeaderWhite.png') no-repeat center center; margin-left: 35px; } #header.scroll .headerContainer .nav{ height: auto; width: 515px; margin-left: 50px; } #header.scroll .headerContainer .nav ul li{height: 86px; padding: 0 18px; line-height: 86px; font-size: 19px; font-weight: bold; color: #fff; list-style: none; float: left; cursor: pointer;} #header.scroll .headerContainer .nav ul li:hover{ color: #000; } #header.scroll .headerContainer .tel{ width: 151px; height: 86px; background:url('../image/phoneHeaderWhite.png') no-repeat center center; margin-left: 90px;} #header.scroll .headerContainer .contact{ width: 90px; height: 86px; background:url('../image/consultWhite.png') no-repeat center center; margin-left: 60px;} #header.scroll .headerContainer .qr{ width: 55px; height: 86px; background: url('../image/qrHeaderWhite.png') no-repeat center center; background-size: contain; margin-left: 60px;} #header.fixed .headerContainer{height: 86px;} #header.fixed .headerContainer .logo{ width: 199px; height: 86px; background: url('../image/logoHeaderWhite.png') no-repeat center center; margin-left: 35px; } #header.fixed .headerContainer .nav{ height: auto; width: 515px; margin-left: 50px; } #header.fixed .headerContainer .nav ul li{height: 86px; padding: 0 18px; line-height: 86px; font-size: 19px; font-weight: bold; color: #fff; list-style: none; float: left; cursor: pointer;} #header.fixed .headerContainer .tel{ width: 151px; height: 86px; background:url('../image/phoneHeaderWhite.png') no-repeat center center; margin-left: 90px;} #header.fixed .headerContainer .contact{ width: 90px; height: 86px; background:url('../image/consultWhite.png') no-repeat center center; margin-left: 60px;} #header.fixed .headerContainer .qr{ width: 55px; height: 86px; background: url('../image/qrHeaderWhite.png') no-repeat center center; background-size: contain; margin-left: 60px;} .commonBanner{ overflow: hidden; position: relative; width: 100%; } .commonBanner .commonBannerImg{position: absolute; top: 0;left: 0; transform: scale(1.2,1.2); opacity: 0; filter: alpha(opacity=0); transition: transform 0.7s,opacity 0.7s; -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -webkit-transition: transform 0.7s,opacity 0.7s; -moz-transition: transform 0.7s,opacity 0.7s; -ms-transition: transform 0.7s,opacity 0.7s; -o-transition: transform 0.7s,opacity 0.7s; } .commonBanner .commonBannerImgShow{transform: scale(1,1); opacity: 1; filter: alpha(opacity=100);transition: transform 0.7s,opacity 0.7s; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); } #content{ overflow: hidden; } #banner{ margin-top: 86px; } #banner,#banner #bannerImg{ width: 100%; height: 740px; position: relative; overflow: hidden; } /*#banner #bannerContainer{ width: 100%; height: 740px; position: relative; overflow: hidden; }*/ #banner .bannerImg{ width: 100%; height: 740px; position: absolute; transform: scale(1.2,1.2); opacity: 0; filter: alpha(opacity=0); transition: transform 0.7s,opacity 0.7s; } #banner .bannerImg.bannerImgShow{ transform: scale(1,1); opacity: 1; filter: alpha(opacity=100);transition: transform 0.7s,opacity 0.7s; } #indexBannerImg1{ background: url('../image/banner1.jpg') no-repeat center center; background-size: cover; overflow: hidden; } #indexBannerImg2{ background: url('../image/banner2.jpg') no-repeat center center; background-size: cover; overflow: hidden; } #indexBannerImg3{ background: url('../image/banner3.jpg') no-repeat center center; background-size: cover; overflow: hidden; } #indexBannerImg4{ background: url('../image/banner4.jpg') no-repeat center center; background-size: cover; overflow: hidden; } #indexBannerImg5{ background: url('../image/banner5.jpg') no-repeat center center; background-size: cover; overflow: hidden; } #indexBannerImg1 .text img{ position: absolute; top: 160px; left: -50px; opacity: 0; } #indexBannerImg2 .text img{ position: absolute; top: 220px; left: -100px; opacity: 0; } #indexBannerImg3 .text img{ position: absolute; top: 125px; left: 400px; opacity: 0; } #indexBannerImg4 .text img{ position: absolute; top: 350px; left: 622px; opacity: 0; } #indexBannerImg5 .text img{ position: absolute; top: 360px; left: 500px; opacity: 0; } #bannerImg .bannerImg.bannerImgShow .text img{ animation: bannerText 3s ease normal forwards; } #banner #bannerBtn{ position: absolute; width: 100%; height: auto; bottom: 25px; } #banner #bannerBtn .bannerBtnContainer{ width: 321px; height: 6px; margin: 0 auto; } #banner #bannerBtn .bannerBtnContainer .bannerBtn{ width: 100px; height: 6px;background: #fff; margin-left: 7px; float: left; cursor: pointer;} #banner #bannerBtn .bannerBtnContainer .bannerBtn.bannerBtnChecked{ background: #aece00; } #indexArrow1{ height: 91px; width: 310px; background: url('../image/indexArrow1.png') no-repeat center center; margin-top: 56px; margin-bottom: 56px; } #indexArrow1:hover{ background: url('../image/indexArrow1Hover.png') no-repeat center center; } #indexCooperate{ height: auto; } #indexCooperate .indexCooperate{ width: 25%; height: 25vw; overflow: hidden; position: relative; background: url('../image/defaultImg.png') no-repeat center center; } #indexCooperate .indexCooperate img:hover{ transform: scale(1.08,1.08); } #indexCooperate .indexCooperate img{position: absolute; width: 100%; height: 25vw; transition: transform 0.7s,top 0.7s; -webkit-transition: transform 0.7s,top 0.7s; -moz-transition: transform 0.7s,top 0.7s; -ms-transition: transform 0.7s,top 0.7s; -o-transition: transform 0.7s,top 0.7s; } #indexCooperate .indexCooperate img{ top: 0; } /*#indexCooperate .indexCooperate:hover img{ transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -o-transform: scale(1.03,1.03); }*/ /*#indexCooperate .indexCooperate:hover .indexCooperateMask{ top: 0; }*/ #indexCooperate .indexCooperate .indexCooperateMask{width: 100%; height: 25vw; position: absolute; top: -25vw; left: 0; background: url('../image/62percentblack.png') repeat; z-index: 10; opacity: 0; /*transition: top 0.4s; -webkit-transition: top 0.4s; -moz-transition: top 0.4s; -ms-transition: top 0.4s; -o-transition: top 0.4s;*/ } #indexCooperate .indexCooperate .indexCooperateMask p{display: inline-block; width: 100%; height: 25vw; line-height:25vw !important; position: relative; text-align: center; color:#fff; font:normal 14px 'Microsoft yahei';} #indexMoreCase{width: 188px; height: 32px; margin-top: 33px; margin-bottom: 33px; background: url('../image/indexMoreCaseBHover.png') no-repeat center center; transition: background 0.5s;-webkit- transition: background 0.5s; -moz- transition: background 0.5s; -ms- transition: background 0.5s; -o- transition: background 0.5s; } #indexMoreCase:hover{ background: url('../image/indexMoreCase.png') no-repeat center center; } #indexArrow2{width: 208px; height: 112px; margin-top: 15px; margin-bottom: 15px; background:url('../image/indexArrow2.png') no-repeat center center; } #indexArrow2:hover{background:url('../image/indexArrow2Hover.png') no-repeat center center; } #indexArrow3{width: 190px; height: 100px; background:url('../image/indexArrow3.png') no-repeat center center; margin-top: 67px; margin-bottom: 32px; } #indexArrow3:hover{ background:url('../image/indexArrow3Hover.png') no-repeat center center; } #indexCustom{ width: 1274px; height: auto; } #indexCustom .indexCustom{ width: 182px; height: 135px; transform: scale(0,0); cursor: pointer; transition: background 0.5s; -webkit-transition: background 0.5s,transform 0.7s; -moz-transition: background 0.5s; -ms-transition: background 0.5s; -o-transition: background 0.5s; } #indexCustom .indexCustom.scale-show{ transform: scale(1,1); } #indexCustom .indexCustomImg1{ background: url('../image/customIcon/rgba/icon1.png') no-repeat center center; } #indexCustom .indexCustomImg2{ background: url('../image/customIcon/rgba/icon2.png') no-repeat center center; } #indexCustom .indexCustomImg3{ background: url('../image/customIcon/rgba/icon3.png') no-repeat center center; } #indexCustom .indexCustomImg4{ background: url('../image/customIcon/rgba/icon4.png') no-repeat center center; } #indexCustom .indexCustomImg5{ background: url('../image/customIcon/rgba/icon5.png') no-repeat center center; } #indexCustom .indexCustomImg6{ background: url('../image/customIcon/rgba/icon6.png') no-repeat center center; } #indexCustom .indexCustomImg7{ background: url('../image/customIcon/rgba/icon7.png') no-repeat center center; } #indexCustom .indexCustomImg8{ background: url('../image/customIcon/rgba/icon8.png') no-repeat center center; } #indexCustom .indexCustomImg9{ background: url('../image/customIcon/rgba/icon9.png') no-repeat center center; } #indexCustom .indexCustomImg10{ background: url('../image/customIcon/rgba/icon10.png') no-repeat center center; } #indexCustom .indexCustomImg11{ background: url('../image/customIcon/rgba/icon11.png') no-repeat center center; } #indexCustom .indexCustomImg12{ background: url('../image/customIcon/rgba/icon12.png') no-repeat center center; } #indexCustom .indexCustomImg13{ background: url('../image/customIcon/rgba/icon13.png') no-repeat center center; } #indexCustom .indexCustomImg14{ background: url('../image/customIcon/rgba/icon14.png') no-repeat center center; } #indexCustom .indexCustomImg15{ background: url('../image/customIcon/rgba/icon15.png') no-repeat center center; } #indexCustom .indexCustomImg16{ background: url('../image/customIcon/rgba/icon16.png') no-repeat center center; } #indexCustom .indexCustomImg17{ background: url('../image/customIcon/rgba/icon17.png') no-repeat center center; } #indexCustom .indexCustomImg18{ background: url('../image/customIcon/rgba/icon18.png') no-repeat center center; } #indexCustom .indexCustomImg19{ background: url('../image/customIcon/rgba/icon19.png') no-repeat center center; } #indexCustom .indexCustomImg20{ background: url('../image/customIcon/rgba/icon20.png') no-repeat center center; } #indexCustom .indexCustomImg21{ background: url('../image/customIcon/rgba/icon21.png') no-repeat center center; } #indexCustom .indexCustomImg22{ background: url('../image/customIcon/rgba/icon22.png') no-repeat center center; } #indexCustom .indexCustomImg23{ background: url('../image/customIcon/rgba/icon23.png') no-repeat center center; } #indexCustom .indexCustomImg24{ background: url('../image/customIcon/rgba/icon24.png') no-repeat center center; } #indexCustom .indexCustomImg25{ background: url('../image/customIcon/rgba/icon25.png') no-repeat center center; } #indexCustom .indexCustomImg26{ background: url('../image/customIcon/rgba/icon26.png') no-repeat center center; } #indexCustom .indexCustomImg27{ background: url('../image/customIcon/rgba/icon27.png') no-repeat center center; } #indexCustom .indexCustomImg28{ background: url('../image/customIcon/rgba/icon28.png') no-repeat center center; } /*#indexCustom .indexCustomImg1:hover{ background: url('../image/customIcon/rgba/icon1.png') no-repeat center center; } #indexCustom .indexCustomImg2:hover{ background: url('../image/customIcon/rgba/icon2.png') no-repeat center center; } #indexCustom .indexCustomImg3:hover{ background: url('../image/customIcon/rgba/icon3.png') no-repeat center center; } #indexCustom .indexCustomImg4:hover{ background: url('../image/customIcon/rgba/icon4.png') no-repeat center center; } #indexCustom .indexCustomImg5:hover{ background: url('../image/customIcon/rgba/icon5.png') no-repeat center center; } #indexCustom .indexCustomImg6:hover{ background: url('../image/customIcon/rgba/icon6.png') no-repeat center center; } #indexCustom .indexCustomImg7:hover{ background: url('../image/customIcon/rgba/icon7.png') no-repeat center center; } #indexCustom .indexCustomImg8:hover{ background: url('../image/customIcon/rgba/icon8.png') no-repeat center center; } #indexCustom .indexCustomImg9:hover{ background: url('../image/customIcon/rgba/icon9.png') no-repeat center center; } #indexCustom .indexCustomImg10:hover{ background: url('../image/customIcon/rgba/icon10.png') no-repeat center center; } #indexCustom .indexCustomImg11:hover{ background: url('../image/customIcon/rgba/icon11.png') no-repeat center center; } #indexCustom .indexCustomImg12:hover{ background: url('../image/customIcon/rgba/icon12.png') no-repeat center center; } #indexCustom .indexCustomImg13:hover{ background: url('../image/customIcon/rgba/icon13.png') no-repeat center center; } #indexCustom .indexCustomImg14:hover{ background: url('../image/customIcon/rgba/icon14.png') no-repeat center center; } #indexCustom .indexCustomImg15:hover{ background: url('../image/customIcon/rgba/icon15.png') no-repeat center center; } #indexCustom .indexCustomImg16:hover{ background: url('../image/customIcon/rgba/icon16.png') no-repeat center center; } #indexCustom .indexCustomImg17:hover{ background: url('../image/customIcon/rgba/icon17.png') no-repeat center center; } #indexCustom .indexCustomImg18:hover{ background: url('../image/customIcon/rgba/icon18.png') no-repeat center center; } #indexCustom .indexCustomImg19:hover{ background: url('../image/customIcon/rgba/icon19.png') no-repeat center center; } #indexCustom .indexCustomImg20:hover{ background: url('../image/customIcon/rgba/icon20.png') no-repeat center center; } #indexCustom .indexCustomImg21:hover{ background: url('../image/customIcon/rgba/icon21.png') no-repeat center center; } #indexCustom .indexCustomImg22:hover{ background: url('../image/customIcon/rgba/icon22.png') no-repeat center center; } #indexCustom .indexCustomImg23:hover{ background: url('../image/customIcon/rgba/icon23.png') no-repeat center center; } #indexCustom .indexCustomImg24:hover{ background: url('../image/customIcon/rgba/icon24.png') no-repeat center center; } #indexCustom .indexCustomImg25:hover{ background: url('../image/customIcon/rgba/icon25.png') no-repeat center center; } #indexCustom .indexCustomImg26:hover{ background: url('../image/customIcon/rgba/icon26.png') no-repeat center center; } #indexCustom .indexCustomImg27:hover{ background: url('../image/customIcon/rgba/icon27.png') no-repeat center center; } #indexCustom .indexCustomImg28:hover{ background: url('../image/customIcon/rgba/icon28.png') no-repeat center center; }*/ #indexVisit{ height: 660px; overflow: hidden; } #indexVisit .bg{ height: 1225px; position: absolute; bottom: 0; left: 0; background: url('../image/indexVisitBg.jpg') no-repeat center -98px; background-size: cover; background-attachment:fixed;} #indexVisit .text{ width: 361px; height: 168px; position: absolute; background: url('../image/indexVisitText.png') no-repeat center center; right: 14%; top: 140px; } #indexArrow4{ height: 95px; width: 212px; margin-top: 55px; margin-bottom: 55px; background: url('../image/indexArrow4.png') no-repeat center center; } #indexArrow4:hover{background: url('../image/indexArrow4Hover.png') no-repeat center center; } #indexCategory{ height: auto; } #indexCategory .indexCategory{ width: 25%; height: 25vw; /*transition: background 0.5s;*/ } #indexCategory .indexCategory:hover{ background: #a2c220; } #indexCategory #indexCategoryImg1{ background: #dfdfdf url('../image/categoryiconT1.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg2{ background: #cccdcd url('../image/categoryiconT2.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg3{ background: #dfdfdf url('../image/categoryiconT3.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg4{ background: #cccdcd url('../image/categoryiconT4.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg1:hover{ background: #a2c220 url('../image/categoryiconT1W.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg2:hover{ background: #a2c220 url('../image/categoryiconT2W.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg3:hover{ background: #a2c220 url('../image/categoryiconT3W.png') no-repeat center center; background-size: cover; } #indexCategory #indexCategoryImg4:hover{ background: #a2c220 url('../image/categoryiconT4W.png') no-repeat center center; background-size: cover; } #indexArrow5{ height: 100px; width: 320px; margin-top: 50px; margin-bottom: 50px; background: url('../image/indexArrow5.png') no-repeat center center; } #indexArrow5:hover{ background: url('../image/indexArrow5Hover.png') no-repeat center center; } #indexJoin{ height: 661px; position: relative; overflow: hidden; } #indexJoin .indexJoinBg{ width: 100%; height: 660px; background: url('../image/indexJoinBg.jpg') no-repeat center 0px; left: 0;bottom: 0;} #indexJoin .indexJoinText{ width: 100%; height: 661px; position: absolute; top: 0; left: auto; right: auto; background: url('../image/indexJoinText.png') no-repeat 50% center; text-align: center } #bottom{ height: auto; } #bottom .top{width: 513px; height: 229px; margin-top: 83px; margin-bottom: 83px; background: url('../image/phoneBottom.png') no-repeat center center; transition: background 0.5s; -webkit-transition: background 0.5s; } #bottom .top:hover{ background: url('../image/phoneBottomHover.png') no-repeat center center; } #bottom .bottom{ height: 338px; background: #838383; overflow: hidden; } #bottom .bottom .bottomContainer{ height: 71px; margin: 55px auto 0; } #bottom .bottom .bottomContainer .logo{ width: 550px; height: 71px; background: url('../image/logoBottom.jpg') no-repeat left 3px; border-right: #d8d8d8 1px solid;} #bottom .bottom .bottomContainer .tel{ width: 230px; height: 71px; background: url('../image/telBottom.jpg') no-repeat center 3px; border-right: #d8d8d8 1px solid;} #bottom .bottom .bottomContainer .addr{ width: 240px; height:71px; font:normal 12px/18px 'Microsoft YaHei'; color: #fff;border-right: #d8d8d8 1px solid; } #bottom .bottom .bottomContainer .addr p{ text-indent: 24px; } #bottom .bottom .bottomContainer .addr p.big strong{ font-size: 17px; } #bottom .bottom .bottomContainer .social{border-right: #d8d8d8 1px solid; width: 259px; height: 71px;} #bottom .bottom .bottomContainer .social .map{ width: 98px; height: 27px; background: url('../image/bottomMap.png') no-repeat; margin: 5px 0 0 25px; cursor: pointer;} #bottom .bottom .bottomContainer .social .qq{ width: 27px; height: 27px; margin: 5px 0 0 33px; cursor:pointer;} #bottom .bottom .bottomContainer .social .weibo{ width: 27px; height: 27px; margin: 5px 0 0 23px;cursor:pointer;} #bottom .bottom .bottomContainer .social .qq i{ font-size: 22px; color: #fff; } #bottom .bottom .bottomContainer .social .weibo i{ font-size: 25px; color: #fff; } #bottom .bottom .bottomContainer .social .copy{ font-size: 12px; color: #fff; margin: 22px 0 0 25px; } #bottom .backtop{width:34px; height:34px; background:url('../image/backtoptop.png') no-repeat center center; cursor: pointer; position: fixed; display: none; bottom: 10px; right: 10px; transition:background 0.5s; -webkit-transition:background 0.5s; ;} #bottom .backtop:hover{ background:url('../image/backtoptopHover.png') no-repeat center center; } #case{ margin-top: 86px; } #case .case{ width: 25%; height:auto; position: relative; overflow: hidden; background: url('../image/defaultImg.png') no-repeat center center;} #case .case .caseMask{width: 100%; position: absolute; top: 0; left:0; line-height: 340px; background: url('../image/62percentblack.png') repeat; z-index: 10; } #case .case .caseMask.hide{ display: none; } #case .case img{ position: absolute; top: 0; left:0; transition:transform 0.7s; -webkit-transition:transform 0.7s; -moz-transition:transform 0.7s; -ms-transition:transform 0.7s; -o-transition:transform 0.7s; } #case .case .caseMask p{ width: 100%; display: inline-block; position: relative; color: #fff; line-height: 30px; font-family: 'Microsoft YaHei'; position: absolute;} #case .case .caseMask p .top{ font-size: 26px;} #case .case .caseMask p .bottom{ font-size: 18px;} #case .case .caseMask p span{ width: 100%; display: inline-block; text-align: center; } #case .case:hover img{ transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -o-transform: scale(1.03,1.03); } #visit{ margin-top: 86px; } #visit .cover{ height: 38.5vw; background: url('../image/visitIcon/cover.jpg') no-repeat center center; background-size: cover; } #visit .cover .commonBannerImg{ width: 100%; height: 38.5vw; position: absolute; top: 0; left: 0; } #visit .title1{ height: 96px; width: 192px; margin-top: 34px; margin-bottom:34px; background: url('../image/visitIcon/visitArrow3.png') no-repeat center center; transition: background 0.5s; -webkit-transition: background 0.5s; } #visit .title1:hover{ background: url('../image/visitIcon/visitArrow3Hover.png') no-repeat center center; } #visit .main{ width: 100%; height: auto; position: relative; }/*7个单位*/ #visit .plate{ float: left; overflow: hidden; position: absolute;} #visit .plate img{ transition: transform 0.8s; } /*#visit .plate:hover img{ transform: scale(1.06,1.06); }*/ #visit .plate .delayplate,#visit .plate .delayimg{ position: absolute; } #visit .plate1{ width: 50%; height: auto; } #visit .plate2{ width: 25%; height: auto; } #visit .plate3{ width: 25%; height: auto; } #visit .plate4{ width: 50%; height: auto; } #visit .plate5{ width: 50%; height: auto; } #visit .plate6{ width: 100%; height: auto; } #visit .plate7{ width: 50%; height: auto; } #visit .plate8{ width: 25%; height: auto; } #visit .plate9{ width: 50%; height: auto; } #visit .plate10{ width: 25%; height: auto; } #visit .plate11{ width: 75%; height: auto; } #visit .plate12{ width: 25%; height: auto; } #visitplate1{ background:#aece00; } #visitplate1 p{ display: inline-block; font-size: 65px; color: #fff; height: 100%; line-height: 100%; width: 100%; text-align: center; } #visitplate2 .double{ display: inline-block; font-size: 25px; color: #fff; height: 100%; line-height: 100%; width: 100%; text-align: center; } #visitplate2 .double span{ width: 100%; font-size: 55px; line-height: 40px; display: inline; } #visitplate2 .double p{ line-height: 33px; display: inline-block; } #visitplate3 p{ display: inline-block; font-size: 65px; color: #a1a1a1; height: 100%; line-height: 100%; width: 100%; text-align: center; } #visitplate4 p{ display: inline-block; font-size: 65px; color: #fff; height: 100%; line-height: 100%; width: 100%; text-align: center; background: url('../image/70-aece00.png') repeat; } #visitplate2{ background:#a1a1a1; } #visitplate4{ background: url('../image/visitIcon/img4.jpg') no-repeat center center; background-size: cover; } #job{ height: auto; margin-top: 86px; } #job .cover{ height: 38.5vw; background: url('../image/job/cover.jpg')no-repeat center center; background-size: cover; } #job .cover .commonBannerImg{ width: 100%; height: 38.5vw; position: absolute; top: 0; left: 0; } #job .title{ height: 100px; width: 320px; margin-top: 50px; margin-bottom: 50px; background: url('../image/indexArrow5.png') no-repeat center center; transition:background 0.5s; -webkit-transition:background 0.5s; } #job .title:hover{background: url('../image/indexArrow5Hover.png') no-repeat center center;} #job .section1{ height: 480px; } #job .section1 .left{ width: 50%; height: 480px; background: url('../image/job/section1Left.jpg') no-repeat center center; background-size: cover; } #job .section1 .right{ width: 50%; height: 480px; background:#8b8b8b url('../image/job/section1Right.gif') no-repeat center left; background: contain; } #job .main{ width: 50%; height: 1200px; overflow: hidden; } #job .up{ width: 50%; height: 1200px; background: url('../image/job/up.png') no-repeat left center; transition: background 1s;} #job .main .content{ width: 100%; margin-top: 170px; position: relative; } #job .main .content p{ width: 100%; text-align: right; color:#808080;font-family: 'Microsoft YaHei';} #job .main .content .jobName{ font-size:56px; line-height: 87px; cursor: pointer; transition: color 0.7s } /*#job .main .content .jobName:hover{ color: #a2c220; }*/ #job .main .content .ko{ font-size:130px; line-height: 225px; } #job .main .content .text{ font-size:28px; line-height: 46px; } #job .jobDetail{ margin: 116px 0 128px 0; } #job .jobDetail .right{ height: auto; width: 50%; position: relative; overflow: hidden;} #job .jobDetail .right .img{ width: 100%; height: 1026px; background: url('../image/job/up.png') no-repeat 120px center; background-size:cover; margin-bottom: 3px; transition: background 0.5s; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -ms-transition: background 0.5s; -o-transition: background 0.5s; } #job .jobDetail .right .img:hover{ width: 100%; height: 1026px; background: url('../image/job/upGreen.png') no-repeat 120px center; background-size:cover; margin-bottom: 3px; } #job .jobDetail .right .tip{ width: 100%; height: 340px; background: #aece00; font-size: 28px; color: #fff; position: relative; overflow: hidden;} #job .jobDetail .right .tip .join{ font-size: 90px; font-weight: bold; text-transform: uppercase;margin: 60px 0 0 120px; } #job .jobDetail .right .tip .content{ margin: 0px 0 0 120px; font-family: 'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important; } #job .jobDetail .left{ width: 50%; position: relative; } #job .jobDetail .left .list{ height: 340px; margin-top: 3px; position: relative; overflow: hidden; cursor: pointer;} #job .jobDetail .left .list.fi{ margin-top: 0; } #job .jobDetail .left .list .num{ width: 216px; height: 340px; background: #e9e9e9; font-size: 200px; color: #aece00; text-align: center; line-height: 400px; font-family: 'Arial'; transition: background 0.3s; -webkit-transition: background 0.3s; } #job .jobDetail .left .list .detail{ margin-right: 219px; height: 340px; background: #e9e9e9; overflow: hidden; transition: background 0.3s; -webkit-transition: background 0.3s; } #job .jobDetail .left .list .detail .name{ font-size: 38px; text-align: right; margin: 80px 38px 0 0; font-weight: bold;} #job .jobDetail .left .list .detail .content{ font-size: 16px; font-family: 'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important; text-align: right; margin: 20px 38px 0 15px; } #job .jobDetail .left .list:hover .num,#job .jobDetail .left .list:hover .detail{ background: #eee; } #detail{ height: auto; margin-top: 86px; } #detailCover{ height: 33.33vw; background: url('../image/detail/cover.jpg') no-repeat center center; background-size:cover; } #detail .main .abstract { height: 240px; overflow: hidden; margin-top: 57px; } #detail .main .abstract .left{ width: 50%; height: 240px; position: absolute; left: 0; top: 240px;} #detail .main .abstract .left .title{ font-size: 28px; color: #3e3a39; font-weight: bold; } #detail .main .abstract .left .titles{ font-size: 28px; color: #3e3a39; font-weight: thin; margin-left: 10px;font-family: 'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important;} #detail .main .abstract .left .titleen{ width: 100%; font-size: 18px; color: #3e3a39; font-weight: thin; font-family: 'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important; } #detail .main .abstract .right{ width: 50%; height: 240px; position: absolute; left: 50%; top: 240px; font-family: 'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important; font-size: 14px; color: #3e3a39; line-height: 24px;} #detail .main .banner{ width: 100%; height: 700px; position: relative; overflow: hidden; } #detail .main .banner #detailBanner{ width: 100%; height: 700px; position: absolute; top: 700px; left: 0; background: orange; } #detail .main .banner #detailBanner .detailBanner{ width: 100%; height: 700px; position: absolute; background-repeat:no-repeat; background-position: center center; background-size: cover; } /*#detail .main .banner */#detailBannerBtn{ width: 100%; height: 6px; position: absolute; bottom: 20px; left: 0; z-index: 30; } /*#detail .main .banner */#detailBannerBtn .detailBannerBtn{ width: 100px; margin-left: 7px; height: 6px; float: left; background: #fff; cursor: pointer;} /*#detail .main .banner */#detailBannerBtn .detailBannerBtn.fi{ margin-left: 0; } #detail .main p{ width: 100%; height: auto; overflow: hidden; position: relative; display: block; } #detail .main p img{ width: 100%; height: auto; position: relative; } /*#detail .main .detailImg{ width: 100%; height: auto; overflow: hidden; position: relative; display: block; } #detail .main .detailImg img{ width: 100%; height: auto; position: absolute; top: 0; left: 0; }*/ /*#detail .main .banner */#detailBannerBtn .detailBannerBtnChecked{ background: #aece00; } #detail .detailPlateContainer{ position: relative;float: left; overflow: hidden; } #detail .detailPlateContainer .detailPlate{ position: absolute; } #detail .detailPlateContainer img{ transition: transform 0.8s; position: absolute; left: 0; } /*#detail .detailPlateContainer:hover img{ transform: scale(1.06,1.06); }*/ #detail .detailPlate1 .detailPlate{ background: #e50012; } #detail .main{ width: 1440px; max-width: 1440px; margin: 0 auto; } #detail .main .detailPlate1 .detailPlate{ overflow: hidden; position: relative; color: #fff; font-family: 'Microsoft YaHei'; } #detail .main .detailPlate1 .titleEn{ margin: 10% 0 0 10%; font-size: 24px; } #detail .main .detailPlate1 .title{margin: 5px 0 0 10%; font-size: 24px; font-weight: bold; line-height: 20px;} #detail .main .detailPlate1 .content{ width:80%; margin: 20px 0 0 10%; font-size: 14px; line-height: 20px; } #detailBanner,#detailBannerImg{ height: 700px; } #detailBannerImg .detailBannerImg{ height: 700px; position: absolute; background-size: cover; background-position: center center; background-repeat: no-repeat; } #detail .reconmend{ width: 100%; height: auto; margin-top: 62px;} #detail .reconmend .title{ width: 100%; height: 45px; line-height: 45px; font-size: 18px; color: #aece00; font-family:'Microsoft YaHei light',Helvetica,"Helvetica Neue" !important; border-bottom: #aece00 2px solid; margin-bottom: 14px;} #detail .reconmend .lists{ width: 100%; height: auto; position: relative; } #detail .reconmend .list{ width: 24%; height: 100px; margin-left: 1.333%; float: left; background-size: contain; background-position: center center; cursor: pointer;} #detail .reconmend .list.fi{ /*margin-left: 0.5%;*/ margin-left:0; } #server{ margin-top: 86px; } #server .cover{ height: 38.5vw; background: url('../image/server/cover.jpg') no-repeat center center; } #server .cover .commonBannerImg{ width: 100%; height: 38.5vw; position: absolute; top: 0;left: 0 } #server .cover img{ position: absolute; left: 0; top: 200px; } #server .title{ height: 99px; width: 220px; margin-top: 53px; margin-bottom: 53px; background: url('../image/indexArrow4.png') no-repeat center center; transition: background 0.5s; -webkit-transition: background 0.5s; } #server .title:hover{ background: url('../image/indexArrow4Hover.png') no-repeat center center; } #server .main .server{ width: 33.333%; height: auto; float: left; position: relative; overflow: hidden; } #server .main .server img{position: absolute; }/*长宽由js设置*/ #server .main .server .plateContainer{ position: absolute; width: 100%; height: auto; } #server .main .plate2 .plateContainer{ background: #95c8c8 url('../image/server/text1.png') no-repeat center center; } #server .main .plate4 .plateContainer{ background: #95c800 url('../image/server/text2.png') no-repeat center center; } #server .main .plate8 .plateContainer{ background: #00c895 url('../image/server/text3.png') no-repeat center center; } #server .main .plate12 .plateContainer{ background: #ff9500 url('../image/server/text4.png') no-repeat center center; } #server .main .plate3 .plateContainer{ background: #e3e3e3 url('../image/server/content1.jpg') no-repeat center center; } #server .main .plate5 .plateContainer{ background: #e3e3e3 url('../image/server/content2.jpg') no-repeat center center; } #server .main .plate9 .plateContainer{ background: #e3e3e3 url('../image/server/content3.jpg') no-repeat center center; } #server .main .plate10 .plateContainer{ background: #e3e3e3 url('../image/server/content4.jpg') no-repeat center center; } #server .main .server .plateContainer .content{ text-align: left; display: inline-block; width: 100%; height: 100%; } #server .main .server .plateContainer .content p{ line-height: 45px; font-size: 38px; color: #231815;} @keyframes bannerText { 0%{ opacity: 0; transform: translateX(500px); } 5%{ opacity: 0; transform: translateX(500px); } 30% { opacity: 1; transform: translateX(0px); } 100%{ opacity: 1; transform: translateX(0px); } } @-webkit-keyframes bannerText { 0%{ opacity: 0; -webkit-transform: translateX(500px); } 5%{ opacity: 0; -webkit-transform: translateX(500px); } 30% { opacity: 1; -webkit-transform: translateX(0px); } 100%{ opacity: 1; -webkit-transform: translateX(0px); } } @-moz-keyframes bannerText { 0%{ opacity: 0; -moz-transform: translateX(500px); } 5%{ opacity: 0; -moz-transform: translateX(500px); } 30% { opacity: 1; -moz-transform: translateX(0px); } 100%{ opacity: 1; -moz-transform: translateX(0px); } } @media screen and (min-width: 1429px) { .container{ width: 81.7%; max-height: 1167px; } #detail .main{ width: 98%; max-width: 1400px; } #header .headerContainer{height: 86px; width: 98%; max-width: 1400px; margin: 0 auto;} #header .headerContainer .logo{} #header .headerContainer .nav{ margin-left: 100px; width: 500px; } #header .headerContainer .nav ul li{padding: 0 22px;} #header .headerContainer .tel{margin-left: 100;} #header .headerContainer .contact{ margin-left: 80px;} #header .headerContainer .qr{ margin-left: 70px;} #bottom .bottom .bottomContainer{ height: 71px; width: 98%;max-width: 1400px; margin: 0 auto; margin-top: 55px; } #bottom .bottom .bottomContainer .tel{ width: 20.71%;} #bottom .bottom .bottomContainer .logo{ width: 39.6%; } #bottom .bottom .bottomContainer .addr{ width: 20.71%; line-height: 18px; } #bottom .bottom .bottomContainer .social{ width: 18.5% } } @media screen and (min-width: 1330px) and (max-width: 1429px) { .container{ width: 81.7%; max-height: 1167px; } #detail .main{ width: 98%; max-width: 1400px; } #header .headerContainer{ width: 98%; max-width: 1400px;} /*#header .headerContainer .nav{ margin-left: 5%; }*/ #bottom .bottom .bottomContainer{ height: 71px; width: 98%;max-width: 1400px; margin: 0 auto; margin-top: 55px; } #bottom .bottom .bottomContainer .tel{ width: 20.71%; background-size: 95%;} #bottom .bottom .bottomContainer .logo{ width: 39.6%; background-size: 95%; } #bottom .bottom .bottomContainer .addr{ width: 20.71%; line-height: 17px; } #bottom .bottom .bottomContainer .social{ width: 18.5% } #bottom .bottom .bottomContainer .social .map{ margin: 5px 0 0 24px; } #bottom .bottom .bottomContainer .social .qq{margin: 5px 0 0 23px;} #bottom .bottom .bottomContainer .social .weibo{margin: 5px 0 0 20px;} #bottom .bottom .bottomContainer .social .copy{ margin-left: 24px; } } @media screen and (min-width: 1261px) and (max-width:1330px){ .container{ width: 81.7%; max-height: 1167px; } #detail .main{ width: 98%; } #header .headerContainer{ width: 98%; } #header .headerContainer .nav{ margin-left: 50px; } #header .headerContainer .tel{margin-left: 0;} #bottom .bottom .bottomContainer{ height: 71px; width: 98%;max-width: 1400px; margin: 0 auto; margin-top: 55px; } #bottom .bottom .bottomContainer .tel{ width: 20.71%; background-size: 95%;} #bottom .bottom .bottomContainer .logo{ width: 39.6%; background-size: 95%; } #bottom .bottom .bottomContainer .addr{ width: 20.71%; line-height: 17px; } #bottom .bottom .bottomContainer .social{ width: 18.5% } #bottom .bottom .bottomContainer .social .map{ margin: 5px 0 0 20px; } #bottom .bottom .bottomContainer .social .qq{margin: 5px 0 0 20px;} #bottom .bottom .bottomContainer .social .weibo{margin: 5px 0 0 16px;} #bottom .bottom .bottomContainer .social .copy{ margin-left: 20px; } } @media screen and (max-width:1261px) and (min-width: 980px){ .container{ width: 81.7%; max-height: 1167px; } #detail .main{ width: 98%; } #header .headerContainer{ width: 98%; } #header .headerContainer .nav{ margin-left: 2%; } #header .headerContainer .tel{ margin-left: 0; } #header .headerContainer .contact{ margin-left: 2%; } #header .headerContainer .qr{ margin-left: 2%; } #bottom .bottom .bottomContainer{ height: 71px; width: 98%;max-width: 1400px; margin: 0 auto; margin-top: 55px; } #bottom .bottom .bottomContainer .tel{ width: 20.71%; background-size: 95%;} #bottom .bottom .bottomContainer .logo{ width: 39.6%; background-size: 95%; } #bottom .bottom .bottomContainer .addr{ width: 20.71%; line-height: 17px; } #bottom .bottom .bottomContainer .social{ width: 18.5% } #bottom .bottom .bottomContainer .social .map{ margin: 5px 0 0 20px; } #bottom .bottom .bottomContainer .social .qq{margin: 5px 0 0 20px;} #bottom .bottom .bottomContainer .social .weibo{margin: 5px 0 0 16px;} #bottom .bottom .bottomContainer .social .copy{ margin-left: 20px; } } @media screen and (min-width:320px) and (max-width:980px){ .container{ width: 81.7%; max-height: 1167px; } #detail .main{ width: 98%; } #header .headerContainer{ width: 98%; } #header .headerContainer .nav{ width: 380px; } #header .headerContainer .nav ul li{ font-size: 14px; } #header .headerContainer .tel{ margin-left: 0; } #header .headerContainer .contact{ margin-left: 2%; } #header .headerContainer .qr{ margin-left: 2%; } #bottom .bottom .bottomContainer{ height: 71px; width: 98%;max-width: 1400px; margin: 0 auto; margin-top: 55px; } #bottom .bottom .bottomContainer .tel{ width: 22%; background-size: 95%;} #bottom .bottom .bottomContainer .logo{ width: 35%; background-size: 95%; } #bottom .bottom .bottomContainer .addr{ width: 23%; line-height: 17px; } #bottom .bottom .bottomContainer .social{ width: 19% } #bottom .bottom .bottomContainer .social .map{ margin: 5px 0 0 5px; } #bottom .bottom .bottomContainer .social .qq{margin: 5px 0 0 5px;} #bottom .bottom .bottomContainer .social .weibo{margin: 5px 0 0 5px;} #bottom .bottom .bottomContainer .social .copy{ margin-left: 5px; } #indexCustom .indexCustom{ width: 20%; } #indexCustom{width:100%;} #bottom .bottom .bottomContainer .addr p{ text-indent: 6px;} #server .main .server .plateContainer{ background-size: contain; } #server .main .plate2 .plateContainer{ background-size: 70%; } #server .main .plate4 .plateContainer{ background-size: 70%; } #server .main .plate8 .plateContainer{ background-size: 70%; } #server .main .plate12 .plateContainer{ background-size: 70%; } #job .jobDetail .right .tip .join{ font-size: 65px; margin: 60px 0 0 60px; } #job .jobDetail .right .tip .content{ font-size: 24px; margin: 0 0 0 60px; } #job .jobDetail .left .list .detail .name{ font-size: 24px; } #job .jobDetail .left .list .detail .content{ font-size: 12px; } #visitplate1 p{ font-size: 40px; } #visitplate3 p{ font-size: 40px; } } .container-fluid{padding-left: 0;padding-right: 0} @media (max-width: 767px) { #banner{ margin-top: 0px; } #banner .bannerImg{ width: 100%; height: 650px; position: absolute; transform: scale(1.2,1.2); opacity: 0; filter: alpha(opacity=0); transition: transform 0.7s,opacity 0.7s; } #indexBannerImg1{ background: url('../image/banner1.jpg') no-repeat center center; background-size: cover; overflow: hidden; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #indexBannerImg2{ background: url('../image/banner2.jpg') no-repeat center center; background-size: cover; overflow: hidden; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #indexBannerImg3{ background: url('../image/banner3.jpg') no-repeat center center; background-size: cover; overflow: hidden; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #indexBannerImg4{ background: url('../image/banner4.jpg') no-repeat center center; background-size: cover; overflow: hidden; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #indexBannerImg5{ background: url('../image/banner5.jpg') no-repeat center center; background-size: cover; overflow: hidden; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #detailBannerBtn .detailBannerBtn{ width: 20px; margin-left: 7px; height: 6px; float: left; background: #fff; cursor: pointer;} #bottom .bottom .bottomContainer .addr{ width: 100%; line-height: 17px; } #bottom .top{width: 350px; height: 144px; margin-top: 83px; margin-bottom: 83px; background: url('../image/phoneBottom.png') no-repeat center center; transition: background 0.5s; -webkit-transition: background 0.5s; } #indexCooperate .indexCooperate{ width: 50%; height: 25vw; overflow: hidden; position: relative; background: url('../image/defaultImg.png') no-repeat center center; } #indexCustom .indexCustom{ width: 33.33333333333%; } #indexCategory .indexCategory{ width: 50%; height: 25vw; transition: background 0.5s; } .logo.fl{ width: 180px; height: 60px;margin-left: 10px;background: url(../image/logoHeader.png) no-repeat center center; } #indexJoin .indexJoinText{ width: 50%; height: 50%; position: absolute; top: 20%; left: 20%; background: url('../image/indexJoinText.png') no-repeat 50% center;filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%;background-size:100% 100%;background-size:100%} #content{margin-top: -40px;} #case .case{ width: 50%; height:auto; position: relative; overflow: hidden; background: url('../image/defaultImg.png') no-repeat center center;} #case{ margin-top: 0px; } #server{ margin-top: 0px; } #job{ margin-top: 0px; } #visit{ margin-top: 0px; } #detail{ margin-top: 0px; } #job .jobDetail .left{ width: 100%; position: relative; } #job .jobDetail .right{ height: auto; width: 100%; position: relative; overflow: hidden;} #job .section1 .left{ width: 50%; height: 50%; background: url('../image/job/section1Left.jpg') no-repeat center center; background-size: cover; } #job .section1 .right{ width: 50%; height: 50%; background:#8b8b8b url('../image/job/section1Right.gif') no-repeat center left; background: contain; } .bannertxt{width: 100%;left: -20px!important;top: 50px!important} #detail .reconmend .list{ width: 50%; height: 100px; margin: 0px; float: left; background-size: contain; background-position: center center; cursor: pointer;} }