@charset "utf-8"; /* CSS Document */ html { background: #FFF; font-size: 62.5%; /* 10梅16=62.5% */ } body { font-size: 14px; font-size: 1.4rem; /* 14梅10=1.4 */ color: #323232; font-family: 'Microsoft YaHei', SimSun, SimHei, "STHeiti Light", STHeiti, "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; } html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dl, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0px; padding: 0px; -webkit-font-smoothing: subpixel-antialiased; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } fieldset, img { border: 0; } object { width: 100%; max-width: 100%; /*height:auto;*/ width: auto\9; /* for ie8 */ -ms-interpolation-mode: bicubic; } a { outline: none; blr: expression(this.onFocus=this.blur()); text-decoration: none; } a:hover { text-decoration: none; } input[type='button'] { outline: none; border: 0 none; background-color: transparent; cursor: pointer; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: bold; } ul, ol, li { list-style: none outside none; } .tc { text-align: center !important; } .tl { text-align: left !important; } .tr { text-align: right !important; } .pa { position: absolute; } .pr { position: relative; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } q:before, q:after { content: ''; content: none; } input, textarea, select { font-weight: inherit; } input, select, textarea, button { vertical-align: middle } h1{ font-weight: normal; } .relative { position: relative; } .container { width: 1200px; margin: 0 auto; } .fl { float: left; } .fr { float: right; } .clearfix::after { content: ""; display: block; clear: both; } /*.clearfix { *display:table; *zoom:1; }*/ .clear { *zoom: 1; } .clear:after { content: ''; display: block; clear: both; } .black_bg01 { position: fixed; background-color: #000; opacity: 0.7; width: 100%; height: 100%; display: none; filter: alpha(opacity=70) } body,html{min-width: 1200px;} /*澶撮儴鏍峰紡*/ .header { width: 100%; min-width: 300px; height: auto; z-index: 99999999; position: relative; top: 0px; left: 0; } .header.current .black_bg01 { display: block; } .topWrap { width: 100%; background: #012347; } .top { height: 42px; line-height: 42px; width: 1225px; margin: 0 auto; } .top a { color: #fff; display: inline-block; *display: inline; *zoom: 1; } .top span { color: #fff; margin: 0 5px; display: inline-block; *display: inline; *zoom: 1; } .top a:hover { opacity: 0.8; } .top_lf { float: left; } .top_rt { float: right; } .nav-wrapper { width: 100%; background-color: #fff; } .nav-wrapper img{ width: 100%; max-width: 100%; } .logo { width: 200px; height: 0; position: relative; z-index: 99992; top: -44px; margin: 0 auto; transition: all 0.3s ease } .logo_bg { width: 260px; height: 0; position: relative; z-index: 99990; top: 68px; margin: 0 auto; } .nav { width: 1225px; margin: 0 auto; z-index: 9992; } .nav_lf { width:42.24%; float: left; } .nav_rt { width:42.24%; float: right; } .nav-wrapper1 { width: 100%; background-color: #fff; text-align:left; } .nav-wrapper1 img{ width: 100%; max-width: 100%; } .navg { float: right; } .nav1 { width: 1000px; margin: 0 auto; z-index: 9992; float: right; } .nav1 ul {} .nav1 ul li { float: left; height: 50px; padding-top: 18px; transition: all 0.3s ease; position: relative; width:12.6%; } .nav1 ul li>a { padding: 0; text-align: center; line-height: 40px; height: 50px; color: #01366e; transition: all 0.3s ease; } .nav1 ul li>a { font-size: 16px; font-size: 1.6rem; display: block; font-weight: bold; } .nav1 ul li.on>a, .nav1 ul li:hover>a { color: #fff; background-color: #0050a5; height: 50px; line-height: 50px; } .nav1 ul li.on { height: 50px; } .nav1 ul li.on .subNav1 { display: block; } .subNav1 { width: 160px; } .subNav1 { position: absolute; left: 0; top: 68px; display: none; background:rgba(8,66,129,0.5); } .subNav1 dd {} .subNav1 a { color: #fff; padding: 8px 15px; display: block; } .subNav1 a:hover { background-color: #0050a5; } .nav ul {} .nav ul li { float: left; height: 50px; padding-top: 18px; transition: all 0.3s ease; position: relative; width:16.6%; } .nav ul li>a { padding: 0; text-align: center; line-height: 40px; height: 50px; color: #01366e; transition: all 0.3s ease; } .nav ul li>a { font-size: 16px; font-size: 1.6rem; display: block; font-weight: bold; } .nav ul li.on>a, .nav ul li:hover>a { color: #fff; background-color: #0050a5; height: 50px; line-height: 50px; } .nav ul li.on { height: 50px; } .nav ul li.on .subNav { display: block; } .subNav { width: 160px; } .subNav { position: absolute; left: 0; top: 68px; display: none; background:rgba(8,66,129,0.5); } .subNav dd {} .subNav a { color: #fff; padding: 8px 15px; display: block; } .subNav a:hover { background-color: #0050a5; } .header.currents .logo { width: 135px; top: -37px; } .header.currents .nav ul li { padding-top: 10px; height: 48px; } .header.currents .nav ul li.on>a, .header.currents .nav ul li:hover>a { height: 48px; line-height: 48px; } .header.currents .subNav { top: 56px; } .header.currents .nav-wrapper { height: 56px; } .header.currents { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) } .flipInY { -webkit-animation-name: flipInY; animation-name: flipInY; animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .goTop { position: fixed; bottom: 40px; right: 20px; z-index: 9999999; color: #fff; text-align: center; font-size: 14px; transition: none; background-color: #000; width: 50px; height: 50px; line-height: 50px; text-align: center; } .goTop:hover { color: #fff; background-color: #e46856; } /*鎵嬫満绔鑸�*/ .mobile { width: 100%; position: absolute; height: 42px; display: none; top: 5px; right: 0; z-index: 99991 } .mobile_title { width: 100%; float: left; color: #fff; position: absolute; left: 0; top: 0; width: 50%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; font-weight: normal; } .mobile_title a { float: left; margin-left: 10px; color: #fff; line-height: 31px; height: 31px; } .mobile-inner-header { width: 100%; height: 42px; position: absolute; top: 0px; right: 0px; } .mobile-inner-header-icon { color: #ffffff; height: 40px; font-size: 25px; text-align: center; float: right; width: 40px; position: relative; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; } .mobile-inner-header-icon:hover { opacity: 0.8; cursor: pointer; } /*0331闅愯棌鐨勪负鎵嬫満鐗堢殑涓夎绾跨殑瀵艰埅*/ /*.mobile-inner-header-icon span{ position: absolute; left: calc((100% - 25px) / 2); top: calc((100% - 1px) / 3); width: 25px; height: 2px; background-color: rgba(255,255,255,1);} .mobile-inner-header-icon span:nth-child(1){transform: translateY(4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(2){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon-click span:nth-child(1){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clickfirst;} .mobile-inner-header-icon-click span:nth-child(2){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clicksecond;} .mobile-inner-header-icon{ color: #fff; height: 31px;text-align: left;float:right;width: 50px;position: relative; cursor: pointer;margin-right: 10px;font-weight: bold;text-align: right;} .mobile-inner-header-icon-out span{width: 22px;height: 2px;background-color:#fff;display: block;} .mobile-inner-header-icon-out span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } .mobile-inner-header-icon span:nth-child(1){transform: translateY(4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(2){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(3){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon-click span:nth-child(1){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clickfirst;} .mobile-inner-header-icon-click span:nth-child(2){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clicksecond;} .mobile-inner-header-icon-click span:nth-child(3){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clickthird;} .mobile-inner-header-icon-out span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .mobile-inner-header-icon-out span:nth-child(3){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; }*/ /*0331闅愯棌鐨勪负鎵嬫満鐗堢殑鏂囧瓧鐨勫鑸�*/ .mobile-inner-header-icon span.mobile_home { font-size: 14px; width: 40px; border-top: 0; height: 100%; text-align: center; font-weight: normal; display: block; border: 1px solid #ccc; border-radius: 2px; } .mobile-inner-header-icon { color: #fff; height: 28px; line-height: 28px; text-align: left; float: right; width: 40px; position: relative; cursor: pointer; margin-right: 10px; font-weight: bold; text-align: right; } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } @keyframes clickthird { 0% { opacity: 0 } 100% { opacity: 0 } } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } @keyframes outthird { 0% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(12px) rotate(0deg); } } .mobile-inner-nav { background-color: #eaeef5; width: 100%; position: absolute; top: 67px; left: 0px; padding-top: 10px; padding-bottom: 25px; display: none; } .mobile-inner-nav a { display: inline-block; line-height: 45px; text-decoration: none; width: 100%; font-size: 1.4rem; border-bottom: solid 1px #d3d3d3; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .mobile-inner-nav a:hover { color: #0050a5; } .mobile-inner-nav li { position: relative; padding: 0 20px; } .mobile-inner-nav li a { text-indent: 15px; } .mobile-inner-nav li strong { color: #aaa; position: absolute; right: 20px; top: 0; font-size: 2.5rem; cursor: pointer; width: 40px; height: 45px; text-align: center; line-height: 40px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .mobile-inner-nav a { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: returnToNormal; animation-name: returnToNormal; } @-webkit-keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .mobile_subNav { display: none; padding-left: 10px; } .mobile-inner-nav dd a { height: 35px; line-height: 35px; border-bottom: dotted 1px rgba(0, 0, 0, 0.2); font-size: 1.2rem; } .mobile_search { clear: both; position: relative; height: 36px; margin: 10px 30px 0; border: 1px solid #d3d3d3; border-radius: 30px; overflow: hidden; } .mobile_search input.notxt { width: 90%; color: #333; margin-left: 55px; border: none; } .mobile-links { width: auto; margin: 0 20px 10px; overflow: hidden; border-bottom: solid 1px #d3d3d3; padding: 6px 0; } .mobile-links span { float: left; padding: 0 15px; } .mobile-links span a { border: none; line-height: 25px; padding: 4px 0; } /*footer*/ .db{ background: #1b4370; background-size: cover; overflow: hidden; color: #FFFFFF; line-height: 30px; } .db_logo{width: 45%;margin-top: 50px;} .db_logo img{width: 100%;} .bq{ margin-top: 60px; } .er{ margin-top: 30px; margin-bottom: 10px; } /*搜索框弹出层*/ .search{width: 25px;height:25px;float:right;background: url(../images/search.svg) no-repeat center center;background-size: auto 25px;margin-top:8px;} .search_wrap{position:fixed;left:0;top:0;width:100%;height:100%;color:#666;z-index:6;display:none} .search_wrap .search_box{position:fixed;width:80%;max-width:660px;z-index:999;z-index:3;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .search_wrap .i_txt{width:100%} .search_wrap .bck{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:3;} .search_wrap .i_txt{position: absolute;height:42px;font-size:15px;border:none;background:#fff;width: 97%;padding-left:3%;} .search_wrap .submit{position:absolute;top:0;right:0;width:80px;height:42px;cursor:pointer;background:#09378d;color:#ffffff;font-size:18px;} #browser-modal{width:100%;height:100%;top:0;left:0;text-align:center;color:#303233;position:fixed;z-index:9990009;} #browser-modal .browser-modal-cover{position:fixed;left:0;top:0;height:100%;width:100%;background-color:#111;opacity:.9;z-index:-1} #browser-modal .browser-content{width:700px;margin-top:120px;margin-left:auto;margin-right:auto;padding-bottom:80px;padding-top:50px;background-color:#fff;border-radius:5px} #browser-modal .browser-content .browser-dpc-logo img{height:42px;margin:45px auto 40px} #browser-modal .browser-content .browser-text-title{text-transform:uppercase;font-size:24px} #browser-modal .browser-content .browser-text-desc{margin-top:30px;margin-bottom:20px;font-size:14px} #browser-modal .browser-content .browser-list{width:600px;margin:20px auto;height:130px} #browser-modal .browser-content .browser-item{float:left;width:150px;padding-top:20px;padding-bottom:20px;margin-left:auto;margin-right:auto} #browser-modal .browser-content .browser-item .iconfont{width:100px;height:100px;margin:0 auto;font-size:80px;line-height:80px;margin-bottom:10px;} #browser-modal .browser-content .browser-item .iconchrome{background: url(../images/bro.png) no-repeat 0 0} #browser-modal .browser-content .browser-item .iconfirefox{background: url(../images/bro.png) no-repeat 0 -100px} #browser-modal .browser-content .browser-item .iconopera{background: url(../images/bro.png) no-repeat 0 -200px} #browser-modal .browser-content .browser-item .iconEdge{background: url(../images/bro.png) no-repeat 0 -300px} #browser-modal .browser-content .browser-item a{cursor:pointer;display:block} #browser-modal .browser-content .browser-item a img{display:block;margin:0 auto;max-width:100px;width:100px;height:100px} #browser-modal .browser-content .browser-item a h4{text-align:center;margin-top:20px;font-size:18px;font-weight:700}