﻿/* website public css */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, pre, a, abbr, acronym, big, cite, code, del, em, img, q, s, samp, small, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td, canvas, footer, header, menu, nav, section, summary, time, mark, audio, video, p { border: none; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, iframe { display: block; }
fieldset, img { max-width: 100%; }
address, caption, cite, code, dfn, em, var, i, h3, h4, h5, h6 { font-weight: normal; font-style: normal; }
ol, ul, dl, li { list-style: none; }
h1, h2, h3, h4, h5, h6, button, input, select, textarea, input:focus, textarea:focus { font-size: 100%; outline: none; }
a { color: #666; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
html { font-size: 62.5%; }
body { font-size: 1.4rem; font-family: 'Microsoft Yahei','Helvetica Neue',Helvetica,Arial,Simsun,Sans-Serif; min-width: 320px; line-height: 1.5; background: #FFF; color: #6d6a67; }
.lt { float: left; }
.rt { float: right; padding-top: 10px; }
.cler { clear: both; overflow: hidden; height: 0; width: 100%; }
ul::after, dl::after, .clr::after { content: ""; display: block; clear: both; width: 100%; height: 0; overflow: hidden; }
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.opa { filter: alpha(opacity=0.5); opacity: 0.5; }
.pc-layer { display: block }
.mobile-layer { display: none }
.ts, .hv img { transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; }
/* public */
#container, #Footer, .layer { width: 100% }
.half { width: 50% }
.high { height: 100% }
.wrap { width: 80%; margin: 0 auto; position: relative; min-width: 1200px; }
.wrapper { margin: 0px 8%; }
.boxtable { width: 100%; height: 100%; display: table; }
.boxcell { width: 100%; height: 100%; display: table-cell; vertical-align: middle }
img.pic { display: block; width: 100%; height: auto; }
.nosel { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.row li { display: block; float: left; }
.row-2 li { width: 50% }
.row-3 li { width: 33.33% }
.row-4 li { width: 25% }
.rela { position: relative }
.padd { padding: 40px 0px }
.padtop { padding-top: 40px }
.padbom { padding-bottom: 40px }
.top-title { font-size: 4rem; letter-spacing: 5px; text-align: center }
.h1-title { font-size: 2.4rem }
.title { font-size: 2rem }
.text { font-size: 1.6rem; text-align: justify }
.over-text { word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.more-btn { width: 100%; height: 34px; }
.more-btn a { display: inline-block; width: 122px; height: 34px; background: url(../images/more.png) no-repeat center; }
.more-btn a:hover { background: url(../images/more-on.png) no-repeat center; }
.more-box, .more-red { width: 100%; height: 55px; }
.more-box a { display: block; float: right; width: 200px; height: 55px; position: relative; background: url(/images/more-bg-bai.png) no-repeat; color: #254289; }
.more-box span, .more-red span { display: block; line-height: 55px; position: absolute; top: 0px; right: 40px; text-transform: uppercase; font-size: 17px; letter-spacing: 2px; }
.more-red a { display: block; width: 200px; height: 55px; position: relative; margin: 0 auto; background: url(/images/more-bg-red.png) no-repeat; color: #FFF; }
.more-box a:hover, .more-red a:hover { background: url(/images/more-bg-lan.png) no-repeat; color: #FFF }
.mar80 { margin-bottom: 80px }
.mar60 { margin-bottom: 60px }
.mar40 { margin-bottom: 40px }
.mar20 { margin-bottom: 20px }
.mar10 { margin-bottom: 10px }
.layer.clr.mar40 { height: 113px; position: relative; width: 100%; }
/* transition transform */
.flow, .nhc-realize .layer-photo .her { overflow: hidden }
.ran, #banner .link-nav li em, #banner .link-nav li i, .news-layer .more-link a, .news-layer .news-list span { transition: all .35s; -webkit-transition: all .35s; -moz-transition: all .35s; -o-transition: all .35s; }
.her:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
/* Header */
#Header { height: 80px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 999; background: #FFF; box-shadow: 0px 0px 5px rgba(120,120,120,0.25); }
#Header .logo, #Header .nav { float: left; height: 100%; }
#Header .logo a { display: block; width: 100%; height: 100%; line-height: 90px; }
#Header .logo img { height: 100%; }
#Header .menu { float: right; height: 100%; width: 940px; }
#Header .nav { float: left; height: 100%; margin-right: 60px; }
#Header .nav li { display: block; float: left; height: 100%; line-height: 80px; }
#Header .nav li a.nav2_a, #Header .nav li i { display: inline-block; line-height: 80px; color: #6d6a67; font-size: 14px; position: relative; }
#Header .nav li a:hover { color: #26438a }
#Header .sundry { float: right; height: 100%; }
#Header .btn-find { float: left; height: 24px; width: 30px; margin: 28px 0px 0px; cursor: pointer; background: url(../images/icon-find.png) no-repeat center; background-size: 15px; }

/* Footer */
#Footer { padding: 20px 0px 24px; background: #585b6a; color: #FFF; position: relative; height: 56px; z-index: 990; }
#Footer a { color: #FFF; color: rgba(255,255,255,0.8); }
#Footer .foot-menu { width: 100%; padding-top: 30px; height: 49px; }
#Footer .foot-nav { float: left; }
#Footer .foot-nav a { font-size: 16px; margin-right: 20px }
#Footer .foot-link { float: right; }
#Footer .foot-link a { display: inline-block; margin-left: 30px; text-align: center }
#Footer .foot-link span { display: block; width: 100%; height: 23px; }
#Footer .foot-link p { display: block; padding-top: 5px; font-size: 14px }
#Footer .foot-link .link1 span { background: url(../images/icon-user.png) no-repeat center; }
#Footer .foot-link .link2 span { background: url(../images/icon-oa.png) no-repeat center; }
#Footer .foot-link .link3 span { background: url(../images/icon-mail.png) no-repeat center; }
#Footer .foot-logo { float: left; width: auto; margin-right: 60px; }
#Footer .foot-contact { float: left; width: auto; padding-top: 20px; margin-left: 4%; color: #c7c8cc; max-width: 360px; position: relative; z-index: 110; }
#Footer .foot-code { float: right; width: 107px; position: relative; position: absolute; right: 0px; top: 0px; }
#Footer .rights { padding-top: 2px; font-size: 13px; line-height: 1.8em; }
#Footer .rights-left span, #Footer .rights-left a { /* margin-right: 10px; */ }
#Footer .support i { padding: 0 10px; }
/* banner */
#banner { width: 100%; position: relative; }
#banner-swiper { width: 100% }
#banner-swiper .swiper-wrapper, #banner-swiper .swiper-slide, #banner-swiper .wall { width: 100%; height: 100%; }
#banner-swiper .wall { background-size: cover; background-position: center; }
#banner-swiper .prev, #banner-swiper .next { width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; cursor: default; z-index: 100; background: url(../images/grary1.png) repeat; }
#banner-swiper .prev i, #banner-swiper .next i { display: block; width: 100%; height: 100%; }
#banner-swiper .prev { left: 0px; }
#banner-swiper .prev i { background: url(../images/btn-left.png) no-repeat center; }
#banner-swiper .next { right: 0px; }
#banner-swiper .next i { background: url(../images/btn-right.png) no-repeat center }
#banner-swiper .prev:hover, #banner-swiper .next:hover { background: url(../images/black.png) repeat; }
#banner .page-tip { width: 20px; height: auto; position: absolute; left: 50%; margin-left: -10px; bottom: 95px; z-index: 10; }
#banner .page-tip span { display: block; width: 100%; margin-bottom: 5px; }
#banner .page-tip i { display: block; width: 1px; height: 70px; margin: 0 auto; background: #FFF }
#banner .link-nav { height: 95px; position: absolute; bottom: 0px; left: 0px; z-index: 100; background: url(../images/BGwhite.png) repeat }
#banner .link-nav ul { height: 100% }
#banner .link-nav li { display: block; float: left; width: 14.28%; padding: 12px 0px 8px; text-align: center; position: relative; }
#banner .link-nav li:before { content: ""; display: block; width: 100%; height: 0px; overflow: hidden; background: #dd7930; position: absolute; bottom: 100%; left: 0px; }
#banner .link-nav li a, #banner .link-nav li p, #banner .link-nav span { display: block; position: relative; }
#banner .link-nav li p { height: 51px; width: 100%; }
#banner .link-nav li em, #banner .link-nav li i { display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; }
#banner .link-nav li i { opacity: 0; visibility: hidden }
#banner .link-nav li span { letter-spacing: 2px; font-size: 16px; }
#banner .link-nav li:hover { background: #dd7930; }
#banner .link-nav li:hover:before { height: 10px; }
#banner .link-nav li:hover a { color: #FFF; }
#banner .link-nav li:hover em { opacity: 0; visibility: hidden }
#banner .link-nav li:hover i { opacity: 1; visibility: visible }
/* container */
#container { position: relative; }
.news-layer .news-nav { height: 40px; position: relative; border-bottom: 1px solid #dd7930 }
.news-layer .tab-nav-news { height: 100%; float: left }
.news-layer .tab-nav-news a { display: block; float: left; height: 39px; border-bottom: 2px solid transparent; font-size: 2rem; margin-right: 40px }
.news-layer .tab-nav-news a:hover, .news-layer .more-link a:hover, .news-layer .news-list a:hover, .news-layer .news-top a:hover .title { color: #254289 }
.news-layer .tab-nav-news a.current { color: #254289; border-bottom-color: #254289 }
.news-layer .more-link { float: right; height: 100% }
.news-layer .more-link a { display: block; line-height: 30px; padding-right: 13px; color: #666; background: url(../images/ary-rt.png) no-repeat right center; font-size: 1.6rem; text-transform: uppercase }
.news-layer .more-link a:hover { color: #254289; background: url(../images/blue-rt.png) no-repeat right center; }
.news-layer .news-main, .news-layer .news-tier { width: 100%; position: relative }
.news-layer .news-main { padding-top: 30px; }
.news-layer .news-list { float: left; width: 48%; height: 176px; overflow: hidden; }
.news-layer .news-list li, .news-layer .news-top a { display: block }
.news-layer .news-list a { display: block; position: relative; padding-right: 105px; font-size: 1.6rem; line-height: 35px; }
.news-layer .news-list span { display: block; width: 100%; height: 35px; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; background-position: -10px 50% !important; background-size: auto 10px !important; }
.news-layer .news-list em { display: block; position: absolute; top: 0px; right: 0px; }
.news-layer .news-list a:hover span, .news-layer .news-top a:hover .title { background: url(../images/blue-rt.png) no-repeat; background-position: 0px 50% !important; padding-left: 15px }
.news-layer .news-top { float: right; width: 42%; }
.news-layer .news-top h2 { display: block; font-size: 2.4rem; font-weight: normal; color: #254289; margin-bottom: 5px; }
.news-layer .news-top .title { margin-bottom: 15px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; background-position: 0px 50% !important; background-size: auto 10px !important; }
.news-layer .news-top .text { color: #666; line-height: 28px; height: 84px; -webkit-line-clamp: 3; }
.major-layer { height: 612px }
.major-layer .major { width: 35%; position: relative }
.major-layer .h1-title { font-size: 3.8rem; color: #254289; text-transform: uppercase; margin-bottom: 10px; }
.major-layer .h2-title { font-size: 2.6rem; letter-spacing: 3px; padding-bottom: 40px; margin-bottom: 20px; background: url(../images/jb-line.png) no-repeat left bottom; background-size: 100% auto }
.major-layer .text { line-height: 28px }
.major-layer .major-nav { width: 100%; position: absolute; left: 0px; bottom: 0px; }
.major-layer .major-nav li { display: block; width: 100%; height: 90px; position: relative; background: url(../images/grary1.png) repeat; color: #FFF; cursor: pointer }
.major-layer .major-nav li span { display: block; height: 100%; line-height: 90px; font-size: 2.4rem; letter-spacing: 3px; float: right; margin-right: 40px; position: relative; padding-left: 40px }
.major-layer .major-nav li span:after { width: 53px; height: 2px; background: #FFF; content: ""; position: absolute; top: 50%; left: -73px; margin-top: -1px; }
.major-layer .major-nav li.active { background: url(../images/blue1.png) repeat; cursor: default }
.major-layer .project { width: 62%; padding-top: 70px; position: relative; margin-right: -5%; }
.major-layer .swiper-container, .major-layer .swiper-wrapper, .major-layer .swiper-slide { width: 100%; height: auto !important; }
.major-layer .swiper-slide { width: 33%; float: left }
.major-layer .swiper-slide a { display: block; width: 100%; position: relative; overflow: hidden; zoom: 1; color: #FFF; text-align: center }
.major-layer .pop-infor { width: 100%; height: 100%; position: absolute; bottom: 0px; left: 0px; z-index: 5; background: rgba(0,0,0,.6); }
.major-layer .pop-infor .title { width: 100%; font-size: 2rem; height: 36px; line-height: 36px; position: absolute; top: 50%; left: 0px; margin-top: -18px; }
.major-layer .pop-infor p { display: block; padding: 0 15px; }
.major-layer .pop-infor i { display: block; width: 48px; height: 1px; background: #FFF; margin: 0 auto; position: relative; top: 16px; }
.major-layer .swiper-slide a:hover .pop-infor { height: 55px; }
.major-layer .swiper-slide a:hover .pop-infor i { display: none; }
.major-layer .btn-box { width: 55px; height: 25px; cursor: default; margin-top: 30px }
.major-layer .left { float: left; background: url(../images/w-left.png) no-repeat center; }
.major-layer .right { float: right; background: url(../images/w-right.png) no-repeat center; }
.inet-link ul { width: 100% }
.inet-link li { display: block; float: left; }
.inet-link li.brand { width: 25.28%; }
.inet-link li.relat { width: 28.57%; }
.inet-link li.layout { width: 46.15%; }
.inet-link li a { display: block; width: 100%; position: relative; overflow: hidden }
.inet-link .link-title { position: absolute; top: 40px; left: 40px; color: #FFF }
.inet-link .en-title { font-size: 2.4rem; text-transform: uppercase; opacity: 0.65; }
.inet-link .cn-title { font-size: 2.4rem; }
.inet-link .stock, .inet-link .tip-box { position: absolute; bottom: 40px; left: 40px; }
.inet-link .stock p { font-size: 2rem; color: #29425c }
.inet-link .stock span { font-size: 3rem; color: #254289; }
.inet-link .tip-box { color: #FFF; font-size: 1.8rem; }



.goToTop { width: 40px; height: 40px; position: fixed; bottom: 80px; right: 10px; background: url(../images/toTop.png) center; cursor: pointer; z-index: 10000; display: none }
/*@media only screen and (min-width: 1280px) and (max-width:1440px){  
    .wrap{width:84%;}
    
    #Header .menu{margin-right:120px;}
}*/
/* media screen ipad */

/* media screen mobile phone */

/* keyframes */
.anime { animation-duration: 0.5s; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; opacity: 0; }
.fadeInDown { animation-name: fadeInDown; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; }
.fadeInUp { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; }
.fadeInLeft { animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; }

@keyframes fadeUp {
}

@keyframes zoomIn {
    0% { opacity: 0.9; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
    100% { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; }
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0.9; transform: scale(1.1); -webkit-transform: scale(1.1); }
    100% { opacity: 1; transform: none; -webkit-transform: none; }
}

@-moz-keyframes zoomIn {
    0% { opacity: 0.9; -moz-transform: scale(1.1); }
    100% { opacity: 1; -moz-transform: none; }
}

@keyframes fadeInDown {
    0% { opacity: 0; transform: translate(0px,50px); -webkit-transform: translate(0px,50px); -moz-transform: translate(0px,50px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; }
}

@-webkit-keyframes fadeInDown {
    0% { opacity: 0; transform: translate(0px,50px); -webkit-transform: translate(0px,50px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; }
}

@-moz-keyframes fadeInDown {
    0% { opacity: 0; -moz-transform: translate(0px,50px); }
    100% { opacity: 1; -moz-transform: none; }
}

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate(-50px,0px); -webkit-transform: translate(-50px,0px); -moz-transform: translate(-50px,0px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; }
}

@-webkit-keyframes fadeInLeft {
    0% { opacity: 0; transform: translate(-50px,0px); -webkit-transform: translate(-50px,0px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; }
}

@-moz-keyframes fadeInLeft {
    0% { opacity: 0; -moz-transform: translate(-50px,0px); }
    100% { opacity: 1; -moz-transform: none; }
}

@keyframes fadeInRight {
    0% { opacity: 0; transform: translate(50px,0px); -webkit-transform: translate(50px,0px); -moz-transform: translate(50px,0px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; }
}

@-webkit-keyframes fadeInRight {
    0% { opacity: 0; transform: translate(50px,0px); -webkit-transform: translate(50px,0px); }
    100% { opacity: 1; transform: none; -webkit-transform: none; }
}

@-moz-keyframes fadeInRight {
    0% { opacity: 0; -moz-transform: translate(50px,0px); }
    100% { opacity: 1; -moz-transform: none; }
}

.foot-contact p { margin-bottom: 3px; }

.home_content { animation: am_bo 0.6s ease-in-out backwards; }

a.nav2_a { padding: 0px 20px; }

.nav2_ti { position: relative; z-index: 90; }

#Header .nav li.cur a, #Header .nav li:hover a { color: #fff; }

#Header ul#nav:hover li.cur a.nav2_a:after { height: 0px; }
#Header ul#nav:hover li.cur .nav2_ti { color: #666; }

#Header ul#nav:hover li.cur a.nav2_a:hover:after { height: 100%; }
#Header ul#nav:hover li.cur a:hover .nav2_ti { color: #fff; }
.rights-left.lt i { padding: 0px 10px; }
