@charset "utf-8";

/*banner*/
.banner { position: relative; background: #186de1; 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; display: none; }
.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: 6%; }
.banner:hover .next { right: 6%; }
/*title*/
h2.main_title { text-align: center; position: relative; }
h2.main_title a { display: block; line-height: 0; }
h2.main_title strong { display: block; font-size: 36px; line-height: 100%; color: #202945; }
h2.main_title span { display: block; font-weight: normal; font-size: 16px; line-height: 100%; color: #535b65; margin-top: 20px; }
/*inrto*/
.intro { height: 136px; background: #ffffff; box-shadow: 2px 1px 27px 0px rgba(26,26,26,0.09); border-radius: 10px; position: relative; margin-top: -173px; z-index: 99; box-sizing: border-box; padding: 9px 9px 9px 40px; }
.intro h2 { padding-top: 17px; float: left; }
.intro h2 strong { display: block; font-size: 22px; line-height: 100%; color: #202945; }
.intro h2 span { display: block; font-size: 20px; line-height: 100%; color: #202945; font-weight: normal; margin-top: 7px; }
.intro h2 i { display: block; margin-top: 21px; font-size: 14px; line-height: 100%; color: #535b65; font-weight: normal; }
.intro p { float: right; }
.intro p a { display: block; float: left; width: 399px; height: 118px; background: #186de1; border-radius: 10px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; margin-left: 9px; }
.intro p a img { width: 27px; margin-right: 13px; }
.intro p a span { font-size: 14px; line-height: 100%; color: #fff; }
.intro p a strong { font-size: 24px; line-height: 100%; color: #fff; font-weight: bold; }
.intro p a:last-child { background: #d9251c; }
.intro p a:last-child img { width: 28px; }
.country { padding-top: 127px; background: rgba(228,235,246,0.91); text-align: center; }
.country h2 strong { display: block; font-size: 36px; line-height: 50px; color: #202945; }
.country ul { margin-top: 43px; background: url(/images/country_bg.png) no-repeat center top; height: 260px; padding: 46px 87px 0; box-sizing: border-box; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.country li { width: 102px; }
.country li i { display: block; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; width: 102px; height: 102px; background: #ffffff; border-radius: 50%; margin-bottom: 31px; transition: all 0.5s ease; }
.country li img { width: 67px; }
.country li span { display: block; font-size: 16px; line-height: 100%; color: #3b4149; transition: all 0.5s ease; }
.country li:hover i { box-shadow: 0px 2px 24px 0px rgba(93,93,93,0.16); }
.country li:hover span { color: #202945; font-weight: bold; }
.product { background: rgba(228,235,246,0.91) url(/images/product_bg.jpg) no-repeat center bottom; padding-top: 73px; padding-bottom: 164px; overflow: hidden; }
.pro_nav { height: 104px; margin: 68px 0 24px; background: #f6f6f6; border-radius: 10px; display: flex; display: -webkit-flex; text-align: center; }
.pro_nav h3 { width: 50%; padding-top: 5px; box-sizing: border-box; height: 104px; font-weight: normal; position: relative; transition: all 0.5s ease; }
.pro_nav h3 a { display: block; font-size: 24px; line-height: 94px; color: #535b65; }
.pro_nav h3:after { position: absolute; content: ""; border-style: solid; border-color: #d9251c transparent transparent transparent; border-width: 8px 13px; left: 50%; margin-left: -13px; bottom: -16px; opacity: 0; transition: all 0.5s ease; transition-delay: 0.3s; }
.pro_nav h3.on,.pro_nav h3:hover { background: #fff; border-radius: 10px; border-bottom: 5px solid #d9251c; font-weight: bold; }
.pro_nav h3.on a,.pro_nav h3:hover a { color: #d9251c; }
.pro_nav h3.on:after,.pro_nav h3:hover:after { opacity: 1; bottom: -19px; }
.pro_category { height: 610px; width: 22.28%; float: left; background: #ffffff; border-radius: 10px; position: relative; text-align: center; }
.pro_category h4 a { display: block; font-size: 18px; line-height: 93px; color: #535b65; transition: all 0.5s ease; font-weight: normal; }
.pro_category h4:hover a { color: #fff; background: #d9251c; font-weight: bold; }
.pro_category p { position: absolute; width: 100%; height: 145px; background: #186de1; border-radius: 0px 0px 10px 10px; left: 0; bottom: 0; padding-top: 43px; box-sizing: border-box; font-weight: bold; }
.pro_category p span { display: block; font-size: 18px; line-height: 30px; color: #fff; }
.pro_list { width: 76.07%; float: right; height: 610px; background: #fff; border-radius: 10px; overflow: hidden; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; }
.pro_list dl { width: 33.33%; height: 305px; position: relative;margin-bottom: 1px;}
.pro_list dt { line-height: 0; overflow: hidden; position: relative; }
.pro_list dt a { display: block; height: 305px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.pro_list dt img { height: 305px; width: auto; }
.pro_list dt span { display: block; font-size: 18px; line-height: 28px; color: #535b65; width: 100%; padding: 0 20px; text-align: center; left: 0; bottom: 10px; position: absolute; box-sizing: border-box; }
.pro_list dd { width: 100%; height: 100%; background: #d9251c; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; transition: all 0.5s ease; }
.pro_list dd a { display: block; padding: 53px 44px 0; box-sizing: border-box; width: 100%; height: 100%; }
.pro_list dd h4 { font-size: 24px; line-height: 34px; color: #fff; font-weight: normal; position: relative; padding-bottom: 20px; }
.pro_list dd h4:after { position: absolute; content: ""; width: 19px; height: 1px; background: #ffffff; left: 0; bottom: 0; }
.pro_list dd p { font-size: 16px; line-height: 24px; color: #fff; max-height: 48px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 21px 0 63px; }
.pro_list dd span { display: block; width: 93px; height: 30px; background: #ffffff; border-radius: 15px; text-align: center; font-size: 12px; line-height: 30px; color: #d9251c; font-weight: bold; transition: all 0.5s ease; }
.pro_list dd span:hover { letter-spacing: 1px; }
.pro_list dl:nth-child(odd) { background: #f6f6f6; }
.pro_list dl:nth-child(odd) dt { -webkit-filter: brightness(0.95) contrast(1.05); filter: brightness(0.95) contrast(1.05); }
.pro_list dl:hover dd { opacity: 1; }
/*case*/
.case { background: #eef0f2 url(/images/case_bg.jpg) no-repeat center top; padding-top: 98px; }
.case h2 strong,.case h2 span { color: #fff; }
.case_nav { margin: 60px 0 40px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.case_nav a { display: block; font-size: 16px; line-height: 22px; color: #fff; padding-bottom: 8px; position: relative; font-weight: normal; margin: 0 30px; }
.case_nav a:after { position: absolute; content: ""; width: 0; height: 3px; background: #fff; left: 0; bottom: 0; opacity: 0; transition: all 0.5s ease; }
.case_nav h3.on a,.case_nav h3:hover a { font-weight: bold; }
.case_nav h3.on a:after,.case_nav h3:hover a:after { width: 100%; opacity: 1; }
.case_nav a:hover:after { width: 100%; opacity: 1; }
.case_con { background: #fff; overflow: hidden; border-radius: 10px; }
.case_con dl { height: 478px; background: #ffffff; border-radius: 10px; overflow: hidden; position: relative; }
.case_con dt { height: 478px; overflow: hidden; line-height: 0; width: 45.96%; float: left; }
.case_con dt img { height: 478px; width: auto; }
.case_con dd { width: 54.04%; float: right; box-sizing: border-box; padding: 53px 4.7% 0; }
.case_con dd h4 { font-size: 24px; line-height: 32px; color: #202945; max-height: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: 30px; position: relative; float: left; width: calc(100% - 120px); margin-bottom: 13px; }
.case_con dd h4:after { position: absolute; content: ""; width: 34px; height: 3px; background: #d9251c; left: 0; bottom: 0; }
.case_con dd p { font-size: 14px; line-height: 29px; color: #535b65; max-height: 87px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; clear: both; margin-bottom: 18px; }
.case_con dd span { display: block; width: 93px; height: 30px; background: #d9251c; box-shadow: 8px 7px 27px 0px rgba(255,65,65,0.3); border-radius: 15px; text-align: center; font-size: 12px; line-height: 30px; color: #fff; font-weight: bold; float: right; margin-top: 4px; transition: all 0.5s ease; }
.case_con dd span:hover { letter-spacing: 1px; }
.case_con ul { width: 760px; height: 165px; background: #ffffff; border-radius: 10px; box-sizing: border-box; padding: 15px; display: flex; display: -webkit-flex; position: absolute; right: 3.5%; bottom: 46px; justify-content: flex-start;}
.case_con ul li { width: 32%; height: 135px; line-height: 0; overflow: hidden; border-radius: 10px; margin-right: 2%;}
.case_con ul li:last-of-type{margin-right: 0;}
.case_con ul li img { width: 100%; }
.client { padding-top: 108px; background: #eef0f2; padding-bottom: 97px; }
.client ul { display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; flex-wrap: wrap; margin: 50px 0 47px; }
.client li { width: 13.57%; height: 96px; background: #ffffff; border-radius: 10px; overflow: hidden; margin-bottom: 13px; transition: all 0.5s ease; margin-right: 0.82%;}
.client li:nth-of-type(7n){margin-right: 0;}
.client li a { display: block; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.client li img { height: 96px; width: auto; -webkit-filter: grayscale(1); filter: grayscale(1); transition: all 0.5s ease; }
.client li:hover { box-shadow: 0px 2px 24px 0px rgba(93,93,93,0.16); }
.client li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.client .more { display: block; width: 175px; height: 50px; background: #d9251c; box-shadow: 14px 12px 27px 0px rgba(255,65,65,0.3); border-radius: 25px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 50px; color: #fff; font-weight: bold; transition: all 0.5s ease; }
.client .more:hover { letter-spacing: 1px; }
.quality { padding-top: 120px; background: url(/images/quality_bg.jpg) no-repeat center bottom; max-width: 1920px; min-width: 1300px; margin: 0 auto; overflow: hidden; padding-bottom: 103px; }
.quality .q_title { text-align: center; margin: 100px 0 42px; }
.quality .q_title strong { display: block; font-size: 36px; line-height: 100%; color: #202945; }
.quality .q_title span { display: block; font-size: 24px; line-height: 100%; color: #202945; margin-top: 21px; font-weight: normal; }
.q_tel { width: 518px; height: 50px; background: #ffffff; box-shadow: 14px 12px 27px 0px rgba(93,98,104,0.17); border-radius: 25px; margin: 0 auto; }
.q_tel p { float: left; padding-left: 32px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; }
.q_tel p img { width: 25px; display: block; margin-right: 18px; }
.q_tel p span { display: block; font-size: 22px; line-height: 50px; color: #202945; font-weight: bold; }
.q_tel a { display: block; width: 260px; height: 50px; background: #d9251c; border-radius: 25px; text-align: center; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; float: right; }
.q_tel a span { display: block; font-size: 16px; line-height: 50px; color: #fff; transition: all 0.5s ease; }
.q_tel a img { display: block; width: 16px; margin-left: 24px; }
.q_tel a:hover span { letter-spacing: 1px; }
.quality_con { margin-top: 51px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.quality_con dl { width: 50%; height: 640px; box-sizing: border-box; background: url(/images/quality2_bg.jpg) no-repeat center; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; padding: 130px 5.36% 0; }
.quality_con dt { width: 26.09%; width: 52.18%; height: 640px; line-height: 0; overflow: hidden; order: 1; }
.quality_con dt img { width: 100%; }
.quality_con dd h3 { padding-top: 25px; font-size: 28px; line-height: 100%; color: #fff; }
.quality_con dd p { margin: 55px 0 83px; }
.quality_con dd p span { display: block; font-size: 16px; line-height: 29px; color: #fff; }
.quality_con dd .more { display: block; width: 93px; height: 30px; background: #ffffff; border-radius: 15px; text-align: center; font-size: 12px; line-height: 30px; color: #d9251c; font-weight: bold; transition: all 0.5s ease; }
.quality_con dd .more:hover { letter-spacing: 1px; }
.quality_con dl:first-child { background: url(/images/quality1_bg.jpg) no-repeat center; border-right: 1px solid #fff; padding: 116px 2.08% 0 5.36%; }
.quality_con dl:first-child dd h4 { padding-top: 39px; }
.quality_list { overflow: hidden; height: 216px; background: #ffffff; box-shadow: 0px 8px 29px 0px rgba(0,0,0,0.09); border-radius: 10px; position: relative; margin-top: -86px; z-index: 2; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.quality_list li { width: 20%; box-sizing: border-box; border-right: 1px solid #e8e8e8; height: 216px; text-align: center; padding-top: 46px; transition: all 0.5s ease; }
.quality_list li i { display: block; font-size: 20px; line-height: 100%; color: #202945; font-weight: bold; padding-bottom: 28px; position: relative; margin-bottom: 20px; transition: all 0.5s ease; }
.quality_list li i:after { position: absolute; content: ""; width: 37px; height: 3px; background: #d9251c; border-radius: 1px; bottom: 0; left: 50%; margin-left: -18px; transition: all 0.5s ease; }
.quality_list li strong { font-size: 42px; line-height: 100%; color: #202945; transition: all 0.5s ease; }
.quality_list li span { display: block; font-size: 16px; line-height: 24px; color: #535b65; transition: all 0.5s ease; }
.quality_list li:hover { background: #d9251c; }
.quality_list li:hover i,.quality_list li:hover strong,.quality_list li:hover span { color: #fff; }
.quality_list li:hover i:after { background: #fff; }
.quality_list li:nth-child(3) i { font-size: 30px; }
.quality_list li:nth-child(1) i { font-size: 36px; }
.quality_list li:last-child { border-right: none; }
.ys { max-width: 1920px; min-width: 1300px; margin: 0 auto; overflow: hidden; padding-top: 98px; }
.ys_con { margin-top: 63px; }
.ys_con .slide { width: 12.7%; height: 803px; float: left; position: relative; transition: all 0.5s ease; }
.ys_con h3 { width: 100%; height: 803px; background: #d9251c; box-sizing: border-box; float: right; padding-top: 204px; border-right: 1px solid #bc2a24; }
.ys_con h3 i { display: block; width: 101px; height: 101px; background: rgba(255,255,255,0.38); border-radius: 50%; padding-top: 7px; box-sizing: border-box; margin: 0 auto 44px; }
.ys_con h3 img { display: block; width: 87px; height: 87px; background: #fff; border-radius: 50%; margin: 0 auto; }
.ys_con h3 span { display: block; width: 36px; font-size: 36px; line-height: 50px; color: #fff; font-weight: bold; margin: 0 auto; }
.ys_con .con { float: left; width: 100%; display: none; }
.ys_con .cur { width: 61.9%; }
.ys_con .cur h3 { display: none; }
.ys_con .cur .con { display: block; }
.ys_con dl { height: 586px; position: relative; }
.ys_con dt { height: 100%; width: 100%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; position: relative; overflow: hidden; }
.ys_con dt img { height: 586px; width: auto; }
.ys_con dt:after { position: absolute; content: ""; width: 100%; height: 100%; background: url(/images/ys_hover.png) no-repeat center top; background-size: 101% 100%; left: 0; top: 0; z-index: 2; }
.ys_con dt + dd { position: absolute; top: 104px; left: 6.73%; z-index: 2; }
.ys_con dt + dd h4 { padding-bottom: 36px; position: relative; }
.ys_con dt + dd h4 strong { display: block; font-size: 30px; line-height: 40px; color: #fff; }
.ys_con dt + dd h4:after { position: absolute; content: ""; width: 41px; height: 3px; background: #ffffff; left: 0; bottom: 0; }
.ys_con dt + dd p { margin: 20px 0 60px; }
.ys_con dt + dd p span { display: block; font-size: 18px; line-height: 27px; color: #fff; }
.ys_con dt + dd li { font-size: 16px; line-height: 32px; color: #fff; }
.ys_con dt + dd li:before { content: "- "; }
.ys_con dd + dd { position: absolute; z-index: 2; bottom: 26px; right: 10.1%; }
.ys_con dd + dd img { max-width: auto; }
.ys_con .album { height: 217px; padding-top: 29px; }
.ys_con .album h4 { width: 17.76%; padding-left: 6.64%; float: left; padding-top: 11px; box-sizing: border-box; }
.ys_con .album h4 a { display: block; font-size: 18px; line-height: 100%; color: #202945; font-weight: bold; position: relative; }
.ys_con .album h4 a:after { position: absolute; content: ""; width: 20px; height: 20px; background: url(/images/more1.png) no-repeat center; background-size: 100% 100%; top: 113px; left: 6.64%; left: 0; }
.ys_con .album ul { width: 82.24%; float: left; }
.ys_con .album li { width: 276px; width: 23.23%; width: 28.54%; height: 153px; float: left; margin-right: 16px; border-radius: 10px; overflow: hidden; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.ys_con .album li img { width: auto; height: 153px; }
/*process*/
.process { padding-top: 107px; text-align: center; }
.process ul { background: url(/images/country_bg.png) no-repeat center top; height: 260px; padding: 50px 84px 0; box-sizing: border-box; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; margin: 46px 0 33px; }
.process li i { display: block; width: 102px; height: 102px; position: relative; overflow: hidden; border-radius: 50%; transition: all 0.5s ease; }
.process li i img { position: absolute; left: 0; top: 0; width: 102px; }
.process li span { display: block; font-size: 16px; line-height: 100%; color: #535b65; margin-top: 24px; transition: all 0.5s ease; }
.process li:hover i { background: #ffffff; box-shadow: 0px 2px 24px 0px rgba(93,93,93,0.16); }
.process li:hover i img { top: -102px; }
.process li:hover span { font-weight: bold; color: #202945; }
.process .q_tel { width: 450px; }
.process .q_tel a { width: 192px; }
/*news*/
.news { padding-top: 118px; padding-bottom: 120px; }
.news_nav { margin: 40px auto 42px; text-align: center; font-size: 0; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; }
.news_nav h3 { margin: 0 12px; }
.news_nav h3 a { font-size: 16px; line-height: 41px; color: #535b65; width: 130px; height: 41px; background: #ffffff; border-radius: 21px; display: block; font-weight: normal; box-sizing: border-box; transition: all 0.5s ease; }
.news_nav h3.on a,.news_nav h3:hover a { background: #d9251c; color: #fff; font-weight: bold; }
.news_con { overflow: hidden; }
.news_con dl { float: left; width: 46.92%; margin-bottom: 32px; overflow: hidden; height: 125px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; }
.news_con dt { overflow: hidden; line-height: 0; width: 203px; height: 125px; background: #595959; border-radius: 10px; }
.news_con dt img { width: 100%; }
.news_con dd { width: calc(100% - 226px); }
.news_con dd span { display: block; text-align: right; transition: all 0.5s ease; font-size: 14px; line-height: 100%; color: #535b65; }
.news_con dd span:hover { color: #d9251c; }
.news_con dd h4 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; line-height: 28px; color: #3b4149; }
.news_con dd p { font-size: 16px; line-height: 25px; color: #535b65; max-height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 11px 0 21px; }
.news_con dl:first-child { width: 50.85%; height: 439px; border-radius: 10px; position: relative; margin-right: 2.23%; }
.news_con dl:first-child dt { width: 100%; height: 100%; }
.news_con dl:first-child dt img { height: 439px; width: auto; }
.news_con dl:first-child dd { position: absolute; height: 164px; background: rgba(0,0,0,0.55); width: 100%; left: 0; bottom: 0; }
.news_con dl:first-child dd a { display: block; box-sizing: border-box; padding: 34px 30px 0; }
.news_con dl:first-child dd h4 { font-size: 18px; line-height: 28px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 430px; margin-bottom: 14px; }
.news_con dl:first-child dd p { font-size: 16px; line-height: 26px; color: #fff; max-height: 52px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 430px; }
.news_con dl:first-child dd span { position: absolute; display: block; font-size: 14px; line-height: 100%; color: #fff; right: 30px; bottom: 70px; transition: all 0.5s ease; }
.news_con dl:first-child dd span:hover { letter-spacing: 1px; }
.project { background: url(/images/project_bg.jpg) no-repeat center top; height: 430px; padding-top: 117px; box-sizing: border-box; }
.project h2 { text-align: center; margin-bottom: 68px; }
.project h2 strong { display: block; font-size: 36px; line-height: 50px; color: #fff; }
.project .q_tel { width: 450px; }
.project .q_tel a { width: 192px; }
/*links*/
.links { height: 45px; background: #1f2024; overflow: hidden; box-sizing: border-box; }
.links em { font-style: normal; font-size: 14px; line-height: 100%; color: #3b4149; display: inline-block; }
.links a { display: inline-block; font-size: 14px; color: #3b4149; line-height: 1; margin: 0 20px; transition: all 0.5s ease; }
.links a:hover { color: #fff; }



@media screen and (max-width:1440px),(-webkit-min-device-pixel-ratio:2) {
  .case_con ul{width: 711px;}
}