/* * Created by scp-173 on 16/7/1 * Copyright (c) 2016 shuwon.com All rights reserved */ @charset "utf-8"; * { margin: 0; padding: 0; } html, body { width: 100%; height: auto; margin: 0; padding: 0; font-size: 14px; background: #FFFFFF; color: #3e3e3e; overflow-x: hidden; } 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: 14px LatoLight, '微软雅黑', "Microsoft YaHei", tahoma, Srial, helvetica, sans-serif; outline: none; } h1, h2, h3, h4, h5, h6 { margin: 0; } ul, ol, li { list-style: none; } a { text-decoration: none; color: #fff; } a:hover { text-decoration: none; } p { margin: 0; } img { border: 0px; vertical-align: middle;} table { border-spacing: 0px; border-collapse: collapse; } tr { cursor: pointer; } input { border: 0; } textarea { resize: none; padding: 0; } ::selection { background: #1a96d4; color: #fff; } ::-moz-selection { background: #1a96d4; color: #fff; } .clear { clear: both; } .scroll_cs { position: fixed; top: 0; color: #000; font-size: 36px; z-index: 999; left: 0; } .Hover_off { cursor: url(../images/hover.ico), crosshair; } .scrollbar { padding-right: 5px; height: 700px; overflow: auto; } .scrollbar::-webkit-scrollbar { width: 5px; height: 10px; } .scrollbar::-webkit-scrollbar-button { background-color: #ababa7; } .scrollbar::-webkit-scrollbar-track { background: #ababa7; } .scrollbar::-webkit-scrollbar-track-piece { background: url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png); } .scrollbar::-webkit-scrollbar-thumb { background: #1F99D6; border-radius: 4px; } .scrollbar::-webkit-scrollbar-corner { background: #82AFFF; } .scrollbar::-webkit-scrollbar-resizer { background: #FF0BEE; } .content1480 { max-width: 1480px; width: 96%; margin: 0 auto; position: relative; height: auto; z-index: 2; } .imgs{ position: relative; font-size: 0px; } /*****************************/ /*IEtips*/ .IEtips{ position: fixed; top: 0;left: 0;width: 100%; height: 100%;z-index: 10000; background:url(../images/ieBG.png);display: none;} .IEtips_Box{ width: 1000px; background:#FAFAFA; height: 500px;position: absolute; left: 50%; top: 50%; margin: -250px 0 0 -500px;} .IEtips .Browser{margin-top: 35px;} .IEtips .IEtips_title{font-size: 36px;width: 80%;margin: 0 auto;padding-top: 35px;} .IEtips .Browser ul{ overflow: hidden;text-align: center;width: 80%;margin: 0 auto;} .IEtips .Browser ul li{margin: 0 40px;text-align: center;width: 120px;float: left;} .IEtips .Browser ul li img{width: 100px;margin: 0 auto;} .IEtips .Browser ul li a,.IEtips .Browser ul li span{display: inline-block;margin-top: 25px;color: #2570e1;font-size: 16px;transition: all .5s;-webkit-transition: all .5s;} .IEtips .Browser ul li a:hover{color:#800886;} .IEtips .brn_off{ background: url(../images/brn_off.png); height: 32px; width: 32px; position: absolute; top: 5px; right: 5px; cursor: pointer;} /***mobile*********/ #navToggle{position: fixed;z-index: 101;top: 10px;right:10px;width:30px;height: 30px;cursor: pointer;-webkit-transition: all ease 0.3s;transition: all ease 0.3s; display: none;} #navToggle span{position: absolute;top: 0;display: block;width:30px;height: 2px;left:0;border: 0px solid rgba(255,255,255,.8);background-color: rgba(255,255,255,.8);-webkit-transition: top 0.2s 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;transition: top 0.2s 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;transition: top 0.2s 0.2s, transform 0.2s, background 0.2s, opacity 0s 0.2s;transition: top 0.2s 0.2s, transform 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s;} #navToggle span:nth-of-type(2) {top: 15px;} #navToggle span:nth-of-type(3) {top: auto;bottom: 0;-webkit-transition: bottom 0.2s 0.2s, background 0.2s, -webkit-transform 0.2s;transition: bottom 0.2s 0.2s, background 0.2s, -webkit-transform 0.2s;transition: bottom 0.2s 0.2s, transform 0.2s, background 0.2s;transition: bottom 0.2s 0.2s, transform 0.2s, background 0.2s, -webkit-transform 0.2s;} #navToggle.expanded:hover {border-color: #fff;} #navToggle.expanded {border-color: #aaa;} #navToggle.expanded:hover span {transform: scale(0.9);} #navToggle.expanded span:nth-of-type(1) {top: 15px;transform: rotate(45deg);transition:top 0.2s,transform 0.2s 0.2s,background 0.2s;-webkit-transform: rotate(45deg);-webkit-transition:top 0.2s,-webkit-transform 0.2s 0.2s,background 0.2s} #navToggle.expanded span:nth-of-type(2) {opacity: 0;transition: opacity 0.2s;-webkit-transition: opacity 0.2s;} #navToggle.expanded span:nth-of-type(3) {bottom: 14px;transform: rotate(-45deg);transition:bottom 0.2s,transform 0.2s 0.2s,background 0.2s;-webkit-transform: rotate(-45deg);-webkit-transition:bottom 0.2s,-webkit-transform 0.2s 0.2s,background 0.2s} #mobileNav.expanded {display: block;top: 0;} #mobileNav{position: fixed; top: 0; height: 100%;left: 0; width: 100%;z-index: 100; background: #5c9cd3; transform: translateY(-100%);-webkit-transform: translateY(-100%);transition:cubic-bezier(0.92, 0.1, 0.25, 1) .8s;-webkit-transition:cubic-bezier(0.92, 0.1, 0.25, 1) .8s; display: none;} #mobileNav.cur{transform:translateY(0);-webkit-transform: translateY(0);} #mobileNav ul{ margin-top:50px; background: #5c9cd3; } #mobileNav ul li{line-height: 50px; font-size:16px;text-align: center;border-bottom: 1px solid #26669d;border-top: 1px solid #4a90cd;} #mobileNav ul li a{display: block; height: 100%;color: #fff;} #mobileNav ul li.active a{ background: #1b6aae;} /*banner*/ #banner{ font-size: 0px; position: relative; width: 100%; height: auto;} #banner:after{width: 100%; height: 50%; position: absolute; left: 0%; top: 0%; content: ''; background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); pointer-events: none;} #banner>.logo{ position: absolute; top: 5%; z-index: 10; left: 5%; } /*nav*/ .nav{ width: 100%; height: 70px; position: absolute; bottom: 0px;} .nav .logo{ float: left; height: 70px; line-height: 70px; display: none;} .nav.active{ position: fixed; top: 0; z-index: 1000;} .nav.active .logo{ display: block; margin-right: 40px;} .nav > .bg{ background-image: url(../images/navBg.jpg); background-image: url(../images/navBg_Ie.png)\9; position: absolute; opacity: .7; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;} .nav ul{ height: 100%; overflow: hidden; position: relative;} .nav ul li{ width: 120px; position: relative; text-align: center; float: left; height: 100%; line-height: 70px;} .nav ul li a{ display: block; width: 100%; font-family: "SimHei"; height: 100%; font-size: 14px; color: #FFFFFF;} .nav ul li .border{ position: absolute; left: 0px; top: 50%; margin-top: -14px; z-index: 0; opacity: .4; background-image: url(../images/borderBg.png); width: 2px; height: 28px; } .nav ul li .border.br{ left: auto; right: 0px;} .nav ul .linB{ width: 120px; height: 5px; background: #f7c000; position: absolute; bottom: 0px; left: 0px;} /*index*/ .pageTit{ width: 100%; height: auto;font-family: "新宋体";} .pageTit .ch{ font-size: 48px; color:#007cb9; } .pageTit .en{ font-size: 18px; margin-top: 10px; color: #FFFFFF; border-radius: 22px; padding: 0 20px; display: inline-block; height: 22px; text-align: center; line-height: 22px; background-color: #f7c000; text-transform: uppercase; word-spacing:8px; letter-spacing: 1px;} .index .proBox{ width: 100%; height: auto; background: url(../images/proShowBg.jpg) no-repeat center; background-size: cover; padding-top: 70px; padding-bottom: 100px; } .index .proBox .showBox{ width: 100%; margin-top: 60px; position: relative; overflow: hidden;} .index .proBox .ulBox{ position: relative; overflow: hidden; width: 90%; margin: auto;} .index .proBox .ulBox ul{ position: relative;width: 100000px; overflow: hidden;} .index .proBox .ulBox li{ float: left; overflow: hidden; position: relative; padding-bottom: 50px;} .index .proBox .ulBox li:hover .textBox{ bottom: 0px;} .index .proBox .ulBox li:hover .textBox .text{ font-size: 18px;} .index .proBox .ulBox .textBox{ position: absolute; background: #FFFFFF; width: 100%; height: 190px; transition-duration: .4s; -webkit-transition-duration: .4s; text-align: center; bottom: -140px; transition-timing-function:cubic-bezier(0.57, 0.01, 0.32, 1.06);} .index .proBox .ulBox .textBox .icon{ width: 50px; height: 50px; position: absolute; top: -25px; left: 50%; margin-left: -25px; background: #FFFFFF; border-radius: 50%; line-height: 40px; font-size: 0px;} .index .proBox .ulBox .textBox .text{ transition-duration: .3s; -webkit-transition-duration: .3s; font-size: 14px; color: #000000; z-index: 10; position: relative; height: 50px; line-height: 50px;} .index .proBox .ulBox .textBox .btns{ width: 80%; height: 36px; line-height: 36px; transition-duration: .4s; -webkit-transition-duration: .4s; color: #1d1c1c; background: #cce4ef; margin: 20px auto 0; display: block;} .index .proBox .ulBox .textBox .btns:hover{ color: #FFFFFF; background: #0076b0;} .index .proBox .showBox .btn_c{ position: absolute; cursor: pointer; top: 50%; margin-top: -32px; width: 32px; height: 64px; background: url(../images/pageBtn1.png) no-repeat; transition-duration: .3s; -webkit-transition-duration: .3s;} .index .proBox .showBox .btn_c:hover{ background-image: url(../images/pageBtn2.png);} .index .proBox .showBox .btn_c.btnPrev{ left: 0px; background-position: left;} .index .proBox .showBox .btn_c.btnNext{ right: 0px; background-position: right;} .index .iNews{ background: url(../images/iNewBg.jpg) no-repeat center top #f2f2f2; padding: 80px 0 100px 0;} .index .iNews .pageTit .ch{ color: #fff; position: relative;} .index .iNews .pageTit .ch .text{ font-size: 14px; position: absolute; font-family: "微软雅黑"; width: 500px; top: 5px; left: 250px; line-height: 24px; } .index .iNews .pageTit .ch .text a{ text-transform: uppercase; color: #e50213; font-size: 12px; font-family: arial;} .index .iNews .pageTit .ch .text a:hover{ text-decoration: underline;} .index .iNews .newBox{text-align: center; position: relative; overflow: hidden; } .index .iNews .newBox ul{ width: 999999px; overflow: hidden; padding-top: 120px;} .index .iNews .newBox li{ text-align: left; float: left; background: #FFFFFF; transition-duration: .3s; position: relative; top: 0px; -webkit-transition-duration: .3s;} .index .iNews .newBox .textBox{ position: relative; padding: 20px 10px; height: 207px;} .index .iNews .newBox .tit{ font-size: 18px; transition-duration: .3s; -webkit-transition-duration: .3s; margin-bottom: 15px;color: #353535;} .index .iNews .newBox .text{ font-size: 14px; transition-duration: .3s; -webkit-transition-duration: .3s; color: #7c7c7c; line-height: 22px; opacity: .7;} .index .iNews .newBox .time{ font-size: 12px; transition-duration: .3s; -webkit-transition-duration: .3s; color: #7c7c7c; line-height: 22px; margin-top: 10px;} .index .iNews .newBox li:hover{ background: #008fd5; box-shadow: 0px 0px 5px rgba(0,0,0,.3); top: -5px;} .index .iNews .newBox li:hover *{ color: #fff;} .index .iNews .newBox .swiper-pagination{ height:auto; display: inline-block; position: relative; margin-top: 60px; text-align: center;} .index .iNews .newBox .swiper-pagination span{ width: 90px;cursor: pointer; border-bottom: 20px solid #f2f2f2; border-top: 20px solid #f2f2f2; height: 5px; background: #018fd5; display: block; float: left; margin: 0 10px; opacity: 1; box-sizing:content-box; -webkit-box-sizing:content-box;} .index .iNews .newBox .swiper-pagination span.swiper-pagination-bullet-active{ background: #e50112;} .index .iAbout{ background: #f2f2f2; padding-bottom: 50px;} .index .iAbout .pageTit .ch{ color: #000; } .index .iAbout .iText{ margin-top: 30px; font-size: 14px; color: #3E3E3E; line-height: 26px; margin-bottom: 40px;} .index .iAbout .iText a{ text-transform: uppercase; color: #e50213; font-size: 12px; font-family: arial;} .index .iAbout .iText a:hover{ text-decoration: underline;} .index .iAbout .video{ width: 100%; height: 494px; position: relative; overflow: hidden; background: #000;} .index .iAbout .video:hover .bg{ opacity: 1; transform: scale(1.05); -webkit-transform: scale(1.05);} .index .iAbout .video .bg{ transition-duration: 1.5s; -webkit-transition-duration: 1.5s; width: 100%; height: 100%; background: url(../images/videobg.jpg) no-repeat center; background-size: cover; opacity: .6;} .index .iAbout .video .play{background: url(../images/playBtn.png) no-repeat; cursor: pointer; width: 117px; height: 117px; position: absolute; top: 50%; margin-top: -59px; left: 50%; margin-left: -59px; } .index .iAbout .video .close{ width: 100px; height: 100px; background: url(../images/close.png) no-repeat center; position: absolute; z-index: 100; right: 0px; top: 0px; display: none;} .index .footer{ background: #f2f2f2; border-top: none;} .index .indexBanner{ width: 100%; position: relative; overflow: hidden;} .index .indexBanner .river{ position: absolute; top: 50%; margin-top: -200px; width: 0; height: 400px; left: 50%; margin-left: -470px;transition-duration: 5s; -webkit-transition-duration: 5s;background-image: url(../images/rivers.png);} .index .indexBanner .river.active{ width: 940px;} .index .indexBanner .river.active .borderT{ width: 300px;} .index .indexBanner .river.active .borderL{ height: 448px;} .index .indexBanner .river.active .borderR{ height: 448px;} .index .indexBanner .river .border{ background: #e50112; position: absolute; transition-duration: .5s; -webkit-transition-duration: .5s;} .index .indexBanner .river .borderT{ width:0px; height: 6px; margin: auto; top: -40px; position: relative; transition-delay: 5s; -webkit-transition-delay: 5s;} .index .indexBanner .river .borderL{ width: 5px; left: 50%; margin-left: -155px; top: -40px; height: 0; transition-delay: 5.3s; -webkit-transition-delay: 5.3s;} .index .indexBanner .river .borderR{ width: 5px; left: 50%; margin-left: 150px; top: -40px; height: 0; transition-delay: 5.3s; -webkit-transition-delay: 5.3s;} .index .indexBanner .hisList{ width: 100%; height: 100%; position: absolute; top: 0; left: 0px; font-size: 18px; color: #25375d;} .index .indexBanner .hisList li{ position: absolute; opacity: 0; filter: alpha(opacity=0); transition-duration: .4s; -webkit-transition-duration: .4s;} .index .indexBanner .river.active li{ opacity: 1; filter: alpha(opacity=100);} .index .indexBanner .hisList .time{ line-height: 30px; height: 30px; cursor: pointer;} .index .indexBanner .hisList .time span{ width: 10px; position: relative; height: 10px; background: #e50112; vertical-align: middle; border-radius: 50%; display: inline-block; } .index .indexBanner .hisList li .text{ opacity: 0; filter: alpha(opacity=0); transition-duration: .4s; -webkit-transition-duration: .4s;} .index .indexBanner .hisList li.active .text{ opacity: 1; left: 0 !important;} .index .indexBanner .hisList li.top .time span{ float: right; margin-left: 30px; top: 10px;} .index .indexBanner .hisList li.top .text{ bottom: 40px; left: -50px;} .index .indexBanner .hisList li.botom .time span{ margin-right: 20px; } .index .indexBanner .hisList li.botom .text{ top: 40px; left: 50px;} .index .indexBanner .hisList li.cur4 .text{ top: auto; bottom: 40px;} .index .indexBanner .hisList li.cur1{ top: 80%; transition-delay: .5s; -webkit-transition-delay: .5s;} .index .indexBanner .hisList li.cur2{ top: 62%; left: 11%; transition-delay: .8s; -webkit-transition-delay: .8s;} .index .indexBanner .hisList li.cur3{ top: 60%; left: 31%; transition-delay: 1.3s; -webkit-transition-delay: 1.3s;} .index .indexBanner .hisList li.cur4{ top: 40%; left: 46%; transition-delay: 1.8s; -webkit-transition-delay: 1.8s;} .index .indexBanner .hisList li.cur5{ top: 55%; left: 57%; transition-delay: 2.2s; -webkit-transition-delay: 2.2s;} .index .indexBanner .hisList li.cur6{ top: 51%; left: 74%;transition-delay: 2.5s; -webkit-transition-delay:2.5s;} .index .indexBanner .hisList li.cur7{ top: 30%; z-index: 5; left: 65%;transition-delay: 3s; -webkit-transition-delay: 3s;} .index .indexBanner .hisList li.cur7 .text{ right: 0px; left: auto !important; text-align: right;} .index .indexBanner .hisList li.cur8{ top: 10%; left: 70%; transition-delay: 3.8s; -webkit-transition-delay: 3.8s;} .index .indexBanner .hisList li.cur9{ top: 16%; left: 86%;transition-delay: 4s; -webkit-transition-delay: 4s;} .index .indexBanner .hisList .text{ position: absolute; width: 200px;} /*contact*/ #contact{ width: 100%; height: auto; position: relative; padding-bottom: 115px; z-index: 10;} #contact .bg{ width: 100%; height: 7px; background: url(../images/contactBg.png); position: absolute; bottom: -7px; left: 0;} #contact .box{ width: 100%; height: auto; overflow: hidden; padding-top: 95px;} #contact .box .address{ width: auto; float: left; height: 61px; border-left: 1px solid #b3bebb; padding: 0 40px 0 10px; font-size: 20px; color: #204D74; line-height: 30px; font-weight: bold;} #contact .box .address span{ font-weight: 100; font-size: 16px; opacity: .7; text-transform: uppercase;color: #333333; } #map{ width: 100%; top: 0; height: 100%; position: absolute;} #map:before{ position: absolute; content: ''; transition-duration: .4s; -webkit-transition-duration: .4s; display: block; width: 100%; height: 100%; background: #000000; opacity: .5; z-index: 1000000000;} #map:hover:before{ opacity: 0; z-index: 0; } #contact .mapBox{ overflow: hidden;} #contact .title{color: #2b2b2b;font-size: 30px;line-height: 55px;letter-spacing: 0.05em;padding-top: 40px; } #contact .title p{ font-size: 16px;color: #aeaeae;line-height: 31px; margin-bottom:58px;letter-spacing: 0.03em; text-transform: uppercase;} #contact .addressList{float: left; width: 400px; overflow: hidden; margin-top: 25px;} #contact .addressList li{ width: 100%; height: 40px; line-height: 40px; } #contact .addressList .icons{ width: 40px;float: left; height: 40px; background: url(../images/contIcons.png) no-repeat;} #contact .addressList .icons.icon1{ background-position: 0px 10px; } #contact .addressList .icons.icon2{ background-position: 0px -34px; } #contact .addressList .icons.icon3{ background-position: 0px -67px; } #contact .addressList .icons.icon4{ background-position: 0px -103px; } #contact .addressList .text{ font-size: 14px; color: #494949; float: left;} #contact .addressList .text a{color: #494949; } #contact .imgBox{ float: left; margin-left: 20px; margin-top: 35px;} #contact .imgBox>div{ text-align: center; font-size: 14px; color: #494949; width: 200px;} #contact .imgBox img{ box-shadow: 0px 0px 5px #8E8E8E; margin-bottom: 20px;} .productInfor-body .mapBox{ position: absolute; bottom: 0px; left: 1%;} .productInfor-body .addressList{float: left; width: 400px; overflow: hidden; margin-top: 25px;} .productInfor-body .addressList li{ width: 100%; height: 40px; line-height: 40px; } .productInfor-body .addressList .icons{ width: 40px;float: left; height: 40px; background: url(../images/contIcons.png) no-repeat;} .productInfor-body .addressList .icons.icon1{ background-position: 0px 10px; } .productInfor-body .addressList .icons.icon2{ background-position: 0px -34px; } .productInfor-body .addressList .icons.icon3{ background-position: 0px -67px; } .productInfor-body .addressList .icons.icon4{ background-position: 0px -103px; } .productInfor-body .addressList .text{ font-size: 14px; color: #494949; float: left;} #navRight{ width: 159px; height: 471px; position: fixed; top: 50%; margin-top: -235px; right: 23px; background: url(../images/navRight2.png); display: none; z-index: 1000; } #navRight .backTop{ width: 61px; height: 17px; left: 57px; bottom: 19px; position: absolute; cursor: pointer;} #navRight .phone{ width: 118px; height: auto; position: absolute; left: 30px; bottom: 38px; font-size: 14px; color: #ffffff; text-align: center;} #navRight .gz{ width: 61px; height: 17px; position: absolute; left: 58px ; bottom: 283px; display: block;} #navRight .qq{ } #navRight .close{ width: 30px; height: 46px; text-align: center; position: absolute; left: 0; top: 163px; padding-top: 37px; font-size: 12px; color: #ffffff; cursor: pointer; line-height: 15px; opacity: 1; text-shadow: none; box-sizing: content-box;} #navRight .ems{} #navRight .ems a{background: url(../images/ems.png);background-size: 100% auto;height: 36px;width: 36px;margin: 41px auto 0;left: 6%;position: relative;display: block;} #navRight .ems span{display: block;font-size: 12px;text-align: center;width: 60px;margin: 0 auto;left: 6%;position: relative;color: #337ab7;} #navRight .emsT{} #navRight .emsT a{background: url(../images/ems.png);background-size: 100% auto;height: 36px;width: 36px;margin: 10px auto 0;left: 6%;position: relative;display: block;} #navRight .emsT span{display: block;font-size: 12px;text-align: center;width: 60px;margin: 0 auto;left: 6%;position: relative;color: #337ab7;} #navRight .qq{} #navRight .qq a{background: url(../images/qqs.png);background-size: 100% auto;height: 36px;width: 36px;margin: 10px auto 0;left: 6%;position: relative;display: block;} #navRight .qq span{display: block;font-size: 12px;text-align: center;width: 60px;margin: 0 auto;left: 6%;position: relative;background: #337ab7;color: #fff;border-radius: 5px;} #navRight .wx{} #navRight .wx a{background: url(../images/wxs.png);background-size: 100% auto;height: 36px;width: 36px;margin: 10px auto 0;left: 6%;position: relative;display: block;} #navRight .wx span{display: block;font-size: 12px;text-align: center;width: 60px;margin: 0 auto;left: 6%;position: relative;color: #337ab7;} #navRight .wem{text-align: center;margin-top: 6px;} #navRight .wem img{display: inline-block;margin-left: 12%;width: 62px;} /*join*/ #join .recruit { width: 100%; height: auto; position: relative; overflow: hidden; padding-bottom:40px ; } #join .recruit .content1480>.title{ font-size: 30px; margin-top: 40px; padding: 20px 0; text-align: center;} #join .recruit .content1480>.text{ font-size: 16px; text-align: center; max-width: 1000px; width: 100%; margin: auto;} #join .recruit .reBox { width: 100%; height: 377px; position: relative; margin-top: 45px; } #join .recruit .btn { width: 42px; height: 42px; background: url(../images/kycxBtn.png) no-repeat; background-color: #b7b7b7; cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s; position: absolute; z-index: 10; top: 50%; margin-top: -21px; } #join .recruit .btn:hover { background-color: #204D74; } #join .recruit .btnPrev { left: -55px; background-position: left; } #join .recruit .btnPrev:hover { transform: translateX(-5px); -webkit-transform: translateX(-5px); } #join .recruit .btnNext { right: -55px; background-position: right; } #join .recruit .btnNext:hover { transform: translateX(5px); -webkit-transform: translateX(5px); } #join .recruit .box { width: 100%; height: 100%; position: relative; overflow: hidden; } #join .recruit .list { width: 999999px; height: 100%; overflow: hidden; } #join .recruit .list .border { width: 92%; height: 354px; border: 2px solid #FFFFFF; position: absolute; left: 4%; top: 50%; margin-top: -179px; margin-left: -1px; } #join .recruit .list .textBox { width: 80%; margin: auto; padding-top: 30px; } #join .recruit .list .tit { font-size: 16px; font-weight: bold; margin-bottom: 5px; } #join .recruit .list .text { width: 100%; height: 260px; margin-top: 15px; } #join .recruit .list .sub { width: 80px; height: 20px; border-radius: 10px; background: #FFFFFF; color: #545454; position: absolute; bottom: 20px; z-index: 20; left: 50%; margin-left: -40px; text-align: center; line-height: 20px; } #join .recruit .list li { width: 300px; height: 100%; float: left; background: #b5b5b5; position: relative; transition-duration: .5s; -webkit-transition-duration: .5s; } #join .recruit .list li:hover a{ color: #FFFFFF;} #join .recruit .list li a { display: block; width: 100%; height: 100%; font-size: 12px; } #join .recruit .list li.cur { width: 404px; background: #204D74; } #join .recruit .list li.cur .info p { display: block !important; } #join .recruit .list li.cur .border { width: 94%; left: 3%; } #join .recruit .list li.cur .sub { color: #204D74; } /*new*/ #new { max-width: 1480px; width: 96%; margin: auto; position: relative; padding-top: 50px; margin-bottom: 30px; } #new .titCh { font-size: 30px; padding:0 20px; text-align: center; color: #000; line-height: 40px; } #new .newList{ width: 100%; height: auto; overflow: hidden; margin-bottom: 75px; padding-top: 40px;} #new .newList li{ width: 23%; margin-bottom: 35px; margin-right:1%; margin-left:1%; height: 370px; float: left; transition-duration: .5s; -webkit-transition-duration: .5s; position: relative;} #new .newList li a{ display: block; left: 0px; top: 0px; right: 0px; bottom: 0px; border: 1px solid #EDEDED; position: absolute;} #new .newList li .imgs{ font-size: 0px; width: 100%; overflow: hidden;} #new .newList li .imgs img{transition-duration: .5s; -webkit-transition-duration: .5s; } #new .newList li:hover{ box-shadow: 0px 0px 10px rgba(0,0,0,.2);} #new .newList li:hover .text{ color: #3e3e3e; transform: translateY(-20px); -webkit-transform: translateY(-20px);color: #204D74;} #new .newList li:hover .tit{transform: translateY(-4px); -webkit-transform: translateY(-4px); color: #204D74;} #new .newList li:hover .time{ color: #204D74;} #new .newList li:hover .imgs img{ transform: scale(1.1); -webkit-transform: scale(1.1);} #new .newList li:hover .lookMore{ text-decoration: underline;} #new .newList .textBox{ width: 90%; margin: 15px auto 0;} #new .newList .tit{ font-size: 20px; color: #3e3e3e;transition-duration: .3s; line-height: 30px; overflow: hidden; -webkit-transition-duration: .3s;} #new .newList .text{ font-size: 12px; line-height: 24px; color: #666666; margin-top: 30px;transition-duration: .3s; -webkit-transition-duration: .3s;} #new .newList .time{ margin-top: 10px; font-size: 12px; color: #666666; transition-duration: .5s; -webkit-transition-duration: .5s;} #new .newList .lookMore{ font-size: 12px; color: #C9302C; text-transform: uppercase; margin-top: 30px;} /*newDel*/ .model_news_detail{ max-width:1000px; margin:auto; margin-bottom: 50px; position:relative; width: 96%; } .model_news_detail .back{ width: 100%; height: 50px; position: relative; } .model_news_detail .back a{ display: block; width: 150px; height: 40px; background: #FFFFFF; color: #0076B0; line-height: 40px; text-align: center; position: absolute; top: 20px; right: 0px; border: 1px solid #004181; transition-duration: .3s; -webkit-transition-duration: .3s; } .jiathis_style_24x24 .jiathis_counter.jiathis_bubble_style{ box-sizing: content-box;} .model_news_detail .back a:hover{ background: #004181; color: #FFFFFF; } .model_news_detail .title{ width:90%; height:auto; line-height:35px; text-align:center; font-size:24px; font-weight:bold; padding:35px 5% 15px 5%; margin: auto; } .model_news_detail .summary{ width:100%; height:auto; line-height:20px; font-size:12px; text-align:center; color: #666666; padding-bottom:15px; border-bottom:1px dotted #ccc; } .model_news_detail .summary span{ font-size:14px; font-family:Georgia,Times, serif; color:#004181; font-weight:bold; } .model_news_detail .detailContent{ width:100%; min-height:300px; margin:25px 0px; line-height:28px; text-indent:28px; color: #3E3E3E; } .model_news_detail .detailContent img{ text-indent: 0px; text-indent: 0px; max-width: 100%; margin: 15px auto; display: block; } .model_news_detail .newShare{ width:100%; height:25px; position:relative; margin:15px 0px 35px 0px; } .model_news_detail .newShare strong{ float:right; margin-right:10px; } .model_news_detail .detailPage{ width:100%; height:auto; } .model_news_detail .detailPage div a{ font-weight: normal; color: #3E3E3E; } .model_news_detail .detailPage div a:hover{ color: #004181; } .model_news_detail .detailPage div{ width:100%; line-height:20px; border-bottom:1px dotted #ccc; font-size:14px; height:auto; padding: 5px 0px; font-weight: bold; } /*about*/ #about-body { } #about-body .views .box1{ background: url(../images/pic_view.jpg) center; height: auto; width: 100%; position: relative; padding-top: 50px;} #about-body .views .content1200{ width: 1200px; margin: 0 auto;} #about-body .views .name-center{margin-bottom: 35px;} #about-body .views .name-center span{display: inline-block;position: relative; width: 900px; left: 50%; margin-left: -450px;text-align: center;font-size: 28px;} #about-body .views .name-center span b{display:inline-block;font-weight: 100;width: 450px;} #about-body .views .name-center span b:nth-child(1){text-align: right;} #about-body .views .name-center span b:nth-child(2){text-align: left;} #about-body .History{ width: 100%; position:relative;} #about-body .History ul{border-top: 1px solid #C0C0C0;border-bottom: 1px solid #C0C0C0; position:relative;} #about-body .History .mask{ position: absolute; width: 300px;left: 0; top: 0; height: 500px;background: #222222;} #about-body .History ul li{ width: 300px; border-right: 1px solid #C0C0C0; height: 500px; float: left;transition:all .5s;-webkit-transition:all .5s;position: relative;} #about-body .History ul li.active{color: #fff;} #about-body .History ul li:after{ height: 200px; width: 100%; top:0; position: absolute;content:''; background:-moz-linear-gradient(top,rgba(3, 3, 3, 0.22),RGBA(255, 255, 255, 0)); /*火狐*/background: -webkit-linear-gradient(top,rgba(3, 3, 3, 0.22),rgba(255, 255, 255, 0));/*Safari5.1 Chrome 10+*/} #about-body .History ul li:before{ height: 200px; width: 100%;bottom:0; position: absolute;content:''; background:-moz-linear-gradient(top,rgba(255, 255, 255, 0),rgba(3, 3, 3, 0.22)); /*火狐*/background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0),rgba(3, 3, 3, 0.22));/*Safari5.1 Chrome 10+*/} #about-body .History ul li .text-up{height: 400px;width: 100%;} #about-body .History ul li .text-up article{width: 80%;margin: 10% auto 0;font-size: 14px;line-height: 28px;height: 90%;transition:all .6s;-webkit-transition:all .6s;} #about-body .History ul li .text-bottom{height: 100px;width: 100%;border-top: 1px solid #C0C0C0;text-align: center;line-height: 100px;font-size: 21px;} #about-body .corporateCulture{ padding: 0;} #about-body .corporateCulture .bg-box{ background: #F9F9F9;} #about-body .corporateCulture .bank0{padding: 50px 0 35px;max-width: 1400px;margin: 0 auto 0;position: relative;} /*strat*7-13*/ #about-body .corporateCulture .bank0 .names{display: block;font-size: 14px;color: #565656;line-height: 28px;letter-spacing: 0.03em; margin-top: 20px;} /*end 7-13*/ #about-body .corporateCulture .bank0 .title{text-align: center;} #about-body .corporateCulture .bank{padding: 50px 0 35px;margin: 0 auto 0;max-width: 1400px;} #about-body .corporateCulture .bank .title{text-align: center;} #about-body .corporateCulture .bank .left{} #about-body .corporateCulture .bank .right{} #about-body .corporateCulture .bank .left,.corporateCulture .bank .right{ margin-bottom: 20px;} #about-body .corporateCulture .bank .left img,.corporateCulture .bank .right img{ width: 100%;display: block; transition-duration: 1s; -webkit-transition-duration: 1s;} #about-body .corporateCulture .bank .left img:hover,.corporateCulture .bank .right img:hover{ transform: scale(1.1); -webkit-transform: scale(1.1);} #about-body .corporateCulture .bank .left .names,.corporateCulture .bank .right .names{line-height: 46px;text-align: left; color:#2b2b2b; opacity: .9; margin-top:20px;} #about-body .corporateCulture .bank .imgs{overflow: hidden;} #about-body .wrap_history li dd{ overflow: hidden;} #about-body .wrap_history li dd img{ transition-duration: 1s; -webkit-transition-duration: 1s;} #about-body .wrap_history li dd img:hover{ transform: scale(1.1); -webkit-transform: scale(1.1);} /*7-11*/ .frame-title>.inner{ position: relative;} .frame-title .t1{ color: #5e5e5e; font: 40px/1.5 "microsoft yahei";text-indent: .5em;} .frame-title .t2{ color: #5d5d5d; font-family:"microsoft yahei"; font-size: 20px;text-indent: 1em;} /*7-11*/ /*7-11*/ .frame-ct-preview .bigImg{ padding-bottom: 25px;} /*7-11*/ /*7-11*/ .inner.prosharp{ margin-top: 15px;} /*7-11*/ #about-body .corporateCulture .bank2{padding:50px 0 80px; text-align: center; margin: 0 auto 0;max-width: 1400px;} #about-body .corporateCulture .bank2 .title{text-align: center;} #about-body .corporateCulture .bank2 .name-center{margin: 40px 20px 15px; display: inline-block; vertical-align: top;} #about-body .corporateCulture .bank2 .name-center span{display: inline-block;position: relative; width: 20px; text-align: center;font-size: 18px;} #about-body .corporateCulture .bank2 .name-center span b{display:inline-block;font-weight: 100; color: #0050a0; width: 100%;} #about-body .corporateCulture .bank2 .wenhua img{ position: absolute; left: 0px; top: 0px; width: auto; } #about-body .corporateCulture .bank2 .wenhua{ position: relative; float: left; width: 100%; margin-top: 35px} #about-body .corporateCulture .bank2 .name-center span b:nth-child(1){text-align: right;} #about-body .corporateCulture .bank2 .name-center span b:nth-child(2){text-align: left;color: #000; font-size: 16px; text-align: center;} #about-body .corporateCulture .bank3{position: relative;padding: 50px 0 35px;margin: 0 auto 0;max-width: 1400px;} #about-body .corporateCulture .bank3 .title{text-align: center;} #about-body .wrap_history { margin: 60px auto 210px; width: 920px; background: url(../images/bg_wrap_history.png) repeat-y center center; text-align: center;} #about-body .wrap_history li { position: relative; } #about-body .wrap_history li span { display: block; margin: 33px 0 0; } #about-body .wrap_history li.even span { margin: 236px 0 0;} #about-body .wrap_history li:first-child span { margin: 0; } #about-body .wrap_history li dl { position: absolute; right: 0; /*padding-left: 17px; */top: -30px; padding: 0 0 0 17px; width: 420px; text-align: left; line-height: 1.2; background:url(../images/bg_box_history.png) no-repeat right bottom; font-family: inherit;width: 436px;} #about-body .wrap_history li.even dl { left: 0; padding: 0 17px 0 0; background-position: left top; text-align: right;width: 435px;} #about-body .wrap_history li dl dt { padding: 15px 0 0 19px; font-size: 1.25rem; color: #576b7c ; font-weight: 600; position: relative;} #about-body .wrap_history li dl dt:after{ content: ''; display: block; position: absolute; width: 0px; height: 0px;} #about-body .wrap_history li dl dt + dd { padding: 6px 19px 10px; font-size: 0.875rem; color: #767676; } #about-body .wrap_history li dl dd img { display: block; font-size: 0; line-height: 0; width: 418px; border: 1px solid #e6e6e6; } #about-body .wrap_history li.even dl dt { padding: 15px 19px 0; } #about-body .wrap_history li.even dl dt + dd { padding: 10px 19px 10px; } #about-body .box1{} #about-body .box1 .title{text-align: center;} #about-body .box1 .happinessBox { position: relative; } #about-body .box1 .happinessBox .mover-img { } #about-body .box1 .happinessBox .myIdea { position: absolute; top: 0; width: 100%; height: 100%; left: 0; } #about-body .box1 .happinessBox .myIdea ul { height: 100%; overflow: hidden; width: 100%; margin: 0 auto;} #about-body .box1 .happinessBox .myIdea ul li { height: 100%; position: relative; z-index: 15; padding: 0; width: 20%; float: left; } #about-body .box1 .happinessBox .myIdea .mask { position: absolute; width: 20%; left: 0; top: 0; height: 100%; overflow: hidden; background: #000; background: rgba(0,0,0,.5); } #about-body .box1 .happinessBox .myIdea .mask .mask_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/happinessBox2_bg2.jpg) left center; background-position: 0px center; -webkit-filter: blur(10px); filter: blur(10px); opacity: .6; filter: alpha(opacity=60) } #about-body .box1 .happinessBox .myIdea ul li .icon{ background: url(../images/icon-corporate.png) no-repeat; width: 50px; height: 50px; position:absolute;left: 50%;margin-left: -25px;top: 40%;transition:all .6s;-webkit-transition:all .6s;} #about-body .box1 .happinessBox .myIdea ul li .icon-cor1{background-position: 0 0;} #about-body .box1 .happinessBox .myIdea ul li .icon-cor2{background-position: -50px 0;} #about-body .box1 .happinessBox .myIdea ul li .icon-cor3{background-position: -100px 0;} #about-body .box1 .happinessBox .myIdea ul li .icon-cor4{background-position: -150px 0;} #about-body .box1 .happinessBox .myIdea ul li .icon-cor5{background-position: -200px 0;} #about-body .box1 .happinessBox .myIdea ul li .names{ font-size: 18px; text-align: center; margin-top: 50px;color: #fff; position: absolute; line-height: 36px;width: 100%;left: 0;top: 50%;transition:all .5s;-webkit-transition:all .5s;} #about-body .box1 .happinessBox .myIdea ul li .names:after{ content: ''; position: absolute; width: 28px; height: 1px; background: #fff; left: 50%; margin-left: -14px; bottom: 0;} #about-body .box1 .happinessBox .myIdea ul li .summary{color: #fff;position: absolute;font-size: 12px;line-height: 24px;text-align: center;opacity:0;filter:alpha(opacity=0);transition:all .5s;-webkit-transition:all .5s;width: 100%;top: 45%; width: 96%;left: 2%;} #about-body .box1 .happinessBox .myIdea ul li.active .summary{opacity:1;filter:alpha(opacity=100); top: 30%;} #about-body .box1 .happinessBox .myIdea ul li.active .icon{top:10%} #about-body .box1 .happinessBox .myIdea ul li.active .names{ top:20%; margin-top: 0;} #about-body .box1 .happinessBox .myIdea ul li .summary p{} #about-body .box1 .happinessBox .myIdea ul li .summary p span{} /*#about-body .box1 .happinessBox .myIdea ul li:hover .summary{opacity:1;filter:alpha(opacity=100)}*/ /**/ #case-body{ padding-top: 40px;} #case-body .title{text-align: center;} #case-body .productList{ width: 78%; margin: 0px auto; padding-top: 100px; } #case-body .productList li { float: left; display: block; width: 20%; padding: 0px 2.5% 5%;} #case-body .productList li:hover .con{bottom: 0;} #case-body .productList a{ color: #fff; display: block; position: relative; width: 100%; overflow: hidden;} #case-body .productList .img{ overflow: hidden;} #case-body .productList .img img{ width: 100%; display: block;} #case-body .productList a .con{ position: absolute; left: 0px; bottom: -80px; width: 100%; background: url(../images/black_.png) repeat; text-align: center;transition:all .5s;-webkit-transition:all .5s;} #case-body .productList a .con .t{ font-size: 16px; height: 42px; overflow: hidden; line-height: 42px;} #case-body .productList a .con .i{ height: 22px; margin-bottom: 18px; overflow: hidden;} #case-body .productList a .con .more{ background-color: #80abde; text-align: center; display: block; height: 40px; line-height: 40px;} .frameHtml{ position:fixed; top:0; left:0; right: 0px; bottom: 0px; z-index:1006; background:url(../images/black_.png) repeat;overflow:hidden; -webkit-overflow-scrolling:touch;display: none;} .frame-ct-wrap {overflow: hidden;padding: 0 20px 20px;} .frame-ct{ position:relative; margin:0px auto 0 80px; background:#fff; z-index:1010; cursor:auto; width: 100%; transform: translate(100%,0); -webkit-transform:translate(100%,0); transition: 400ms;} .frame-title{ display:block; background-color: #174F90; padding: 5% 0px;} .frame-title .t1{ color: #FFFFFF; font: 40px/1.5 "microsoft yahei";} .frame-title .t2{color: #FFFFFF; font-family:"microsoft yahei"; font-size: 20px;} .frame-title .time{ padding-top: 10px;} .frame-title .time .d{color: #bcbbbb; background: url(../images/time.png) no-repeat scroll left center; padding-left:26px;} .frame-title a:link,.frame-title a:visited{ color: #80abde;} .frame-title a:active,.frame-title a:hover{ color: #174F90;} .frame-ct-preview{ padding: 66px 0px; overflow: hidden;} .framC{ color: #808080; font-size: 14px;} .framC a:link,.framC a:visited { color: #80abde;} .framC a:active,.framC a:hover { color: #174F90;} .framC img{ max-width: 100%;} .list-description{ padding: 65px 0px; background-color: #ededed;} .list-description a{color:#989898; cursor: pointer;} .list-description a:link,.list-description a:visited{ color: #bcbbbb;} .list-description a:active,.list-description a:hover{ color: #3a3a3a;} .frameClose{ display: block; width: 80px; height: 80px; position: fixed; left: 0px; top: 50%; margin-top: -35px; z-index: 1008; overflow: hidden; transform: translateX(-80px); transition: 400ms;} .frameClose span{ display: block; width: 100%; height: 100%; text-align: center;transition: 0.4s;} .frameClose span.i0{ font: 16px/1.2 "microsoft yahei"; color: #fff; background-color: #80abde; padding-top: 20px; height: 80px; position: absolute; left: 0px; top: 0px;} .frameClose span.i1{ background:url(../images/fram_close.png) no-repeat scroll center center #174F90; color: #fff; position:absolute; left: 100%; top: 0px; } .frameClose:hover span.i0{ left: -80px;} .frameClose:hover span.i1{ left: 0px;} html.open, html.open body{ overflow: hidden; width: 100%;} html.open .frameHtmlact {overflow-y:auto;} html.open .frameHtmlact .frame-ct{ transform: translate(0,0); -webkit-transform:translate(0,0);} html.open .frameHtmlact .frameClose{ transform: translate(0,0); } .inner {width: 900px;margin: 0px auto;} .proIBox {color: #a4a4a4;border-bottom: 1px solid #a4a4a4;border-top: 1px solid #a4a4a4;padding: 20px 0px;color: #7a7a7a;} .r {float: right;display: inline-block;} .l {float: left;display: inline-block;} /*product-body*/ .product-body{ margin-top: 55px;padding: 0 0 40px;} #filters{padding:0;list-style:none;margin: 0 1%;} #filters li{float:left;width: calc(100% / 8);text-align: center;margin: 0 0 0 2.06%;height: 46px;line-height: 46px;border-radius: 6px;position: relative;} #filters li span{display:block;/*! padding:5px 20px; */text-decoration:none;color:#666;cursor:pointer;transition:all .5s;-webkit-transition:all .5s;} #filters li span:after{ width: 100%; height: 100%; border: 1px solid #d0d0d0;content: ''; position: absolute; left: 0; top: 0;border-radius: 6px;} #filters li span.active,#filters li:hover span{background:#f7c000;color:#fff; border-radius: 5px;} .product-body #portfoliolist .portfolio{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:23%;*width:22%;margin:1%;display:none;float:left;overflow:hidden;position: relative;} .product-body #portfoliolist .portfolio .btns{ position: absolute; width: 37px;height: 78px; background: #000; background:rgba(0,0,0,.45);top: 50%;margin-top: -89px;z-index: 15; opacity: 0;transition: all .5s;-webkit-transition: all .5s; cursor: pointer;} .product-body #portfoliolist .portfolio .btns.btn-L{ left: 0; } .product-body #portfoliolist .portfolio .btns.btn-L:after{ width: 20px; height: 37px; position: absolute; content: ''; background:url(../images/btns_arrow.png) 0 0; left: 50%; top: 50%; margin: -18.5px 0 0 -10px;transition:all .5s;-webkit-transition:all .5s;} .product-body #portfoliolist .portfolio .btns.btn-L:hover:after{transform: translateX(-5px);-webkit-transform: translateX(-5px);} .product-body #portfoliolist .portfolio .btns.btn-R{ right: 0;} .product-body #portfoliolist .portfolio .btns.btn-R:after{ width: 20px; height: 37px; position: absolute; content: ''; background:url(../images/btns_arrow.png) -20px 0; left: 50%; top: 50%; margin: -18.5px 0 0 -10px;transition:all .5s;-webkit-transition:all .5s;} .product-body #portfoliolist .portfolio .btns.btn-R:hover:after{transform: translateX(5px);-webkit-transform: translateX(5px);} .product-body #portfoliolist .portfolio:hover .btns{opacity: 1;} .product-body .portfolio-wrapper{overflow:hidden;position:absolute;cursor:pointer;transition:all .5s;-webkit-transition:all .5s;width: 100%;height: 100%;} .product-body .portfolio-wrapper .imgs{ position:absolute; width: 100%; top: 0;height: auto;} .product-body .portfolio-wrapper .imgs img{position: absolute;width: 100%;} .product-body .portfolio-wrapper a{/*! */ /*! */} .product-body .portfolio-wrapper .prioduct-img{width: 20000px; overflow: hidden;} .product-body .portfolio-wrapper .names{ width: 20000px;overflow: hidden;} .product-body .portfolio-wrapper .names .product-text{ float: left;} .product-body .portfolio img{max-width:100%;position:relative;float: left;} /*7-18*/ .product-body .portfolio .names{position:absolute;width:100%;height:auto;bottom:0;display: block;padding: 0;} /*7-18*/ .product-body .portfolio .names-bg{width:100%;height:100%;position:absolute;top:0;left:0;} .product-body .portfolio .names-text{color:#fff;position:relative;z-index:500;padding:15px 8px;height: 100%;} .product-body .portfolio .names-text .text-title{font-size: 16px;font-weight: 900;color: #333333;} .product-body .portfolio .text-category{display:block;font-size:9px;color: #666666;font-size: 14px;} .product-body .container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;} .product-body .clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;} .product-body .row:after,.product-body .clearfix:after{clear:both;} .product-body .row,.product-body .clearfix{zoom:1;} .product-body #portfoliolist{ margin-top: 75px;} .product-body .portfolio .names-bg:after{position: absolute; content: ''; height: 2px; left: 0; bottom: 0; background: #f7c000; width: 0;transition:all .5s;-webkit-transition:all .5s;} .product-body .portfolio:hover .names-bg:after{ width: 100%;} /*productInfor-body*/ .productInfor-body{max-width: 1480px; overflow: hidden; margin: 55px auto 150px; position: relative;} .productInfor-body .left{ width: 35%; float: left;} .productInfor-body .right{ width: 65%; float: right; background: #f6f6f6;margin-top: 65px;} .productInfor-body .left .title{ font-size: 36px; color: #134a86;margin-top: 65px;} .productInfor-body .left .title span{font-size: 24px;} .productInfor-body .left .Subclass{margin-top: 45px;} .productInfor-body .left .Subclass ul{overflow: hidden;} .productInfor-body .left .Subclass ul li{float: left;width: 44%;margin: 0 1%; cursor: pointer;} .productInfor-body .left .Subclass ul li .imgs{position: relative;} .productInfor-body .left .Subclass ul li .imgs:after{border: 0px solid #f7c000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: '';} .productInfor-body .left .Subclass ul li.active .imgs:after{border: 2px solid #f7c000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: '';} .productInfor-body .left .Subclass ul li .imgs img{width: 100%;} .productInfor-body .left .Subclass ul li span{display: block;width: 100%;height: 40px;line-height: 40px;text-align: center;margin-bottom: 30px;color: #666666;} .productInfor-body .right .briefIntroduction{ overflow: hidden;} .productInfor-body .right .briefIntroduction .imgs{ float: left; width:50%;padding: 20px;} .productInfor-body .right .briefIntroduction .imgs img{ width: 100%;} .productInfor-body .right .briefIntroduction .text{color: #666666; font-size: 14px; float: right;width:50%;padding: 0 20px;} .productInfor-body .right .briefIntroduction .text span{ font-size: 16px; color: #333333; font-weight: bold;} .productInfor-body .right .briefIntroduction .text .names{line-height: 26px;margin-top: 30px} .productInfor-body .right .briefIntroduction .text .number{line-height: 26px} .productInfor-body .right .briefIntroduction .text .timer{line-height: 26px} .productInfor-body .right .briefIntroduction .text article{margin-top: 30px;} .productInfor-body .right .briefIntroduction .text article p{ line-height: 28px;font-size: 14px} .productInfor-body .right .detailed{padding: 0 20px 40px;} .productInfor-body .right .detailed .title{color: #666666; font-size: 30px; line-height: 50px; border-bottom: 1px solid #cdcdcd;overflow: hidden;} .productInfor-body .right .detailed .title span{ line-height:50px; float:left;border-bottom: 3px solid #004181;} .productInfor-body .right .detailed .imgs{max-width: 100%;margin-top: 20px;} .productInfor-body .right .detailed .imgs img{ width: 100%;} /* #Tablet (Portrait) */ @media only screen and (min-width:768px) and (max-width:959px){ .container{ width:768px; } } /* #Mobile (Portrait) - Note:Design for a width of 320px */ @media only screen and (max-width:767px){ .container{ width:95%; } #portfoliolist .portfolio{ width:48%; margin:1%; } } /* #Mobile (Landscape) - Note:Design for a width of 480px */ @media only screen and (min-width:480px) and (max-width:767px){ .container{ width:70%; } } /*footer*/ .footer { border-top: 1px solid #e6e6e6; } .footer .footer_map { } .footer .footer_map ul { overflow: hidden; } .footer .footer_map ul li { float: left; text-align: left; width: 100px; line-height: 70px; } .footer .footer_map ul li a{ color: #3E3E3E;} .footer .footer_map ul li a:hover{ color: #174F90;} .footer .copyright { color: #fff; color: rgba(255, 255, 255, 0.3); background: #000000; font-size: 12px; line-height: 28px; padding: 20px 0 20px; position: relative;} .footer .copyright a { opacity: .4; filter: alpha(opacity=40); margin-right: 5px; } .footer .copyright a:hover{ opacity: .4; filter: alpha(opacity=40); color: #fff;} .bannerText{ max-width: 100%; width: 100%; text-align: center; position: absolute; bottom:15%;} .bannerText img{ max-width: 96%;} .index .indexBanner>ul{ width: 99999999999px; height: 100%;} .index .indexBanner>ul>li{ float: left; position: relative; height: 100%; transition-timing-function: ease-in-out;} .index .indexBanner>ul>li>img{ max-height: 100%; height: 100%; width: 100%;} .index .indexBanner>ul>li .text2{ position: absolute; max-width: 380px; width: 50%; top: 50%; margin-top: -50px; left: 10%;} .index .indexBanner>ul>li .text2 a{ display: block; width: 185px; height: 45px; line-height: 43px; color: #FFFFFF; border: 2px solid #fff; margin-top: 35px; font-size: 16px; font-weight: bold; text-align: center; position: relative;transition-duration: .3s; -webkit-transition-duration: .3s;} .index .indexBanner>ul>li .text2 a span{ transition-duration: .3s; -webkit-transition-duration: .3s; width: 25px; height: 2px; background: #FFFFFF; position: absolute; right: -12px; top: 50%; margin-top: -1px; z-index: 0;} .index .indexBanner>ul>li .text2 a div{ position: relative; z-index: 10;} .index .indexBanner>ul>li .text2 a:hover { background: #fff; color: #0076B0;} .index .indexBanner>ul>li .text2 a:hover span{ width: 205px;} .index .indexBanner .swiper-pagination{ width: 100%; position: absolute; bottom: 80px; text-align: center; height: auto; } .index .indexBanner .swiper-pagination .swiper-pagination-bullet{ width: 80px; display: inline-block; vertical-align: middle; height: 8px; background: #FFFFFF; margin: 0 10px; cursor: pointer; box-sizing: content-box; -webkit-box-sizing: content-box; border: 10px solid transparent; background-clip: content-box; border-left: none; border-right: none; opacity: .5;} .index .indexBanner .swiper-pagination .swiper-pagination-bullet-active{ background-color: #0050A0; opacity: 1;} #banner>.logo img{ max-width: 200px;} .nav .logo img{ max-width: 150px;} .page_navigation .see { display: inline-block !important; vertical-align: middle; } /*7-22*/ .swiper-container-about{ width: 100%; position: relative; overflow: hidden;} .swiper-pagination-about{text-align: center;} .swiper-pagination-about span{ height: 10px; width: 10px;} .swiper-pagination-about span.swiper-pagination-bullet-active{ background:#F7C000;} .gxb{} /*media*/ @media screen and (max-width:1400px) { #join .recruit .btnPrev{ left: 0px;} #join .recruit .btnNext{ right: 0px;} #join .recruit .box{ width: 90%; margin: auto;} /*about*/ #about-body .corporateCulture .bank3{ min-width: 100%;} .index .indexBanner .swiper-pagination{ bottom: 2%;} #about-body .box1 .happinessBox .myIdea ul li.active .summary{opacity:1;filter:alpha(opacity=100); top: 10%;} #about-body .box1 .happinessBox .myIdea ul li.active .icon{top:10%;opacity:0;filter:alpha(opacity=0)} #about-body .box1 .happinessBox .myIdea ul li.active .names{ top:20%; margin-top: 0;opacity:0;filter:alpha(opacity=0)} } @media screen and (min-width:1200px) and (max-width:1399px) { #navToggle { display: block; } #mobileNav{ display: block;} .nav{ display: none;} #banner>.logo{ position: fixed; top: 0px; left: 10px; z-index: 100; height: 50px; line-height: 50px;} #banner>.logo img{ position: relative; z-index: 10; max-height: 40px; vertical-align: middle;} #banner>.logo:after{ position: fixed; top: 0px; width: 100%; height: 50px; background: #337AB7; content: ''; left: 0px; pointer-events: none;} } /*pc*/ @media screen and (min-width:1000px) and (max-width:1199px) { #navToggle{ display: block;} #mobileNav{ display: block;} .nav{ display: none;} #banner>.logo{ position: fixed; top: 0px; left: 10px; z-index: 100; height: 50px; line-height: 50px;} #banner>.logo img{ position: relative; z-index: 10; max-height: 40px; vertical-align: middle;} #banner>.logo:after{ position: fixed; top: 0px; width: 100%; height: 50px; background: #337AB7; content: ''; left: 0px; pointer-events: none;} .index .indexBanner .river{ display: none;} /*about*/ #about-body .corporateCulture .bank2{} #about-body .corporateCulture .bank2 .wenhua img{ left: 50%;width: 1426px; margin-left: -713px;} /*productInformation*/ .productInfor-body .left{width: 33%; margin-left: 1%;} .productInfor-body .right{width: 62%; margin-right: 1%;} .index .indexBanner .swiper-pagination{ bottom: 4%;} .ph-re{ display: block !important; position: absolute; width: 80% !important; height: auto !important; left: 10%; top: 25%} /*case*/ #about-body .box1 .happinessBox{ padding: 25px 0;} #about-body .box1 .happinessBox .myIdea{ position: relative; background: url(../images/happinessBox2_bg.jpg) center top no-repeat ;background-size: auto 100%;} #about-body .box1 .happinessBox .mover-img img{display: none;} #about-body .box1 .happinessBox .myIdea ul{ height: auto;} #about-body .box1 .happinessBox .myIdea ul li{ width: 100%; height: auto; margin-bottom: 15px;} #about-body .box1 .happinessBox .myIdea ul li .summary,#about-body .box1 .happinessBox .myIdea ul li.active .summary{position: relative; opacity:1;filter:alpha(opacity=100); margin: 0; left: 0; top: 0; width: 100%; } #about-body .box1 .happinessBox .myIdea ul li .icon,#about-body .box1 .happinessBox .myIdea ul li.active .icon{top: 0; left: 0;opacity: 1;filter: alpha(opacity=100);margin: 0 auto; position: relative;} #about-body .box1 .happinessBox .myIdea ul li .names,#about-body .box1 .happinessBox .myIdea ul li.active .names{position: relative; margin: 0 auto; left: 0; top: 0;width:100%;opacity:1;filter:alpha(opacity=100)} #about-body .box1 .happinessBox .myIdea .mask{display: none;} } /*phone*/ @media screen and (min-width:768px) and (max-width:999px) { .index .indexBanner li>img{ display: none;} .index .indexBanner .swiper-pagination{ bottom: 4%;} #navToggle{ display: block;} #mobileNav{ display: block;} .footer .footer_map ul li { font-size: 10px; width: 14.2%; text-align: center; } .nav{ display: none;} #banner>.logo{ position: fixed; top: 0px; left: 10px; z-index: 100; height: 50px; line-height: 50px;} #banner>.logo img{ position: relative; z-index: 10; max-height: 40px; vertical-align: middle;} #banner>.logo:after{ position: fixed; top: 0px; width: 100%; height: 50px; background: #337AB7; content: ''; left: 0px; pointer-events: none;} .index .indexBanner .river{ display: none;} .ph-re{ display: block !important; position: absolute; width: 80%; left: 10%; top: 20%} #banner{ height: 400px;} .index .indexBanner{ height: 100% !important;} #banner>img{ display: none;} #new .newList .tit{ font-size: 16px; line-height: 1.8em;} #new .newList .text{ line-height: 1.6em;} #new .newList .lookMore{ margin-top: 10px;} #new .newList li{ width: 31%;} #filters li{ width: 48%; margin: 1% !important;} .bannerText img{ width: 50%;} /*about*/ #about-body .wrap_history{ width: 96%; margin: 60px auto 210px; background: no-repeat; position: relative;} #about-body .wrap_history:after{ position: absolute; content: '';background: url(../images/bg_wrap_history.png) repeat-y center center; width: 1px; height: 100%;z-index: 0;top: 0;right: 11%;} #about-body .wrap_history li:first-child span{ margin-top: 0 !important;} #about-body .wrap_history li span { display: block; } #about-body .wrap_history li span { margin: 266px 0 0 !important;text-align:right;} #about-body .wrap_history li span img{margin-right: 10%;} #about-body .wrap_history li dl { position: absolute; right: 0; /*padding-left: 17px; */top: -30px; padding: 0 0 0 17px; width: 420px; text-align: left; line-height: 1.2; background:url(../images/bg_box_history.png) no-repeat right bottom; font-family: inherit;width: 436px; margin: 0 auto;} #about-body .wrap_history li dl { left: 0; padding: 0 17px 0 0; background-position: left top; text-align: right;width: 435px;} #about-body .wrap_history li dl dt { padding: 15px 0 0 19px; font-size: 1.25rem; color: #576b7c ; font-weight: 600; position: relative;} #about-body .wrap_history li dl dt:after{ content: ''; display: block; position: absolute; width: 0px; height: 0px;} #about-body .wrap_history li dl dt + dd { padding: 6px 19px 10px; font-size: 0.875rem; color: #767676; } #about-body .wrap_history li dl dd img { display: block; font-size: 0; line-height: 0; width: 418px; border: 1px solid #e6e6e6; } #about-body .wrap_history li dl dt { padding: 15px 19px 0; } #about-body .wrap_history li dl dt + dd { padding: 10px 19px 10px; } #about-body .corporateCulture .bank0 .col-xs-12 .imgs{overflow: hidden;} #about-body .corporateCulture .bank0 .col-xs-12 .imgs img{ position:relative; left: 50%; margin-left:-700px;width: 1400px;} /*productInformation*/ .productInfor-body{ margin: 55px auto 50px;} .productInfor-body .left .title{ font-size: 26px;} .productInfor-body .left .title span{ font-size: 14px;} .productInfor-body .left{width: 96%; margin-left: 2%;} .productInfor-body .right{width: 100%;margin-right: 2%;/* display: none; */position: fixed;margin-top: 0;top: 0;height: 100vh;z-index: 26;overflow-y: auto;transition:all .5s;-webkit-transition:all .5s;transform: translateX(100%);-webkit-transform: translateX(100%);} .productInfor-body .right.active{transform: translateY(0);-webkit-transform: translateY(0);} .productInfor-body .left .Subclass ul li{ width: 48%;} .productInfor-body .right .briefIntroduction .imgs{float: none;width: 100%;} .productInfor-body .right .briefIntroduction .text{ width: 100%;} .productInfor-body .right .phnoe-btn{position: absolute;cursor: pointer;height: 30px;width: 30px;right: 5%;z-index: 15;background: red;top: 21px;} /*case*/ .frame-ct { margin: 0px auto; } .framBlack { width: 100%; } .frameClose { top: auto; bottom: 5%; left: auto; right: 2%; margin-top: 0px; width: 50px; height: 50px; z-index: 1012; background-color: #174f90; border-radius: 50%; } .frameClose span.i0 { display: none; } .frameClose span.i1 { left: 15px; top: 15px; width: 20px; height: 20px; background-size: cover; } .frameClose:hover span.i1 { left: 15px; } .inList .c { width: 50%; } #case-body .productList{ width: 96%;} #case-body .productList li { width: 48%; padding: 0 0px 25px 0; float:left; margin: 0px 1% 25px; } .inner {width: 90%;} .list-description a{ display: block; float: none; margin: 10px 0;} .frame-ct-preview .bigImg img{max-width: 100%; margin-bottom: 15px;} .frame-title > .inner{ font-size: 20px; padding-left: 5px;text-indent: 0;} .frame-title > .inner::after{ background: #ededed;} .ph-re{ display: block !important; position: absolute; width: 80% !important; height: auto !important; left: 10%; top: 15%} #about-body .box1 .happinessBox{ padding: 25px 0;} #about-body .box1 .happinessBox .myIdea{ position: relative; background: url(../images/happinessBox2_bg.jpg) center top no-repeat ;background-size: auto 100%;} #about-body .box1 .happinessBox .mover-img img{display: none;} #about-body .box1 .happinessBox .myIdea ul{ height: auto;} #about-body .box1 .happinessBox .myIdea ul li{ width: 100%; height: auto; margin-bottom: 15px;} #about-body .box1 .happinessBox .myIdea ul li .summary,#about-body .box1 .happinessBox .myIdea ul li.active .summary{position: relative; opacity:1;filter:alpha(opacity=100); margin: 0; left: 0; top: 0; width: 100%; } #about-body .box1 .happinessBox .myIdea ul li .icon,#about-body .box1 .happinessBox .myIdea ul li.active .icon{top: 0; left: 0;opacity: 1;filter: alpha(opacity=100);margin: 0 auto; position: relative;} #about-body .box1 .happinessBox .myIdea ul li .names,#about-body .box1 .happinessBox .myIdea ul li.active .names{position: relative; margin: 0 auto; left: 0; top: 0;width:100%;opacity:1;filter:alpha(opacity=100)} #about-body .box1 .happinessBox .myIdea .mask{display: none;} } @media screen and (min-width:560px) and (max-width:767px) { .ph-re{ display: block !important; position: absolute; width: 80% !important; height: auto !important; left: 10%; top: 15%} .bannerText img{ width: 50%;} .index .indexBanner li>img{ display: none;} .index .indexBanner .swiper-pagination{ bottom: 4%;} #navToggle{ display: block;} #mobileNav{ display: block;} .nav{ display: none;} #banner>.logo{ position: fixed; top: 0px; left: 10px; z-index: 100; height: 50px; line-height: 50px;} #banner>.logo img{ position: relative; z-index: 10; max-height: 40px; vertical-align: middle;} #banner>.logo:after{ position: fixed; top: 0px; width: 100%; height: 50px; background: #337AB7; content: ''; left: 0px; pointer-events: none;} .index .indexBanner .river{ display: none;} #banner{ height: 400px;} .index .indexBanner{ height: 100% !important;} .ph-re{ display: block !important; position: absolute; width: 96%; left: 2%; top: 20%} #new .newList .tit{ font-size: 14px; line-height: 1.8em;} #new .newList .text{ line-height: 1.6em;} #new .newList .lookMore{ margin-top: 10px;} #banner>img{ display: none;} #new .newList .tit{ font-size: 16px; line-height: 1.8em;} #new .newList .text{ line-height: 1.6em;} #new .newList .lookMore{ margin-top: 10px;} #new .newList li{ width: 31%;} #filters li{ width: 48%; margin: 1% !important;} /*about*/ #about-body .corporateCulture .bank2 .name-center{margin: 40px 3% 15px;} #about-body .wrap_history{ width: 96%; margin: 60px auto 210px; background: no-repeat; position: relative;} #about-body .wrap_history:after{ position: absolute; content: '';background: url(../images/bg_wrap_history.png) repeat-y center center; width: 1px; height: 100%;z-index: 0;top: 0;left: 62.5%;} #about-body .wrap_history li:first-child span{ margin-top: 0 !important;} #about-body .wrap_history li span { display: block; } #about-body .wrap_history li span { margin: 266px 0 0 !important;} #about-body .wrap_history li span img{margin-left: 25%;} #about-body .wrap_history li dl { position: absolute; right: 0; /*padding-left: 17px; */top: -30px; padding: 0 0 0 17px; width: 420px; text-align: left; line-height: 1.2; background:url(../images/bg_box_history.png) no-repeat right bottom; font-family: inherit;width: 436px;} #about-body .wrap_history li dl { left: 0; padding: 0 17px 0 0; background-position: left top; text-align: right;width: 435px;} #about-body .wrap_history li dl dt { padding: 15px 0 0 19px; font-size: 1.25rem; color: #576b7c ; font-weight: 600; position: relative;} #about-body .wrap_history li dl dt:after{ content: ''; display: block; position: absolute; width: 0px; height: 0px;} #about-body .wrap_history li dl dt + dd { padding: 6px 19px 10px; font-size: 0.875rem; color: #767676; } #about-body .wrap_history li dl dd img { display: block; font-size: 0; line-height: 0; width: 418px; border: 1px solid #e6e6e6; } #about-body .wrap_history li dl dt { padding: 15px 19px 0; } #about-body .wrap_history li dl dt + dd { padding: 10px 19px 10px; } #about-body .corporateCulture .bank0 .col-xs-12 .imgs{overflow: hidden;} #about-body .corporateCulture .bank0 .col-xs-12 .imgs img{ position:relative; left: 50%; margin-left:-384px;width: 768px;} /*case*/ .frame-ct { margin: 0px auto; } .framBlack { width: 100%; } .frameClose { top: auto; bottom: 5%; left: auto; right: 2%; margin-top: 0px; width: 50px; height: 50px; z-index: 1012; background-color: #174f90; border-radius: 50%; } .frameClose span.i0 { display: none; } .frameClose span.i1 { left: 15px; top: 15px; width: 20px; height: 20px; background-size: cover; } .frameClose:hover span.i1 { left: 15px; } .inList .c { width: 50%; } #case-body .productList{ width: 96%;} #case-body .productList li { width: 90%; padding: 0 0px 25px 0; float: none; margin: 0px auto; } .inner {width: 90%;} .list-description a{ display: block; float: none; margin: 10px 0;} .frame-ct-preview .bigImg img{max-width: 100%; margin-bottom: 15px;} .frame-title > .inner{ font-size: 20px; padding-left: 5px;text-indent: 0;} .frame-title > .inner::after{ background: #ededed;} /*footer*/ .footer .footer_map {display: none;} .index .iNews .pageTit .ch .text{width: 60%;} #about-body .box1 .happinessBox{ padding: 25px 0;} #about-body .box1 .happinessBox .myIdea{ position: relative; background: url(../images/happinessBox2_bg.jpg) center top no-repeat ;background-size: auto 100%;} #about-body .box1 .happinessBox .mover-img img{display: none;} #about-body .box1 .happinessBox .myIdea ul{ height: auto;} #about-body .box1 .happinessBox .myIdea ul li{ width: 100%; height: auto; margin-bottom: 15px;} #about-body .box1 .happinessBox .myIdea ul li .summary,#about-body .box1 .happinessBox .myIdea ul li.active .summary{position: relative; opacity:1;filter:alpha(opacity=100); margin: 0; left: 0; top: 0; width: 100%; } #about-body .box1 .happinessBox .myIdea ul li .icon,#about-body .box1 .happinessBox .myIdea ul li.active .icon{top: 0; left: 0;opacity: 1;filter: alpha(opacity=100);margin: 0 auto; position: relative;} #about-body .box1 .happinessBox .myIdea ul li .names,#about-body .box1 .happinessBox .myIdea ul li.active .names{position: relative; margin: 0 auto; left: 0; top: 0;width:100%;opacity:1;filter:alpha(opacity=100)} #about-body .box1 .happinessBox .myIdea .mask{display: none;} .gxb{display: none;} } /*phone*/ @media screen and (max-width:559px) { .ph-re{ display: block !important; position: absolute; width: 96% !important; height: auto !important; left: 2%; top: 35%} .bannerText img{ width: 50%;} #contact .title{ text-align: center;} #navRight{ display: none !important;} .index .proBox .swiper-pagination{ text-align: center; width: 100%; height:auto; position: relative; margin-top:40px; text-align: center;} .index .proBox .swiper-pagination span{ width: 40px;cursor: pointer; border-bottom: 20px solid transparent; border-top: 20px solid transparent; height: 5px; background: #018fd5; display: inline-block; margin: 0 10px; opacity: 1; box-sizing:content-box; -webkit-box-sizing:content-box; background-clip: content-box; } .index .proBox .swiper-pagination span.swiper-pagination-bullet-active{ background-color: #e50112;} .index .proBox{ padding-bottom: 30px;} #filters li{ width: 48%; margin: 1% !important;} #filters li:hover span{ background: #FFFFFF; color:#666;} .product-body{ margin-top: 3em;} .product-body #portfoliolist{ margin-top: 50px;} #mobileNav{ display: block;} .index .indexBanner .swiper-pagination .swiper-pagination-bullet{ height: 5px;} #filters li span.active{ background: #f7c000; color: #fff; border-radius: 5px;} .index .indexBanner li>img{ display: none;} .index .indexBanner .swiper-pagination{ bottom: 4%;} #contact .imgBox>div{ margin: auto;} #contact .imgBox{ margin: auto; padding:20px 0 10px; width: 100%; text-align: center;} .index .iNews .newBox .swiper-pagination span{ width: 40px;} .index .iNews .newBox .tit{ font-size: 16px;} .index .iNews .newBox .text{ height: 90px; overflow: hidden;} #navToggle{ display: block;} .index .iNews .pageTit .ch .text{ position: relative; left: 0; margin-top: 20px; width: 100%;} .pageTit{ position: relative;} .pageTit .en{ position: absolute; right: 0px; top: 6px; margin-top: 0px;} .index .iNews{ background-position: center -80px;} .product-body #portfoliolist .portfolio .btns{ opacity: 1; width: 30px; margin-top: -70px; height: 60px; background-size: cover;} .index .iNews .newBox ul{ padding-top: 40px;} .nav{ display: none;} #banner>.logo{ position: fixed; top: 0px; left: 10px; z-index: 100; height: 50px; line-height: 50px;} #banner>.logo img{ position: relative; z-index: 10; max-height: 40px; vertical-align: middle;} #banner>.logo:after{ position: fixed; top: 0px; width: 100%; height: 50px; background: #337AB7; content: ''; left: 0px; pointer-events: none;} .index .indexBanner .river{ display: none;} #banner{ height: 300px; background: url(../images/newsBanner.jpg) no-repeat center; background-size: cover;} #banner>img{ display: none; } .index .indexBanner{ height: 100% !important;} #new .newList .tit{ font-size: 16px; line-height: 1.8em;} #new .newList .text{ line-height: 1.6em;} #new .newList .lookMore{ margin-top: 10px;} #new .newList li{ width: 100%; margin: 0 0 35px 0;} .page_navigation a:first-child{ display: none !important;} .page_navigation a:last-child{ display: none !important;} .model_news_detail .title{ font-size: 20px; width: 100%;} .index .indexBanner{ height: 300px !important;} .productInfor-body .mapBox{ position: relative;} /*about*/ #contact .title p{ margin-bottom: 0px;} #contact{ padding-bottom: 50px;} #about-body .corporateCulture .bank2 .name-center{margin: 40px 3% 15px;} #about-body .wrap_history{ width: 96%; margin: 60px auto 210px; background: no-repeat; position: relative;} #about-body .wrap_history li:first-child span{ margin-top: 0 !important;} #about-body .wrap_history li span { display: block; } #about-body .wrap_history li span { margin: 266px 0 0 !important;} #about-body .wrap_history li span img{margin-left: 25%;} #about-body .wrap_history li dl { position: absolute; right: 0; /*padding-left: 17px; */top: -30px; padding: 0 0 0 17px; width: 420px; text-align: left; line-height: 1.2; background:url(../images/bg_box_history.png) no-repeat right bottom; font-family: inherit;width: 436px;} #about-body .wrap_history li dl { left: 0; padding: 0 0 0 0; background-position: left top; text-align: right;width:100% !important;} #about-body .wrap_history li dl dt { padding: 15px 0 0 19px; font-size: 1.25rem; color: #576b7c ; font-weight: 600; position: relative;} #about-body .wrap_history li dl dt:after{ content: ''; display: block; position: absolute; width: 0px; height: 0px;} #about-body .wrap_history li dl dt + dd { padding: 6px 19px 10px; font-size: 0.875rem; color: #767676; } #about-body .wrap_history li dl dd img { display: block; font-size: 0; line-height: 0; width: 418px; border: 1px solid #e6e6e6; } #about-body .wrap_history li dl dt { padding: 15px 19px 0; } #about-body .wrap_history li dl dt + dd { padding: 10px 19px 10px; } #about-body .wrap_history li.even dl{ width: 100% !important;} #about-body .wrap_history li.even dl{ padding: 0;} .pageTit .ch{ font-size: 30px;} .index .proBox .showBox .btn_c{ width: 20px; background-size: cover;} .index .proBox .showBox .btn_c{ display: none;} #about-body .wrap_history li dl dd img{ width: 100% !important;} .product-body #portfoliolist .portfolio{width: 48%;} #about-body .corporateCulture .bank0 .col-xs-12 .imgs{overflow: hidden;} #about-body .corporateCulture .bank0 .col-xs-12 .imgs img{ position:relative; left: 50%; margin-left:-384px;width: 768px;} /*productInformation*/ #case-body .productList a .con{ bottom: 0px;} .productInfor-body{ margin: 55px auto 50px;} .productInfor-body .left .title{ font-size: 26px;} .productInfor-body .left .title span{ font-size: 14px;} .productInfor-body .left{width: 96%; margin-left: 2%; float: none;} .productInfor-body .right{width: 100%;margin: 0px auto;padding: 0px;transform: translateX(0px);position: relative;height: auto;top: 0px;} .productInfor-body .right.active{transform: translateY(0);-webkit-transform: translateY(0);} .productInfor-body .left .Subclass ul li{ width: 48%;} .productInfor-body .right .briefIntroduction .imgs{float: none;width: 100%;} .productInfor-body .right .briefIntroduction .text{ width: 100%;} .productInfor-body .right .phnoe-btn{position: absolute;cursor: pointer;height: 30px;width: 30px;right: 5%;z-index: 15;background: url(../images/close.png) no-repeat center; background-size:cover; top: 70px;} /*case*/ .frame-ct { margin: 0px auto; } .framBlack { width: 100%; } .frameClose { top: auto; bottom: 5%; left: auto; right: 2%; margin-top: 0px; width: 50px; height: 50px; z-index: 1012; background-color: #174f90; border-radius: 50%; } .frameClose span.i0 { display: none; } .frameClose span.i1 { left: 15px; top: 15px; width: 20px; height: 20px; background-size: cover; } .frameClose:hover span.i1 { left: 15px; } .inList .c { width: 50%; } #case-body .productList{ width: 96%;} #case-body .productList li { width: 90%; padding: 0 0px 25px 0; float: none; margin: 0px auto; } .inner {width: 90%;} .list-description a{ display: block; float: none; margin: 10px 0;} .frame-ct-preview .bigImg img{max-width: 100%; margin-bottom: 15px;} .frame-title > .inner{ font-size: 20px; padding-left: 5px;text-indent: 0;} .frame-title > .inner::after{ background: #ededed;} /*footer*/ .footer .footer_map {display: none;} .index .iAbout .video{ height: 250px;} .index .iAbout .iText{ text-align: justify;} #about-body .corporateCulture .bank0 .names{ text-align: justify;} #about-body .box1 .happinessBox{ padding: 0 0;} #about-body .box1 .happinessBox .myIdea{ position: relative; background: url(../images/happinessBox2_bg.jpg) center top no-repeat ;background-size: auto 100%;} #about-body .box1 .happinessBox .mover-img img{display: none;} #about-body .box1 .happinessBox .myIdea ul{ height: auto; padding: 15px 0 ;} #about-body .box1 .happinessBox .myIdea ul li{ width: 100%; height: auto; margin-bottom: 15px;} #about-body .box1 .happinessBox .myIdea ul li .summary,#about-body .box1 .happinessBox .myIdea ul li.active .summary{position: relative; opacity:1;filter:alpha(opacity=100); margin: 0; left: 0; top: 0; width: 100%; } #about-body .box1 .happinessBox .myIdea ul li .icon,#about-body .box1 .happinessBox .myIdea ul li.active .icon{top: 0; left: 0;opacity: 1;filter: alpha(opacity=100);margin: 0 auto; position: relative;} #about-body .box1 .happinessBox .myIdea ul li .names,#about-body .box1 .happinessBox .myIdea ul li.active .names{position: relative; margin: 0 auto; left: 0; top: 0;width:100%;opacity:1;filter:alpha(opacity=100)} #about-body .box1 .happinessBox .myIdea .mask{display: none;} } /*0417*/ /*廉政邮箱*/ .email{position: relative;background-color: #000;padding-bottom: 30px;} .email .email-body{width: 1000px;margin: 0 auto;position: relative;z-index: 1;} .email .emailTit{text-align: center;padding: 30px 0;} .email .emailTit .ch1 {color: #FFFFFF;font-size: 24px;font-weight: bold;} .email .emailTit .en {text-transform: uppercase;font-size: 12px;color: #999999;line-height: 24px;background: none;} .email .bg {background: url(../images/contactUs_box2_5bg.jpg) fixed;height: 100%;width: 100%;position: absolute;left: 0;top: 0;opacity: .5;filter: alpha(opacity=50);z-index: 0;} .email form blockquote{line-height: normal;} .email .input {position: relative; float: left;border: 1px solid #d2d0d3;width: 320px;position: relative;background: #fff;margin-left: 19px;} .email .input.marginR0 {margin-left: 0;} .email .input input {display: block;line-height: 42px;height: 42px;width: 90%;padding-left: 10px;} .email .textarea {height: 180px;width: 998px;border: 1px solid #d2d0d3;position: relative;margin: 10px 0;} .email .textarea textarea{padding: 10px;width: 100%;height: 100%;} .email .VfCode {float: left;width: 164px;height: 42px;margin-left: 10px;} .email .input-btn {float: right;} .email .input-btn input {width: 114px;height: 43px;line-height: 43px;text-align: center;font-size: 14px;font-weight: 900;} .email .input-btn .reset {background: #383838;color: #a3a3a3;} .email .input-btn .button {background: #013e98;color: #fff;} .email .yuefd.empty {background: url(../images/btn_empty.png);} .email .yuefd.Correct {background: url(../images/btn_Correct.png);} .email .yuefd.error {background: url(../images/btn_error.png);} .email #namesTip,.email #phoneTip,.email #titleTip,.email #kongTip,.email #dizhiTip,.email #IDnumberTip,.email #otheTip,.email #names2Tip,.email #phone2Tip,.email #title2Tip,.email #kong2Tip{width: 20px;height: 20px;float: left;font-size: 12px;opacity: 0.8;position: absolute;top: 11px;right: 3px;line-height: 46px;z-index: 1;overflow: hidden;text-indent: 100%;} @media only screen and (max-width: 768px) { .email{height: auto;} .email .email-body{width: 94%;} .email .input{width: 49%;margin: 0;} .email .input:nth-child(2n+1){margin-right: 2%;} .email .textarea{width: 100%;} .email .espInput{width: 30%;margin-right: 0!important;} } @media only screen and (max-width: 767px) { .email .input{width: 100%;margin-bottom: 10px;} .email .input:nth-child(2n+1){margin-right: 0;} .email .textarea{margin-top: 0;} .email .espInput{width: 60%;} .email .VfCode{width: 38%;margin-left: 2%;} .email .input-btn{width: 100%;} .email .input-btn input{width: 49%;} .email .input-btn input .reset{margin-right: 2%;} }