.bgc{ background: #000000; width: 100%;}
.block{ display: block;}
.none{ display: none;}
.b_x{text-decoration:underline;}
.pad_tb20{ padding: 20px 0;}
.pad_t50{ padding-top: 50px;}
hr { border: 0; height: 1px; background: #fff; text-align: left;}
.form-desc hr { max-width:62px; text-align: left; margin: 28px 0 30px !important;}
.info-desc hr { max-width:62px; text-align: left; margin: 28px 0 30px !important;}

/* 加载GIF */

.loading {
	width      : 100%;
	height     : 100%;
	background : #000;
	position   : fixed;
	top        : 0;
	left       : 0;
	z-index    : 10001;
	line-height: 100%;
	text-align : center;
}

.loading img {
	position         : absolute;
	top              : 50%;
	left             : 50%;
	-webkit-transform: translate(-50%, -50%);
	transform        : translate(-50%, -50%);
}

@media (max-width:992px) {
	.loading img {
		width: 5rem;
	}
}
/*banner*/
.storeBanner{width: 100%;position: relative;}
.store_img{width: 100%; }
.storeBanner img {width: 100%;}
.mobile_banner {display: none;}
.web_banner {display: block;}


/*kc_che*/
.kc_che_wap{ display: none;}
.kc_che{ width: 100%; display: block; margin:0 auto; background: url(/best/images/KC/video-bg.jpg) center no-repeat; background-size: auto 828px; height: 828px;}

.kc_che>.kc_txt{ font-size: 16px; color: #fff; width: 100%;  padding-top: 90px; text-align: center; font-family: Noto Sans S Chinese;}
.kc_che>.kc_txt>.desc-title{font-size:40px; font-weight:500 !important;color: #31c6ec}
.kc_che>.kc_txt>.desc-title > span > span.word1{ color: #31c6ec !important;}
.kc_che>.kc_txt>hr {  margin-top: 28px; margin-bottom: 30px;  max-width: 62px; text-align: left;}
.kc_che>.kc_txt>p.pad_b{ padding-bottom: 50px;font-size:20px; line-height: 38px; opacity: 0.9;}
.kc_che>.kc_txt>p.pad_b span{ color: #31c6ec;}

.kc_che>.che_img{ width: 1200px; text-align: center; margin: 0 auto;}

/*kc_tab*/
.kc_tab_wap{ display: none;}
.kc_tab{ display: block; margin:0 auto; width: 100%; position: relative; height: 829px; padding-top: 120px;}

.w1200{ width: 1200px; margin: 0 auto; overflow: hidden;}
.crs-wrap{width: 100%;}
.swiper-slide {width: 100%;height: 100%;}
.mySwiper {text-align: center; box-sizing: border-box; width: 140px; float: left;}
.swiper-wrapper{ width: 140px !important;}
.mySwiper .swiper-slide{height:160px !important; background-size: 86px; cursor: pointer; font-size: 20px; color: #ffffff; position: relative; font-family: "微软雅黑"; }
.mySwiper .swiper-slide span{width: 100%; display: block; border-bottom: 1px solid #50575d; /* height:128px; line-height: 128px;*/ position: absolute; bottom:0; height:80px !important; line-height: 80px !important;}
.mySwiper2 { width: 100%; height: 829px; position: absolute !important; top: 0; z-index: 0 !important;}
.mySwiper2 .swiper-slide{ height: 829px; background-repeat:no-repeat ; }
.swiper-slide-thumb-active{height: 160px !important;}
.swiper-slide-thumb-active span{ position: absolute; bottom:0; height:80px !important; line-height: 80px !important; color:#31c6ec; font-weight: bold; border-bottom: 1px solid #31c6ec !important;}

.swiper-slide.swiper-slide-thumb-active:nth-of-type(1){background: url('/best/images/KC/11.png') center 30px no-repeat !important;}
.swiper-slide.swiper-slide-thumb-active:nth-of-type(2){background: url('/best/images/KC/22.png') center 30px no-repeat !important;}
.swiper-slide.swiper-slide-thumb-active:nth-of-type(3){background: url('/best/images/KC/33.png') center 30px no-repeat !important;}

/*kc_cp*/
.kc_cp{ width:100%; background: url(/best/images/KC/cp-bg.jpg) center top no-repeat; height: 836px;}
/*tab*/
.tab {position: relative; width: 1200px; overflow: hidden; margin: 0 auto;}
.tab-nav { width: 100%; height: 98px; margin: 54px auto 170px; text-align: center; padding: 0 0 0 18%;}
.tab-nav a { display:block; float: left; width: 286px; background:url(/best/images/KC/cp_bg1.png) center top no-repeat; background-size: 100%; color: #31c6ec; height: 98px; line-height: 96px; text-align: center; text-decoration: none; color: #fff; font-size: 26px; margin: 0 -15px;}
.tab-nav a.current { background:url(/best/images/KC/cp_bg2.png) center top no-repeat;  background-size: 100%; color: #31c6ec; font-size: 34px; font-weight: bold;}
.tab-con {position: relative; width: 1200px; overflow: hidden;  }
.tab-con-item { display: none; width: 1200px; color: #fff; }
.w540{ width: 540px; float: left;}

.year{ float: right;}

/*kc_case*/

.kc_case{ width: 100%; display: block; margin:0 auto; background: url(/best/images/KC/casebg.jpg) center top no-repeat; background-size: auto 828px; min-height: 828px;}

.kc_case>.kc_txt{ font-size: 16px; color: #fff; width: 1200px;  margin: 0 auto; padding-top: 90px; text-align: center; font-family: Noto Sans S Chinese;}
.kc_case>.kc_txt>.desc-title{font-size:40px; font-weight:500 !important;}
.kc_case>.kc_txt>.desc-title > span > span.word1{ color: #31c6ec !important;}
.kc_case>.kc_txt>hr {  margin-top: 28px; margin-bottom: 30px;  max-width: 62px; text-align: left;}
.kc_case>.kc_txt>p.pad_b{ padding-bottom: 30px;font-size:20px; line-height: 38px; opacity: 0.9;}
.kc_case>.kc_txt>p.pad_b span{ color: #31c6ec;}

.kc_case_wap>.che_list_wap{display: none;}
.kc_case>.che_list{ width: 1220px; text-align: center; margin: 0 auto; display: block;}
.kc_case>.che_list dl{ display: block; width: 388px; float: left; margin: 0 9px; cursor: pointer;}

.kc_case>.che_list dl a dt{ display: block; background: #000000;}
.kc_case>.che_list dl a dt img{ width: 388px; height:272px; border: 5px solid #404040; opacity: 0.8;}
.kc_case>.che_list dl a:hover dt img{border: 5px solid #31c6ec;}
.kc_case>.che_list dl a dd{ display: block; width: 100%; font-size: 20px; color: #fff; text-align: left;}
.kc_case>.che_list dl a dd h2{ width: 100%; display: block; line-height:32px; /* background: url(/best/images/KC/dd.png) bottom left no-repeat; background-size: 11px 2px; */ font-weight: 100; padding: 16px 0 14px; position: relative; padding-right: 80px;}
.kc_case>.che_list dl a:hover dd h2{ color: #31c6ec; font-weight: bold;}
.kc_case>.che_list dl a dd h2 span{ font-size: 16px; color: #fff; background: url(/best/images/KC/preview2.png) left no-repeat; padding-left: 20px; position: absolute; right: 0; top:16px; display: block; background-size: 16px 12px;}
.kc_case>.che_list dl a:hover dd h2 span{ color: #31c6ec; background: url(/best/images/KC/preview.png) left no-repeat; font-weight: normal;}
		
.kc_case>.wu_che{ width: 100%; text-align: center;}	
.kc_case>.wu_che>.che_xny{ width: 100%; margin-top: 134px;}
.kc_case>.wu_che>.che_xny img{ height: 102px;}
.kc_case>.wu_che span{ width: 100%; display: block; font-size: 18px; color: #ffffff; opacity: 0.4; padding-top: 28px;}
					
.kc_case .more{ width: 100%; padding-top: 34px; text-align: center; margin-bottom: 40px;}
.kc_case .more a{width: 166px; height: 52px; line-height: 52px; border: 1px solid #404040; text-align: center; margin: 0 auto; display: inline-block; color: #fff; font-size: 16px;}
.kc_case .more a:hover{ color: #31c6ec; border: 1px solid #31c6ec;}

.kc_ss{
	background: #020d17; color: #ffffff; border: 1px solid #193c5b; height: 40px; line-height: 40px; width: 320px; float: right; margin-bottom: 30px;
}
.kc_ss .lianxi2{ float: left; width: 50%;}
.kc_ss .r_x{ background: url(/best/images/KC/r_x.png) right no-repeat; background-size: 1px 14px;}
.lianxi2 li {
	padding: 0 8px;
	position: relative;
}

/* .lianxi2 li:not(:last-child):after {
	display: block;
	content: "";
	width: 2px;
	height: 40px;
	background: #020d17;
	position: absolute;
	top: 3px;
	right: 0;
} */

.lianxi2 li a {
	color: #fff;
	font-size: 14px;
	padding-bottom: 3px;
	/*border-bottom : 1px solid #C9CACA;*/
}

.lianxi2 li:last-child {
	width: 100%;
	text-align: center;
	color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	/* justify-content: center; */
	 justify-content:space-between ;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	-webkit-transition: .3s;
	transition: .3s;
	position: relative;
	z-index: 2;
}



.lianxi2 li:last-child i {
	display: inline-block;
	width: 14px;
	height: 8px;
	background: url(/best/images/KC/down-icon.png) no-repeat center;
	background-size: cover;
	margin-left: 10px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.lianxi2 li:last-child>div {
	width: 100%;
	max-height: 240px;
	overflow: hidden;
	overflow-y: auto;
	background: #020d17; color: #ffffff; border: 1px solid #193c5b; border-top: 0;
	font-size: 16px;
	position: absolute;
	top: 38px;
	left: 0px;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	-webkit-transform-origin: top;
	transform-origin: top;
}

.lianxi2 li:last-child>div a {
	display: block;
	width: 100%;
	height: 40px;
	text-align: center;
	color: #fff;
	line-height: 40px;
	padding: 0;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.lianxi2 li:last-child>div a:hover {
	background: #193c5b;
	color: #fff;
}

.showList li:last-child:hover i {
	transform: rotateZ(180deg);
	-webkit-transform: rotateZ(180deg);
	-moz-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	-o-transform: rotateZ(180deg);
}

.showList li:last-child:hover div {
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	-webkit-box-shadow: 0px 8px 8px rgba(0, 0, 0, .6);
	box-shadow: 0px 8px 8px rgba(0, 0, 0, .6);
}


@media (max-width:992px){
	.play-wrap{
	    width: 100% !important;
	}
	.close{
	    display: none;
	}
	hr { border: 0; height: 0.01rem; background: #fff; text-align: left;}
	.pad_tb20{ padding: 0.20rem 0;}
	.mobile_banner {display: block;}
	.web_banner {display: none;}
	.banner-info {width: 7.3rem;height: 100%; position:absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform:translateX(-50%);}

	.info-desc {position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	.desc-title { font-size: .26rem;}
	.pad_b{line-height: .40rem;}
	.storeBanner .banner-info {width:7.30rem;height: 100%; position:absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform:translateX(-50%);}
	.storeBanner .info-desc { width: 3.9rem; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	.desc_title { font-size: .26rem; font-weight: 900; color: #fff; /*opacity  : 0;*/}
	.desc_title>span>span.word1 {color: #c79836;}
	.desc_content { max-width: 100%; font-size: .18rem; color: #fff; line-height: .40rem;}
	.form-desc hr { max-width:0.62rem; text-align: left; margin: 0.28rem 0 0.30rem !important; text-align: left;}
	.info-desc hr { max-width:0.62rem; text-align: left; margin: 0.28rem 0 0.30rem !important; text-align: left;}


	/*kc_che_wap*/
	.kc_che{ display: none;}

	.kc_che_wap{ width: 100%; display: block; margin:0 auto; background: url(/best/images/KC/video-bg-wap.jpg) center no-repeat; background-size: 100% auto;}
	.kc_che_wap>.kc_txt{ padding: 0 0.50rem; font-size:0.18rem; color: #fff; width: 100%; text-align: center; }
	.kc_che_wap>.kc_txt>.desc-title{font-size:0.46rem; font-weight: 500 !important; padding-top: 0.96rem;color: #31c6ec}
	.kc_che_wap>.kc_txt>.desc-title > span > span.word1{ color: #31c6ec !important;}
	.kc_che_wap>.kc_txt>p.pad_b{ padding-bottom: 0.96rem; font-size:0.20rem; line-height: 0.38rem; opacity: 0.7;}
	.kc_che_wap>.kc_txt>p.pad_b span{ color: #31c6ec;}
	
	.kc_che_wap>.che_img{ width: 100%; height: auto; text-align: center; padding-bottom: 1.1rem;}


    /*kc_tab*/
	.kc_tab{ display: none;}
	.kc_tab_wap{ display: block; margin:0 auto; width: 100%; position: relative; height: 7.64rem;overflow: hidden;}


	.crs-wrap{width: 100%;}
	.swiper-slide {width: 100%;height: 100%;}
	.mySwiper {text-align: center; width:100%; margin:0 auto 0.4rem auto; padding: 0 0.88rem !important; position: absolute; bottom: 0.20rem; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
	.mySwiper .swiper-slide{ height:1.58rem !important; cursor: pointer; font-size: 0.22rem; color: #ffffff; position: relative;}
	.mySwiper .swiper-slide span{ width: 100%; display: block; position: absolute; bottom: 0; border-bottom: 1px solid #50575d; height: 0.76rem !important; line-height: 0.76rem !important;}
	.mySwiper2 { width: 100%; height: auto; position: absolute !important; top: 0; z-index: 0 !important;}
	.mySwiper2 .swiper-slide{width: 100%; height: auto; min-height: 7.64rem; background-size: 100% !important;}
	.swiper-slide-thumb-active{height: 1.58rem !important;}
	.swiper-slide-thumb-active span{ color: #31c6ec; border-bottom: 1px solid #31c6ec !important;}


	.swiper-slide.swiper-slide-thumb-active:nth-of-type(1){background: url('/best/images/KC/11.png') center 0.3rem no-repeat !important; background-size: 0.59rem !important;}
	.swiper-slide.swiper-slide-thumb-active:nth-of-type(2){background: url('/best/images/KC/22.png') center 0.3rem no-repeat !important; background-size: 0.59rem !important;}
	.swiper-slide.swiper-slide-thumb-active:nth-of-type(3){background: url('/best/images/KC/33.png') center 0.3rem no-repeat !important; background-size: 0.59rem !important;}


	/*kc_cp_wap*/
	.kc_cp_wap{ width:100%; background: url(/best/images/KC/cp-bg-wap.jpg) center top no-repeat; background-size: 100% auto; height: 7.64rem;}
	/*tab*/
	.tab {position: relative; width: 100%; overflow: hidden; margin: 0 auto;}
	.tab-nav { width: 100%; height: 0.79rem; margin: 0.82rem auto 1.02rem; text-align: center; padding: 0 0 0 0;}
	.tab-nav a { display:inline-block; float:none; width: 2.30rem; background:url(/best/images/KC/cp_bg1_wap.png) center top no-repeat; background-size: 100%; color: #31c6ec; height: 0.79rem; line-height: 0.78rem; text-align: center; text-decoration: none; color: #fff; font-size: 0.22rem; margin: 0 -0.15rem;}
	.tab-nav a.current { background:url(/best/images/KC/cp_bg2_wap.png) center top no-repeat; background-size: 100%; color: #31c6ec; font-size: 0.28rem; font-weight: bold;}
	.tab-con {position: relative; width: 100%; overflow: hidden; padding: 0 0.48rem;  }
	.tab-con-item { display: none; width: 100%; color: #fff; }
	.w540{ width: 5.40rem; float: left;}
	
	.year{ float: right;}
	.year img{ width: 0.95rem;}
	
	/*kc_case_wap*/

	.kc_case_wap{ width: 100%; display: block; margin:0 auto; background: url(/best/images/KC/casebg-wap.jpg) center top no-repeat; background-size: 100% auto; height: auto; min-height: 7.64rem;}
	.kc_case_wap>.kc_txt{ padding: 0 0.50rem; font-size:0.18rem; color: #fff; width: 100%; text-align: center; }
	.kc_case_wap>.kc_txt>.desc-title{font-size:0.46rem; font-weight: 500 !important; padding-top: 0.96rem;}
	.kc_case_wap>.kc_txt>.desc-title > span > span.word1{ color: #31c6ec !important;}
	.kc_case_wap>.kc_txt>p.pad_b{ padding-bottom: 0.36rem; font-size:0.20rem; line-height: 0.38rem; opacity: 0.7;}
	.kc_case_wap>.kc_txt>p.pad_b span{ color: #31c6ec;}
	
	.kc_case>.che_list{display: none;}
	.kc_case_wap>.che_list_wap{ display: block; width: 100%; height: auto; text-align: center; padding-left: 0.24rem;}
	.kc_case_wap>.che_list_wap dl{ display: inline-block; width: 3.26rem; float: left; margin: 0 0.18rem;}
	.kc_case_wap>.che_list_wap dl a dt{ display: block; background: #000000;}
	.kc_case_wap>.che_list_wap dl a dt img{ width: 3.26rem; height:2.28rem; border: 0.05rem solid #404040; opacity: 0.8;}
	.kc_case_wap>.che_list_wap dl a:hover dt img{border: 0.05rem solid #31c6ec;}
	.kc_case_wap>.che_list_wap dl a dd{ display: block; width: 100%; font-size: 0.2rem; color: #fff; text-align: left;}
	.kc_case_wap>.che_list_wap dl a dd h2{ width: 100%; display: block; line-height:0.32rem; /* background: url(/best/images/KC/dd.png) bottom left no-repeat; background-size: 0.11rem 0.02rem; */ font-weight: 100; padding: 0.16rem 0 0.14rem; position: relative; padding-right: 0.8rem;}
	.kc_case_wap>.che_list_wap dl a:hover dd h2{ color: #31c6ec; font-weight: bold;}
	.kc_case_wap>.che_list_wap dl a dd h2 span{ font-size: 0.16rem; color: #fff; background: url(/best/images/KC/preview2.png) left no-repeat; padding-left: 0.20rem; position: absolute; right: 0; top:0.16rem; display: block; background-size: 0.16rem 0.12rem;}
	.kc_case_wap>.che_list_wap dl a:hover dd h2 span{ color: #31c6ec; background: url(/best/images/KC/preview.png) left no-repeat; background-size: 0.16rem 0.12rem; font-weight: normal;}
	
	.kc_case>.wu_che{ width: 100%; text-align: center;}
		.kc_case>.wu_che>.che_xny{ width: 100%; margin-top: 1.48rem;}
		.kc_case>.wu_che>.che_xny img{ height: 1.02rem;}
		.kc_case>.wu_che span{ width: 100%; display: block; font-size: 0.18rem; color: #ffffff; opacity: 0.4; padding-top: 0.28rem;}
		
	.kc_case_wap .more{ width: 100%; padding: 0.58rem 0 0.3rem; margin-bottom: 0;}
	.kc_case_wap .more a{width: 1.66rem; height: 0.52rem; line-height: 0.52rem; border: 1px solid #404040; text-align: center; margin: 0 auto; display: inline-block; color: #fff; font-size: 0.18rem;}	



.kc_ss{
	background: #020d17; color: #ffffff; border: 1px solid #193c5b; height: 0.4rem; line-height: 0.4rem; width: 3.20rem; float: none; margin: 0 auto 0.38rem;
}
.kc_ss .lianxi2{ float: left; width: 50%;}
.lianxi2 li {
	padding: 0 0.08rem;
	position: relative;
}

/* .lianxi2 li:not(:last-child):after {
	display: block;
	content: "";
	width: 2px;
	height: 40px;
	background: #020d17;
	position: absolute;
	top: 3px;
	right: 0;
} */

.lianxi2 li a {
	color: #fff;
	font-size: 0.14rem;
	padding-bottom: 0.03rem;
	/*border-bottom : 1px solid #C9CACA;*/
}

.lianxi2 li:last-child {
	width: 100%;
	text-align: center;
	color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 0.2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	/* justify-content: center; */
	 justify-content:space-between ;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	-webkit-transition: .3s;
	transition: .3s;
	position: relative;
	z-index: 2;
}



.lianxi2 li:last-child i {
	display: inline-block;
	width: 0.14rem;
	height: 0.08rem;
	background: url(/best/images/KC/down-icon.png) no-repeat center;
	background-size: cover;
	margin-left: 0.14rem;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.lianxi2 li:last-child>div {
	width: 100%;
	max-height: 2.4rem;
	overflow: hidden;
	overflow-y: auto;
	background: #020d17; color: #ffffff; border: 1px solid #193c5b; border-top: 0;
	font-size: 0.16rem;
	position: absolute;
	top: 0.38rem;
	left: 0px;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	-webkit-transform-origin: top;
	transform-origin: top;
}

.lianxi2 li:last-child>div a {
	display: block;
	width: 100%;
	height: 0.4rem;
	text-align: center;
	color: #fff;
	line-height: 0.4rem;
	padding: 0;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.lianxi2 li:last-child>div a:hover {
	background: #193c5b;
	color: #fff;
}

.showList li:last-child:hover i {
	transform: rotateZ(180deg);
	-webkit-transform: rotateZ(180deg);
	-moz-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	-o-transform: rotateZ(180deg);
}

.showList li:last-child:hover div {
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	-webkit-box-shadow: 0px 8px 8px rgba(0, 0, 0, .6);
	box-shadow: 0px 0.08rem 0.08rem rgba(0, 0, 0, .6);
}



	
}

/* 播放器 start */
.play-box{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 10000;
    display: none;
}
.play-wrap{
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.play{
    width: 100%;
}
.close{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .8);
    text-align: center;
    line-height: 40px;
    color: rgba(0, 0, 0, .8);
    font-size: 22px;
    position: absolute;
    top: -20px;
    right: -20px;
    user-select: none;
    cursor: pointer;
}
/* 播放器 end */