.firefly {

	position: absolute;

	top: 0;

	z-index: 0;

	width: 100%;

	height: 100%;

}



.firefly span {

	display: block;

	width: .3rem;

	height: .3rem;

	border-radius: .2rem;

	box-shadow: 0 0 .2rem #11FF00, 0 0 .2rem #11FF00, 0 0 .2rem #11FF00;

	background-color: #0fdd00;

}



/* å®ä½ */

/* ç¬¬ä¸å± */

.firefly-box1 span:nth-child(1) {

	position: absolute;

	bottom: 2rem;

	left: 11.9rem;

}



.firefly-box1 span:nth-child(2) {

	position: absolute;

	bottom: 1.45rem;

	right: 9.5rem;

}



.firefly-box1 span:nth-child(3) {

	position: absolute;

	bottom: 1.4rem;

	right: 7.5rem;

}



.firefly-box1 span:nth-child(4) {

	position: absolute;

	bottom: 4.7rem;

	right: 3.5rem;

}



.firefly-box1 span:nth-child(5) {

	position: absolute;

	bottom: 5.8rem;

	right: 3rem;

}



/* ç¬¬äºå± */

.firefly-box2 span:nth-child(1) {

	position: absolute;

	top: 5rem;

	left: 11.3rem;

}



.firefly-box2 span:nth-child(2) {

	position: absolute;

	top: 4.2rem;

	left: 12.1rem;

}



/* ç¬¬ä¸å± */

.firefly-box3 span:nth-child(1) {

	position: absolute;

	bottom: 3.5rem;

	right: 4rem;

}



.firefly-box3 span:nth-child(2) {

	position: absolute;

	bottom: 4.7rem;

	right: 3.5rem;

}



/* ç¬¬åå± */

.firefly-box4 span:nth-child(1) {

	position: absolute;

	bottom: 2.8rem;

	left: 1.6rem;

}



.firefly-box4 span:nth-child(2) {

	position: absolute;

	bottom: 1.3rem;

	left: 2.3rem;

}



.firefly-box4 span:nth-child(3) {

	position: absolute;

	bottom: 1.1rem;

	right: 1.6rem;

}



.firefly-box4 span:nth-child(4) {

	position: absolute;

	bottom: 2.2rem;

	right: 0.8rem;

}



/* ç¬¬äºå± */

.firefly-box5 span:nth-child(1) {

	position: absolute;

	top: 0.2rem;

	left: 4.75rem;

}



.firefly-box5 span:nth-child(2) {

	position: absolute;

	top: 2.6rem;

	left: 6.7rem;

}



.firefly-box5 span:nth-child(3) {

	position: absolute;

	top: 8rem;

	right: 6.5rem;

}



.firefly-box5 span:nth-child(4) {

	position: absolute;

	bottom: 3.5rem;

	left: 6.8rem;

}



.firefly-box5 span:nth-child(5) {

	position: absolute;

	bottom: 0.3rem;

	left: 13.9rem;

}



.firefly-box5 span:nth-child(6) {

	position: absolute;

	bottom: 1rem;

	right: 10rem;

}



/* ç¬¬å­å± */

.firefly-box6 span:nth-child(1) {

	position: absolute;

	bottom: 0.9rem;

	right: 3.8rem;

}



.firefly-box6 span:nth-child(2) {

	position: absolute;

	bottom: 0.9rem;

	right: 2rem;

}



.firefly-box6 span:nth-child(3) {

	position: absolute;

	bottom: 1.7rem;

	right: 0.9rem;

}



/* å¼å¸å¨ç» */

.firefly span {

	animation: breathe 15s infinite, move 60s infinite;

}



/* å¼å¸å¨ç» */

@keyframes breathe {



	0%,

	100% {

		opacity: 0.1;

		transform: scale(0.8);

	}



	50% {

		opacity: 1;

		transform: scale(1.2);

	}

}



/* æ·»å ä¸äºç§»å¨ææ */

@keyframes move {



	0%,

	100% {

		transform: translate(0, 0) scale(0.8);

	}



	25% {

		transform: translate(20px, -30px) scale(1.2);

	}



	50% {

		transform: translate(-20px, 20px) scale(0.8);

	}



	75% {

		transform: translate(-30px, -30px) scale(1.1);

	}

}



/* ä¸ºæ¯ä¸ªè¤ç«è«è®¾ç½®ä¸åçä½ç½®åå¨ç»å»¶è¿ */

.firefly span:nth-child(1) {

	animation-delay: 0s;

	animation-duration: 20s;

}



.firefly span:nth-child(2) {

	animation-delay: 1s;

	animation-duration: 10s;

}



