/* ²¥·ÅÊÓÆµ */
.video-box {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.video-box>.video-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	z-index: 1;
}

.video-box .video-poster {
	position: relative;
	height: 600px;
	overflow: hidden;
	z-index: 2;
}

.video-box .video-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
	z-index: 3;
}

.video_pos {
	width: 2560px;
	height: 600px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1280px;

	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.video-box .video-title {
	font-size: 58px;
}

.video-box .video-introduction {
	color: #DEDEDE;
}

.video-box .video-line {
	width: 48px;
	height: 2px;
	background-color: #3AEFD0;
}

.video-box .video-btn-play {
	position: relative;
	width: 200px;
	height: 50px;
	border: 1px solid #3AEFD0;
	color: #3AEFD0;
	cursor: pointer;
}

.video-box .video-btn-play::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid transparent;
	width: 0;
	height: 0;

}

.video-box .video-btn-play::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px solid transparent;
	width: 0;
	height: 0;
}

.video-box .video-btn-play:hover::before {
	width: 100%;
	height: 100%;
	border-top-color: #60daaa;
	border-right-color: #60daaa;
	transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.video-box .video-btn-play:hover::after {
	width: 100%;
	height: 100%;
	border-bottom-color: #60daaa;
	border-left-color: #60daaa;
	transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

/* Â¥²ã±êÌâ */
.cont-title {
	position: relative;
	padding-left: 30px;
}

.cont-title>.effect {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 14px;
	width: 20px;
}

/* ¿¨Æ¬ */
.card-box {
	position: relative;
	width: calc((100% - 60px) /5);
	margin-right: 15px;
	background-color: #FFFFFF;
	transform: perspective(0) rotateY(0) translateZ(0);
	transition: all .3s;
	/* transform-origin: left; */
}

.card-box:last-child {
	margin-right: 0;
}

.card-box:hover {
	/* transform: perspective(2000px) rotateY(20deg); */

	/* transform:  skewY(5deg) perspective(1000px) rotateY(10deg); */
	
}

.card-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	z-index: 2;
}

.card-mask.text-xxl { font-size: 18px;letter-spacing: 1px; }


.plate-box {
	position: relative;
	width: calc((100% - 10px) / 2);
	margin-right: 10px;
	transform: perspective(0) rotateY(0) translateZ(0);
	transition: all .3s;
}

.plate-box:hover {
	/* transform: perspective(2000px) rotateY(20deg); */
}

.plate-box:last-child {
	margin-right: 0;
}


.plate-cont {
	position: relative;
	width: 100%;
}

.plate-cont .plate-head {
	font-size: 40px;
}

.plate-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	color: #FFFFFF;
}

.plate-mask .text-lg { letter-spacing: 1px; }

.plate-head {
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 14px;
}

.plate-head::after {
	position: absolute;
	bottom: -1px;
	left: 50%;
	content: ' ';
	transform: translateX(-50%);
	width: 52px;
	height: 2px;
	background-color: #3AEFD0;
}

.plate-mask .plate-head+div {
	opacity: .8;
}

.video_bombox_fix {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 5;
}

.video_bombox_fix .video-player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1024px;
	height: 600px;
	z-index: 6;
	margin-top: -300px;
	margin-left: -512px;
}

.video_bombox_fix .video-player .clear {
	position: absolute;
	top: -28px;
	right: -28px;
	color: #FFFFFF;
	width: 28px;
	height: 28px;
	cursor: pointer;
	transition: all .3s;
}

.video_bombox_fix .video-player .clear:hover {
	transform: rotate(90deg);
}

/* 2020/11/25 */
.margin-tb {
	margin-top: 26px;
	margin-bottom: 41px;
}

.margin-top-sm { margin-top: 26px; }

.text-lg span {
	font-size: 20px;
	letter-spacing: 0;
	font-weight: normal;
}
