.album{background:#f5f5f7;}

.album .left{float: left;width: 350px;box-sizing: border-box;background: #ebecf0;padding: 27px 0 48px;}

.album .left .logo{display: block;width: 222px;margin: 0 auto 64px;}

.album .left .logo img{display: block;width: 100%;}

.album .left .title{padding: 0 85px 0 35px;font-size: 28px;color: #191919;font-weight: bold;line-height: 38px;margin-bottom: 30px;}

.album .left .title .icon{display: block;float: left;width: 35px;height: 25px;background: url('../images/icon.png') no-repeat;margin: 5px 28px 0 0;}

.album .left .title .icon2{background-image: url('../images/video_icon.png');height: 38px;width: 40px;margin-top: 0;}

.album .left .title .arrow{display: block;float: right;width: 25px;height: 13px;background: url('../images/arrowb.png') no-repeat;margin-top: 13px;}

.album .left .list{padding: 0 35px 40px;}

.album .left .item{margin-bottom: 30px;}

.album .left .item .name{font-size: 22px;color: #000;line-height: 50px;background: #d7d8db;border-radius: 8px;box-sizing: border-box;padding: 0 43px 0 65px;cursor: pointer;}

.album .left .item .name i{display: block;float: right;width: 22px;height: 22px;background: url('../images/arrow_add.png') no-repeat;margin-top: 14px;}

.album .left .item-show .name i{background-position: 0 -22px;}

.album .left .item .erify{display: none;}

.album .left .item .erify a{display: block;font-size: 18px;color: #666;line-height: 50px;padding-left: 65px;}

.album .left .item .erify a:hover,

.album .left .item .erify a.on{background: #22ac9c;color: #fff;border-radius: 8px;}

.album .left .service h4{font-size: 24px;color: #22ac9c;font-weight: bold;line-height: 44px;position: relative;padding-bottom: 12px;border-bottom: 1px solid #ccc;;padding-left: 50px;}

.album .left .service h4::after{content: '';position: absolute;left: 0;bottom: -1px;background: #22ac9c;width: 50px;height: 1px;}

.album .left .service .main{padding: 10px 10px 0 50px;}

.album .left .service .tel{font-size: 18px;color: #666;line-height: 34px;margin-bottom: 20px;}

.album .left .service .share{margin-bottom: 25px;}

.album .left .service .share a{display: block;width: 42px;height: 42px;border:1px solid #373737;float: left;border-radius: 50%;margin-right: 30px;background: url('../images/share_icon.png') no-repeat;position: relative;}

.album .left .service .share a:last-child{background-position: 0 -42px;}

.album .left .service .share a:hover{background-color: #373737;background-position: -42px 0;}

.album .left .service .share a:last-child:hover{background-position: -42px -42px;}

.album .left .service .share a .erify{display: none;width: 100px;height: 100px;padding: 10px;position: absolute;left: 50%;margin-left: -60px;bottom:58px;box-shadow:0px 1px 5px #ccc;background: #fff;}

.album .left .service .share a .erify img{display: block;width: 100%;}

.album .left .service .share a .erify::after{border-top: 10px solid #fff;border-left: 10px solid transparent;border-right: 10px solid transparent;content: "";position: absolute;left: 50%;bottom: -10px;margin-left: -10px;}

.album .left .service .info{font-size: 15px;color: #999;line-height: 30px;}

.album .left .service .info a{color: #999;}

.m-header{display: none;}



.album .right{float: right;width: calc(100% - 350px);padding-bottom: 62px;overflow: hidden;}

.album .right .top-search{margin: 0 55px;padding: 44px 0 15px;/* border-bottom: 1px solid #22ac9c; */}

.album .right .top-search .main{float: left;width: 54%;}

.album .right .top-search .main .text{display: block;width: calc(100% - 150px);box-sizing: border-box;height: 50px;background: url('../images/search.png') no-repeat 20px center #fff;background-size:27px 27px;border: none;

box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);border-radius: 8px;float: left;padding: 0 20px 0 60px;font-size: 18px;color: #999;}

.album .right .top-search .main .btn{display: block;width: 140px;height: 50px;background: #22ac9c;border:none;font-size: 22px;color: #fff;border-radius: 8px;float: right;box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);}

.album .right .share{font-size: 18px;color: #22ac9c;line-height: 34px;margin: 16px 0 0 45px;display: none;}

.album .right .share i{display: block;width: 20px;height: 20px;background: url('../images/share.png') no-repeat;float: left;margin: 7px 12px 0 0;background-size: 100%;}

.album .right .total{font-size: 16px;color: #333;line-height: 34px;margin-top: 16px;}

.album .right .total span{font-size: 18px;color: #22ac9c;margin: 0 5px;}

.album .right .list{padding-top: 40px;}

.album .right .m-list{display: none;}

.album .right .list .step{position: relative;z-index: 0;margin-bottom: 50px;height: 435px;}

.album .right .list .step .box{padding: 0 25px;height: 388px;position: relative;z-index: 10;}

.album .right .list .step .box .item{float: left;width: 20%;position: relative;height: 380px;padding-top: 8px;}

.album .right .list .step .box .link{display: block;position: relative;}

.album .right .list .step .box .pic{margin: 0 25px;height: 380px;display: flex;justify-content:center;align-items:flex-end;}

.album .right .list .step .box .img{position: relative;border-radius: 4px;/*overflow: hidden;*/box-shadow: 0px 20px 40px 0px rgba(39, 46, 45, 0.3);}

.album .right .list .step .box .download{display: block;position: absolute;left: 20px;bottom: -30px;height: 16px;background: url('../images/download_h_icon.png') no-repeat;padding-left: 28px;font-size: 14px;line-height: 16px;color: #22ac9c;}



.thickness{position: absolute;width: 7px;right: -6px;top: 0;height: 100%;display: flex;align-items: center;}

.thickness div{width: 1px;position: relative;height: 100%;background: #B5B3B3;}

.thickness div:nth-child(1){height: calc(100% - 2px);background: #E3E2E2;}

.thickness div:nth-child(2){height: calc(100% - 4px);}

.thickness div:nth-child(3){height: calc(100% - 6px);background: #E3E2E2;}

.thickness div:nth-child(4){height: calc(100% - 8px);}

.thickness div:nth-child(5){height: calc(100% - 10px);background: #E3E2E2;}

.thickness div:nth-child(6){height: calc(100% - 12px);}



.album .right .list .step .box .img img{display: block;max-width: 100%;max-height: 380px;}

.album .right .list .step .box .name{position: absolute;left: 0;bottom: 0;width: 100%;height: 56px;font-size: 16px;color: #fff;line-height: 56px;padding: 0 45px 0 15px;box-sizing: border-box;background: rgba(0,0,0,0.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.album .right .list .step .box a:hover .name{color: #22ac9c;}

.album .right .list .step .bg{position: absolute;left: 0;bottom: 0;width: 100%;border-top: 2px solid #cacbcf;height: 90px;background: #fafafa;border-bottom: 7px solid #dbdcdf;box-shadow: 0px 18px 40px 0px rgba(77, 77, 77, 0.5);z-index: 5;}

.m-footer{display: none;}



/*视频列表*/

.video-list{padding: 60px 55px 10px;}

.video-list li{float: left;width: 23.2%;margin: 0 2.4% 50px 0;cursor: pointer;position: relative;}

.video-list li:nth-child(4n){margin-right: 0;}

.video-list li .pic{height: 190px;position: relative;overflow: hidden;}

.video-list li .link{display: block;}

.video-list li .imgBg{height: 190px;}

.video-list li .player{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../images/player_icon.png') no-repeat center center rgba(0, 0, 0, 0.3);z-index: 10;}

.video-list li .download{display: block;background: url('../images/download_h_icon.png') no-repeat left center;z-index: 20;padding-left: 26px;font-size: 14px;color: #22ac9c;line-height: 20px;margin-top: 10px;}

.video-list li .name{display: block; font-size: 16px;color: #333;line-height: 26px;height: 52px;overflow: hidden;margin-top: 10px;}

.video-list li .pic:hover .imgBg{transform:scale(1.1);-webkit-transform:scale(1.1); -moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);}

.video-list li .name:hover{color: #22ac9c;}

.video-list li .m-download{display: none;}





/*视频详情*/

.media-top{padding: ;background: #f5f5f7;height: 110px;padding: 0 60px;overflow: hidden;}

.media-top .logo{display: block;width: 222px;margin-top: 27px;float: left;}

.media-top .logo img{display: block;width: 100%;}

.media-top .top-search{float: right;width: calc(100% - 340px);padding-top: 37px;}

.media-top .top-search .main{float: left;width: 770px;}
.media-top .top-search .share{font-size: 18px;color: #22ac9c;line-height: 34px;margin: 8px 0 0 30px;cursor: pointer;}

.media-top .top-search .share i{display: block;width: 20px;height: 20px;background: url('../images/share.png') no-repeat;float: left;margin: 7px 12px 0 0;background-size: 100%;}


.media-top .top-search .main .text{display: block;width: calc(100% - 150px);box-sizing: border-box;height: 50px;background: url('../images/search.png') no-repeat 20px center #fff;background-size:27px 27px;border: none;

box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);border-radius: 8px;float: left;padding: 0 20px 0 60px;font-size: 18px;color: #999;}

.media-top .top-search .main .btn{display: block;width: 140px;height: 50px;background: #22ac9c;border:none;font-size: 22px;color: #fff;border-radius: 8px;float: right;box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);}

.media-top .top-search .backList{display: block;float: right;font-size: 16px;color: #22ac9c;line-height: 50px;}

.media-top .top-search .backList i{display: block;float: left;width: 20px;height: 16px;background: url('../images/backlist_icon.png') no-repeat;margin: 17px 10px 0 0;}

.media-main{padding: 60px 0;background:#1a1a1a;}

.media-main .main{width: 1400px;margin: 0 auto;}

.media-main .main video{display: block;width: 100%;}

.media-main .main .info{margin-top: 20px;}

.media-main .main .name{float: left;font-size: 24px;line-height: 44px;font-weight: bold;color: #fff;width: calc(100% - 120px);}

.media-main .main .download{display: block;float: right;font-size: 14px;color: #22ac9c;line-height: 44px;}

.media-main .main .download i{display: block;float: left;width: 16px;height: 16px;margin: 14px 12px 0 0;background: url('../images/download_h_icon.png') no-repeat;}

.media-swiper{background: #f5f5f7;padding: 60px 125px 50px;position: relative;}

.media-swiper a{display: block;}

.media-swiper .pic{height: 185px;position: relative;}

.media-swiper .pic .player{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../images/player_icon.png') no-repeat center center rgba(0, 0, 0, 0.3);z-index: 10;}

.media-swiper .name{font-size: 15px;line-height: 25px;color: #666;margin-top: 5px;}

.media-swiper a:hover .name{color: #22ac9c;}

.media-swiper .swiper-button-next,

.media-swiper .swiper-button-prev{width: 18px;height: 32px;background:url('../images/media_arrow.png') no-repeat;opacity: 0.3;left: 66px;margin-top: -15px;}

.media-swiper .swiper-button-next{background-position: -18px 0;left: auto;right: 66px;}

.media-swiper .swiper-button-next:hover,

.media-swiper .swiper-button-prev:hover{opacity: 1;}

.media-main .left{display: none;}
.qrcode-pop{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 101;display: none;}
.qrcode-pop-layer{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 10;}
.qrcode-pop-main{position: absolute;width: 180px;height: 200px;box-sizing: border-box;background: #fff;left: 50%;top: 50%;margin: -100px 0 0 -90px;padding: 10px;border-radius: 8px;z-index: 20;}
.qrcode-pop-main p{font-size: 16px;color: #333;text-align: center;line-height: 26px;margin-top: -10px;}

/*翻页*/

.page{display: flex;justify-content: center;width: 100%;}

.page a,

.page span{display: block;width: 46px;height: 46px;text-align: center;float: left;font-size: 14px;color: #333;line-height: 46px;border:1px solid #e9e9e9;margin-left: -1px;background: #fff;}

.page a.prev{margin: 0 18px 0 0;background: url('../images/page_arrow.png') no-repeat #fff;font-size: 0;}

.page a.next{margin-left: 18px;background: url('../images/page_arrow.png') no-repeat 0 -46px #fff;font-size: 0;}

.page a:hover,

.page a.on{background-color: #22ac9c;border-color: #22ac9c;color: #fff;}

.page a.prev:hover{background-position: -46px 0;}

.page a.next:hover{background-position: -46px -46px;}



@media screen and (max-width: 1680px) {



	.album .right .list .step{margin-bottom: 30px;height: 355px;}

	.album .right .list .step .box{height: 308px;}

	.album .right .list .step .box .pic{height: 300px;margin: 0 15px;}

	.album .right .list .step .box .img img{max-height: 300px;}

	.video-list li .pic,

	.video-list li .imgBg{height: 160px;}

	.media-main .main{width: 1280px;}

	.media-swiper .pic{height: 155px;}

}



@media screen and (max-width: 1440px) {



	.album .right .list .step{height: 315px;}

	.album .right .list .step .box{height: 268px;margin: 0 15px;}

	.album .right .list .step .box .pic{height: 260px;margin: 0 10px;}

	.album .right .list .step .box .img img{max-height: 260px;}

	.video-list li .pic,

	.video-list li .imgBg{height: 130px;}

	.media-main .main{width: 1200px;}

	.media-swiper .pic{height: 128px;}

}



@media screen and (max-width: 750px) {

	.album .left{display: none;}

	.m-header{display: block;position: fixed;left: 0;top: 0;background: #fff;box-shadow: 0px 1px 0px 0px rgba(231, 231, 231, 0.004);width:100%;height: 1rem;z-index: 99;box-sizing: border-box;border-bottom: 1px solid #e7e7e7;}

	.m-header .logo{display: block;width: 2rem;margin: .21rem auto 0;}

	.m-header .logo img{display: block;width: 100%;}

	.m-header .container{width: 92%;margin: 0 auto;}

	.m-header .container .main .nav{width: .51rem;height: .35rem;background: url('../images/nav.png') no-repeat;background-size: 100%;margin-top: .32rem;}

	.m-header .container .main .share{width: .4rem;height: .4rem;background: url('../images/share.png') no-repeat;background-size: 100%;display: none;}

	.sub-main{position: fixed;left: 0;left: -50%;top: 1rem;width:50%;height: calc(100% - 1rem);z-index: 100;background: #fff;box-sizing:border-box;padding:0 .3rem;overflow-y:scroll;}

	.sub-main .title{font-size: .3rem;color: #191919;font-weight: bold;line-height: .5rem;margin-bottom: .25rem;}

	.sub-main .title .icon{display: block;float: left;width: .35rem;height: .25rem;background: url('../images/icon.png') no-repeat;background-size: 100%;margin: .12rem .18rem 0 0;}

	.sub-main .title .icon2{height: .33rem; background-size: .35rem .33rem;margin-top: .09rem;}

	.sub-main .title .arrow{display: block;float: right;width: .25rem;height: .13rem;background: url('../images/arrowb.png') no-repeat;background-size: 100%;margin-top: .18rem;}

	.sub-main .list {padding-bottom: .22rem;}

	.sub-main .list .item{margin-bottom: .4rem;}

	.sub-main .list .item .name{font-size: .28rem;color: #333;line-height: .6rem;background: #ebecf0;border-radius: .08rem;box-sizing: border-box;padding: 0 .3rem 0 .55rem; }

	.sub-main .list .item .name i{display: block;float: right;width: .22rem;height: .22rem;background: url('../images/arrow_add.png') no-repeat;background-size:.22rem .44rem;margin-top: .19rem;}

	.sub-main .list .item-show .name i{background-position: 0 -.22rem;}

	.sub-main .list .item .erify{display: none;}

	.sub-main .list .item .erify a{display: block;font-size: .26rem;color: #808080;line-height: .6rem;padding-left: .55rem;}

	.sub-main .list .item .erify a:hover,

	.sub-main .list .item .erify a.on{background: #22ac9c;color: #fff;border-radius: .08rem;}

	.sub-main .m-search{font-size: .3rem;color: #191919;line-height: .6rem;margin-bottom: .25rem;font-weight: bold;}

	.sub-main .m-search .icon{background: url('../images/search.png') no-repeat;background-size: 100%;display: block;width: .36rem;height: .36rem;float: left;margin: .12rem .16rem 0 0;}

	.sub-main .m-search .arrow{display: block;float: right;width: .25rem;height: .13rem;background: url('../images/arrowb.png') no-repeat;background-size: 100%;margin-top: .23rem;}

	.sub-main .main{padding-bottom: .2rem;}

	.sub-main .main .text{display: block;width: 100%;height: .8rem;box-sizing: border-box;border:1px solid #22ac9c;background: #fff;box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);padding: 0 .38rem;border-radius: .08rem;font-size: .26rem;color: #999;}

	.sub-main .main .btn{display: block;width: 100%;height: .8rem;border:none;margin-top: .2rem;background: #22ac9c;border-radius: .08rem;font-size: .3rem;color: #fff;}

	.sub-main .main-video{display: none;}

	.book-select{position: relative;margin-bottom: .25rem;z-index: 20;}

	.book-select p{box-sizing: border-box;padding: 0 .38rem;height: .8rem;line-height: .8rem;font-size: .26rem;color: #fff;background:url('../images/arrowbw.png') no-repeat right .2rem center #22ac9c;background-size: .3rem .16rem;border-radius: .04rem;}

	.book-select ul{position: absolute;left: 0;top: .8rem;width: 100%;background:#22ac9c;display: none;border-radius: .04rem;}

	.book-select li{font-size: .26rem;padding: 0 .38rem;color: #fff;line-height: .6rem;border-top: 1px solid rgba(255,255,255,0.4);}



	.album .right{width: 100%;float: none;margin-top: 1.8rem;}

	.album .right .top-search{display: none;}

	.album .right .list{padding-top: .5rem;display: none;}

	.album .right .m-list{display: block;}

	.album .right .list .step{margin-bottom: .6rem;height: 4.2rem;}

	.album .right .list .step .box{padding: 0 .2rem;height: 3.8rem;}

	.album .right .list .step .box .item{width: 50%;height: 4.6rem;padding-top: 0;}

	.album .right .list .step .box .pic{margin: 0 .15rem;height: 3.8rem;}

	.album .right .list .step .box .img{border-radius: .06rem;}

	.album .right .list .step .box .img img{max-height: 3.8rem;}

	.album .right .list .step .box .name{height: .8rem;font-size: .22rem;line-height: .8rem;padding: 0 .45rem 0 .25rem;}

	.album .right .list .step .box .download{left:.3rem;bottom:-.3rem;height: .2rem;background-size: .2rem .2rem;padding-left: .3rem;font-size: .2rem;line-height: .2rem;}



	.video-list{padding: .6rem .3rem .8rem;}

	.video-list li{width: 48%;margin: 0 4% .3rem 0;}

	.video-list li:nth-child(2n){margin-right: 0;}

	.video-list li .pic, .video-list li .imgBg{height: 1.9rem;}

	.video-list li .player{background-size: .6rem .6rem;}

	.video-list li .download{display: none;}

	.video-list li .m-download{display: block;background: url('../images/download_h_icon.png') no-repeat left center; background-size: .2rem .2rem;padding-left: .3rem;font-size: .2rem;line-height: .2rem;color: #22ac9c;margin-top: .2rem;}





	.video-list li .name{font-size: .24rem;line-height: .42rem;height: .84rem;}

	.media-top{display: none;}





	.media-top .top-search .share{display: none;}

	.media-main{padding: 1rem 0 .4rem;}

	.media-main .main{width: 100%;}

	.media-main .main .info{margin: .3rem .3rem 0;}

	.media-main .main .name{font-size: .26rem;line-height: .46rem;}

	.media-main .main .download{display: none;}

	.media-swiper{padding: .6rem .3rem;}

	.media-swiper .swiper-button-next, .media-swiper .swiper-button-prev{display: none;}

	.media-swiper .pic{height: 1.9rem;}

	.media-swiper .pic .player{background-size: .6rem .6rem;}

	.media-swiper .name{font-size: .24rem;line-height: .44rem;}



	.album .right .list .step .bg{height: .9rem;border-bottom: 4px solid #dbdcdf;}

	.page a,

	.page span{display: none;}

	.page a.prev,

	.page a.next{display:block;margin:0 .3rem;width:2.2rem;height:.8rem;line-height:.8rem;background: #fff;font-size: .26rem;color: #333;box-shadow: 0px 2px 4px 0px rgba(39, 46, 45, 0.1);border-radius: .06rem;}



	.m-footer{display: block;background: #ebecf0;}

	.m-footer .top{padding-top: .6rem;border-bottom: 1px solid #ccc;height: 1.38rem;}

	.m-footer .top .title{float: left;padding-left: .55rem;line-height: .62rem;font-size: .38rem;color: #22ac9c;font-weight: bold;padding-bottom: .76rem;border-bottom: 1px solid #22ac9c;}

	.m-footer .top .info{font-size: .28rem;color: #666;margin-right: .6rem;float: right;line-height: .53rem;}

	.m-footer .bot{padding: .32rem .3rem .57rem .55rem;}

	.m-footer .bot .txt{font-size: .25rem;color: #999;line-height: .47rem;margin-bottom: .46rem;}

	.m-footer .bot .txt a{color: #999;}

	.m-footer .bot .share{position: relative;z-index: 10;}

	.m-footer .bot .share a{display: block;width: .7rem;height: .7rem;border:1px solid #59595a;box-sizing: border-box;margin-right: .48rem;float: left;border-radius: 50%;background:url('../images/share_m.png') no-repeat;background-size: 1.4rem 1.4rem;position: relative;}

	.m-footer .bot .share a:last-child{background-position: 0 -.7rem;}

	.m-footer .bot .share a:hover{background-color: #373737;background-position: -.7rem 0;}

	.m-footer .bot .share a:last-child:hover{background-position: -.7rem -.7rem;}

	.m-footer .bot .share a .erify{display: none;width: 100px;height: 100px;padding: 10px;position: absolute;left: 50%;margin-left: -60px;bottom:calc(.7rem + 16px);box-shadow:0px 1px 5px #ccc;background: #fff;}

	.m-footer .bot .share a .erify img{display: block;width: 100%;}

	.m-footer .bot .share a .erify::after{border-top: 10px solid #fff;border-left: 10px solid transparent;border-right: 10px solid transparent;content: "";position: absolute;left: 50%;bottom: -10px;margin-left: -10px;}

}