@charset "utf-8";

/*banner*/
.banner { position: relative; background: #fff; margin: 0 auto; overflow: hidden; clear: both; }
.banner .bd { position: relative; z-index: 0; }
.banner .bd li img { width: 100%; vertical-align: top; }
.banner .hd { position: absolute; bottom: 40px; width: 100%; height: 2px; cursor: pointer; z-index: 9; font-size: 0; text-align: center; display: block; }
.banner .hd li { display: inline-block; width: 8px; height: 8px; background: #fff; opacity: 0.4; border-radius: 4px; transition: all 0.5s ease; margin: 0 8px; cursor: pointer; font-size: 0; }
.banner .hd li.on { opacity: 1; width: 26px; }
.banner .prev,.banner .next { width: 54px; height: 54px; cursor: pointer; margin-left: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.2); top: 46%; left: -100px; position: absolute; z-index: 9; transition: all 0.5s ease; }
.banner .prev:hover,.banner .next:hover { border-color: #fff; }
.banner .next { left: auto; right: -100px; }
.banner:hover .prev { left: 3%; }
.banner:hover .next { right: 3%; }
/*title*/
h2.main_title { line-height: 0; }
h2.main_title a { display: block; }
h2.main_title strong { display: block; font-size: 36px; line-height: 100%; color: #000; position: relative; padding-bottom: 26px; }
h2.main_title strong:before { position: absolute; content: ""; width: 68px; height: 6px; background: #004290; left: 0; bottom: 0; }
h2.main_title strong:after { position: absolute; content: ""; width: 14px; height: 6px; background: #d80c18; left: 0; bottom: 0; z-index: 1; }
h2.main_title span { display: block; font-weight: normal; font-size: 18px; line-height: 100%; color: #000; margin-top: 26px; }
/*inrto*/
.intro { background: #004290; height: 215px; }
.intro ul { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; padding-top: 63px; }
.intro i { display: block; }
.intro strong { display: inline-block; font-size: 48px; line-height: 100%; color: #fff; font-family: ASB; }
.intro b { display: inline-block; width: 27px; height: 27px; background: #fff; text-align: center; font-size: 18px; line-height: 27px; color: #004290; font-weight: bold; border-radius: 50%; vertical-align: top; margin-left: 2px; }
.intro span { display: block; font-size: 18px; line-height: 100%; color: #fff; margin-top: 2px; }
/*partner*/
.partner { background: #f7f7f7; padding-top: 95px; height: 306px; box-sizing: border-box; }
.partner h2 { padding-top: 6px; float: left; }
.partner .context { float: right; }
.partner li { width: 202px; float: left; margin-left: 14px; line-height: 0; overflow: hidden; box-sizing: border-box; position: relative; }
.partner li img { width: 100%; }
.partner li a { display: block; width: 100%; height: 100%; box-sizing: border-box; }
.partner li a:after { position: absolute; content: ""; width: 100%; height: 100%; box-sizing: border-box; transition: all 0.5s ease; opacity: 0; left: 0; bottom: 0; border: 2px solid #d80c18; }
.partner li:hover a:after { opacity: 1; }
/**/
.client { max-width: 1920px; min-width: 1300px; margin: 0 auto; overflow: hidden; padding-top: 102px; }
.client h2 { padding-top: 2px; float: left; margin-bottom: 55px; }
.client .client_nav { float: right; }
.client h3 { float: left; width: 298px; height: 84px; margin-left: 11px; text-align: center; }
.client h3 a { display: block; background: #f7f7f7; transition: all 0.5s ease; font-size: 18px; line-height: 84px; color: #004290; }
.client h3.on a,.client h3:hover a { color: #fff; background: #004290; }
.client .client_con { overflow: hidden; clear: both; }
.client li { width: 20%; line-height: 0; float: left; box-sizing: border-box; position: relative; height: 136px; }
.client li img { height: 136px; width: auto; position: absolute; left: 50%; transform: translateX(-50%); }
.client li a { display: block; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; }
.client li a:after { position: absolute; content: ""; width: 100%; height: 100%; box-sizing: border-box; border-top: 1px solid #d6d6d6; border-left: 1px solid #d6d6d6; left: 0; top: 0; z-index: 2; transition: box-shadow 0.5s ease-in-out; }
.client li:hover a:after { border: 2px solid #d80c18 !important; box-shadow: 11px 9px 24px 0px rgba(92,92,92,0.16); }
.client li:nth-child(5n) a:after { border-right: 1px solid #d6d6d6; }
.client li:nth-last-child(-n + 5) a:after { border-bottom: 1px solid #d6d6d6; }
.project { background: #f7f7f7; height: 700px; padding-top: 72px; box-sizing: border-box; }
.project .pic { width: 914px; float: right; margin-right: -8px; }
.project .project_con { float: left; width: 352px; padding-top: 41px; }
.project .project_con p { font-size: 16px; line-height: 34px; color: #6a6a6a; margin-top: 90px; }
.case { height: 980px; box-sizing: border-box; /*background: url(../images/case_bg.jpg) no-repeat center top;*/ padding-top: 133px; }
.case h2 { float: left; margin-bottom: 57px; }
    .case h2 em {
        display: block;
        font-style: normal;
        font-size: 36px;
        line-height: 100%;
        color: #023d8b;
        margin-bottom: 28px;
    }
    .case h2 strong {
        color: #023d8b;
        font-family: D-DIN-B;
    }
.case h2 strong:before { background: #fff; }
.case .case_nav { float: right; margin-top: 26px; }
.case h3 { float: left; width: 293px; height: 84px; margin-left: 6px; text-align: center; }
.case h3 a { display: block; background: #fff; transition: all 0.5s ease; font-size: 18px; line-height: 84px; color: #000; }
.case h3.on a,.case h3:hover a { color: #fff; background: #d80c18; }
.case .case_con { clear: both; }
.case dl { width: 23.6%; float: left; margin-right: 0.426%; margin-bottom: 50px; position: relative; height: 280px; overflow: hidden; }
.case dt { height: 230px; line-height: 0; overflow: hidden; }
.case dt img { height: 230px; width: 100%; }
.case dt + dd { position: relative; z-index: 2; }
.case dt + dd h4 { width: 100%; height: 50px; background: #fff; display: block; padding: 0 30px 0 23px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; line-height: 50px; color: #000; font-weight: normal; box-sizing: border-box; transition: all 0.5s ease; }
.case dt + dd h4:after { position: absolute; content: ""; content: "+"; font-size: 20px; line-height: 50px; color: #004290; right: 23px; opacity: 1; transition: all 0.5s ease; }
.case dd + dd { background: rgba(216,12,24,0.76); position: absolute; top: 286px; transition: all 0.5s ease; width: 100%; height: 230px; overflow: hidden; box-sizing: border-box; }
.case dd + dd a { display: block; padding: 20px 34px 60px; }
.case dd + dd p { font-size: 14px; line-height: 20px; color: #fff; }
.case dl:hover dt + dd h4 { font-weight: bold; }
.case dl:hover dt + dd h4::after { opacity: 0; }
.case dl:hover dd + dd { top: 0; }
.case dl:nth-child(4n) { margin-right: 0; }
.product { max-width: 1920px; min-width: 1300px; margin: 0 auto; overflow: hidden; padding-top: 60px; }
.product .product_con { margin-top: 70px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; }
.product dl { margin-top: 2px; width: 49.9%; height: 360px; background: #e9e9e9; position: relative; overflow: hidden; }
.product dt { height: 360px; width: 100%; position: absolute; left: 0; top: 0; line-height: 0; overflow: hidden; transition: all 0.5s ease; opacity: 0; }
.product dt img { height: 360px; width: auto; }
.product dt:after { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0,66,144,0.65); left: 0; top: 0; }
.product dt + dd { padding: 67px 15.6% 0 10%; position: relative; z-index: 1; }
.product dt + dd h3 { float: left; margin-top: 21px; transition: all 0.5s ease; }
.product dt + dd h3 strong { display: block; font-size: 24px; line-height: 100%; color: #000; }
.product dt + dd h3 span { display: block; font-size: 18px; line-height: 100%; color: #959595; font-family: D-DIN-B; margin-top: 15px; text-transform: capitalize; }
.product dt + dd h3 i { display: block; font-size: 18px; line-height: 100%; color: #004290; font-family: D-DIN-B; margin-top: 153px; }
.product dt + dd .pro_class { float: right; }
.product dt + dd h4 a { display: inline-block; font-size: 18px; line-height: 44px; color: #fff; font-weight: normal; transition: all 0.5s ease; }
.product dt + dd h4 a:hover { font-weight: bold; text-decoration: underline; }
.product dd + dd { width: 44.4%; height: 285px; max-width: 284px; position: absolute; z-index: 2; transition: all 0.5s ease; opacity: 1; right: 35px; top: 38px; overflow: hidden; }
.product dd + dd img { height: 285px; width: auto; position: absolute; left: 50%; transform: translateX(-50%); }
.product dl:hover dt { opacity: 1; }
.product dl:hover dt + dd h3 { margin-top: 13px; }
.product dl:hover dt + dd h3 strong { font-size: 30px; color: #fff; }
.product dl:hover dt + dd h3 span { color: #fff; }
.product dl:hover dt + dd h3 i { width: 95px; height: 36px; background: #d80c18; font-size: 14px; line-height: 36px; color: #fff; text-align: center; transition: all 0.5s ease; margin-top: 123px; }
.product dl:hover dt + dd h3 i:hover { letter-spacing: 1px; }
.product dl:hover dd + dd { opacity: 0; z-index: 0; }
.sm_banner { height: 355px; /*background: url(../images/sm_bg.jpg) no-repeat center top;*/ }
.sm_banner h2 { float: left; padding-top: 107px; }
.sm_banner h2 strong { display: block; font-size: 30px; line-height: 44px; color: #fff; }
.sm_banner h2 span { display: block; margin-top: 40px; font-size: 16px; line-height: 100%; color: #fff; font-weight: normal; }
.sm_banner .s_tel { float: right; padding-top: 142px; }
.sm_banner .s_tel span { display: inline-block; font-size: 14px; line-height: 100%; color: #fff; font-weight: bold; }
.sm_banner .s_tel strong { display: inline-block; font-size: 36px; line-height: 100%; color: #fff; font-family: ASB; }
.sm_banner .s_tel a { display: block; width: 302px; height: 40px; margin-left: 29px; background: #d80c18; text-align: center; font-size: 16px; line-height: 40px; color: #fff; margin-top: 26px; transition: all 0.5s ease; }
.sm_banner .s_tel a:hover { letter-spacing: 0.5px; }
.quality { padding-top: 81px; padding-bottom: 131px; }
.quality .quality_con { overflow: hidden; margin-top: 51px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.quality dl { width: 32.43%; line-height: 0; position: relative; overflow: hidden; }
.quality dt img { width: 100%; }
.quality dd { position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; box-sizing: border-box; background: url(../images/quality_hover.png) no-repeat center bottom; padding: 91.6% 11% 0; transition: all 0.5s ease; }
.quality dd h3 { font-size: 24px; line-height: 100%; color: #fff; }
.quality dd p { font-size: 14px; line-height: 22px; color: #fff; margin-top: 22px; }
.quality dd p span { display: block; }
.quality dl:hover dd { background: rgba(216,12,24,0.72); padding-top: 48%; text-align: center; }
.quality dl:hover dd h3 { font-size: 32px; }
.quality dl:hover dd p { font-size: 18px; line-height: 31px; color: #fff; }
.quality dl:hover dd p span { display: inline; }
.infomation { background: #f7f7f7; padding-top: 86px; }
.infomation dl { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 51px; box-shadow: 0 0 42px 0 rgba(0,0,0,0.1); height: 600px; overflow: hidden; }
.infomation dt { line-height: 0; width: 955px; }
.infomation dt img { width: 100%; }
.infomation dd { width: calc(100% - 955px); background: #004290; padding: 28.53% 12.8% 0; padding: 3% 4% 0; height: 600px; box-sizing: border-box; }
.infomation dd h3 { font-size: 22px; line-height: 100%; color: #fff; }
.infomation dd p { font-size: 14px; line-height: 18px; color: #fff; margin: 26px 0 86px; }
.infomation dd a { display: block; width: 95px; height: 36px; background: #d80c18; text-align: center; font-size: 18px; line-height: 36px; color: #fff; transition: all 0.5s ease; font-family: D-DIN-B; }
.infomation dd a:hover { letter-spacing: 1px; }
.ys { padding-top: 30px; max-width: 1920px; min-width: 1300px; margin: 0 auto; overflow: hidden; position: relative; }
.ys > .content { height: 1023px; position: relative; }
.ys .ys_con { height: 750px; width: 1660px; position: absolute; bottom: 115px;  }
.ys dt { height: 750px; width: 100%; overflow: hidden; line-height: 0; }
.ys dt img { height: 750px; width: auto; }
.ys dd { position: absolute; right: 0; bottom: 0; background: rgba(0,0,0,0.7); width: 100%; height: 215px; }
.ys dd .content { margin: 0; height: 154px; position: absolute; right: 0; top: 0; }
.ys dd h4 { width: 58px; height: 154px; background: #004290; position: absolute; right: 0; top: 0; font-size: 24px; line-height: 26px; color: #fff; padding: 26px 16px 0; box-sizing: border-box; text-align: center; }
.ys dd p { width: 667px; font-size: 22px; line-height: 36px; color: #fff; padding-top: 42px; float: left; }
.ys dd .feature { float: right; margin-right: 98px; padding-top: 35px; }
.ys dd ul { float: left; }
.ys dd ul:last-child { margin-left: 62px; }
.ys dd li { font-size: 18px; line-height: 31px; color: #fff; }
.ys_nav { width: calc((100% - 1400px)/2 + 1400px); position: absolute; z-index: 1; right: 0; bottom: 0; height: 175px; background: #f1f5ff; }
.ys_nav h3 { width: 20%; height: 175px; float: left; cursor: pointer; box-sizing: border-box; padding: 0 40px; transition: all 0.5s ease; position: relative; }
.ys_nav h3 strong { display: block; font-size: 24px; line-height: 100%; color: #000; padding-top: 46px; margin-bottom: 26px; }
.ys_nav h3 span { display: block; font-size: 14px; line-height: 20px; color: #000; font-weight: normal; }
.ys_nav h3 i { position: absolute; font-size: 60px; line-height: 100%; color: #A3A7B2; font-family: D-DIN; right: 47px; top: 60px; }
.ys_nav h3:nth-child(2n) { background: #e9efff; }
.ys_nav h3.on,.ys_nav h3:hover { background: #004290; }
.ys_nav h3.on strong,.ys_nav h3:hover strong { color: #fff; font-size: 24px; padding-top: 39px; }
.ys_nav h3.on span,.ys_nav h3:hover span { color: #fff; }
.ys_nav h3.on i,.ys_nav h3:hover i { color: #fff; }
.about { overflow: hidden; background: #f7f7f7; padding-top: 264px; position: relative; margin-top: -115px; padding-bottom: 126px; }
.about .about_con { float: left; width: calc(100% - 752px); }
.about .about_con p { font-size: 16px; line-height: 30px; color: #6a6a6a; max-height: 280px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; margin: 20px 0 60px; }
.about .about_con a.more { display: block; font-size: 18px; line-height: 100%; color: #004290; font-family: D-DIN-B; transition: all 0.5s ease; }
.about .about_con a.more:hover { letter-spacing: 1px; }
.about .pic { width: 688px; float: right; line-height: 0; overflow: hidden; margin-bottom: 70px; }
.about .pic img { width: 100%; }
.album { clear: both; position: relative; }
.album .album_con { overflow: hidden; }
.album li { width: 24%; width: 336px; height: 246px; margin-right: 1.428%; margin-right: 20px; float: left; }
.album li > a { height: 201px; display: block; overflow: hidden; line-height: 0; }
.album li > a img { height: 201px; width: auto; }
.album li h4 { position: relative; z-index: 2; height: 45px; background: #fff; text-align: center; }
.album li h4 a { display: block; padding: 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; font-size: 16px; line-height: 45px; color: #000; }
.album .a_prev,.album .a_next { width: 48px; height: 48px; position: absolute; top: 77px; cursor: pointer; transition: all 0.5s ease; -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.3; }
.album .a_prev:hover,.album .a_next:hover { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1; }
.album .a_prev { left: -80px; }
.album .a_next { right: -80px; }
/*news*/
.news { padding-top: 106px; padding-bottom: 175px; }
.news h2 { float: left; }
.news_nav { float: right; border-bottom: 1px solid #d2d2d2; margin-top: 60px; margin-bottom: 63px; }
.news_nav h3 { float: left; margin-left: 30px; }
.news_nav h3 a { padding: 0 53px; font-size: 20px; line-height: 52px; color: #666; font-weight: normal; position: relative; display: block; transition: all 0.5s ease; }
.news_nav h3 a:before { position: absolute; content: ""; width: 0; height: 1px; background: #004290; left: 0; bottom: -1px; transition: all 0.5s ease; }
.news_nav h3:first-child { margin-left: 0; }
.news_nav h3.on a,.news_nav h3:hover a { color: #004290; }
.news_nav h3.on a:before,.news_nav h3:hover a:before { width: 100%; }
.news_con { clear: both; }
.news_con_list dl { width: 454px; float: left; margin-right: 19px; }
.news_con_list dl:last-child { margin-right: 0; }
.news_con_list dt { width: 100%; height: 244px; line-height: 0; overflow: hidden; }
.news_con_list dt img { width: auto; height: 244px; }
.news_con_list dd { margin-top: 31px; box-sizing: border-box; padding-right: 72px; }
.news_con_list dd h4 { font-size: 18px; line-height: 32px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s ease; font-weight: normal; }
.news_con_list dd p { font-size: 14px; line-height: 24px; color: #999; margin: 9px 0 25px; }
.news_con_list dd span { display: block; font-size: 16px; line-height: 100%; color: #6d6d6d; transition: all 0.3s ease; }
.news_con_list dl:hover dd h4,.news_con_list dl:hover dd span { color: #004290; }
.help { margin-top: 88px; width: 100%; height: 189px; background: #f6f7fb; overflow: hidden; }
.help h3 { width: 138px; height: 189px; background: #004290; text-align: center; float: left; }
.help h3 a { display: block; font-size: 20px; line-height: 189px; color: #fff; }
.help .help_list { float: left; margin-left: 54px; width: calc(100% - 192px); padding-top: 28px; overflow: hidden; }
.help li { width: 306px; margin-right: 54px; float: left; position: relative; padding-right: 61px; }
.help li h4 { font-size: 18px; line-height: 34px; color: #000; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s ease; }
.help li p { margin: 7px 0 25px; font-size: 14px; line-height: 23px; color: #999; max-height: 46px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.help li span { display: block; font-size: 16px; line-height: 100%; color: #6d6d6d; transition: all 0.3s ease; }
.help li:after { position: absolute; content: ""; width: 1px; height: 117px; background: rgba(210,210,210,0.4); right: 0; top: 8px; }
.help li:hover h4,.help li:hover span { color: #004290; }
.sm_banner2 { height: 436px; background: url(../images/sm_bg2.jpg) no-repeat center top; text-align: center; }
.sm_banner2 h2 { padding-top: 133px; }
.sm_banner2 h2 span { display: block; font-size: 30px; line-height: 100%; color: #fff; }
.sm_banner2 h2 strong { display: block; font-size: 48px; line-height: 100%; color: #fff; margin-top: 21px; }
.sm_banner2 h2 a { display: inline-block; font-size: 18px; line-height: 100%; color: #fff; font-style: italic; text-decoration: underline; margin-top: 88px; font-weight: normal; transition: all 0.5s ease; }
.sm_banner2 h2 a:hover { letter-spacing: 0.5px; }
/*links*/
body { position: relative; }
.links { height: 24px; overflow: hidden; position: absolute; width: 100%; left: 0; bottom: 58px; }
.links .content { box-sizing: border-box; padding-right: 400px; }
.links em { font-style: normal; font-size: 14px; line-height: 24px; color: #999; float: left; }
.links a { display: block; font-size: 14px; color: #999; line-height: 24px; margin-right: 40px; transition: all 0.5s ease; float: left; }
.links a:hover { color: rgba(255,255,255,0.8); }
@media screen and (max-width:1680px),(-webkit-min-device-pixel-ratio:2) {
  .product dt + dd { padding-left: 35px; }
}
@media screen and (max-width:1440px),(-webkit-min-device-pixel-ratio:2) {
  .project .project_con { width: 300px; }
  .product dt + dd { padding-left: 20px; padding-right: 20px; }
  .product dd + dd { right: 20px; }
  .quality dl dd { padding-left: 8%; padding-right: 8%; }
  .ys .ys_nav { width: calc((100% - 1300px)/2 + 1300px); }
  .album .album_con li { width: 310px; }
  .news_con_list dl { width: 420px; }
  .help li { width: 276px; }
}