/*$$
{"color":[{"val":"#666e80","title":"榛樿鍒嗙被鏍囬鏂囧瓧棰滆壊"},{"val":"#fff","title":"榧犳爣婊戣繃鍒嗙被鏍囬鏂囧瓧棰滆壊"},{"val":"#e0e2e5","title":"鍏抽敭璇嶆枃瀛楅鑹�"},{"val":"#999999","title":"鏍忕洰浣嶇疆鏂囧瓧棰滆壊"},{"val":"#26334c","title":"鏍忕洰鏍囬鏂囧瓧棰滆壊"}],"background":[{"val":"#fff","title":"浜у搧鍒嗙被鑳屾櫙棰滆壊"},{"val":"#6666eb","title":"榧犳爣婊戣繃浜у搧鍒嗙被鑳屾櫙/鍒嗛〉閫変腑"}],"border":[{"val":"#e6e6e6 ","title":"鏍忕洰鏍囬杈规"},{"val":"#e6e6e6","title":"浜у搧杈规"},{"val":"#dcdcdc","title":"鏌ョ湅鏇村鎸夐挳杈规"}]}
$$*/
#proList_xxx{
width: 1200px;
margin: 0 auto;
padding-bottom: 80px;
}
#proList_xxx .prBox{
height: 110px;
position: relative;
}
#proList_xxx .prClass{
position: absolute;
height: 100px;
width: 100%;
background: #fff;
box-shadow: 0 0 15px 10px rgba(0,0,0,.1);
bottom:20px;
z-index:100;
}
#proList_xxx .classList{
width: calc(100% - 200px);
margin: 0 auto;
height: 100%;
overflow: hidden;
position: relative;
}
#proList_xxx .classList .sBox{
height: 100%;
display: block;
float: left;
width:100%;
}
#proList_xxx .classList .active,
#proList_xxx .classList .swiper-slide:hover{
background:rgba(1, 146, 211, 1);
}
#proList_xxx .classList .sBox .title{
width: 100%;
display: block;
text-align: center;
line-height: 100px;
height: 100px;
color: #666e80;
font-size: 14px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
padding: 0 10px;
}
#proList_xxx .classList .active .title,
#proList_xxx .classList .swiper-slide:hover .title{
color: #fff;
}
#proList_xxx .btnPrev{
background: url(./../../../static/images/CN00002_03.png) no-repeat center center;
background-size: 15px 25px;
position: absolute;
left:0;
top:0;
width: 100px;
height: 100%;
cursor: pointer;
}
#proList_xxx .btnNext{
background: url(./../../../static/images/CN00002_04.png) no-repeat center center;
background-size: 15px 25px;
position: absolute;
right:0;
top:0;
width: 100px;
height: 100%;
cursor: pointer;
}
#proList_xxx .prKey{
width: 100%;
height: 60px;
background: #e0e2e5;
line-height: 60px;
font-size: 14px;
display: none;
}
#proList_xxx .prKey a{
color: #666e80;
margin: 0 20px;
}
#proList_xxx .className{
height: 60px;
line-height: 60px;
border-bottom: #e6e6e6 solid 1px;
}
#proList_xxx .className .title-1{
float: left;
font-size: 20px;
color: #26334c;
position: relative;
display: inline-block;
font-weight: bold;
}
#proList_xxx .className .title-1::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: rgba(1, 146, 211, 1);
content: '';
}
#proList_xxx .className .title-2{
color: #999999;
float: right;
font-size: 14px;
}
#proList_xxx .className .title-2 a{
color: #999999;
}
#proList_xxx .proliCon{
width: 100%;
}
#proList_xxx .proliCon .itemLi{
width: 25%;
float: left;
padding: 0 5px;
margin: 25px 0;
}
#proList_xxx .proliCon .itemLi i{
width: 100%;
height: 200px;
float: left;
}
#proList_xxx .proliCon .itemLi i img{
width: 100%;
height: 100%;
object-fit: cover;
}
#proList_xxx .proliCon .itemLi .titCon{
border:#e6e6e6 solid 1px;
border-top: none;
width: 100%;
float: left;
}
#proList_xxx .proliCon .itemLi .titCon:hover{
background: rgba(1, 146, 211, 1);
}
#proList_xxx .proliCon .itemLi .name{
width: 100%;
display: block;
color: #26334c;
font-size: 20px;
line-height: 60px;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
padding: 0 10px;
}
#proList_xxx .proliCon .itemLi .titCon:hover .name{
color: #fff;
}
#proList_xxx .proliCon .itemLi .btnMore{
width: 160px;
height: 30px;
border:#dcdcdc 1px solid;
line-height: 30px;
background: url(./../../../static/images/CN00002_01.png) no-repeat 100px center;
background-size: 26px 14px;
padding-right: 40px;
text-align: center;
display: block;
margin: 0 auto;
color: #999999;
margin-bottom: 20px;
}
#proList_xxx .proliCon .itemLi .titCon:hover .btnMore{
border: #fff 1px solid;
color: #fff;
background: url(./../../../static/images/CN00002_02.png) no-repeat 100px center;
background-size: 26px 14px;
}
.pages{
width: 100%;
margin: 20px auto;
height: 30px;
line-height: 30px;
}
.pages .pagination{
text-align: center;
font-size: 16px;
font-weight: bold;
}
.pages .pagination li{
color: #bfbfbf;
padding: 0 5px;
line-height: 30px;
display: inline-block;
margin: 0 5px;
}
.pages .pagination li a{
color: #bfbfbf;
}
.pages .pagination li.active{
background: rgba(1, 146, 211, 1);
color: #fff;
border-radius: 50%;
height: 30px;
padding: 0 10px;
}
#proList_xxx .content{
width: 100%;
}
#proList_xxx .content .title{
font-size: 24px;
color: #26334c;
width: 100%;
text-align: center;
line-height: 100px;
word-wrap: break-word;
display: block;
border-bottom: #dcdcdc solid 2px;
}
#proList_xxx .content .cont{
width: 100%;
font-size: 14px;
color: #666e80;
line-height: 30px;
padding: 40px 0;
}
#proList_xxx .content .cont p{
width: 100%;
margin: 5px 0;
}
#proList_xxx .content .cont p img{
max-width: 100%;
width: auto;
margin: 0 auto;
}
@media screen and (max-width:1200px) {
#proList_xxx{
width: 96%;
}
}
@media screen and (max-width:992px){
#proList_xxx .proliCon .itemLi{
width:33.3%;
margin: 15px 0;
}
}
@media screen and (max-width:767px){
#proList_xxx{
width: 96%;
padding-bottom: 20px;
}
#proList_xxx .className .title-2{
width: 100%;
}
#proList_xxx .proliCon .itemLi{
width:50%;
margin: 15px 0;
}
#proList_xxx .classList{
display: block;
width: calc(100% - 100px);
}
#proList_xxx .classList .sBox{
height: 100%;
}
#proList_xxx .btnPrev,
#proList_xxx .btnNext{
width: 50px;
}
#proList_xxx .prKey a{
margin: 0 5px;
}
#proList_xxx .prBox{
height: 70px;
}
#proList_xxx .classList .sBox .title{
line-height: 60px;
height: 60px;
}
#proList_xxx .prClass{
bottom: 45px;
height: 60px;
}
#proList_xxx .className{
line-height: 50px;
height: 100px;
}
#proList_xxx .content .title{
font-size: 20px;
line-height: 40px;
padding: 10px;
}
#proList_xxx .content .cont{
line-height: 24px;
}
}