@import url(besscolor.css);
.bread{line-height: 60px; background-color: #F4F4F4; color: #999999;}
.bread ul{display: flex;}
.bread li{margin-right: 20px;}
.proMain{display: flex; padding-top: 30px;}
.proMain .proLeft{position: relative; width: 100%;  overflow: hidden; display: flex;}
.proLeft .left{ flex-basis:40%; overflow:hidden;} 
.proLeft .picT{ position:relative; } 
.proLeft .pic{ position:absolute; left:0px; top:0px; display:block; width:150px; height:150px; background:rgb(255, 255, 255,0.7); } 
.proLeft .right{ flex-basis:60%; overflow:hidden; padding-left:100px; } 
.proLeft .thuilm{ position:relative; margin:20px 0; padding:0 30px; max-height: 80px; overflow: hidden; } 
.proLeft .thuilm .img{max-height: 80px;padding-right: 5px;}
.proLeft .swiper-button{ position:absolute; top:0px; bottom:0px; width:30px; background:rgba(0,0,0,.1); color:#fff; outline: none; } 
.proLeft .swiper-button i{ display:flex; justify-content:center; align-items:center; font-size:14px; height: 100%;} 
.proLeft .pro-left{ left:0px; } 
.proLeft .pro-right{ right:0px; } 
.proLeft .proPic{flex-basis: 40%; overflow: hidden; margin-right: 5%;}
.proLeft .bigBox{ position:absolute; left:40%; top:0px; width:400px; height:400px; background:#fff; border:5px solid #eee; overflow:hidden; cursor:move; box-shadow:0 0 3px 0 #ddd; } 
.proLeft .bigBox2{ position:relative; width:100%; height:100%; } 
.proLeft .bigpicA{ position:absolute; max-width:none; width:300%; height:300%; }
.proMain .proRight{flex-basis: 60%; }
.proRight .p-title{font-family: 'Sansation1'; font-size: 32px; margin:10px 0 30px;}
.proRight .proItem h2{font-weight: normal; margin-bottom: 20px;}
.proTable tr td{color: #555;}
.p-btn{background: var(--Bcolor); font-family: 'Sansation4'; color: #fff; width: 200px; display: block; text-align: center; height: 45px; line-height: 45px; border-radius: 45px; font-size: 22px; clear: both; margin-top: 20px;}
.detial{margin-top: 80px; margin-bottom: 60px;}
.detialTit{font-size: 30px;font-family: 'Sansation1'; color: var(--Bcolor); position: relative; margin-bottom: 40px;}
.detialTit::after{display: block; content: ''; position: absolute; top: 50%;  left:20%; width: 80%; height: 1px; background-color: #eee;}
.detialTxt{font-size: 16px; color: #555; line-height: 26px;}
.detialTxt img{width: 100%;}
.detialTxt p{margin-bottom: 20px;}
.relativeP {margin-bottom: 60px;}
.relativeP h4{min-width: 245px; height: 60px; line-height: 60px; margin-bottom: 30px; font-family: 'Sansation1'; display: inline-block; padding: 0 30px; background-color: var(--Bcolor); color: #fff; font-size: 24px;}
.relativePbox{display: flex;justify-content: space-between; flex-wrap: wrap;}
.relativePbox .proLi{width: calc(100% / 5); padding: 15px;}
.relativePbox .proLi .proLink { display: block; width: 100%; overflow: hidden; transition: all .5s ease; background: #fff;}
.relativePbox .proLi .proLink .proImg { width: 100%; height: auto; transition: all .5s ease;}
.relativePbox .proLi .proLink .proTitle { position: relative; width: 100%; padding:20px 15px;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;  color: #333; font-size: 16px;}
.relativePbox .proLi .proLink:hover{ -moz-box-shadow:0px 0px 30px #ccc; -webkit-box-shadow:0px 0px 30px #ccc; box-shadow:0px 0px 1rem #ccc; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box;}
.swiper-wrapper .img { width: 100%;}
.hide {  display: none!important;}
.proImgBox{overflow: hidden;}
@media only screen and (max-width: 768px){
	  .proLeft .topBox { flex-wrap:wrap; } 
	  .proLeft .left{ flex-basis:100%; padding: 20px 8px; } 
	  .proLeft .right{ flex-basis:100%; padding:20px 8px; } 
	  .proLeft .pic{ display:none; } 
	  .proMain .proLeft{display: block;}
	  .proLeft .proPic{flex-basis: 100%; overflow: hidden; margin-right: 0;}
	  .bigPic .swiper-slide .img{width: 100%; height: 100%;}
	  .detialTit::after{display: none;}
	  .relativePbox .proLi{width: calc(100% / 2); padding: 15px;}
	  .relativePbox .proLi .proLink .proTitle{padding: 0; margin-top: 5px;}
	}