.content-box {
	background-image: url(../img/backimg.jpg);
	background-size: 100% 100%;
	padding: 4vw;
}

.title-box {
	height: 8vw;
}

.title-content {
	font-size: 1.4vw;
	font-weight: bold;
}

.title-line {
	width: 2vw;
	padding-top: .5vw;
	border-bottom: .15vw #FF0000 solid;
}

.video-parent-box {
	padding: 0 6vw 5vw 6vw;
}

.big-video1 {
	width: 48vw;
	height: 24vw;
	position: relative;
	overflow: hidden;
}

.video-ani:hover img {
	width: 110%;
	height: 110%;
	transform: auto;
	object-fit: cover;
	animation-name: to-big;
	animation-duration: .6s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

.video-ani:hover .video-title {
	display: block;

}

.video-ani:hover .video-title-boxs {
	animation-name: to-top;
	animation-duration: 0.6s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


/* 动画 */
@keyframes to-top {
	0% {
		bottom: 0.1vw;
	}

	25% {
		bottom: 0.2vw;
	}

	50% {
		bottom: 0.3vw;
	}

	75% {
		bottom: 0.4vw;
	}

	100% {
		bottom: 0.5vw;
	}
}

/* 动画 */
@keyframes to-big {
	0% {
		margin-left: -1%;
		margin-top: -1%;
		width: 102%;
		height: 102%;
	}

	25% {
		margin-left: -1.5%;
		margin-top: -1.5%;
		width: 103%;
		height: 103%;
	}

	50% {
		margin-left: -2%;
		margin-top: -2%;
		width: 104%;
		height: 104%;
	}

	100% {
		margin-left: -2.5%;
		margin-top: -2.5%;
		width: 105%;
		height: 105%;
	}
}

.small-video1 {
	width: 30vw;
	height: 24vw;
	margin-left: 1.5vw;
	position: relative;
	overflow: hidden;
}

.big-video2 {
	margin-top: 1.5vw;
	width: 48vw;
	height: 24vw;
	position: relative;
	overflow: hidden;
}

.small-video2 {
	width: 30vw;
	height: 24vw;
	margin-top: 1.5vw;
	margin-right: 1.5vw;
	position: relative;
	overflow: hidden;
}

.video-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
}

.play-icon {
	font-size: 4vw;
	color: #FFFFFF;
}

.play-icon:hover {
	font-size: 4.3vw;
}

.product-list-box {}

.product-box {
	width: 50%;
}

.product-box-block {
	width: 100;
	background-color: #FFFFFF;
	margin-bottom: 4vw;
	padding: 3vw;
}

.product-name {
	font-size: 1.4vw;
	font-weight: bold;
	color: #000000;
}

.product-name-dy {
	font-size: 1vw;
	line-height: 2vw;
	padding-top: 30px;
	color: #404040;
}

.product-discribe {
	font-size: .8vw;
	color: #818181;
	line-height: 1.8vw;
	white-space: pre-line;
}

.product-btn-block {
	width: 100%;
	margin-top: 4vw;
}

.detail-btn {
	margin-right: 1vw;
	padding: 0 1.5vw;
	height: 2.4vw;
	line-height: 2.4vw;
	border-radius: 1.2vw;
	color: #FFFFFF;
	background-color: rgb(230, 25, 20);
	cursor: pointer;
	cursor: hand;
}

.detail-btn:hover {
	background-color: rgb(252, 24, 20);
}

.more-btn {
	cursor: pointer;
	cursor: hand;
	padding: 0 1vw;
	height: 2.4vw;
	line-height: 2.1vw;
	border-radius: 1.2vw;
	color: #000000;
	border: .15vw #757575 solid;
}

.more-btn:hover {
	border: .15vw #000000 solid;
}

.product-img-box {
	position: relative;
}

.product-img {
	position: absolute;
	bottom: -1vw;
	right: -1vw;
	width: 18vw;
}

.product-animation {
	animation-name: product-animation;
	animation-duration: .6s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

/* 动画 */
@keyframes product-animation {
	0% {
		right: -1vw;
		bottom: -1vw;
		width: 18vw;
	}

	25% {
		right: -1.5vw;
		bottom: -1.5vw;
		width: 18.5vw;
	}

	50% {
		right: -2vw;
		bottom: -2vw;
		width: 19vw;
	}

	100% {
		right: -2.5vw;
		bottom: -2.5vw;
		width: 19.5vw;
	}
}

.about-us-box {
	width: 100%;
	background-color: #FFFFFF;
	padding: 3vw 6vw;
}

.about-block {
	width: 25vw;
}

.title {
	font-size: 1.7vw;
	font-weight: bold;
	color: #000000;
	height: 4vw;
}

.about-detail {
	padding-left: 1vw;
}

.about-title {
	line-height: 1.5vw;
	font-size: .82vw;
	font-weight: bold;
	color: #000000;
}

.about-dis {
	padding-top: .6vw;
	font-size: .8vw;
	color: #787878;
}

.video-box {
	position: absolute;
	z-index: 99;
	width: 45vw;
	left: 25vw;
	top: calc(50vh - 15vw);
	background-color: #FFFFFF;
	border-radius: .2vw;
}

.video-title-box {
	height: 2.6vw;
	line-height: 2.6vw;
	padding: 0 .8vw;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	font-size: .9vw;
	font-weight: bold;
	border-bottom: 1px #404040 solid;
}

.video-shadow-big {
	position: fixed;
	z-index: 99;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, .1);
}

.close {
	width: 1.4vw;
	height: 1.4vw;
	padding-top: .1vw;
	border-radius: 50%;
}

.close:hover {
	background-color: #c60003;
	color: #FFFFFF !important;
}

.video-title-boxs {
	width: 100%;
	position: absolute;
	bottom: 0px;
	color: #FFFFFF;
}

.video-title {
	font-size: 1.6vw;
	font-weight: bold;
	padding: 1vw 1.5vw;
}