.proDetails{ width: 100%;}
.proDetails.on{ padding-top: 80px;}
.proDetails .title{ padding: 50px 0;}
.proDetails .title h2{ text-align: center; font-size: 44px; color: #333; padding-bottom: 20px;}
.proDetails .title p{ margin: 0 auto; line-height: 26px; text-align: center; font-size: 16px; color: #777;}

.proDetails .layer1{ padding-bottom: 100px; background: #f5f5f5;}
.proDetails .layer1Box{ background: #fff; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.proDetails .layer1Box .icon{ float: left; width: 960px; height: 540px; position: relative;}
.proDetails .layer1Box .icon .playClick{ cursor: pointer; background: url(/frontEnd/static/images/playClick_03.png); width: 66px; height: 66px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.proDetails .layer1Box .icon img{ display: block; width: 100%; height: 100%;}
.proDetails .layer1Box .icon video{ width: 100%;}
.proDetails .layer1Box .text{ width: calc(100% - 960px); float: left; height: 540px; position: relative;}
.proDetails .layer1Box .text .textBox{ padding: 0 40px; box-sizing: border-box; width: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
.proDetails .layer1Box .text .textBox h2{ font-size: 28px; font-weight: bold; color: #333;}
.proDetails .layer1Box .text .textBox span{ display: block; width: 50px; height: 3px; margin: 22px 0; background: #004ea2;}
.proDetails .layer1Box .text .textBox p{ width: 100%; font-size: 16px; color: #333; line-height: 36px;}
.proDetails .layer2{ width: 100%;}
.proDetails .layer2 .swiper-container{ padding: 100px 0; height: 525px;}
.proDetails .layer2 .swiper-container .swiper-slide{ height: 100%;}
.proDetails .layer2 .swiper-container .swiper-slide img{ height: 100%; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.5s;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.proDetails .layer2 .swiper-container .swiper-slide.swiper-slide-active { z-index: 99;}
.proDetails .layer2 .swiper-container .swiper-slide.swiper-slide-active img{ transform: translate(-50%,-50%) scale(1); }
.proDetails .layer2 .swiper-container .swiper-slide.swiper-slide-prev img{ opacity: 0.6; transform: translate(-50%,-50%) scale(0.8);}
.proDetails .layer2 .swiper-container .swiper-slide.swiper-slide-next img{ opacity: 0.6; transform: translate(-50%,-50%) scale(0.8);}
.proDetails .layer2 .w1440{position: relative;}
.proDetails .layer2 .swiper-button-next{ background: url(/frontEnd/static/img/join_Jt2.png); width: 40px; height: 40px; left: auto; right:-70px!important; top: 50%; transform: translateY(-50%);}
.proDetails .layer2 .swiper-button-prev{ background: url(/frontEnd/static/img/join_Jt.png); width: 40px; height: 40px; left: -70px!important;; top: 50%; transform: translateY(-50%);}
.proDetails .layer1.pd{ padding: 95px 0 0 0; background: #f5f5f5;}
.proDetails .layer1.pd .layer1Box{ padding: 10px; box-sizing: border-box;}
.proDetails .layer3{background: #f5f5f5;}
.proDetails .layer3 ul li{ transition: 0.5s; width: 13%; float: left; margin-right: 1.5%; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.proDetails .layer3 ul li img{ display: block; width: 100%; height: auto;}
.proDetails .layer3 ul li:last-child{ margin-right: 0;}
.proDetails .layer3 ul li:hover{transform: translateY(-10px);}

.proDetails .layer4{ background: #f5f5f5;}
.proDetails .layer4 ul{ text-align: center;}
.proDetails .layer4 ul li{ position: relative; display: block; display: inline-block; width:460px; height: 260px; margin: 0 15px 30px 15px;}
.proDetails .layer4 ul li img{ width: 100%; height: 100%;}
.proDetails .layer4 ul li .text{ transition: 0.5s; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7);}
.proDetails .layer4 ul li .text h2{ transition: 0.5s; opacity: 1; text-align: center; width: 100%; height: 100%; line-height: 260px; font-size: 32px; color: #fff;}
.proDetails .layer4 ul li .text p{ transition: 0.5s; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 32px; color: #fff; padding: 0 30px; box-sizing: border-box; opacity: 0;}
.proDetails .layer4 ul li:hover .text{ background: rgba(0,78,162,0.8);}
.proDetails .layer4 ul li:hover .text h2{ opacity: 0;}
.proDetails .layer4 ul li:hover .text p{ opacity: 1;}
.proDetails .layer5{ padding-bottom: 50px; background: #f5f5f5;}
.proDetails .layer5Box{ background: #fff; padding: 40px 60px; box-sizing: border-box;}
.proDetails .layer5Box table{ width: 100%; height: 100%; border: 1px solid #eee; border-right:0; border-bottom: 0;}
.proDetails .layer5Box table tr td{ text-indent: 18px; height: 58px; border-right:1px solid #eee; border-bottom: 1px solid #eee;}

.proDetails .layer6{ width: 100%; background: #f5f5f5;}
.proDetails .layer6Box{ box-shadow: 0 0 10px rgba(0,0,0,0.1); overflow: hidden; padding: 10px; box-sizing: border-box; background: #fff;}
.proDetails .layer6Box .icon{ position: relative; width: 710px; height: 530px; float: right;}
.proDetails .layer6Box .icon .swiper-pagination{ width: 100%; bottom: 20px;}
.proDetails .layer6Box .icon .swiper-pagination span{ width: 14px; height: 14px; border: 2px solid #dedede; border-radius:50%; box-sizing: border-box; margin: 0 5px;}
.proDetails .layer6Box .icon .swiper-pagination span.swiper-pagination-bullet-active{border: none; background: linear-gradient(to right,#0098e1,#0655a7);}

.proDetails .layer6Box .icon .swiper-container{ width: 100%; height: 100%;}
.proDetails .layer6Box .icon img{ display: block; width: 100%; height: 100%;}
.proDetails .layer6Box .text{ width: calc(100% - 710px); min-height: 530px; float: left;  padding: 0 50px; box-sizing: border-box;}
.proDetails .layer6Box .text .bt{ font-weight: bold; position: relative; height: 72px; width: 100%; border-bottom: 2px solid #eeeeee; line-height: 72px; font-size: 28px; color: #333;}
.proDetails .layer6Box .text .bt::after{ position: absolute; content: ''; width: 70px; height: 2px; background: #004ea2; left: 0; bottom: -2px;}
.proDetails .layer6Box .text p{ width: 100%; padding: 5px 0 0 0; font-size: 15px; line-height: 30px;}

.proDetails .layer7{ background:#f5f5f5; padding-bottom: 50px;}
.proDetails .layer7Box{ background: #fff; padding: 0 40px 50px 40px; box-sizing: border-box;}
.proDetails .layer7Box .bt{ position: relative; padding:30px 0 0 0; height: 86px; text-align: center; border-bottom: 1px solid #eee; line-height: 86px; font-size: 28px; color: #333;}
.proDetails .layer7Box .bt::after{ display: block; content:''; position: absolute; width: 80px; height: 3px; position: absolute; left: 50%; transform: translate(-50%); bottom: -1px; background: #004ea2;}
.proDetails .layer7Box p{ padding: 30px 0 0 0; font-size: 15px; line-height: 36px; color: #777;}
.proDetails3 .proDetails3_content img{
    margin: auto;
    object-fit: contain;
}
.proDetails .layer7Box .icon{ padding-top: 30px;}
.proDetails .layer7Box .icon img{ display: block; margin: 0 auto;}

.proMain{ background: #f5f5f5; padding: 45px 0;}
.proMain .mao{ display: block;}
.proMain .serachM{ background: #fff; height: 52px; position: relative;}
.proMain .serachM input{ font-size: 16px; display: block; width: 100%; height: 100%; padding: 0 25px; box-sizing: border-box; border:none; outline: none;}
.proMain .serachM button{ background: url(/frontEnd/static/img/dealer_05.jpg) center center no-repeat; display: block; position: absolute; right: 0; top: 0; border: none; width: 52px; height: 52px;}
.proMain .serachM input::-moz-placeholder{ color: #777;}

.proMain .proList .proBox{ width: 100%; margin-bottom: 20px; background: #fff; height: 410px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.proMain .proList .proBox .icon{ overflow: hidden; float: left; width: 720px; height: 100%; position: relative;}
.proMain .proList .proBox .icon img{ transition: 0.5s; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);height: 100%;width: 100%;
    padding: 21px;
    box-sizing: border-box;}
.proMain .proList .proBox .text{ width: calc(100% - 720px); float: left; height: 100%; padding: 75px 100px 0 100px; box-sizing: border-box;}
.proMain .proList .proBox .text h2{ font-size: 22px; font-weight: bold; color: #333; padding-bottom: 10px;}
.proMain .proList .proBox .text p{ width: 100%; line-height:30px; font-size: 16px; color: #aaa; padding-bottom: 45px;}
.proMain .proList .proBox .icon:hover img{transform: translate(-50%,-50%) scale(1.1);}
.proMain .proList2 ul li{ float: left; overflow: hidden; position: relative; background: #fff; width: 32%; margin: 0 2% 20px 0; padding: 10px 10px 0 10px; box-sizing: border-box;}
.proMain .proList2 ul li .icon{ width: 100%; height: 320px;}
.proMain .proList2 ul li .icon img{ display: block; width: 100%; height: 100%;}
.proMain .proList2 ul li p{ color: #333; width: 100%; height: 70px; text-align: center; line-height: 70px; font-size: 22px;}
.proMain .proList2 ul li .text{ width: 100%; height: 100%; position: absolute; transition: 0.5s; background: rgba(0,78,162,0.9); left: 0; top: 100%; padding:40px 40px 0 40px; box-sizing: border-box; line-height: 36px; color: #fff; font-size: 16px;}
.proMain .proList2 ul li:hover .text{ top: 0;}
.proMain .proList2 ul li:nth-child(3n){ margin-right: 0;}

.proMain .proList .proBox .text a img{ display: block; transition: 0.5s;}
.proMain .proList .proBox .text a:hover img{ margin-left: 15px;}
<!--ºÄʱ1754965773.5785Ãë-->