@-webkit-keyframes heroArrow2 {
	0% {
		transform: translate(-.104167rem, 0)
	}
	to {
		transform: translate(0, 0)
	}
}

@keyframes heroArrow2 {
	0% {
		transform: translate(-.104167rem, 0)
	}
	to {
		transform: translate(0, 0)
	}
}

.scene {
	width: 100%;
	overflow: hidden;
	background: #f2f3f5;
	position: relative
}

.scene .scene-header {
	padding: 78px 0 45px
}

.scene .scene-header .scene-header-desc,
.scene .scene-header .scene-header-title {
	margin: 0 auto;
	width: 585px;
	text-align: center;
	font-weight: 300;
	font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-header .scene-header-title {
	margin-bottom: 18px;
	line-height: 1;
	color: #000;
	font-size: 32px
}

.scene .scene-header .scene-header-desc {
	line-height: 1;
	color: #777;
	font-size: 14px
}

.scene .scene-hot {
	position: absolute;
	top: 234px;
	left: 0;
	width: 100%;
	height: 190px
}

.scene .scene-content {
	display: flex;
	width: 108%;
	height: 80vh;
	overflow: hidden
}

.scene .scene-content:hover+.scene-hot,
.scene-mobile {
	display: none
}

.scene .scene-content:hover .scene-content-item .scene-wrapper .scene-modal {
	opacity: .8
}

.scene .scene-content:hover .scene-content-item .scene-wrapper .scene-wrapper-bg>img {
	transform: translate(0, 0)
}

.scene .scene-content:hover .item-thumb {
	/*opacity: 0;*/
	z-index: 14
}

.scene .scene-content .scene-content-item {
	position: relative;
	flex: 1 1 33.333%;
	transition: all 1s;
	will-change: auto
}

.scene .scene-content .scene-content-item:hover {
	/*flex: 1 0 80%*/
}

.scene .scene-content .scene-content-item:hover .scene-wrapper .scene-modal {
	/*opacity: 0;*/
	/*visibility: hidden*/
}

.scene .scene-content .scene-content-item:hover .item-detail {
	opacity: 1;
	z-index: 2
}

.scene .scene-content .scene-content-item .scene-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transform: skew(-10.15deg);
	transform-origin: left top;
	overflow: hidden
}

.scene .scene-content .scene-content-item .scene-wrapper .scene-modal {
	position: absolute;
	width: 100%;
	height: 100%;
	/*background-color: #000;*/
	opacity: 0;
	z-index: 100;
	transition: all .6s
}

.scene .scene-content .scene-content-item .scene-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(107deg, #0a2349 20%, rgba(10, 35, 73, 0) 100%);
	opacity: 0;
	visibility: hidden;
	transition: all .6s
}

.scene .scene-content .scene-content-item .scene-wrapper-bg {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -45px;
	width: 200%;
	height: 100%;
	transform: translate(-50%, 0) skew(10.15deg);
	transform-origin: left top
}

