.play-btn{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);cursor:pointer;z-index:1}
.dowebok{height:162px}
.dowebok ul{display: inline-block; width: auto; max-width: none;background-color: rgba(0, 0, 0, .2);}
.dowebok li{font-size:24px;color:rgba(255,255,255,.3);line-height:54px;padding: 0 28px;position:relative}
.dowebok li a{display: inline-block;color:rgba(255,255,255,.3);-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;}
.dowebok li .icon{position: absolute; left: -24px; top: 50%; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(221, 2, 12, .5); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%); opacity: 0;
filter: alpha(opacity=0);-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;}
.dowebok li .icon:after{content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background-color: #DD020C; -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.dowebok li a:hover{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);color: #dd020c}
.dowebok li a:hover .icon{opacity: 1;
filter: alpha(opacity=100);}
.quyi-box{padding:128px 0}
.quyi-box h3{font-size:36px;color:#2b2b2b;line-height:1.5em;text-align:center;margin-bottom:50px}
.quyi-list{margin-left:-2%}
.quyi-list li{float:left;width:31.3%;margin-left:2%;margin-bottom:36px;box-shadow:0 5px 25px rgba(0,0,0,.1);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.quyi-list li .pic{display:block;display:block;width:100%;height:0;overflow:hidden;position:relative;padding-top:50.4%}
.quyi-list li .pic img{position:absolute;left:0;top:0;width:100%;height:100%;transition:all .3s ease-out;-webkit-transition:all .3s esae-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out}
.quyi-list li .pic::after{display: none;content:'';width:70px;height:70px;background:url(../images/play.png) no-repeat;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-background-size:100%;background-size:100%}
.quyi-list li .info{background:#fff;padding:22px 30px 44px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.quyi-list li .info .tit{display:block;font-size:20px;color:#2b2b2b;line-height:30px;height:60px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.quyi-list li .info .date{display:block;font-size:12px;color:#999;line-height:24px;margin-bottom:10px;padding-left:20px;background:url(../images/date-icon.png) no-repeat left center}
.quyi-list li:hover{box-shadow:0 10px 35px rgba(0,0,0,.2)}
.quyi-list li:hover .pic img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
.quyi-list li:hover .tit{color:#c80000}
.quyi-list li:hover .info{background: url(../images/wxxs-bg.jpg) center center no-repeat; -webkit-background-size: cover;
background-size: cover;}
@media only screen and (max-width:1279px){
.quyi-box{padding:120px 0 80px}
.play-btn{width:50px;height:50px}
}
@media only screen and (max-width:959px){
.quyi-box{padding:60px 0 40px}
.quyi-list{margin-left: 0;}
.quyi-list li{width:100%;margin-left: 0;}
.quyi-list li .info{padding:15px 20px 25px}
.quyi-list li .pic::after{width:40px;height:40px}
.dowebok li{padding-left:20px;font-size:14px}
.dowebok li .icon{left: -12px; width: 12px; height: 12px}
.dowebok li .icon:after{width: 4px; height: 4px}
}
@media only screen and (max-width:767px){
.quyi-box h3{font-size:28px}
.quyi-list li .info{padding:10px 10px 15px}
.quyi-list li .info .date{margin-bottom:0}
.quyi-list li .info .tit{font-size:16px;line-height:26px;height:52px}
.quyi-list li .info p{margin-bottom:0}
}