.home-banner {background:url(../images/video/bannerbg.jpg) no-repeat center center;height:400px;width:100%;overflow:hidden;position:relative}
.video-banner {height:400px;overflow:hidden;width:100%;position:absolute;left:0;top:0;z-index:1}
.video-banner video {width:1930px;min-height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
.video-mask-one {position:absolute;left:0;z-index:3;top:-1px}
.video-mask-two {position:absolute;right:0;z-index:3;bottom:0}
.home-banner .slogan {position:absolute;z-index:99;width:100%;top:70px;text-align:center;mix-blend-mode:overlay;font-size:75px;color:#fff;text-rendering:optimizeLegibility}
.home-banner .description {position:absolute;z-index:99;width:100%;top:205px;text-align:center;font-size:20px;color:#fff}
/* .home-banner .begin {width:175px;height:48px;line-height:48px;text-align:center;font-size:18px;background-color:#3191f5;color:#fff;border-radius:23px;position:absolute;z-index:99;left:50%;bottom:90px;margin-left:-100px} */

.home-banner .btn {position:relative;width:186px;height:60px;border-radius:30px;margin:32px auto 0;padding:6px;position:absolute;z-index:99;left:50%;bottom:90px;margin-left:-93px}
.home-banner .btn a {display:block;color:#fff;text-align:center;font-size:18px;border-radius:24px;height:48px;line-height:48px;background:#3191f5;position:absolute;top:6px;left:6px;width:174px}
.home-banner .btn ins {position:absolute;display:block;border-radius:30px;height:60px;width:186px;left:0;top:0;background:rgba(255,255,255,.4)}
.home-banner .btn ins {transform:scale(1.2);opacity:.2;animation:zdjpop 1s infinite}
@keyframes zdjpop {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        opacity: .2;
        transform: scale(1.3)
    }
}


.home-templates {margin-top:50px;margin-bottom:65px}
.home-templates .template-type {overflow:hidden;text-align:center;font-size:25px}
.home-templates .template-type h3 {margin-bottom:25px}
.home-templates .template-type a {display:inline-block;font-size:16px;padding:10px 20px;border-radius: 40px;color: #666;background-color: #f5f5f5;margin: 0 5px;}
.home-templates .home-templates-bg {padding:30px 0 0}
.home-templates .morebtn{margin-top:40px;}
.home-templates .morebtn a {display:block;width:239px;height:43px;line-height:43px;background-color:#3191f5;border-radius:38px;color:#fff;text-align:center;font-size:16px;box-shadow:4px 3px 16px rgba(0,0,0,.12);margin:0 auto}
.home-template-type a.cur {color:#fff;background-color: #3191f5;}


/* 制作步骤 */
.indprocess {background:#fff;padding:30px 0 100px}
.indprocess .title {text-align:center}
.indprocess .title b {color:#333;font-size:30px;display:block;font-weight:700}
.indprocess .title p {color:#999;font-size:16px;display:block;padding-top:12px}
.indprocess ul {padding-top:65px;text-align:center;margin:0 auto; display: flex; justify-content: center;}
.indprocess ul li {display:block;float:left}
.indprocess ul li div{width: 135px;height: 120px;}
.indprocess ul li .pic1{background: url(../images/video/lcpic1.png) no-repeat center center;background-size: 100% auto;}
.indprocess ul li .pic2{background: url(../images/video/lcpic2.png) no-repeat center center;background-size: 100% auto;}
.indprocess ul li .pic3{background: url(../images/video/lcpic3.png) no-repeat center center;background-size: 100% auto;}
.indprocess ul li ins {width: 100px;height: 15px;display:block;margin:55px 100px;background: url(../images/video/arrows.png) no-repeat center center;background-size: 100% auto;}
.indprocess ul li em {display:block;padding-top:25px;font-size: 20px;}

.indprocess .morebtn a {display:block;width:239px;height:43px;line-height:43px;background-color:#3191f5;border-radius:38px;color:#fff;text-align:center;font-size:16px;box-shadow:4px 3px 16px rgba(0,0,0,.12);margin:70px auto 0}
.morebtn a:hover{opacity: 0.8;}




.swiper {margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;position:relative;padding-right: 25px;}
.swiper-vertical>.swiper-wrapper {flex-direction:column}
.swiper-wrapper {position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}
.swiper-slide {flex-shrink:0;width:100%;height:auto;position:relative;transition-property:transform}
.swiper-button-next,.swiper-button-prev {width:55px;height:55px;position:absolute;top:50%;z-index:10;cursor:pointer;opacity:1;transition:opacity .2s ease-in;background-color:#fff;box-shadow:0 5px 15px rgba(0,0,0,.15);border-radius:50%;line-height:55px;font-size:18px;text-align:center;color:#53585c;outline:none}
.swiper-button-next i,.swiper-button-prev i {font-size:26px;}
.swiper-button-next:hover,.swiper-button-prev:hover {color:#3191f5;}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {display:none;}
.swiper-button-next {right:0;transform:translate(25%,-50%)}
.swiper-button-prev {left:0;transform:translate(-50%,-50%)}
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
    bottom: 10px;
    left: 0;
    width: 100%;
}
.swiper-pagination-clickable .swiper-pagination-bullet{ cursor: pointer;width: 8px;height: 8px;display: inline-block;margin:0 5px;border-radius: 50%;background-color: #fff;}
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 25px;border-radius: 4px;}

.vipcont .wrap{position: relative;}
.vipcont .title {text-align:center}
.vipcont .title b {color:#333;font-size:30px;display:block;font-weight:700}
.vipcont .title p {color:#999;font-size:16px;display:block;padding-top:12px}
.vipcont .swiper-slide{width: 360px;padding: 100px 0 50px;}
.vipcont .mmt{padding:78px 30px 0;width:358px;box-shadow:0 0 20px #ddd;height:200px;margin:0 20px;background:#fff url(../images/video/szico.png) no-repeat 30px 30px;position:relative;box-sizing:border-box}
.vipcont .mmt .user2{width:100px;position:absolute;top:-30px;right:128px;text-align:center}
.vipcont .mmt .user2 i{display:block;width:60px;margin:0 auto}
.vipcont .mmt .user2 img{display:block;width:100%;border-radius:50%}
.vipcont .mmt .user2 em{display:block;font-size:14px;color:#333;padding-top:12px}
.vipcont .mmt p{display:block;font-size:14px;color:#333;line-height:20px;height:88px}
.vipcont .mmt span{display:block;text-align:right;margin-right:-10px;color:#ccc;font-size:14px}



/* 列表页 */
.page-top {background-image:linear-gradient(to right,#2b72ef,rgba(50,186,250,.9)),url(../images/video/01.jpg);height:305px;padding-top:60px;color:#fff}
.page-top h3 {text-align:center;font-size:38px;margin-bottom:10px}
.page-top .desc {text-align:center;font-size:14px;margin-bottom:36px;opacity:.7}
.page-top .search {width:600px;height:52px;background-color:#fff;border-radius:5px;margin:0 auto 12px;display: flex;overflow: hidden;}
.page-top .search .skw {padding:10px 20px;border:none;box-shadow: 0 0 0px 999px rgba(255, 255, 255, 1) inset !important;flex: 1;font-size: 14px;}
.page-top .search .sbtn {background:url(../images/video/search666.png) no-repeat center center;background-size:28px;height:52px;width:80px;float:right;cursor:pointer;transition:all .1s linear;text-indent: -20000em;}
.page-top .search .sbtn:hover {background-size:35px}
.page-top .hot-kw {width:600px;margin:0 auto;height: 24px;line-height: 24px;   overflow: hidden;}
.page-top .hot-kw span {opacity:.5}
.page-top .hot-kw a {color:#fff;padding:0 2px 2px;margin:0 5px;transition:all .2s linear}
.page-top .hot-kw a:hover {border-bottom:1px solid #fff}

/* 列表分类筛选 */
.assortment {padding:5px 0 5px;color:#5c5c5c;font-size:14px;line-height:26px;background:#fff;}
.assortment li {padding:15px 0 0px;display:flex;}
.assortment li.buttonline {border-bottom:1px solid #e9e9e9;padding-bottom:15px;margin-bottom:10px;}
.assortment li.underline {border-top:1px solid #e9e9e9;}
.assortment li ins {display:block;float:left;width:48px;padding:5px 0;color:#898989;margin-top:7px;}
.assortment li span {display:block;float:left;flex:1;}
.assortment li span a,.assortment li .more_list {display:block;float:left;margin:8px 10px 0px 10px;height:34px;line-height:34px;color:rgba(0,0,0,0.65);padding:0 16px;min-width:60px;text-align:center;border-radius:5px;color:#555;cursor:pointer;background-color: #f1f1f1;}
.assortment li.buttonline span a {margin:5px 15px 5px 5px;}
.assortment li span a i.icon {margin-right:6px;vertical-align:-1px;font-size:19px;}
.assortment li .more_list {display:none;}
.assortment li.active span {height:auto;}
.assortment li .more_list i {transition:all 0.3s;transform:rotate(90deg);display:inline-block;}
.assortment li.active .more_list i {transform:rotate(-90deg);}
.assortment li span a.on,.assortment li span a:hover,.assortment li .more_list:hover,.assortment li.active .more_list {background-color:#3191f5;color:#fff;}
.screening {font-size:14px;margin-top:20px;}
.screening .pxcomt {padding:0 20px 0 0px;}
.screening .pxcomt .color {display:inline-block;}
.screening .pxcomt span a {display:inline-block;text-align:center;font-size:14px;color:#898989;margin-right:30px;}
.screening .pxcomt span a:hover,.screening .pxcomt span a.on {color:#17A1FF;}
.screening .pxcomt ins {color:#898989;margin-right: 10px;min-width: 48px;}


.screening .selectCont {
    margin-right: 30px;padding-bottom: 20px;
    color: #898989;
    position: relative;
    cursor: pointer;
    display: flex;align-items: center;
}

.screening .selectOn{border: 1px solid #e4e4e4;border-radius: 5px; min-width: 130px;height: 34px; position: relative;padding:0 30px 0 15px;display: flex;align-items: center;color: #555;}
.screening .selectOn:hover{border-color: #3191f5;}
.screening .selectOn:hover::after{ border-top-color: #3191f5;}
.screening .selectOn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #888;
    position: absolute;
    right: 10px;
    top: 12px;
}
.screening .selectList{    border: 1px solid #E4E7ED;
    position: absolute;
    top: 44px;
    right: 0;    
    height: auto;
    padding:5px 0;
    min-width: 130px;
    background: #fff;border-radius: 5px;
    box-shadow: 0 0 16px 0 rgb(0 0 0 / 16%);
    z-index: 10;
    display: none;
}

.screening .selectList::before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom:6px solid #fff;
    position: absolute;top: -5px;
    right: 55px;

}

.screening .selectList a{display: flex;justify-content: center;height: 34px;padding:0 30px;line-height: 34px;}
.screening .selectList a.on{background-color: #F5F7FA;color: #3191f5;}

.screening .selectCont:hover .selectList{display: block;}
.screening .scolor .selectList::before{right: 30px;}
.screening .scolor .selectOn{min-width: 85px;}
.screening .scolor .allColor { width: 22px; height: 22px;  background: url(../images/list/color.jpg) no-repeat left center; position: relative;}
.screening .scolor .colorList a i { display: block; width: 100%; height: 100%;}
.screening .scolor .colorList {width:150px;height:auto;padding:10px;background:#fff;box-shadow:0 0 16px 0 rgb(0 0 0 / 16%);z-index:10;}
.screening .scolor .colorList a {display:inline-block;margin:2px;padding:0;width:24px;height:24px;border:1px solid #eee;border-radius:4px;background-position:50%;background-size:100%;background-repeat:no-repeat;cursor:pointer;font-size:0;}
.screening .scolor .allColor {background:url(../images/list/color.jpg) no-repeat;background-size:22px auto;}
.screening .scolor .pink {background:#FFB6C1}
.screening .scolor .blakgold {background-image:linear-gradient(to right,#FFD700,#9b7300,#ffdd00);}
.screening .scolor .Silver {background:#E6E8FA}
.screening .scolor .color {background-image:linear-gradient(to right,#ff0000,#ffa500,#ffff00,#00ff00,#007fff,#0000ff,#8b00ff)}
.screening .scolor .blue {background:#0000ff}
.screening .scolor .Beige {background:#f5f5dc}
.screening .scolor .red {background:#ff0000}
.screening .scolor .Inkcolor {background:#6f717d}
.screening .scolor .block {background:#000000}
.screening .scolor .blockwhite {background-image:linear-gradient(to right,#000000,#ffffff)}
.screening .scolor .white {background:#ffffff;border:1px solid #eee;}
.screening .scolor .green {background:#3CB371}
.screening .scolor .yellow {background:#ffff00}
.screening .scolor .purple {background:#9933FA}
.screening .scolor .brown {background:#802A2A}
.screening .scolor .gray {background:#CCCCCC}
.screening .scolor .orange {background:#FFA500}
.screening .scolor:hover .colorList {display:block;}



/* 分页 */
.hb_page {margin:25px 0 30px;clear:both;}
.total {margin-left:10px;font-size:14px;color:#888;float:left}
.hb_page {text-align:center;}
.hb_page a {display:inline-block;color:#666;height:50px;line-height:50px;padding:0 20px !important;width:auto;background:#f4f5f9;margin:0 5px;border-radius:4px;vertical-align:middle;font-size:16px;border-color:#f4f5f9;}
.hb_page a.prevPage,.hb_page a.nextPage {color:#666;}
.hb_page a.cur,.hb_page a:hover {color:#fff;background-color:#3191f5;border-radius:4px;vertical-align:middle;border:1px solid #f4f5f9;}
.hb_page .page a.top.cur::before,.page a.top::before {border:0;}
.page a.next::before,.page a.top::before {display:none;}
.page a.bottom,.page a.top,.page a.next {border:1px solid #f4f5f9;}
.page a.num,.page a.bottom,.page a.next,.page a.prev,.page a.top {width:auto;border-radius:5px;margin:0 5px 5px;}
.hb_page .disabled {display:inline-block;height:36px;line-height:36px;padding:0 15px;margin:0 5px;color:#bfbfbf;background:#f2f2f2;border:1px solid #bfbfbf;border-radius:4px;vertical-align:middle;}
.page-jumper {display:inline-block;}
.page-jumper > span {margin:0 10px;padding:11px 0;text-align:center;font-size:16px;color:#666;line-height:1;}
.page-jumper > span:first-of-type {margin-left:20px;}
.page-jumper .page-number {display:inline-block;width:60px;height:50px;text-align:center;font-size:16px;font-weight:400;color:#333;line-height:50px;border-radius:4px;background:#f4f5f9;border:0;outline:0;}
.page-jumper .page-jump-btn {display:inline-block;width:70px;height:50px;text-align:center;font-size:16px;font-weight:400;color:#fff;line-height:50px;background-color:#3191f5;border-radius:4px;outline:0;cursor:pointer;}


.templates-box .item{width: calc(94% / 6);}
.templates-box .item .thumb{
    height: auto;
}
.templates-box .item .thumb video{height: 100%;background-color: #f1f1f1;}
.templates-box .item{margin-right: 1% !important;}
/* .templates-box.item:nth-child(5n){margin-right: 0;} */
.templates-box.item:nth-child(6n){margin-right: 0;}
@media screen and (min-width:2100px) {	
    .templates-box .item:nth-child(5n){margin-right: 18px;}
}

@media screen and (max-width: 1900px) {	
    .templates-box .item:nth-child(5n){margin-right: 18px;}
}
@media screen and (max-width: 1620px) {	
    .templates-box .item {width: 23.5%;}
    .templates-box .item:nth-child(4n){margin-right: 0;}
    .templates-box .item:nth-child(5n){margin-right: 18px;}
}

@media screen and (max-width: 1435px) {	
    .templates-box .item {width:30%;}
    .templates-box .item:nth-child(4n){margin-right: 18px;}
    .templates-box .item:nth-child(5n){margin-right: 18px;}
}