@charset "utf-8";
/***********************************************************
	Filename: page.css
	Note	: 内页CSS样式
	Version : szphp v2.0.0
	Author  : 优尚设计 <547829810@qq.com>
	Web		: www.szphp.cn
	Update  : 2021.05.09
***********************************************************/

/*banner*/
.banner{position:relative;top:0;left:0;z-index:96;overflow:hidden;width:100%;height:600px;background-position:50%;background-size:cover;background-repeat:no-repeat}
.banner .overlay-banner{position:absolute;top:0;left:0;z-index:98;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.5) 1%,rgba(0,0,0,.15) 90%)}
.banner .overlay-video-list{position:absolute;top:0;left:0;z-index:98;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.95) 1%,rgba(0,0,0,.9) 100%)}
.banner .overlay-video-content{position:absolute;top:0;left:0;z-index:98;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.95) 1%,rgba(0,0,0,.6) 100%)}
.banner .mask{position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;background:url(../images/mask.png) repeat}
.banner .title{position:absolute;bottom:80px;z-index:100;width:100%;color:rgba(255,255,255,.95)}
.banner .title h1{letter-spacing:.1rem}
.banner .list-title{position:absolute;top:180px;z-index:100;width:100%;color:rgba(255,255,255,.95);text-align:center}
.banner .list-title h1{margin-bottom:35px;padding-bottom:35px;border-bottom:1px solid #333;letter-spacing:.1rem}
.banner .list-title .desc{margin:0 auto;width:90%;font-weight:300}
.banner .list-title .desc p{margin-bottom:1rem}
@media screen and (max-width:1024px){
    .banner{height:600px}
}
@media screen and (max-width:960px){
    .banner{height:550px}
}
@media screen and (max-width:768px){
    .banner{height:500px}
    .banner .title{text-align:center}
}
@media screen and (max-width:576px){
    .banner{height:300px}
}
/*location*/
.location{position:absolute;bottom:15px;left:0;color:#ddd;z-index:99}
.location .iconfont{margin-right:5px;margin-left:5px;color:#ddd;vertical-align:middle;line-height:16px}
.location a{color:#ddd}
.location a:hover{color:#fff}

/* customer_banner 客户版栏目列表页banner*/
.customer_banner{position:relative;top:0;left:0;z-index:96;overflow:hidden;width:100%;height:600px;background-position:50%;background-size:cover;background-repeat:no-repeat}
.customer_banner .overlay{position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;background-image:linear-gradient(90deg,rgb(15 15 15 / 60%) 0,rgb(15 15 15 / 60%) 100%)}
.customer_banner .row{height:100%}
.customer_banner .title{position:relative;z-index:100;display:flex;width:100%;height:100%;color:#fff;align-items:center;justify-content:center}
@media screen and (max-width:1024px){
    .customer_banner{height:600px}
}
@media screen and (max-width:960px){
    .customer_banner{height:550px}
}
@media screen and (max-width:768px){
    .customer_banner{height:500px}
    .customer_banner .title img{max-width: 70%;}
}
@media screen and (max-width:576px){
    .customer_banner{height:300px}
}

/*内页框架*/
.wrapper{padding-top:100px;padding-bottom:100px;width:100%}
@media screen and (max-width:768px){
    .wrapper{padding-top:50px;padding-bottom:50px}
}
@media screen and (max-width:576px){
    .wrapper{padding-top:30px;padding-bottom:30px}
}

/*左侧分类*/
.wrapper .left{position:relative;width:100%;height:100%}
.wrapper .left .left-cate{position:relative;top:0;transition:all .3s ease 0s}
.wrapper .left .left-cate_fixed{position:fixed;top:100px;z-index:9999;transition:all .3s ease 0s}
@media screen and (max-width:768px){
    .wrapper .left{margin-bottom: 15px;}
    .wrapper .left .left-cate_fixed{position:relative}
}
/*分类样式*/
.left-cate .genrelist{margin:0;padding:0}
.left-cate .genrelist li{margin-bottom:15px;list-style:none}
.left-cate .genrelist li button{border:0;background:0 0}
.left-cate .genrelist li a,
.left-cate .genrelist li button{display:block;padding:2.5px 20px;width:120px;list-style:none;text-align: center;}
.left-cate .genrelist li a::after,
.left-cate .genrelist li button::after{display:block;margin:0 auto;width:50%;height:2px;background:linear-gradient(90deg,rgb(107 13 212 / 100%),rgb(1 192 179 / 100%));content:""}
.left-cate .genrelist .active a,
.left-cate .genrelist .active button,
.left-cate .genrelist li a:hover,
.left-cate .genrelist li button:hover{border-radius:50px;background:linear-gradient(90deg,rgb(107 13 212 / 100%),rgb(1 192 179 / 100%));color:#fff}
.left-cate .genrelist .active a::after,
.left-cate .genrelist .active button::after,
.left-cate .genrelist li a:hover::after,
.left-cate .genrelist li button:hover::after{width:0}
@media screen and (max-width:768px){
    .left-cate .genrelist{overflow:hidden;padding:0}
    .left-cate .genrelist li{float:left;margin:0 0 15px;width:calc(100% / 3)}
    .left-cate .genrelist li a,.left-cate .genrelist li button{display:block;margin:0 auto;padding:2.5px 20px;width:90%;border-radius:60px;background:#f5f5f5;color:#333;list-style:none}
    .left-cate .genrelist li a::after,.left-cate .genrelist li button::after{display:none}
}
/* 宽度过长时添加这个 */
.left-cate .methodology li a,
.left-cate .methodology li button{padding:2.5px 10px;width:150px}
@media screen and (max-width:768px){
    .left-cate .methodology li{width:calc(100% / 2)}
}

/*单页内容*/
.onepage{position:relative;display:none;height:max-content}
.onepage.active{display:block;height:max-content}
.onepage .content{width:100%}
.onepage .content img{max-width:100%}

/*影视作品栏目***********************************************************/
/*列表页*/
.works-list{width:100%}
.works-list ul{margin:0 -15px 0;padding:0}
.works-list li{overflow:hidden;margin-bottom:50px;padding-right:15px;padding-left:15px;list-style:none}
.works-list .poto{position:relative;overflow:hidden}
.works-list .poto img{width:100%;height:auto;transition:all .5s ease 0s}
.works-list .poto .play{position:absolute;top:50%;left:50%;z-index:11;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);transform:translate(-50%,-50%)}
.works-list .poto .play .iconfont{position:absolute;top:50%;left:55%;color:#333;font-size:15px;transition:all .5s ease 0s;transform:translate(-50%,-50%)}
.works-list .poto .play:after,.works-list .poto .play:before{position:absolute;top:50%;left:50%;z-index:10;border:0 solid rgba(255,255,255,0);border-radius:50%;content:"";transition:all .5s cubic-bezier(.215,.61,.355,1) 0s;transform:translate(-50%,-50%)}
.works-list .poto .play:before{width:25px;height:25px}
.works-list .poto .play:after{width:15px;height:15px}
.works-list .title{display:block;margin-top:1rem;color:#333;font-weight:700}
.works-list .note{display:block;margin-top:.5rem;color:#999;line-height:1.8}
.works-list a:hover img{transform:scale(1.08,1.08)}
.works-list a:hover .poto .play{width:60px;height:60px;background:rgba(255,255,255,.2)}
.works-list a:hover .poto .play .iconfont{z-index:15;color:#fff}
.works-list a:hover .poto .play:before{width:50px;height:50px;background:rgba(23,146,217,.2)}
.works-list a:hover .poto .play:after{width:40px;height:40px;background:rgba(95,84,160,.4)}
.works-list .more{display:block;margin:0 auto;width:150px;border:1px solid #ccc;color:#999;text-align:center;line-height:40px;transition:all .3s ease 0s}
.works-list .more:hover{border:1px solid #333;background:#fff;color:#333}
@media screen and (max-width:768px){
    .works-list{padding-bottom:25px}
    .works-list ul{margin:0 -5px 0;padding:0}
    .works-list li{margin-bottom:25px;padding-right:5px;padding-left:5px}
    .works-list .title{margin-top:.5rem;line-height:1.4}
    .works-list .note{line-height:1.3}
}
/*分页*/
.pages{margin:0;width:100%;text-align:center}
.pages a{display:inline-block;margin:0;padding:3px 20px;border:1px solid #ccc;background:#fff;color:#333;font-size:.8rem}
.pages a{float:none}
.pages .current,.pages a:hover{border:1px solid #666;color:#333}
@media screen and (max-width:576px){
    .pages a{margin:2.5px 1px;padding:2px 10px}
}
/*二级分类*/
.subcate{margin-top:-20px;margin-bottom:50px;text-align:center}
.subcate h2{display:inline-block;font-weight:500}
.subcate a{position:relative;display:inline-block;padding:0 15px;line-height:1;font-weight:500}
.subcate a::after{position:absolute;top:0;right:0;width:1px;height:100%;background-image:linear-gradient(135deg,#6b0dd4 0,#01c0b3 100%);content:""}
.subcate a:last-child::after{display:none}
.subcate .active,.subcate a:hover{color:#6b0dd4}
@media screen and (max-width:768px){
    .subcate{margin-top:0;margin-bottom:45px}
    .subcate a{padding:0 10px}
}

/* 客户名称列表页 */
.customer_name_content{margin-bottom:25px;line-height: 1.5;}

/*视频详细页*/
.video-box{position:relative;z-index:999;margin-top:-350px}
.video-box video{outline:0 dotted}
.video-text{background:#fff;box-shadow:0 1px 10px 0 rgba(51,51,51,.08)}
.desc-box{padding:25px 25px 35px}
.desc-box span{display:block}
.desc-box .title{font-weight:normal}
.desc-box .desc{margin-top:15px}
.desc-box .desc p{margin-bottom:.5rem}
.desc-box .parameter em{margin-right:25px;color:#666;font-style:normal}
.video-text .link{display:flex;height:100%;align-items:center;justify-content:center}
.video-text .link a{display:inline-block;padding:0 2rem;height:45px;border:1px solid #333;background:#fafafa;color:#333;text-align:center;font-size:15px;line-height:45px}
.video-text .link a:hover{border:1px solid #000;background:#fff;color:#000}
@media screen and (max-width:768px){
    .video-box{margin-top:-300px}
}
@media screen and (max-width:576px){
    .video-box{margin-top:-150px}
    .video-text{box-shadow:0 1px 5px 0 rgba(51,51,51,.1)}
    .video-text .link{justify-content:left}
    .video-text .link a{margin-bottom:15px;margin-left:25px;padding:0 1rem;height:40px;font-size:14px;line-height:40px}
}
/*平面设计+展会策划 详细页修改*/
.plane img{width:100%;height: auto;}
.plane .video-text{box-shadow:none}
.plane .desc-box{padding:0}
.plane .desc-box .title{text-align: center;margin-top: 10px;}

/*详细页相关视频列表*/
.works-content{padding-bottom:100px;width:100%}
.works-content .catename{margin:0;padding:100px 0 30px;width:100%;color:#555}
.works-content .catename .iconfont{margin-left:-5px;font-size:22px}
.works-content ul{margin:0 -10px 15px;padding:0}
.works-content li{position:relative;overflow:hidden;margin-bottom:20px;padding-right:10px;padding-left:10px;list-style:none}
.works-content .poto{position:relative;overflow:hidden}
.works-content .poto img{width:100%;height:auto;transition:all .5s ease 0s}
.works-content .poto .play{position:absolute;top:40%;left:50%;z-index:11;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);transform:translate(-50%,-50%)}
.works-content .poto .play .iconfont{position:absolute;top:50%;left:55%;color:#333;font-size:15px;transition:all .5s ease 0s;transform:translate(-50%,-50%)}
.works-content .poto .play:after,.works-content .poto .play:before{position:absolute;top:50%;left:50%;z-index:10;border:0 solid rgba(255,255,255,0);border-radius:50%;content:"";transition:all .5s cubic-bezier(.215,.61,.355,1) 0s;transform:translate(-50%,-50%)}
.works-content .poto .play:before{width:25px;height:25px}
.works-content .poto .play:after{width:15px;height:15px}
.works-content .poto .mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0,0,0,.4);transition:all .3s ease 0s}
.works-content .title{position:absolute;top:60%;left:0;z-index:11;display:block;margin-top:.5rem;padding:0 15px;width:100%;color:#fff;text-align:center;font-weight:normal;line-height:1.4;transition:all .3s ease 0s}
.works-content a:hover img{transform:scale(1.08,1.08)}
.works-content a:hover .poto .play{width:60px;height:60px;background:rgba(255,255,255,.2)}
.works-content a:hover .poto .play .iconfont{z-index:15;color:#fff}
.works-content a:hover .poto .play:before{width:50px;height:50px;background:rgba(23,146,217,.2)}
.works-content a:hover .poto .play:after{width:40px;height:40px;background:rgba(95,84,160,.4)}
.works-content a:hover .poto .mask{background:rgba(0,0,0,0)}
.works-content a:hover .title{margin-top:1rem;color:#b6dfe3}
.works-content .current .poto .play{background:#b6dfe3}
.works-content .current .poto .play .iconfont{color:#fff}
.works-content .current .mask{background:rgba(0,0,0,0)}
.works-content .current .title{color:#b6dfe3}
.works-content .more{display:block;margin:0 auto;width:150px;border:1px solid #ccc;background-color:#fff;color:#999;text-align:center;line-height:50px;transition:all .3s ease 0s}
.works-content .more .fa{margin-right: 10px;}
.works-content .more:hover{width:180px;border:1px solid #333;background:#fff;color:#333}
@media screen and (max-width:576px){
    .works-content{padding-bottom:50px}
    .works-content .catename{padding:30px 0 30px}
    .works-content .catename .iconfont{font-size:18px}
    .works-content li{margin-bottom:15px}
    .works-content .title{text-align:center}
    .works-content .more{width:100%}
}