.scene .scene-content .scene-content-item .scene-wrapper-bg>img {
	width: 100%;
	height: 100%;
	transition: transform .5s
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper {
	position: relative
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 2px;
	height: 100%;
	background-color: #fff;
	opacity: .3
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper-bg>img {
	transform: translate(-100px, 0)
}

.scene .scene-content .scene-content-item:nth-child(2) .scene-wrapper {
	overflow: initial;
	z-index: 0
}

.scene .scene-content .scene-content-item:nth-child(2) .scene-wrapper-bg>img {
	transform: translate(100px, 0)
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper {
	position: relative
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 2px;
	height: 100%;
	background-color: #fff;
	opacity: .3
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper-bg>img {
	transform: translate(-100px, 0)
}

.scene .scene-content .scene-content-item .item-thumb {
	position: absolute;
	z-index: 101;
	top: 0;
	/* left: -60px; */
	width: 100%;
	height: 100%;
	background: linear-gradient(360deg, #0a2349 0, rgba(10, 35, 73, 0) 100%);
	transition: opacity .5s
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-title {
	margin-top: 15vw;
	margin-bottom:30px;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	font-size: 2.5vw;
	font-weight: 300;
	font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-desc {
	margin-bottom:50px;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	font-size: 1vw;
	font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action {
	display: flex;
	justify-content: center
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-left,
.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-right {
	position: relative;
	width: 25px;
	height: 69px;
	background-image: url(../images/rect-small.dc028340.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-left {
	left: .010417rem
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-right {
	left: -.010417rem
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-center {
	width: 96px;
	height: 69px;
	background-image: url(../images/rect.ff8cbac0.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-center img {
	width: 32px;
	height: 32px
}

.scene .scene-content .scene-content-item .item-detail {
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(107deg, #0a2349 20%, rgba(10, 35, 73, 0) 100%);
	transition: opacity .6s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header {
	margin-bottom: 94px;
	padding: 60px 0 0 280px
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header:hover .item-detail-arrow div {
	-webkit-animation: heroArrow2 1s ease infinite;
	animation: heroArrow2 1s ease infinite
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-title {
	margin-bottom: 12px;
	line-height: 1.5;
	color: #fff;
	font-size: 2vw;
	font-weight: 400;
	font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-desc {
	margin-bottom: 12px;
	line-height: 1;
	color: #fff;
	font-size: 1.5vw;
	font-weight: 300;
	font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow {
	width: 40px;
	height: 26px;
	overflow: hidden
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow div {
	display: flex
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow img {
	margin-right: 8px;
	width: 39px;
	height: 36px
}
.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs>a:last-child,
.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow img:last-child {
	margin-right: 0
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content {
	position: relative;
	margin-left: 176px;
    padding: 60px 0 0 100px;
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item {
	margin-bottom: 24px;
	line-height: 1;
	color: #fff;
	font-size: 36px;
	font-weight: 300;
	font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item.active .item-detail-name,
.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item:hover .item-detail-name {
	color: #fff;
	font-size: 36px;
	font-weight: 400;
	font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item.active .item-detail-info {
	display: block
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-name {
	width: 160px;
	line-height: 1;
	color: #fff;
	font-size: 32px;
	font-weight: 300;
	font-family: PingFangSC-Light, PingFang SC;
	cursor: pointer;
	transition: all .4s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info {
	display: none;
	position: absolute;
	left: 315px;
	top: 0
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs {
	display: flex;
	margin-bottom: 25px
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs>a {
	margin-right: 25px
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img {
	position: relative;
	width:350px;
	height: 200px;
	padding: 0 12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	will-change: background-size;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	transition: background-size .6s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255, 255, 255, .4);
	box-sizing: border-box
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img:hover {
	background-size: 106% 106%
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img span {
	padding-bottom: 12px;
	line-height: 1;
	color: #fff;
	font-size:12px;
	font-weight: 400;
	font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .scene-more {
	text-align: center
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .scene-more .button {
	cursor: pointer;
	width: 100px;
	height: 32px;
	line-height: 1
}

@media screen and (max-width:767px) {
	.scene {
		display: none
	}
	.scene-mobile {
		display: block;
		background: #f2f3f5
	}
	.scene-mobile .scene-header {
		padding: 144px 0
	}
	.scene-mobile .scene-header .scene-header-title {
		margin-bottom: 24px;
		line-height: 110px;
		text-align: center;
		color: #000;
		font-size: 78px;
		font-weight: 400;
		font-family: PingFangSC-Regular, PingFang SC
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-title,
	.scene-mobile .scene-header .scene-header-desc {
		line-height: 1.5;
		text-align: center;
		color: #000;
		font-size: 78px;
		font-weight: 200;
		font-family: PingFangSC-Thin
	}
	.scene-mobile .scene-header .scene-header-desc b {
		font-weight: 400;
		font-family: PingFangSC-Regular
	}
	.scene-mobile .scene-content .scene-item-inner {
		padding-top: 160px;
		width: 100%;
		height: 720px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-title {
		margin-bottom: 36px;
		color: #fff;
		font-family: PingFangSC-Light
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-desc {
		margin-bottom: 72px;
		line-height: 1;
		text-align: center;
		color: #ffffffcc;
		font-size:42px;
		font-weight: 200;
		font-family: PingFangSC-Light
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-arrow {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-left,
	.scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-right {
		width: 48px;
		height: 120px;
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-center {
		width: 168px;
		height: 120px;
	}
	.scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow {
		position: absolute;
		top: 24px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 72px;
		height: 72px
	}
}