.firefly span:nth-child(3) {

	animation-delay: 2s;

	animation-duration: 20s;

}



.firefly span:nth-child(4) {

	animation-delay: 0.5s;

	animation-duration: 15s;

}



.firefly span:nth-child(5) {

	animation-delay: 1.5s;

	animation-duration: 10s;

}



.firefly span:nth-child(6) {

	animation-delay: 1s;

	animation-duration: 20s;

}



html {

	font-size: calc(100vw / 25.6);

}



body {

	background-color: #000;

}



h1 {

	color: #fff !important;

	line-height: 1.2 !important;

	font-family: "MiSans-Medium" !important;

}



.section-2 p,

.section-3 p,

.section-4 p,

.section-5 p,

.section-6 p,

.section-spec p {

	color: #fff !important;

	line-height: 1 !important;

	font-family: "MiSans-Normal" !important;

}



.section-2 h1,

.section-3 h1,

.section-4 h1 {

	font-size: 0.58rem !important;

	line-height: 1;

	margin: 0;

	white-space: nowrap;

}



.section-2 p,

.section-3 p,

.section-4 p {

	font-size: 0.24rem !important;

	line-height: 1.5 !important;

	margin: 0;

}



.section-1 h1 {

	font-size: 0.48rem !important;

	margin: 0;

}



.section-1 p {

	font-size: 0.24rem !important;

	color: #fff;

}



.section-1 .container {

	width: auto;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	display: flex;

	align-items: flex-start;

	z-index: 1;

}



.section-1 .handle-xbox>img {

	width: 7rem;

	padding-right: .8rem;

}



.section-1 .title-box {

	width: 7.3rem;

}



.section-1 .title-box>img {

	width: 3.6rem;

	margin-bottom: 0.5rem;

}



.section-1 .title-box>.yellow {

	color: #F0B900 !important;

	font-size: 0.33rem !important;

	margin: 0.1rem 0 0.5rem !important;

}



.section-1 .container .btn-box {

	display: block;

	width: 3.3rem;

	height: 1.1rem;

	background: url('/images/asset-h/40th/BuyNow.png') no-repeat center / 100%;

	margin-top: 0.6rem;

	transition: .5s;

}



.section-1 .container .btn-box:hover {

	background: url('/images/asset-h/40th/BuyNow2.png') no-repeat center / 100%;

	/* transition: .1s; */

}



/* å¼¹çª */

