@charset "utf-8";
.j_tab{ display:table; width:100%; height:100%;}
.j_tab_cel{ display:table-cell; vertical-align:middle; width:100%; height:100%;}
.pad_top{ padding-top:80px;}
.pad_bot{ padding-bottom:80px;}
 .vertical {
        writing-mode: vertical-rl; /* 从右到左 */
        text-orientation: upright; /* 保持正常显示 */}
		
/*===========================PC6大系列=============================*/
#s_pro{ width: 100%; overflow: hidden;}
#s_pro ul{}
#s_pro ul li{ width: 7.6%; float: left; height: 500px; transition: .5s; overflow: hidden;}
#s_pro ul li.on{ width:31%;}
#s_pro ul li a{ display: block; padding-left: 1px;}
#s_pro ul li .box{height:500px;width:500px; color: #fff;position: relative;transition: .5s;background: #000}
#s_pro ul li .txt:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.5); transition: .5s; z-index: -1;}
#s_pro ul li .txt{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; transition: .5s; z-index: 1; }
#s_pro ul li .tt{}
#s_pro ul li .con h3{ font-size: 20px; line-height: 30px;transition: .3s;  }
#s_pro ul li .con h4{ font-size: 20px; line-height: 30px; opacity: 0;transition: .5s; height: 0; }
#s_pro ul li .con h3 span{ display: block;}
#s_pro ul li .con{ color: rgba(255,255,255,.8); transition: .5s;padding-bottom:15px}
#s_pro ul li .con p{ font-size: 15px; line-height: 25px; height: 0; margin-top: 10px; width: 320px; opacity: 0; overflow-: hidden; transition: .5s;  margin-bottom: 20px;}
#s_pro ul li .btn_arrow{ }
.btn_arrow{ display: block; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #fff; background: url(../image/btn_arrow.png) center no-repeat;}
#s_pro ul li.on .box .txt{  height: 100px; transition-delay: .4s; }
#s_pro ul li.on .box .txt=={ width: 380px; height: 180px; transition-delay: .4s; }
#s_pro ul li.on .box .txt:before{ background:rgba(30,140,218,.95); }
#s_pro ul li.on .box .con p{ opacity: 1; padding-bottom:15px }
#s_pro ul li.on .box .con h3 { opacity: 0; height:0; padding-top:15px }
#s_pro ul li.on .box .con h4 { opacity: 1; height: 20px;}


/*===========================手机端=============================*/

@media (max-width: 768px)

{
.pad_top{ padding-top:50px;}
.pad_bot{ padding-bottom:50px;} 

#s_pro ul li .con h3{ font-size: 16px; line-height: 30px;transition: .3s; height: 60px; }
#s_pro ul li .con h4{ font-size: 14px; line-height: 30px; opacity: 0;transition: .5s; height: 0; }
#s_pro ul li .con h3 span{ display: block;}

	
#s_pro ul li{ width:50% !important; float: left; height: 200px; transition: .5s; overflow: hidden;}
#s_pro ul li a{ display: block; padding-left: 0;}
#s_pro ul li .box{height: 200px; background-size: cover !important;}
#s_pro ul li .txt{ width: 100% !important; height: 100% !important; }
#s_pro ul li .box .txt{ width: 21.25rem; height: 140px; transition-delay: .4s; }
#s_pro ul li .box .txt:before{background: rgba(0,0,0,.7) !important;}
#s_pro ul li .box .con p{ opacity: 1; height:20px; width: auto;font-size: 10px;}
#s_pro ul li .btn_arrow{ }
.btn_arrow{ display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #fff; background: url(../image/btn_arrow.png) center no-repeat;}
#s_pro ul li .box .con h3 { opacity: 0; height:10px; }
#s_pro ul li .box .con h4 { opacity: 1; height: 20px;font-size: 16px;}