@charset "utf-8";
body { font-family: "寰蒋闆呴粦"; background: #fff }
.scale_img dl img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dl:hover img, .scale_img li:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0) }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

h2.main_title { text-align: center }
h2.main_title a { display: block; font-size: 38px; color: #333; line-height: 100% }
h2.main_title a:hover { color: #333 }
h2.main_title span { display: block; padding-top: 14px; margin-top: 19px; font-size: 20px; color: #666; line-height: 100%; font-weight: 400; position: relative }
h2.main_title span:after { position: absolute; content: ""; width: 41px; height: 3px; background: #0165cc; left: 50%; margin-left: -20.5px; top: 0 }
.more a { display: block; width: 94px; height: 31px; background: #333; border-radius: 16px; font-size: 14px; color: #fff; line-height: 31px; text-align: center; transition: ease .3s }
.more a:hover { background: #0165cc }

.fullSlide { width: 100%; position: relative; z-index: 0; clear: both }
.fullSlide .bd { margin: 0 auto; position: relative; z-index: 0; overflow: hidden }
.fullSlide .bd .con { width: 100% !important; height: auto !important; display: block }
.fullSlide .bd .li { width: 100% !important; overflow: hidden; text-align: center; background: no-repeat center top; z-index: 0 }
.fullSlide .bd .li img { display: block; height: auto !important; width: 100% }
.fullSlide .hd { position: absolute; width: 100%; height: 10px; left: 0; bottom: 40px; text-align: center; cursor: pointer }
.fullSlide .hd li { display: inline-block; width: 50px; height: 10px; background: #0165cc; margin: 0 5px; border-radius: 20px }
.fullSlide .hd li.on { background: #F58100 }

.intro { padding-top: 70px; padding-bottom: 79px }
.intro h2 { background: url(../images/intro_bg.png) no-repeat left 9px; padding-left: 151px; margin-top: 47px; width: 300px; margin-left: -151px; float: left }
.intro h2 a { display: block; font-size: 24px; color: #333; line-height: 100%; padding-bottom: 13px; font-weight: 400; position: relative }
.intro h2 a:before { position: absolute; content: ""; width: 41px; height: 3px; background: #0165cc; left: 0; bottom: 0 }
.intro h2 img { display: block; margin-top: 14px }
.intro li { width: 151px; height: 169px; float: left; padding: 0 36px; text-align: center; line-height: 0; border-left: 1px solid #EAEAEA }
.intro li img { width: 151px; height: 113px }
.intro li span { display: block; font-size: 16px; color: #333; line-height: 100%; margin: 10px 0 12px }
.intro li em { display: block; font-size: 18px; color: #333; line-height: 100%; font-weight: 700 }
.intro li:last-child { border-right: 1px solid #EAEAEA }

.quality { padding-top: 65px; background: #F3F3F3; padding-bottom: 60px }
.pro_feature { height: 159px; margin-top: 49px; margin-bottom: 78px; background: url(../images/pro_feature.png) no-repeat center 23px; text-align: center }
.pro_feature li { float: left; margin-right: 108px; width: 110px; height: 159px }
.pro_feature li em { display: block; width: 110px; height: 110px; background: #fff; border-radius: 50%; font-size: 16px; color: #333; line-height: 24px; padding-top: 32px; margin-bottom: 18px; box-sizing: border-box; transition: .3s ease }
.pro_feature li i { font-weight: 700; display: block }
.pro_feature li span { display: block; font-size: 14px; color: #333; line-height: 18px; width: 100%; white-space: nowrap }
.pro_feature li:last-child { margin-right: 0 }
.pro_feature li:hover em { color: #fff; background: #F58100; box-shadow: 0 0 32px 5px rgba(255, 176, 3, .22); background: linear-gradient(0deg, #f58100, #ff9e33) }
.pro_nav { width: 310px; height: 555px; background: #fff }
.pro_nav .pro_center { width: 310px; height: 113px }
.pro_nav ul { padding: 73px 0 14px 35px; position: relative }
.pro_nav ul:before { position: absolute; content: ""; width: 1px; height: 392px; background: #E3E3E3; left: 36px; top: 13px }
.pro_nav ul li { padding-left: 23px; position: relative }
.pro_nav ul li a { font-size: 20px; color: #333; line-height: 100%; padding-bottom: 49px; line-height: 27px; display: block }
.pro_nav ul li.on a { color: #0165cc; font-weight: 700 }
.pro_nav ul li.on:before { position: absolute; content: ""; width: 11px; height: 27px; background: url(../images/pro_i.png) no-repeat center; left: 0; top: 0 }
.pro_nav p { padding-left: 58px; padding-top: 44px; background: url(../images/h_tel.png) no-repeat 58px top }
.pro_nav p span { display: block; font-size: 14px; color: #333; line-height: 100%; margin-bottom: 7px }
.pro_nav p em { display: block; font-size: 30px; color: #333; line-height: 100%; font-weight: 700 }
.pro_con { width: 890px; height: 555px }
.pro_con dt { width: 890px; height: 445px; overflow: hidden }
.pro_con dt img { width: 890px; height: 445px }
.pro_con dd { padding: 23px 2px 0 26px }
.pro_con dd h3 a { display: block; padding-left: 3px; position: relative; font-size: 18px; color: #333; line-height: 100% }
.pro_con dd h3 a:before { position: absolute; content: ""; width: 2px; height: 25px; background: #0165cc; left: -25px; top: -3px }
.pro_con dd p { font-size: 14px; color: #666; line-height: 24px; width: 672px; margin-top: 12px }
.pro_con dd .more { float: right; margin-top: 22px }

.product, .ancillary { background: url(../images/pro_bg.png) repeat-x center top }
.product .content, .ancillary .content { position: relative }
.product .tempWrap, .ancillary .tempWrap { width: 1200px !important }
.product h3 a, .ancillary h3 a { display: block; font-size: 18px; color: #333; line-height: 100%; padding-left: 20px; padding-bottom: 16px; border-bottom: 1px solid #DADADA; position: relative; margin-bottom: 19px }
.product h3 a:before, .ancillary h3 a:before { position: absolute; content: ""; width: 6px; height: 6px; background: #0165cc; border: 3px solid #EDEDED; border-radius: 50%; left: 0; top: 3px }
.pro_container li, .anc_container li { width: 283px; height: 292px; margin-right: 23px; float: left; text-align: center; overflow: hidden; transition: .3s ease; line-height: 0 }
.pro_container li a:first-child, .anc_container li a:first-child { display: block; width: 283px; height: 213px; overflow: hidden }
.pro_container li img, .anc_container li img { width: 283px; height: 213px }
.pro_container li span, .anc_container li span { display: block; position: relative; z-index: 2; transition: .3s ease; padding: 19px 10px 47px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #666; line-height: 100% }
.pro_container li:hover span, .anc_container li:hover span { color: #0165cc }
.pro_switch div, .pro1_switch div, .brand_switch div { position: absolute; cursor: pointer; width: 52px; height: 52px; background: #fff; border-radius: 50%; transition: .3s ease; top: 135px }
.pro_switch .prev, .pro1_switch .prev, .brand_switch .prev { left: -84px }
.pro_switch .next, .pro1_switch .next, .brand_switch .next { right: -84px }
.pro_switch div:hover, .pro1_switch div:hover, .brand_switch div:hover { background: #0165cc }
.pro_switch div:hover img, .pro1_switch div:hover img, .brand_switch div:hover img { filter: invert(100%); -webkit-filter: invert(100%) }
.ancillary { background: 0 0 }
.pro1_switch div { background: #F3F3F3 }

.project { padding-top: 34px }
.project li { width: 20%; float: left; width: 240px; height: 201px; background: #F3F3F3; margin-top: 106px; text-align: center; transition: .3s ease }
.project li i { display: block; width: 91px; height: 91px; background: #fff; border-radius: 50%; box-shadow: 0 0 27px rgba(0, 0, 0, .05); margin: -45px auto 22px }
.project li em { font-size: 20px; color: #333; line-height: 100%; font-weight: 700; display: block }
.project li span { display: block; font-size: 14px; color: #333; line-height: 24px; padding: 15px 29px }
.project li:nth-child(even) { background: #EEEEF0 }
.project li:hover { background: #0165CC }
.project li:hover i { background: #512b02; box-shadow: none; filter: brightness(300%) }
.project li:hover i img { filter: grayscale(100%); -webkit-filter: grayscale(100%) }
.project li:hover em, .project li:hover span { color: #fff }
.p_contact { margin: 33px auto 40px; width: 354px }
.p_contact p { float: left; background: url(../images/h_tel.png) no-repeat left top }
.p_contact p span { display: block; padding-left: 29px; font-size: 14px; color: #1e1e1e; line-height: 24px }
.p_contact p em { display: block; font-size: 30px; color: #333; line-height: 100%; margin-top: 13px; font-weight: 700 }
.p_contact .more { float: right; margin-top: 30px }

.case { padding-top: 55px; padding-bottom: 63px; background: #F3F3F3; position: relative }
.case:before { position: absolute; content: ""; width: 100%; height: 1px; background: #e1e1e1; left: 0; top: 205px }
.case_nav { width: 100%; text-align: center; margin: 49px 0; position: relative; z-index: 2 }
.case_nav li { display: inline-block; margin: 0 33px }
.case_nav li i { display: block; width: 11px; height: 11px; background: #333; border-radius: 50%; border: 5px solid #F3F3F3; margin: 0 auto 9px; transition: .3s ease }
.case_nav li span { display: block; font-size: 16px; color: #333; line-height: 100% }
.case_nav li.on i,.case_nav li:hover i { background: #fff; border: 5px solid #0165CC }
.case_nav li.on span,.case_nav li:hover span { color: #0165CC; font-weight: 700 }
.case_con {position: relative;}
.case_con .cases { position: absolute;right: 0;top: 0; width: 200px;height: 559px; z-index:99;}
.case_con .cases li { width: 200px; height: 181px; box-sizing: border-box; position: relative; margin-bottom: 8px }
.case_con .cases li a { display: block; overflow: hidden }
.case_con .cases li img { height: 181px;width:200px; }
.case_con .cases li.on { border: 4px solid #25419D }
.case_con .cases li.on img { height: 173px; width:192px; }
.case_con .cases li.on:before { position: absolute; content: ""; border-width: 13.5px 16px; border-style: solid; border-color: transparent #25419D transparent transparent; left: -36px; top: 73px }

.cases_con dt {  width: 994px;height: 559px;overflow: hidden  }
.cases_con dt img{ width: 994px; height: 559px; }
.cases_con dd { margin-top: 10px }
.cases_con dd h4 a { display: block; padding-top: 17px; font-size: 16px; color: #333; line-height: 100%; font-weight: 700; transition: .3s ease }
.cases_con dd h4 a:hover { color: #0165cc }
.cases_con dd>p { width: 643px; font-size: 14px; color: #333; line-height: 24px; margin-top: 15px }
.case .p_contact { position: absolute;right: 0;bottom: 10px; margin: 20px 0 0 }
.case .p_contact p { background-image: url(../images/case_tel.png) }

.brand { height: 273px; background: url(../images/brand_bg.jpg) no-repeat center top }
.brand .content { position: relative }
.brand .tempWrap { width: 1200px !important }
.brand h2 { padding-top: 28px; margin-bottom: 40px }
.brand h2 a { display: block; font-size: 18px; color: #fff; line-height: 100%; padding-left: 13px; position: relative }
.brand h2 a:before { position: absolute; content: ""; width: 3px; height: 16px; background: #fff; left: 0; top: 1px }
.brand li { width: 218px; margin-right: 28px; float: left; text-align: center; line-height: 0 }
.brand li img { width: 218px; height: 122px; transition: .3s ease }
.brand li span { display: block; font-size: 14px; color: #fff; line-height: 100%; padding: 20px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/*.brand li:hover img { filter: grayscale(0); -webkit-filter: grayscale(0) }*/
.brand_switch div { top: 121px }

.power { background: url(../images/power_bg.jpg) no-repeat center bottom; padding-top: 79px; height: 986px; position:relative; }
.power_con { margin-top: 35px !important }
.power_con dl { width: 596px; height: 315px; background: #0165cc; float: left; margin-bottom: 9px; padding: 14px 19px 13px 13px; box-sizing: border-box; transition: .3s ease }
.power_con dl:nth-child(odd) { margin-right: 8px }
.power_con dt { width: 384px; height: 288px; float: left; overflow: hidden }
.power_con dt img { width: 384px; height: 288px }
.power_con dd { width: 168px; float: right }
.power_con dd h3 { font-size: 20px; color: #fff; line-height: 100%; margin-top: 23px }
.power_con dd h3 span { display: block; font-size: 16px; color: #f8f9f9; line-height: 100%; padding-top: 14px; position: relative; margin-top: 10px; margin-bottom: 29px; font-weight: 400; white-space: nowrap }
.power_con dd h3 span:before { position: absolute; content: ""; width: 77px; height: 1px; background: rgba(255, 255, 255, .5); left: 0; top: 0 }
.power_con dd p { font-size: 14px; color: rgba(248, 249, 249, .7); line-height: 22px }
.power_con dl:hover { background: #F58100 }
.power_con dl:hover p {color: rgba(248, 249, 249, 1);}
.power_contact { text-align: center }
.power_contact em { display: inline-block; margin: 49px 0 21px; font-size: 30px; color: #0165cc; line-height: 100%; font-weight: 700; position: relative }
.power_contact em:before { position: absolute; content: ""; width: 31px; height: 1px; background: #333; left: -46px; top: 15px }
.power_contact em:after { position: absolute; content: ""; width: 31px; height: 1px; background: #333; right: -46px; top: 15px }
.power_contact span { display: block; font-size: 30px; color: #333; line-height: 100%; font-weight: 700 }
.power_contact img { display: inline-block; margin-right: 8px; vertical-align: -1px }
.power_contact a { display: block; width: 149px; height: 46px; background: #fff; border-radius: 23px; font-size: 14px; color: #333; line-height: 46px; position:absolute;bottom:-23px;left:50%;margin-left:-74.5px; transition: .3s ease; z-index:2; }
.power_contact a:hover { background: #0165cc; color: #fff }

.about { background: url(../images/about_bg.jpg) no-repeat center top; padding-top: 109px; height: 794px }
.about h2 a, .about h2 span, .about h2 a:hover { color: #fff }
.about h2 span:after { background: #fff }
.about h3 a { display: block; text-align: center; font-size: 22px; color: #fff; line-height: 100%; font-weight: 400; margin-top: 120px }
.about p a { display: block; width: 843px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .7); line-height: 24px; margin: 17px auto 63px }
.about p a i { display: block; text-transform: uppercase; margin-top: 32px; transition: .3s ease }
.about p a i:hover { color: #fff }
.about ul { width: 100%; text-align: center }
.about ul li { display: inline-block; width: 137px; height: 40px; background: #fff; border-radius: 20px; line-height: 40px; margin: 0 15px; transition: .3s ease;box-shadow:0 0 32px 0 rgba(0,0,0,.08); }
.about ul li img { vertical-align: middle; margin-right: 8px }
.about ul li a { font-size: 14px; color: #333; line-height: 40px; display: block }
.about ul li:hover { background: #0165cc }
.about ul li:hover i { filter: brightness(1000%); -webkit-filter: brightness(1000%) }
.about ul li:hover img { filter: grayscale(100%); -webkit-filter: grayscale(100%) }
.about ul li:hover a { color: #fff }

.news { padding-top: 79px; padding-bottom: 80px }
.news h2 { margin-bottom: 32px; position: relative; padding-bottom: 21px; margin-bottom: 52px }
.news h2:after { position: absolute; content: ""; width: 41px; height: 3px; background: #0165cc; left: 50%; margin-left: -20.5px; bottom: 0 }
.news h2 i { display: inline-block; width: 11px; height: 11px; background: #333; border-radius: 50%; vertical-align: 7px; margin: 0 3px }
.news h3 a { font-size: 16px; color: #fff; line-height: 41px; font-weight: 400; display: block; border-bottom: 2px solid #0165CC; background: url(../images/news_tbg.png) no-repeat left top; padding-left: 32px; overflow: hidden; height: 43px }
.news h3 i { font-size: 14px; color: #666; line-height: 52px; float: right }
.company { width: 695px; float: left }
.company>div { width: 695px; height: 646px; background: #f3f3f3; padding: 17px 16px 0; box-sizing: border-box; overflow: hidden; position: relative }
.company dl { height: 202px; margin-bottom: 20px }
.company dl dt { width: 269px; height: 202px; overflow: hidden; float: left }
.company dl dt img { width: 269px; height: 202px }
.company dl dd { width: 350px; padding-right: 13px; float: right }
.company dl dd h4 { font-size: 16px; color: #282828; line-height: 100%; margin: 69px 0 16px; transition: all .3s ease }
.company dl dd p { font-size: 14px; color: #666; line-height: 22px }
.company dl:hover dd h4 { color: #F58100 }
.news_list li { padding: 20px 72px 20px 0; border-top: 1px solid #DCDCDC; position: relative; height: 88px; transition: all .3s ease }
.news_list li span { display: block; float: left; width: 88px; height: 88px; background: #dcdcdc; border-radius: 10px; font-size: 14px; color: #333; line-height: 26px; transition: all .3s ease; text-align: center; font-weight: 700; margin-right: 18px }
.news_list li i { display: block; font-size: 30px; color: #333; line-height: 100%; transition: all .3s ease; margin-top: 20px }
.news_list li h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .3s ease; font-size: 16px; color: #282828; line-height: 100%; margin: 25px 0 9px }
.news_list li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #666; line-height: 100% }
.news_list li:after { position: absolute; right: 0; top: 53px; content: ""; width: 23px; height: 23px; background: #666 url(../images/ni.png); border-radius: 50%; transition: all .3s ease }
.news_list li:hover:after { background-color: #F58100 }
.news_list li:hover h4 { color: #F58100 }
.news_list li:hover span { background: #F58100; color: #fff }
.news_list li:hover i { color: #fff }
.faq { width: 480px; float: right }
.faq>div { width: 480px; height: 646px; padding: 17px; box-sizing: border-box; background: #f3f3f3 }
.faq_pic { width: 446px; height: 202px; margin-bottom: 23px }
.faq_list li { margin-bottom: 30px }
.faq_list li h4 { font-size: 14px; color: #333; line-height: 23px; transition: .3s ease; padding-left: 49px }
.faq_list li p { font-size: 14px; color: #333; line-height: 24px; padding-left: 42px; margin-top: 29px }
.faq_list li h4, .faq_list li p { position: relative }
.faq_list li h4:before, .faq_list li p:before { position: absolute; content: ""; width: 37px; height: 23px; background: #0165cc; left: 0; top: 0 }
.faq_list li h4:before, .faq_list li p:before { border-radius: 0 10px 0 0; font-size: 14px; color: #fff; line-height: 23px; text-align: center; font-weight: 700 }
.faq_list li h4:before { content: "Q" }
.faq_list li p:before { content: "A"; background: #DCDCDC; color: #333; top: 1px }
.faq_list li:hover h4 { color: #0165cc }

.links { overflow: hidden }
.links p { font-size: 14px; color: #666; line-height: 70px }
.links .tech { padding-left: 138px }
.links .tech span { padding-left: 20px }
.links .tech a { color: #666 }
.links .link_con { overflow: hidden;margin-bottom:20px; }
.links .link_con em { display: inline-block; font-style: normal; color: #666; font-size: 14px; font-weight: 700; line-height: 50px }
.links .link_con a { font-size: 14px; color: #666; line-height: 50px; display: inline-block; padding-left: 20px; transition: .3s ease }
.links .link_con a:nth-child(2) { padding-left: 10px }
.links .link_con a:hover { font-weight: 700 }

@-webkit-keyframes fadeInLeft1 {
  from { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInLeft1 {
  from { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInRight1 {
  from { opacity: 0; -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInRight1 {
  from { opacity: 0; -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes zoomLeft {
  from { opacity: 0; -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3) }
  50% { opacity: 1 }
}
@keyframes zoomLeft {
  from { opacity: 0; -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3) }
  50% { opacity: 1 }
}
.zoomLeft { -webkit-animation-name: zoomLeft; animation-name: zoomLeft; transform-origin: 0 50%; -webkit-transform-origin: 0 50% }
.zoomRight { -webkit-animation-name: zoomLeft; animation-name: zoomLeft; transform-origin: 100% 50%; -webkit-transform-origin: 100% 50% }
@-webkit-keyframes fadeInUp1 {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInUp1 {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInUp2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
  0% { left: 0; top: 0 }
  25% { left: 0; top: 10px }
  50% { left: 0; top: 0 }
  100% { left: 0; top: 0 }
}
@-moz-keyframes myfirst {
  0% { left: 0; top: 0 }
  25% { left: 0; top: 10px }
  50% { left: 0; top: 0 }
  100% { left: 0; top: 0 }
}
@-webkit-keyframes myfirst {
  0% { left: 0; top: 0 }
  25% { left: 0; top: 10px }
  50% { left: 0; top: 0 }
  100% { left: 0; top: 0 }
}
@-o-keyframes myfirst {
  0% { left: 0; top: 0 }
  25% { left: 0; top: 10px }
  50% { left: 0; top: 0 }
  100% { left: 0; top: 0 }
}