.fancybox-skin {

	border-radius: 25px;

	/* èæ¯æ¨¡ç³ */

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	/* èæ¯æ¸å */

	background: linear-gradient(to left, #3545a16e, #3545a14d);

}



.fancybox-outer .fancybox-inner {

	height: auto !important;

}



.fancybox-outer .fancybox-inner .update-log {

	margin: 50px;

}



.fancybox-overlay .btn-purchase {

	display: inline-block;

	font-size: 14px;

	font-weight: 600;

	letter-spacing: 0.1em;

	line-height: 1.42857143;

	color: #fff;

	text-align: center;

	white-space: nowrap;

	vertical-align: middle;

	text-shadow: none;

	padding: 10px 20px;

	margin: 10px 6px;

	/* border-radius: 10px; */

	border: solid 1px #fff;

	box-shadow: 0 0;

}



.fancybox-close {

	display: none;

}



.btn-purchase:hover {

	color: #000;

	background-color: #F0B900;

	border: 1px solid #F0B900;

}



/* ç¬¬äºå± */

.section-2 .container {

	position: absolute;

	top: 50%;

	left: 5rem;

	transform: translate(0, -50%);

	width: 10.5rem;

	padding: 0;

	z-index: 1;

}



.section-2 .bg-box {

	width: 100%;

	border-radius: 0.3rem;

	padding: 0.8rem 1.2rem 0.8rem 0.8rem;

	margin-top: 0.45rem;

	margin-left: -0.8rem;

	/* èæ¯æ¨¡ç³ */

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	/* èæ¯æ¸å */

	background: linear-gradient(to left, #3545a16e, #3545a14d);

}



.section-2 .bg-box>div {

	margin-top: 0.3rem;

	padding-left: 0.1rem;

	border-left: 3px solid #fff;

}



/* è§é¢æ¿å */

.section-video {

	position: relative;

}



.section-video .container {

	width: 100%;

	height: auto;

	position: absolute;

	bottom: 18%;

	display: flex;

	justify-content: center;

}



.section-video .covervid-video {

	vertical-align: bottom !important;

}



.dots {

	height: 100%;

}



.w-video {

	padding: 0;

}



.w-video .fa,

.w-video span {

	color: #ffffff;

	font-size: 0.24rem !important;

}



.w-video span {

	margin-left: 0.1rem;

}



.section-video .w-video:hover .fa {

	color: #ca8e2e;

}



.section-video .w-video:hover span {

	color: #ca8e2e;

	text-decoration-line: underline;

}



/* ç¬¬ä¸å± */

.section-3 .container {

	position: absolute;

	top: 50%;

	right: 4.2rem;

	transform: translate(0, -50%);

	width: 10.8rem;

	padding: 0;

	z-index: 1;

}



.section-3 h1 {

	margin-left: .8rem;

}



.section-3 .bg-box {

	width: 100%;

	border-radius: 0.3rem;

	padding: .8rem;

	margin-top: 0.45rem;

	/* èæ¯æ¨¡ç³ */

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	/* èæ¯æ¸å */

	background: linear-gradient(to left, #3545a16e, #3545a187);

}



.section-3 .bg-box>p:nth-child(1) {

	margin-bottom: 0.3rem;

}



/* ç¬¬åå± */

.section-4 .container {

	width: 100%;

	padding: 0;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 1;

}



.section-4 .container>h1 {

	margin-bottom: 0.3rem !important;

}



.section-4 .container>h1,

.section-4 .container>p {

	width: 11.4rem;

	margin: 0 auto;

}



.section-4 .swiper-container {

	margin: 0.85rem 0 0.6rem;

}



.swiper-container .swiper-button-front2,

.swiper-container .swiper-button-after2 {

	width: 6rem;

	height: 100%;

	background-image: none;

	position: absolute;

	z-index: 99;

}



.swiper-container .swiper-button-front2 {

	left: 0;

}



.swiper-container .swiper-button-after2 {

	right: 0;

}



.swiper-container .swiper-button-front2:hover,

.swiper-container .swiper-button-after2:hover {

	background-image: none;

}



.section-4 .switch-box {

	width: 11.4rem;

	margin: 0 auto;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



/* ç¬¬äºå± */

.section-5 .container {

	width: 11.4rem;

	padding: 0;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	display: flex;

	flex-direction: column;

	z-index: 1;

}



.section-5 h1 {

	font-family: "MiSans-Medium" !important;

	font-size: 0.36rem !important;

	color: #CEE7FF !important;

	margin: 0 0 0.25rem;

}



.section-5 h3 {

	font-size: 0.22rem !important;

	color: #CEE7FF;

	margin: 0 0 0.15rem;

}



.section-5 p {

	font-family: "MiSans-Normal";

	font-size: 0.18rem !important;

	line-height: 1.5 !important;

	color: #CEE7FF !important;

	font-weight: 400;

	margin: 0;

}



/* ç²¾è±è½¯ä»¶ */

.section-5 .box1 {

	width: 100%;

	text-align: left;

	border-radius: 0.3rem;

	background-color: #081339bd;

	padding: 0.6rem;

}



.section-5 .software-box {

	display: flex;

	justify-content: space-between;

	margin-top: 0.45rem;

}



.section-5 .software-box .software-block {

	width: 1.9rem;

	border-radius: 0.1rem;

	box-shadow: 0px 0px 10px #00000033;

	background-color: #003b78;

	margin: 0;

}



.section-5 .software-box .software-block>h3 {

	text-align: center;

	margin: 0.2rem 0;

}



.section-5 .software-box .software-block img {

	width: 100%;

	border-radius: 0.1rem 0.1rem 0 0;

}



/* ç¹ç¹ */

.section-5 .container .box2,

.section-5 .container .box3 {

	width: 5.5rem;

}



.box2 .bg-box,

.box3 .bg-box {

	border-radius: 0.3rem;

	background-color: #081339bd;

	overflow: hidden;

	margin-top: 0.4rem;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



.box2 .box-compatibility {

	width: 100%;

	height: 6rem;

	padding: 0.6rem 0.45rem 0.6rem 0.6rem;

	display: flex;

	flex-direction: column;

	background: url('/images/asset-h/40th/software/text-bg.png') no-repeat bottom / 100%;

}



.box2 .box-compatibility>div {

	width: 100%;

	display: flex;

	flex-direction: row;

	flex-wrap: wrap;

	justify-content: space-between;

}



.box2 .box-compatibility img {

	height: 0.5rem;

	margin-right: 0.1rem;

}



.box2 .box-compatibility .text-box>p {

	font-size: 0.14rem !important;

}



/* .box2 .box-compatibility .box>.text-box>p {

	font-size: 0.14rem !important;

	font-weight: normal;

} */

.section-5 .container .max-box {

	width: 100%;

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



.box2 .box {

	width: 50%;

	display: flex;

	flex-direction: row;

	align-items: flex-start;

	margin-top: 0.3rem;

}



.box2 .back-key {

	height: 2.3rem;

}



.box2 .back-key .text-box {

	margin-left: 0.6rem;

}



.box2 .back-key>img {

	height: 100%;

}



.box2 .cross-key {

	height: 3rem;

	padding: 0.6rem;

}



.box2 .cross-key>img {

	width: 1.8rem;

	margin-left: 0.15rem;

}



.box3 .dock-blurb {

	height: 3rem;

	padding: 0.6rem;

	display: flex;

	align-items: center;

}



.box3 .dock-blurb>img {

	width: 1.9rem;

	margin-left: 0.05rem;

}



.box3 .base-box {

	height: 5.3rem;

	display: flex;

	flex-direction: column;

	align-items: flex-end;

}



.box3 .base-box>.text-box {

	padding: 0.6rem 0.6rem 0.2rem 0.5rem;

}



.box3 .base-box>img {

	width: 4rem;

}



.box3 .profile-switch {

	height: 3rem;

	padding: 0.6rem;

}



.box3 .profile-switch p {

	width: 95%;

}



.box3 .profile-switch>img {

	width: 1.3rem;

	margin-left: 0.05rem;

}



/* Swiper style */

.swiper-slide {

	width: 11.4rem !important;

}



.swiper-slide img {

	width: 100%;

	border-radius: 0.35rem;

}



.swiper-slide .icon {

	position: absolute;

	top: 0.5rem;

	left: 0.5rem;

}



.swiper-slide .icon>.fa {

	color: #fff;

	cursor: pointer;

	font-size: 0.4rem;

	/* opacity: .5; */

}



.swiper-slide .icon>.fa:hover {

	color: #db9b34;

	opacity: 1;

}



.swiper-pagination-bullet {

	width: 0.35rem;

	height: 0.5rem;

	background-image: url('../images/asset-h/40th/feather.svg');

	background-size: 100% 100%;

	background-color: transparent;

	margin-right: 0.1rem;

	transform-origin: 50% 100%;

	transition: 1s;

	opacity: 1;

}



.swiper-pagination-bullet-active,

.swiper-pagination-bullet:hover {

	background-image: url('../images/asset-h/40th/active.svg');

	background-size: 100% 100%;

	background-color: transparent;

	transform: scale(1.2);

	transition: .1s;

}



.swiper-button-front,

.swiper-button-after {

	width: 0.45rem;

	height: 0.45rem;

	cursor: pointer;

	display: inline-block;

	transition: 1s;

}



.swiper-button-front {

	background: url('../images/asset-h/40th/front.svg') no-repeat;

	background-size: 100%;

	margin-right: 0.25rem;

	transition: .5s;

}



.swiper-button-after {

	background: url('../images/asset-h/40th/after.svg') no-repeat;

	background-size: 100%;

	transition: .5s;

}



.swiper-button-front:hover {

	background: url('../images/asset-h/40th/front-2.svg') no-repeat;

	background-size: 100%;

	transform: scale(1.1);

	transition: .1s;

}



.swiper-button-after:hover {

	background: url('../images/asset-h/40th/after-2.svg') no-repeat;

	background-size: 100%;

	transform: scale(1.1);

	transition: .1s;

}



.swiper-pagination-switch {

	display: inline-block;

	width: 8px;

	height: 8px;

	border-radius: 8px;

	background: #555;

	margin: 0 5px;

	opacity: 0.8;

	border: 1px solid #fff;

	cursor: pointer;

}



.swiper-active-switch {

	background: #fff;

}



/* å¤çé®ç½© */

.layer-mask {

	width: 100%;

	height: 100%;

	border-radius: 0.15rem;

	opacity: 0.7;

	transition: all 0.5s;

	background-color: #000000;

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

}



.swiper-slide-active .layer-mask {

	display: none;

}



.swiper-container .swiper-button-front2,

.swiper-container .swiper-button-after2 {

	width: 5rem;

}



/* åæ°å¤ä½å¾å¹»ç¯ */

.Carousel {

	background-color: #000000;

}



.carousel.fade {

	opacity: 1;

}



.carousel.fade .item {

	-moz-transition: opacity ease-in-out 1.5s;

	-o-transition: opacity ease-in-out 1.5s;

	-webkit-transition: opacity ease-in-out 1.5s;

	transition: opacity ease-in-out 1.5s;

	left: 0 !important;

	opacity: 0;

	top: 0;

	position: absolute;

	width: 100%;

	display: block !important;

	z-index: 1;

}



.carousel.fade .item:first-child {

	top: auto;

	position: relative;

}



.carousel.fade .item.active {

	opacity: 1;

	-moz-transition: opacity ease-in-out 1.5s;

	-o-transition: opacity ease-in-out 1.5s;

	-webkit-transition: opacity ease-in-out 1.5s;

	transition: opacity ease-in-out 1.5s;

	z-index: 2;

}



/* åæ°æ¿å */

.section-spec {

	position: relative;

}



.section-spec>img {

	width: 100%;

}



.section-spec .content-box {

	width: 11.7rem;

	height: auto;

	position: absolute;

	top: 0;

	left: 50%;

	transform: translate(-50%, 0%);

	display: flex;

	flex-direction: column;

	align-items: center;

	z-index: 1;

}



.section-spec .content-box>h1 {

	font-size: 0.58rem !important;

	color: #CEE7FF !important;

	margin: 0;

}



.section-spec .content-box>img {

	width: 11.1rem;

	margin: 0.85rem 0 0.3rem;

}



.spec-box h3 {

	font-family: "MiSans-Medium" !important;

	font-size: 0.22rem !important;

	color: #CEE7FF !important;

	margin: 0.55rem 0 0;

}



.spec-box hr {

	border: 0.5px solid #cee7ff38;

	margin: 0.2rem 0;

}



.spec-box li {

	font-family: "MiSans-Normal" !important;

	font-size: 0.18rem !important;

	line-height: 1.8;

	font-weight: 400;

	color: #CEE7FF !important;

}



.app-note {

	background-color: transparent;

	position: absolute;

	bottom: 0.8rem;

}



.app-note p {

	width: 11.4rem;

	color: #CEE7FF !important;

	opacity: .65;

	font-size: 0.12rem !important;

	font-weight: 400;

}



@media screen and (max-width: 767px) {

	.firefly span {

		width: 1.1rem;

		height: 1.1rem;

		border-radius: 1.1rem;

		box-shadow: 0 0 1rem #11FF00, 0 0 1rem #11FF00, 0 0 1rem #11FF00;

	}



	/* å®ä½ */

	/* ç¬¬ä¸å± */

	.firefly-box1 span:nth-child(1) {

		position: absolute;

		bottom: 15.5rem;

		left: 7.9rem;

	}



	.firefly-box1 span:nth-child(2) {

		position: absolute;

		bottom: 7.7rem;

		left: 10rem;

	}



	.firefly-box1 span:nth-child(3) {

		position: absolute;

		bottom: 1.5rem;

		right: 22.5rem;

	}



	.firefly-box1 span:nth-child(4) {

		position: absolute;

		bottom: 10.5rem;

		right: 7.5rem;

	}



	.firefly-box1 span:nth-child(5) {

		position: absolute;

		bottom: 15.7rem;

		right: 3.5rem;

	}



	/* ç¬¬äºå± */

	.firefly-box2 span:nth-child(1) {

		position: absolute;

		top: 5.4rem;

		left: auto;

		right: 7rem;

	}



	.firefly-box2 span:nth-child(2) {

		position: absolute;

		top: 1.2rem;

		left: auto;

		right: 2rem;

	}



	/* ç¬¬ä¸å± */

	.firefly-box3 span:nth-child(1) {

		position: absolute;

		bottom: auto;

		top: 6.2rem;

		right: 5rem;

	}



	.firefly-box3 span:nth-child(2) {

		position: absolute;

		bottom: auto;

		top: 9.5rem;

		right: 2rem;

	}



	/* ç¬¬åå± */

	.firefly-box4 span:nth-child(1) {

		position: absolute;

		bottom: auto;

		top: 14.5rem;

		left: 2rem;

		right: auto;

	}



	.firefly-box4 span:nth-child(2) {

		position: absolute;

		bottom: auto;

		top: 12rem;

		left: auto;

		right: 13rem;

	}



	.firefly-box4 span:nth-child(3) {

		position: absolute;

		bottom: 3rem;

		top: auto;

		left: 8rem;

		right: auto;

	}



	.firefly-box4 span:nth-child(4) {

		position: absolute;

		top: auto;

		bottom: 2rem;

		left: auto;

		right: 3rem;

	}



	/* ç¬¬äºå± */

	.firefly-box5 span:nth-child(1) {

		position: absolute;

		top: 6rem;

		left: auto;

		right: 2.5rem;

	}



	.firefly-box5 span:nth-child(2) {

		position: absolute;

		top: 62.5rem;

		left: 1.5rem;

	}



	.firefly-box5 span:nth-child(3) {

		position: absolute;

		top: 3rem;

		bottom: auto;

		left: 5rem;

		right: auto;

	}



	.firefly-box5 span:nth-child(4) {

		position: absolute;

		top: auto;

		bottom: 2rem;

		left: 3rem;

		right: auto;

	}



	.firefly-box5 span:nth-child(5) {

		position: absolute;

		top: auto;

		bottom: 5rem;

		left: auto;

		right: 10rem;

	}



	.firefly-box5 span:nth-child(6) {

		position: absolute;

		top: auto;

		bottom: 2rem;

		left: auto;

		right: 5rem;

	}



	/* ç¬¬å­å± */

	.firefly-box6 span:nth-child(1) {

		position: absolute;

		top: 6rem;

		bottom: auto;

		left: 9.8rem;

		right: auto;

	}



	.firefly-box6 span:nth-child(2) {

		position: absolute;

		bottom: 3rem;

		right: 12rem;

	}



	.firefly-box6 span:nth-child(3) {

		position: absolute;

		bottom: 5.5rem;

		right: 2rem;

	}



	/* æ·»å ä¸äºç§»å¨ææ */

	@keyframes move {



		0%,

		100% {

			transform: translate(0, 0) scale(0.8);

		}



		25% {

			transform: translate(10px, -20px) scale(1.2);

		}



		50% {

			transform: translate(-15px, 10px) scale(0.8);

		}



		75% {

			transform: translate(-10px, -10px) scale(1.1);

		}

	}



	html {

		font-size: calc(100vw / 43);

	}



	.section-1,

	.section-2,

	.section-video,

	.section-3,

	.section-4,

	.section-5,

	.section-spec {

		overflow: hidden;

	}



	.section-2 p,

	.section-3 p,

	.section-4 p,

	.section-5 p,

	.section-6 p,

	.section-spec p {

		color: #fff !important;

		line-height: 1 !important;

		font-weight: normal;

		font-family: "MiSans-Normal" !important;

	}



	.section-2 h1,

	.section-3 h1,

	.section-4 h1,

	.section-5 h1 {

		font-size: 2.2rem !important;

		margin: 0;

		font-weight: 400 !important;

		white-space: normal;

	}



	.section-2 p,

	.section-3 p,

	.section-4 p,

	.section-5 p {

		font-size: 1.6rem !important;

		line-height: 1.3 !important;

		margin: 0;

	}



	/* ç¬¬ä¸å± */

	.section-1 .container {

		width: auto;

		position: absolute !important;

		top: 50%;

		left: 50%;

		transform: translate(-50%, -50%);

		display: flex;

		align-items: center;

		flex-direction: column-reverse;

		background: none;

	}



	.section-1 .title-box {

		width: 29rem;

		text-align: center;

	}



	.section-1 .title-box>img {

		width: 24rem;

		margin-bottom: 2.5rem;

	}



	.section-1 h1 {

		font-size: 2.8rem !important;

	}



	.section-1 p {

		font-size: 1.6rem !important;

		color: #fff !important;

		line-height: 1.5;

	}



	.section-1 .title-box>.yellow {

		font-size: 2rem !important;

		line-height: 1.2;

		margin: 0 0 1.8rem !important;

	}



	.section-1 .container .btn-box {

		width: 20rem;

		height: 5rem;

		margin: 2.5rem auto 0;

	}



	.section-1 .handle-xbox>img {

		width: 23rem;

		padding: 0;

		margin-top: 3.5rem;

	}



	.fancybox-outer .fancybox-inner .update-log {

		margin: 30px 0;

		display: flex;

		flex-wrap: wrap;

		justify-content: center;

	}



	.btn-purchase {

		width: 10rem;

		font-size: 14px;

		color: #fff;

		font-weight: 600;

		text-align: center;

		padding: 10px 20px;

		margin: 10px 10px;

		border: 1px solid #fff;

		border-radius: 10px;

	}



	/* ç¬¬äºå± */

	.section-2 .container {

		position: absolute !important;

		top: 0;

		left: 0;

		transform: none;

		background: none;

		height: 30rem;

		display: flex;

		align-items: flex-start;

		flex-direction: column;

		justify-content: center;

		padding: 0 2rem !important;

	}



	.section-2 .bg-box {

		width: 100%;

		padding: 0;

		margin: 2rem 0 0;

		background: none;

		backdrop-filter: none;

		border-radius: 0%;

	}



	.section-2 .bg-box>div {

		padding-left: 1.5rem;

		margin-top: 2rem;

		border-left: .5px solid #fff;

	}



	.section-2 .bg-box>div>p>br {

		display: none;

	}



	/* è§é¢æ¿å */

	.section-video .container {

		bottom: 10%;

	}



	.w-video .fa,

	.w-video span {

		color: #ffffff;

		font-size: 2rem !important;

	}



	.w-video span {

		margin-left: .5rem;

	}



	/* ç¬¬ä¸å± */

	.section-3 .container {

		position: absolute !important;

		top: 0;

		left: 0;

		transform: none;

		background: none;

		height: 26.5rem;

		display: flex;

		align-items: flex-start;

		flex-direction: column;

		justify-content: center;

		padding: 0 2rem !important;

	}



	.section-3 .bg-box {

		width: 100%;

		padding: 0;

		margin: 2rem 0 0;

		background: none;

		backdrop-filter: none;

		border-radius: 0%;

	}



	.section-3 .bg-box>p:nth-child(1) {

		margin-bottom: 2rem;

	}



	/* ç¬¬åå± */

	.section-4 .container {

		position: absolute !important;

		top: 50%;

		left: 0;

		transform: translate(0%, -50%);

		background: none;

		padding: 0 !important;

		display: flex;

		flex-direction: column;

	}



	.section-4 .container>h1,

	.section-4 .container>p {

		width: 100%;

		padding: 0 2.45rem !important;

	}



	.section-4 .container>h1 {

		margin-bottom: 2rem !important;

	}



	.swiper-slide {

		width: 33rem !important;

	}



	.swiper-slide img {

		border-radius: 0.8rem;

	}



	.swiper-slide .icon {

		top: 2rem;

		left: 2rem;

	}



	.swiper-slide .icon>.fa {

		font-size: 2rem;

	}



	.section-4 .switch-box {

		width: 100%;

		margin: 0 auto;

		display: flex;

		justify-content: center;

	}



	.section-4 .switch-box>.pagination,

	.section-4 .switch-box>.swiper-button {

		display: none;

	}



	.swiper-pagination-bullet {

		width: 1.6rem;

		height: 2.1rem;

		margin-right: 1rem;

	}



	.swiper-pagination-bullet:last-child,

	.pagination {

		margin: 0;

	}



	.section-4 .swiper-container {

		margin: 2.5rem 0 0;

	}



	/* ç¬¬äºå± */

	.section-5 .container {

		position: absolute !important;

		top: 50%;

		left: 0;

		transform: translate(0, -50%);

		background: none;

		width: 100%;

		padding: 0 2.45rem !important;

	}



	.section-5 h1 {

		margin: 0 0 2rem;

	}



	.section-5 .software-box {

		display: flex;

		flex-wrap: wrap;

		justify-content: space-between;

	}



	.section-5 .box1 {

		padding: 2.5rem 2.1rem;

		border-radius: 1.6rem;

		background-color: #081339cf;

	}



	.section-5 .software-box .software-block:nth-child(1) {

		width: 100%;

	}



	.section-5 .software-box .software-block {

		width: 48%;

		border-radius: 1.5rem;

		margin-top: 4%;

	}



	.section-5 .software-box .software-block img {

		border-radius: 1.5rem 1.5rem 0 0;

	}



	.section-5 .software-box .software-block>h3 {

		font-size: 1.8rem !important;

		margin: 2rem 0;

	}



	.section-5 .container .max-box {

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.section-5 .container .box2,

	.section-5 .container .box3 {

		width: 100%;

	}



	.box2 .bg-box,

	.box3 .bg-box {

		height: auto;

		padding: 2.5rem 2.1rem;

		margin: 0;

		border-radius: 1.6rem;

		margin-top: 4%;

	}



	.box2 .box-compatibility {

		height: auto;

		padding: 0;

		background: none;

	}



	.box2 .box-compatibility>div {

		display: flex;

		flex-direction: column;

	}



	.box2 .box-compatibility .box {

		width: 100%;

		margin-top: 2.5rem;

		margin: 2.5rem 0 0;

	}



	.box2 .box-compatibility .box:nth-child(4) {

		order: 1;

	}



	.box2 .box-compatibility .box:nth-child(3) {

		order: 2;

	}



	.box2 .box-compatibility img {

		height: 4.3rem;

		margin-right: 1.5rem;

	}



	.box2 .box-compatibility .text-box>h3 {

		font-size: 2.2rem !important;

		margin-bottom: .5rem;

	}



	.box2 .box-compatibility .text-box>p {

		font-size: 1.4rem !important;

	}



	.box2 .back-key {

		padding: 0 0 0 2.1rem;

	}



	.box2 .back-key .text-box {

		margin: 0;

	}



	.box2 .back-key>img {

		width: 18rem;

	}



	.box2 .cross-key>.text-box {

		order: 2;

	}



	.box2 .cross-key>img {

		order: 1;

		width: 12.3rem;

		margin: 0 3rem 0 0;

	}



	.box3 .dock-blurb .text-box>p {

		width: 90%;

	}



	.box3 .dock-blurb>img {

		width: 14rem;

		transform: translate(-1rem, 0);

		margin-left: .3rem;

	}



	.box3 .base-box {

		padding: 2.5rem 0 0;

	}



	.box3 .base-box>.text-box {

		padding: 0 1.6rem 0 2.1rem;

		margin-bottom: 2rem;

	}



	.box3 .base-box>img {

		width: 28rem;

	}



	.box3 .profile-switch>img {

		width: 11.5rem;

		order: 1;

		margin: 0 3rem 0 0;

	}



	.box3 .profile-switch .text-box {

		order: 2;

	}



	/* åºé¨åæ° */

	.section-spec .content-box {

		width: 41rem;

		height: auto;

		margin-top: 4.5rem;

		overflow: hidden;

	}



	.section-spec .content-box>h1 {

		font-size: 2.8rem !important;

	}



	.section-spec .content-box>img {

		width: 110rem;

		height: auto;

		margin: 4.5rem 0 0.5rem;

	}



	.section-spec .content-box .spec-box {

		width: 100%;

	}



	.spec-box h3 {

		font-size: 2.2rem !important;

		margin: 4rem 0 0;

	}



	.spec-box li {

		list-style: none;

		padding-left: 0;

		font-size: 1.6rem !important;

		line-height: 1.5;

	}



	.spec-box li::before {

		content: "â¢";

		width: 1rem;

		height: 1rem;

		padding-right: 1rem;

	}



	.spec-box hr {

		margin: 1.5rem 0;

	}



	.app-note {

		padding: 0 2.45rem;

		bottom: 1rem;

	}



	.app-note p {

		width: 100%;

		font-size: 1.3rem !important;

		opacity: .3;

	}

}



@media screen and (min-width: 768px) and (max-width: 2100px) {



	.section-2 p,

	.section-3 p,

	.section-4 p {

		font-size: 0.24rem !important;

	}



	.section-1 .handle-xbox>img {

		width: 7.2rem;

		padding-right: .6rem;

	}



	.section-1 .title-box {

		width: 7.5rem;

	}



	.section-1 h1 {

		font-size: 0.50rem !important;

	}



	.section-1 .title-box>img {

		width: 3.8rem;

	}



	.section-1 .title-box>.yellow {

		font-size: 0.26rem !important;

	}



	.section-1 p {

		font-size: 0.26rem !important;

	}



	.section-2 .bg-box {

		padding: 0.8rem;

	}



	.w-video .fa,

	.w-video span {

		font-size: 0.26rem !important;

	}



	.section-3 .container {

		width: 11.3rem;

	}



	.section-4 .container>h1,

	.section-4 .container>p {

		width: 15.2rem;

	}



	.swiper-slide {

		width: 15.2rem !important;

	}



	.section-4 .swiper-container {

		margin: 0.4rem 0;

	}



	.pagination {

		margin: 0;

	}



	.section-4 .switch-box {

		width: 15.2rem !important;

	}



	.section-5 .container {

		width: 15.2rem;

	}



	.section-5 h1 {

		font-size: 0.38rem !important;

	}



	.section-5 h3 {

		font-size: 0.28rem !important;

	}



	.section-5 p {

		font-size: 0.22rem !important;

	}



	.section-5 .software-box {

		margin-top: 0.3rem;

	}



	.section-5 .software-box .software-block {

		width: 2.6rem;

	}



	.section-5 .container .box2,

	.section-5 .container .box3 {

		width: 7.4rem;

	}



	.box2 .box-compatibility br,

	.box2 .back-key br,

	.box3 .profile-switch br {

		display: none;

	}



	.box2 .box-compatibility .text-box>p {

		font-size: 0.19rem !important;

	}



	.box2 .box {

		margin-top: 0.5rem;

	}



	.box3 .dock-blurb .text-box>p {

		width: 90%;

	}



	.box3 .base-box>.text-box>p {

		width: 85%;

	}



	.box3 .profile-switch p {

		width: 100%;

	}



	.section-spec .content-box {

		width: 15.6rem;

	}



	.section-spec .content-box>img {

		width: 13rem;

		margin: 0.7rem 0 0.2rem;

	}



	.spec-box h3 {

		font-size: 0.28rem !important;

		margin: 0.5rem 0 0;

	}



	.spec-box hr {

		margin: 0.15rem 0;

	}



	.spec-box li {

		font-size: 0.22rem !important;

	}



	.app-note {

		bottom: 0.2rem;

	}



	.app-note p {

		width: 14.8rem;

		font-size: 0.16rem !important;

	}

}