@charset "utf-8";

.wrap {
	position: relative;
	width: min(1360px, calc(100% - 2 * var(--page-side)));
	margin: 0 auto;
	z-index: 1;
}

body.is-detail .wrap {
	width: min(1280px, calc(100% - 2 * var(--page-side)));
}

.box1,
.box2,
.box3 { width: 100%; position: relative; }

.box1 .content,
.box2 .content,
.box3 .content {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center top;
	height: 100vh;
}

.xtl_logo_bg,
.xtl_logo_lk a {
	position: absolute;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	aspect-ratio: 3089 / 1357;
}

.xtl_logo_bg {
	background: url(../../../images/logo.png) center / contain no-repeat;
	cursor: pointer;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}

.xtl_logo_lk a { z-index: 11; }

body.logo-off .xtl_logo_bg,
body.logo-off .xtl_logo_lk { display: none; }

body.logo-shine .xtl_logo_bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(148deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.55) 49.4%, rgba(255, 255, 255, 0.96) 50%, rgba(255, 255, 255, 0.55) 50.6%, rgba(255, 255, 255, 0) 52%);
	background-repeat: no-repeat;
	background-size: 280% 280%;
	background-position: 120% 120%;
	-webkit-mask: url(../../../images/logo.png) center / contain no-repeat;
	mask: url(../../../images/logo.png) center / contain no-repeat;
	animation: logo-shine 2.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes logo-shine {
	0% { background-position: 90% 90%; animation-timing-function: ease-in-out; }
	82% { background-position: 10% 10%; }
	100% { background-position: 10% 10%; }
}

.cyclewrap {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.cycle-track {
	display: flex;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.cycle-track > .box1,
.cycle-track > .box2,
.cycle-track > .box3 {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cycle-track { transition: none; }
	body.logo-shine .xtl_logo_bg::after { animation: none; opacity: 0; }
}

.backhome {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	padding: 8px 16px;
	background: rgba(42, 42, 42, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--white);
	font: 15px/1.4 "Microsoft YaHei", "微软雅黑";
	text-decoration: none;
}

.backhome:hover { background: var(--red); border-color: var(--red); color: var(--white); }