/* å­ä½-å­é­æ¸éå® */

@font-face {

	font-family: "Qingya-Song";

	src: url("../fonts/song/Qingya-Song.eot");

	/* IE9 */

	src: url("../fonts/song/Qingya-Song.eot?#iefix") format("embedded-opentype"),

		/* IE6-IE8 */

		url("../fonts/song/Qingya-Song.woff") format("woff"),

		/* chromeãfirefox */

		url("../fonts/song/Qingya-Song.ttf") format("truetype");

	/* chromeãfirefoxãoperaãSafari, Android, iOS 4.2+ */

	font-style: normal;

	font-weight: normal;

}



/* æ é¢å­ä½ */

@font-face {

	font-family: "wukong";

	src: url("../fonts/song/wukong.eot");

	/* IE9 */

	src: url("../fonts/song/wukong.eot?#iefix") format("embedded-opentype"),

		/* IE6-IE8 */

		url("../fonts/song/wukong.woff") format("woff"),

		/* chromeãfirefox */

		url("../fonts/song/wukong.ttf") format("truetype");

	/* chromeãfirefoxãoperaãSafari, Android, iOS 4.2+ */

	font-style: normal;

	font-weight: normal;

}



/* å¬å±æ ·å¼ */

.section-two,

.section-first,

.section-introduce,

.section-picture,

.section-feature,

.section-parameter {

	position: relative;

}



.section-two .container h1,

.section-introduce .container h1 {

	color: #dfdad3 !important;

	font-size: 65px !important;

	font-family: "wukong" !important;

}



.section-parameter.spec h1,

.popup-wukong .handle-btn>.btn-box>a {

	font-family: "wukong" !important;

}



.section-parameter.spec .text-left h3,

.section-parameter.spec .text-left li {

	font-family: "Qingya-Song" !important;

}



.section-two .container p,

.section-introduce .container p {

	color: #cfcac4 !important;

	margin: 0px;

	font-family: "Qingya-Song" !important;

	font-weight: normal;

}



.container .red {

	color: #a83d32;

}



/* ç¬¬ä¸å é¦å±*/

.section-first {

	width: 100%;

	background-color: #000;

}



/* èæ¯ */

.section-first>.bg-box>video {

	width: 100%;

	vertical-align: bottom;

}



.section-first .background-image {

	display: none;

}



/* logo */

.section-first .content-box {

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0%;

	left: 0%;

}



.section-first .content-box .logo {

	width: auto;

	position: absolute;

	margin-top: 50px;

	margin-left: 50px;

}



.section-first .content-box .logo img {

	width: 30%;

	margin-right: 1%;

}



/* ææåå®¹ */

.section-first .content-box .handle-box {

	width: 40%;

	height: 70%;

	position: absolute;

	top: 47%;

	right: 6%;

	transform: translate(0%, -50%);

	display: flex;

	flex-direction: column;

	align-items: center;

}



/* å¼¹çªstyle */

.fancybox-close {

	display: none;

}



.fancybox-skin {

	background-color: transparent;

	box-shadow: none !important;

}



.popup-wukong>img {

	position: relative;

}



.popup-wukong>.handle-btn {

	width: 100%;

	position: absolute;

	bottom: 50px;

	left: 0%;

	display: flex;

	justify-content: center;

}



.popup-wukong .handle-btn>.btn-box {

	width: 77%;

	display: flex;

	justify-content: space-between;

}



.popup-wukong .handle-btn>.btn-box>a {

	width: 120px;

	height: 40px;

	font-size: 28px;

	color: #ffe9c587;

	line-height: 35px;

	text-align: center;

	border: 1px solid #ffe9c587;

	text-decoration: none;

}



.popup-wukong .handle-btn>.btn-box>a:hover {

	color: #db9b34;

}



.popup-wukong .handle-btn>.btn-box .wireless-btn {

	width: 260px;

	height: 75px;

	background-image: url('/images/asset-g/black-myth/wireless-btn.png');

	background-size: 100% 100%;

	cursor: pointer;

}



.popup-wukong .handle-btn>.btn-box .wired-btn {

	width: 260px;

	height: 75px;

	background-image: url('/images/asset-g/black-myth/wired-btn.png');

	background-size: 100% 100%;

	cursor: pointer;

}



.popup-wukong .handle-btn>.btn-box .wireless-btn:hover {

	background-image: url('/images/asset-g/black-myth/wireless-btn2.png');

}



.popup-wukong .handle-btn>.btn-box .wired-btn:hover {

	background-image: url('/images/asset-g/black-myth/wired-btn2.png');

}



.handle-box a {

	display: contents;

}



.handle-box img:nth-child(1) {

	width: 38%;

	margin-bottom: 45px;

}



.handle-box img:nth-child(2) {

	width: 60%;

	margin-bottom: 60px;

}



.handle-box img:nth-child(3) {

	width: 45%;

	margin-bottom: 20px;

	cursor: pointer;

}



.handle-box img:nth-child(4) {

	width: 90%;

}



/* ç¬¬äºå åºæ¯å¾*/

.section-two .container {

	width: auto;

	text-align: left;

	padding: 2% 5%;

	position: absolute;

	top: 18%;

	left: 10%;

	background-image: url('/images/asset-g/black-myth/text-box.png');

	background-size: 100% 100%;

	background-repeat: no-repeat;

}



.section-two .container p {

	font-size: 28px !important;

}



/* ç¬¬ä¸å äººç©ä»ç»*/

.section-introduce .container {

	width: 70%;

	padding: 0;

	position: absolute;

	top: 48%;

	left: 45%;

	transform: translate(-50%, -50%);

	z-index: 100;

	display: flex;

	align-items: flex-start;

	flex-direction: column;

}



.section-introduce .container .left-box {

	width: 710px;

	height: auto;

}



.section-introduce .left-box h1 {

	padding-left: 8%;

}



.section-introduce .left-box p {

	font-size: 23px !important;

}



.left-box>.text-bg {

	width: 715px;

	height: auto;

	padding: 30px 45px;

	background-image: url('/images/asset-g/black-myth/text-bg.png');

	background-size: 100% 100%;

	position: relative;

	z-index: 99;

}



.left-box>.switch {

	width: 85%;

	text-align: center;

}



.left-box>.switch>img {

	width: 65%;

	margin-top: -45px;

}



.section-introduce .wukong {

	height: 100%;

	overflow: hidden;

	position: absolute;

	right: 0;

	bottom: 0;

	display: flex;

	align-items: flex-end;

	justify-content: flex-end;

}



.section-introduce .wukong img {

	height: 90%;

	transform: translateX(10%);

}



/* æé®æ ·å¼ */

.section-introduce .btn-box {

	width: 710px;

	margin-top: 55px;

}



.section-introduce ul {

	width: 85%;

	padding: 0;

	display: flex;

	justify-content: space-between;

}



.introduce-btn {

	width: 260px;

	height: 75px;

	background-size: 100% 100% !important;

	cursor: pointer;

}



ul>.btn1 {

	background: url('/images/asset-g/black-myth/introduce-wireless.png?00');

}



ul>.btn2 {

	background: url('/images/asset-g/black-myth/introduce-wired.png?00');

}



ul>.active.btn1 {

	background: url('/images/asset-g/black-myth/introduce-wireless2.png?00');

}



ul>.active.btn2 {

	background: url('/images/asset-g/black-myth/introduce-wired2.png?00');

}



/* ç¬¬åå è½®æ­ç»ä»¶*/

.section-picture .container {

	width: 100%;

	padding: 0;

	text-align: center;

	position: absolute;

	top: 50%;

	left: 0;

	transform: translate(-0%, -50%);

	z-index: 100;

}



.section-picture .container>img {

	width: 35%;

	margin-bottom: 50px;

}



/* Swiper è½®æ­æ ·å¼ */

.swiper-slide {

	width: auto !important;

}



.swiper-slide img {

	width: 100%;

	border: 5px solid #947b5e;

	border-radius: 32px;

}



.swiper-pagination-bullet {

	width: 16px;

	height: 16px;

	background-color: #594830;

	border-radius: 0;

	transform: rotate(45deg);

	display: inline-block;

	opacity: 1;

	margin: 0 15px;

}



.swiper-pagination-bullet:hover {

	background-color: #a78555;

}



.swiper-pagination-bullet-active {

	width: 25px;

	height: 50px;

	margin-top: -10px;

	background-color: transparent;

	transform: rotate(0deg);

	background-image: url('../images/asset-g/black-myth/active.png');

	background-size: 100% 100%;

}



.swiper-pagination-bullet-active:hover {

	background-color: transparent;

}



.swiper-button-front,

.swiper-button-after {

	width: 21px;

	height: 33px;

	cursor: pointer;

	display: inline-block;

}



.swiper-button-front {

	background: url('../images/asset-g/black-myth/front.png') no-repeat;

	background-size: 100%;

}



.swiper-button-after {

	background: url('../images/asset-g/black-myth/after.png') no-repeat;

	background-size: 100%;

}



.swiper-button-front:hover {

	background: url('../images/asset-g/black-myth/front-2.png') no-repeat;

	background-size: 100%;

}



.swiper-button-after:hover {

	background: url('../images/asset-g/black-myth/after-2.png') no-repeat;

	background-size: 100%;

}



.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: 15px;

	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: 17%;

	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;

}



.switch-box {

	width: 1200px;

	margin: 15px auto;

	display: flex;

	align-items: center;

}



.switch-box .pagination {

	display: flex;

	align-items: center;

}



.switch-box .swiper-button {

	width: 80px;

	margin: 0 3% 0 2%;

	display: flex;

	justify-content: space-between;

}



/* ç¬¬äºå-åè½*/

.section-feature .container {

	width: 1200px;

	height: auto;

	padding: 0 !important;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 100;

	display: flex;

	justify-content: space-between;

}



.section-feature .container:before,

.section-feature .container:after {

	content: none;

}



.section-feature .left-box,

.section-feature .right-box {

	width: 585px;

	margin: 0px;

	padding: 0px;

}



.section-feature .left-box div:last-child,

.section-feature .right-box div:last-child {

	margin-bottom: 0px;

}



.section-feature .container h1 {

	font-size: 36px !important;

	color: #ebb37b !important;

	margin: 0;

	font-family: "Qingya-Song" !important;

	font-weight: normal;

}



.section-feature .container p {

	font-size: 18px !important;

	color: #b0aba6 !important;

	line-height: 1.5;

	margin: 20px 0 0;

	font-family: "Qingya-Song" !important;

	font-weight: normal;

}



.left-box .compatible .Windows,

.left-box .compatible .Android {

	display: flex;

	align-items: center;

	flex-direction: row;

	margin-top: 35px;

}



.left-box .compatible .Windows img,

.left-box .compatible .Android img {

	width: 50px;

	margin-right: 50px;

}



.left-box .compatible h2 {

	font-size: 24px;

	color: #e3ded7;

	margin: 0;

	font-family: "Qingya-Song" !important;

	font-weight: normal;

}



.left-box .compatible p,

.left-box .compatible p {

	font-size: 14px !important;

	margin: 0;

}



.section-feature .compatible,

.section-feature .reward,

.section-feature .rocker,

.section-feature .shoulder,

.section-feature .abxy,

.section-feature .d-pad {

	padding: 35px;

	border: 2px solid #947b5e;

	background-color: #00000091;

	border-radius: 20px;

	margin-bottom: 30px;

	overflow: hidden;

}



.section-feature .compatible {

	height: 300px;

	display: flex;

	flex-direction: column;

}



.section-feature .reward {

	height: 230px;

	display: flex;

	flex-direction: column;

	justify-content: center;

}



.section-feature .shoulder {

	height: 560px;

	position: relative;

}



.section-feature .rocker {

	height: 590px;

	display: flex;

	flex-direction: column;

}



.section-feature .rocker img {

	margin-top: 20px;

	border-radius: 20px;

}



.section-feature .abxy,

.section-feature .d-pad {

	display: flex;

	align-items: center;

}



.section-feature .abxy img,

.section-feature .d-pad img {

	border-radius: 16px;

	margin-right: 20px;

}



.section-feature .abxy {

	height: 270px;

}



.section-feature .d-pad {

	height: 290px;

}



/* åè½å¾æ§å¶ */

.shoulder img {

	width: 95%;

	position: absolute;

	right: 0;

}



.spec .col-md-6 hr,

.spec .col-md-12 hr {

	border: .5px solid #716d621f;

}



/* åå²çº¿ */

.divide1,

.divide2,

.divide3,

.divide4,

.divide5 {

	width: 100%;

	position: absolute;

	left: 0;

	bottom: -15%;

	z-index: 99;

}



.divide1,

.divide3 {

	bottom: -14%;

}



.divide4 {

	bottom: -10%;

}



.divide5 {

	bottom: -18%;

}



/* ç¬¬å­å-åæ° */

.section-parameter .container .wireless,

.section-parameter .container .wired {

	display: none;

}



.section-parameter .container {

	position: absolute;

	top: 55%;

	left: 50%;

	transform: translate(-50%, -50%);

	padding: 15px 0 !important;

}



.section-parameter .container #carousel-spec {

	opacity: 1;

}



.section-parameter .container .spec {

	background-color: transparent !important;

}



.section-parameter .none-li>br {

	display: none;

}



.section-parameter .spec>.col-md-12>.none-li {

	font-size: 13px;

}



/* å°äºç­äº 767pxï¼å°äº 768px - ææºç«å±ï¼ä½äº 1k å±å¹ï¼ */

@media screen and (max-width: 767px) {

	html {

		font-size: 13.3333vw !important;

	}



	.section-two .container h1,

	.section-introduce .container h1 {

		font-size: 0.6rem !important;

		padding: 0;

	}



	.section-two .container p {

		font-size: 0.3rem !important;

	}



	/* å¨ç»æ ·å¼ */

	.section-picture .container,

	.section-feature .container {

		overflow: hidden;

	}



	/* ç¬¬ä¸å */

	/* è§é¢å¾çèæ¯åæ¢ */

	.section-first>.bg-box>video {

		display: none;

	}



	.section-first .background-image {

		display: block;

	}



	.section-first .background-image {

		width: 100%;

		background-color: #000;

		position: relative;

	}



	.section-first .content-box {

		height: auto;

		top: 70%;

		left: 50%;

		transform: translate(-50%, -50%);

		overflow: hidden;

	}



	.section-first .content-box .logo {

		position: static;

		margin: 0 0 0.55rem;

		display: flex;

		justify-content: center;

	}



	.section-first .content-box .logo img {

		width: 2.6rem;

		margin: 0;

	}



	.section-first .content-box .handle-box {

		width: 100%;

		position: static;

		transform: none;

	}



	.handle-box img:nth-child(1) {

		display: none;

	}



	.handle-box img:nth-child(2) {

		width: 4.5rem;

		margin-bottom: 0.35rem;

	}



	.handle-box img:nth-child(3) {

		width: 4.4rem;

		margin-bottom: 0;

		order: 2;

	}



	.handle-box img:nth-child(4) {

		width: 110%;

		text-align: center;

		margin-bottom: 0.3rem;

		order: 1;

	}



	/* å¼¹çª */

	.popup-wukong>img {

		width: 6.5rem;

	}



	.popup-wukong {

		position: relative;

	}



	.popup-wukong>.handle-btn {

		height: 100%;

		bottom: 0px;

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.popup-wukong .handle-btn>.btn-box:first-child {

		margin-top: 4.5rem;

	}



	.popup-wukong .handle-btn>.btn-box:last-child {

		width: 4.6rem;

		display: flex;

		flex-wrap: wrap;

		justify-content: space-around;

		margin-top: auto;

		margin-bottom: 0.55rem;

	}



	.popup-wukong .handle-btn>.btn-box .wireless-btn,

	.popup-wukong .handle-btn>.btn-box .wired-btn {

		width: 2.6rem;

		height: 0.75rem;

	}



	.popup-wukong .handle-btn>.btn-box>a {

		width: 2.2rem;

		height: .6rem;

		margin-bottom: 0.1rem;

		font-size: 0.38rem;

		color: #ffe9c587;

		line-height: 0.5rem;

		text-align: center;

		border: 1px solid #ffe9c587;

	}



	/* å®ä¹ .fancybox-close çæ ·å¼ï¼ä½¿å¶ä½äºå¼¹çªåºé¨å¹¶å±ä¸­ */

	.fancybox-close {

		display: block;

		position: absolute;

		top: auto;

		bottom: -.8rem;

		left: 50%;

		transform: translateX(-50%);

		width: 0.7rem;

		height: 0.7rem;

		background: url('/images/asset-g/black-myth/icon/close.png') center / 98% no-repeat;

		cursor: pointer;

	}



	/* ç¬¬äºå */

	.section-two .container {

		width: 5.2rem;

		height: 3rem;

		padding: 4.5% 3% 5%;

		text-align: center;

		top: 30%;

		left: 50%;

		transform: translate(-50%, -50%);

	}



	.section-two .container h1 {

		margin: 0.3rem 0 0.35rem;

	}



	/* ç¬¬ä¸å */

	.section-introduce .container {

		width: 5.2rem;

		text-align: center;

		top: 50%;

		left: 50%;

	}



	.section-introduce .left-box p {

		font-size: 0.26rem !important;

	}



	.section-introduce .container .left-box {

		width: 100%;

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.left-box>.text-bg {

		width: 100%;

		padding: 0.5rem 0.5rem 0.8rem;

		margin-top: 0.28rem;

	}



	.section-introduce .wukong {

		display: none;

	}



	.section-introduce .btn-box {

		width: 100%;

		margin-top: 0.75rem;

	}



	.left-box>.switch {

		width: 100%;

	}



	.left-box>.switch>img {

		width: 4rem;

		margin-top: -0.3rem;

	}



	.section-introduce ul {

		width: 100%;

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.section-introduce ul li:first-child {

		margin-bottom: 0.35rem;

	}



	.introduce-btn {

		width: 2.9rem;

		height: 0.8rem;

	}



	/* ç¬¬åå */

	.switch-box {

		width: 100%;

		display: flex;

		align-items: center;

		justify-content: center;

		margin-top: 0;

	}



	.section-picture .swiper-slide {

		width: 6.2rem !important;

		height: 4.8rem !important;

	}



	.swiper-slide img {

		width: 100%;

		height: 100%;

		border: 3px solid #947b5e;

		border-radius: 12px;

		object-fit: cover;

		object-position: center;

	}



	.swiper-slide .layer-mask {

		border-radius: 12px;

	}



	.section-picture .container>img {

		width: 90%;

		margin-bottom: 0.75rem;

	}



	.switch-box .swiper-button {

		display: none;

	}



	.swiper-pagination-bullet {

		width: 0.12rem;

		height: 0.12rem;

		margin: 0 0.15rem;

	}



	.swiper-pagination-bullet-active {

		width: 13px;

		height: 30px;

		margin-top: -5px;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 0%;

	}



	/* ç¬¬äºå */

	.section-feature .container {

		width: 100%;

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.section-feature .container h1 {

		font-size: 0.36rem !important;

	}



	.left-box .compatible h2 {

		font-size: 0.3rem;

	}



	.section-feature .container p {

		font-size: 0.24rem !important;

		line-height: 1.3;

		margin: 0.25rem 0 0;

	}



	.left-box .compatible p,

	.left-box .compatible p {

		margin: 0.15rem 0 0;

	}



	.section-feature .left-box,

	.section-feature .right-box {

		width: 5.95rem;

	}



	.section-feature .left-box>div:last-child,

	.section-feature .right-box>div:last-child {

		margin-bottom: 0.35rem;

	}



	.section-feature .compatible,

	.section-feature .reward,

	.section-feature .rocker,

	.section-feature .shoulder,

	.section-feature .abxy,

	.section-feature .d-pad {

		height: auto;

		padding: 0.4rem;

		margin-bottom: 0.35rem;

	}



	.left-box .compatible .Windows,

	.left-box .compatible .Android {

		margin-top: 0.33rem !important;

		margin-bottom: 0 !important;

	}



	.left-box .compatible .Windows img,

	.left-box .compatible .Android img {

		width: 0.5rem;

		margin-right: 0.35rem;

	}



	.section-feature .shoulder {

		display: flex;

		flex-direction: column;

	}



	.shoulder h1,

	.shoulder p {

		width: 3rem;

	}



	.shoulder img {

		width: 2.3rem;

		position: absolute;

		top: 50%;

		right: -0.05rem;

		transform: translate(0%, -50%);

	}



	.section-feature .abxy img,

	.section-feature .d-pad img {

		width: 1.95rem;

		margin-right: 0.15rem;

	}



	/* ç¬¬å­å */

	.section-parameter .container .wireless,

	.section-parameter .container .wired {

		display: block;

	}



	.section-parameter .container .wired {

		margin-top: 0.8rem;

	}



	.section-parameter .container {

		width: 5.95rem;

		top: 50%;

	}



	.section-parameter .container .spec>.col-sm-6,

	.section-parameter .container .spec>.col-sm-6>.col-sm-12 {

		padding: 0;

	}



	.section-parameter #carousel-spec {

		display: none;

	}



	.section-parameter .container .col-sm-12 {

		text-align: center;

	}



	.section-parameter .container .col-sm-12>img {

		width: 3rem;

		margin-top: 0.8rem;

	}



	.section-parameter .container .wireless>img {

		width: 3.9rem;

		margin-top: 0.8rem;

	}



	.section-parameter.spec h1 {

		font-size: 0.6rem !important;

	}



	.section-parameter .container h3,

	.section-parameter .container li {

		font-size: 0.24rem !important;

		line-height: 1.5 !important;

		text-align: center;

		list-style: none;

	}



	.section-parameter .container h3 {

		font-size: 0.3rem !important;

		margin-top: 0.4rem;

	}



	.section-parameter .spec>.col-md-12>.none-li {

		font-size: 0.17rem !important;

	}



	.section-parameter .parting {

		width: 7.5rem;

		margin: 0 !important;

		position: absolute;

		top: 0;

		left: 50%;

		transform: translate(-50%, -50%);

	}



	.section-parameter .hr-hide {

		opacity: 0;

		height: 0.5rem;

		margin: 0 !important;

	}



	.section-parameter .none-li>br {

		display: block;

	}



	/* ç¬¬äºå */

	.divide1,

	.divide2,

	.divide3 {

		bottom: -5%;

	}



	.divide4 {

		bottom: -6%;

	}



	.divide5 {

		bottom: -3%;

	}

}



/* 768px å° 1023pxï¼768px å° 1023px - å¹³æ¿åå¤§ææºï¼1k å±å¹ï¼ */

@media only screen and (min-width: 768px) and (max-width: 1023px) {



	/* ç¬¬ä¸å */

	.section-first .content-box .logo {

		margin-top: 20px;

		margin-left: 15px;

	}



	.handle-box img:nth-child(1) {

		width: 45%;

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(2) {

		width: 70%;

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(3) {

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(4) {

		width: 100%;

	}



	/* å¼¹çª */

	.popup-wukong>img {

		width: 90vw;

	}



	.popup-wukong>.handle-btn {

		bottom: 25px;

	}



	.popup-wukong .handle-btn>.btn-box .wireless-btn,

	.popup-wukong .handle-btn>.btn-box .wired-btn {

		width: 150px;

		height: 41px;

	}



	.popup-wukong>.handle-btn {

		bottom: 20px;

	}



	.popup-wukong .handle-btn>.btn-box>a {

		width: 90px;

		height: 30px;

		font-size: 18px;

		line-height: 27px;

	}



	/* ç¬¬äºå */

	.section-two .container {

		text-align: center;

		padding: 2% 3% 2.5%;

		top: 30%;

		left: 50%;

		transform: translate(-50%, -50%);

	}



	.section-two .container h1,

	.section-introduce .container h1 {

		font-size: 45px !important;

	}



	.section-two .container p {

		font-size: 18px !important;

	}



	/* ç¬¬ä¸å */

	.section-introduce .container {

		left: 40%;

	}



	.section-introduce .container .left-box {

		width: 390px;

	}



	.left-box>.text-bg {

		width: 95%;

		padding: 20px 20px;

	}



	.left-box>.switch {

		width: 100%;

	}



	.section-introduce .left-box p {

		font-size: 15px !important;

	}



	.section-introduce .btn-box {

		width: 390px;

		margin-top: 20px;

	}



	.section-introduce ul {

		width: 100%;

		display: flex;

		justify-content: space-around;

	}



	.introduce-btn {

		width: 145px;

		height: 40px;

	}



	.section-introduce .wukong img {

		transform: translateX(25%);

	}



	.section-first .content-box .logo img {

		width: 25%;

	}



	/* ç¬¬åå */

	.section-picture .container>img {

		margin-bottom: 20px;

	}



	.swiper-slide img {

		width: 600px;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 8%;

	}



	.switch-box {

		width: 600px;

	}



	.switch-box .swiper-button-front {

		margin-right: 15px;

	}



	.section-parameter .container .spec {

		margin: 0;

	}



	/* ç¬¬äºå */

	.section-feature .container {

		width: 760px;

	}



	.section-feature .left-box,

	.section-feature .right-box {

		width: 377.5px;

		overflow: hidden;

	}



	.section-feature .compatible,

	.section-feature .reward,

	.section-feature .rocker,

	.section-feature .shoulder,

	.section-feature .abxy,

	.section-feature .d-pad {

		padding: 15px;

		margin-bottom: 5px;

	}



	.section-feature .container h1 {

		font-size: 28px !important;

	}



	.section-feature .container p {

		font-size: 15px !important;

	}



	.section-feature .shoulder {

		height: 415px;

	}



	.section-feature .compatible {

		height: 220px;

	}



	.left-box .compatible .Windows img,

	.left-box .compatible .Android img {

		margin-right: 25px;

	}



	.section-feature .reward {

		height: 190px;

	}



	.left-box .compatible .Windows,

	.left-box .compatible .Android {

		margin-top: 10px;

	}



	.section-feature .rocker {

		height: 430px;

	}



	.section-feature .abxy {

		height: 210px;

	}



	.section-feature .d-pad {

		height: 215px;

	}



	.section-feature .abxy img,

	.section-feature .d-pad img {

		width: 120px;

		margin-right: 10px;

	}



	/* ç¬¬å­å */

	.section-parameter .container {

		top: 52%;

	}



	.spec .container .carousel {

		padding: 0;

	}



	.section-parameter.spec h1 {

		margin: 0;

	}



	.spec .text-left h3 {

		margin-top: 10px;

	}



	.section-parameter .container #carousel-spec img {

		width: 80%;

		margin: 0 auto;

	}



	.spec .col-md-6 hr {

		margin: 10px 0;

	}



	.divide2 {

		bottom: -15%;

	}



	.divide2 {

		bottom: -12%;

	}



	.divide4 {

		bottom: -13%;

	}



	.divide3,

	.divide5 {

		bottom: -10%;

	}

}



/* 1024px å° 1279pxï¼1024px å° 1279px - å°åæ¡é¢åå¤§åå¹³æ¿ï¼1k å° 1.5k å±å¹ï¼ */

@media only screen and (min-width: 1024px) and (max-width: 1279px) {



	/* ç¬¬ä¸å */

	.section-first .content-box .logo {

		margin-top: 20px;

		margin-left: 15px;

	}



	.handle-box img:nth-child(1) {

		width: 45%;

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(2) {

		width: 70%;

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(3) {

		margin-bottom: 15px;

	}



	.handle-box img:nth-child(4) {

		width: 100%;

	}



	/* å¼¹çª */

	.popup-wukong>img {

		width: 90vw;

	}



	.popup-wukong .handle-btn>.btn-box .wireless-btn,

	.popup-wukong .handle-btn>.btn-box .wired-btn {

		width: 180px;

		height: 50px;

	}



	.popup-wukong>.handle-btn {

		bottom: 35px;

	}



	.popup-wukong .handle-btn>.btn-box>a {

		width: 100px;

		height: 35px;

	}



	/* ç¬¬äºå */

	.section-two .container {

		padding: 2% 3% 2.5%;

		top: 15%;

		left: 10%;

	}



	.section-two .container h1,

	.section-introduce .container h1 {

		font-size: 45px !important;

	}



	.section-two .container p {

		font-size: 18px !important;

	}



	/* ç¬¬ä¸å */

	.section-introduce .container .left-box {

		width: 450px;

	}



	.left-box>.text-bg {

		width: 450px;

		padding: 20px 20px;

	}



	.left-box>.switch {

		width: 100%;

	}



	.section-introduce .left-box p {

		font-size: 15px !important;

	}



	.section-introduce .btn-box {

		width: 450px;

		margin-top: 20px;

	}



	.section-introduce ul {

		width: 100%;

	}



	.introduce-btn {

		width: 170px;

		height: 50px;

	}



	.section-introduce .wukong img {

		transform: translateX(18%);

	}



	.section-first .content-box .logo img {

		width: 25%;

	}



	/* ç¬¬åå */

	.section-picture .container>img {

		margin-bottom: 20px;

	}



	.swiper-slide img {

		width: 650px;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 15%;

	}



	.switch-box {

		width: 650px;

	}



	.section-parameter .container .spec {

		margin: 0;

	}



	/* ç¬¬äºå */

	.section-feature .container {

		width: 990px;

		overflow: hidden;

	}



	.section-feature .left-box,

	.section-feature .right-box {

		width: 490px;

	}



	.section-feature .compatible,

	.section-feature .reward,

	.section-feature .rocker,

	.section-feature .shoulder,

	.section-feature .abxy,

	.section-feature .d-pad {

		padding: 25px;

		margin-bottom: 10px;

	}



	.section-feature .container h1 {

		font-size: 28px !important;

	}



	.section-feature .container p {

		font-size: 15px !important;

	}



	.section-feature .shoulder {

		height: 460px;

	}



	.section-feature .compatible {

		height: 260px;

	}



	.section-feature .reward {

		height: 190px;

	}



	.left-box .compatible .Windows,

	.left-box .compatible .Android {

		margin-top: 20px;

	}



	.section-feature .rocker {

		height: 490px;

	}



	.section-feature .abxy {

		height: 240px;

	}



	.section-feature .d-pad {

		height: 240px;

	}



	/* ç¬¬å­å */

	.section-parameter .container {

		top: 52%;

	}



	.spec .container .carousel {

		padding: 0;

	}



	.section-parameter.spec h1 {

		margin: 0;

	}



	.spec .text-left h3 {

		margin-top: 20px;

	}



	.section-parameter .container #carousel-spec img {

		width: 80%;

		margin: 0 auto;

	}



	.spec .col-md-6 hr {

		margin: 10px 0;

	}



	.divide2 {

		bottom: -12%;

	}



	.divide4 {

		bottom: -15%;

	}



	.divide3,

	.divide5 {

		bottom: -10%;

	}

}



@media only screen and (min-width: 1280px) and (max-width: 1365px) {



	/* å¼¹çª */

	.popup-wukong>img {

		width: 80vw;

	}



	.popup-wukong .handle-btn>.btn-box .wireless-btn,

	.popup-wukong .handle-btn>.btn-box .wired-btn {

		width: 180px;

		height: 50px;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 6%;

	}



	/* ç¬¬äºå */

	.section-feature .container {

		width: 990px;

	}



	.section-feature .left-box,

	.section-feature .right-box {

		width: 490px;

	}



	.section-feature .compatible,

	.section-feature .reward,

	.section-feature .rocker,

	.section-feature .shoulder,

	.section-feature .abxy,

	.section-feature .d-pad {

		padding: 25px;

		margin-bottom: 10px;

	}



	.section-feature .container h1 {

		font-size: 28px !important;

	}



	.section-feature .container p {

		font-size: 15px !important;

	}



	.section-feature .shoulder {

		height: 460px;

	}



	.section-feature .compatible {

		height: 260px;

	}



	.section-feature .reward {

		height: 190px;

	}



	.left-box .compatible .Windows,

	.left-box .compatible .Android {

		margin-top: 20px;

	}



	.section-feature .rocker {

		height: 490px;

	}



	.section-feature .abxy {

		height: 240px;

	}



	.section-feature .d-pad {

		height: 240px;

	}

}



/* 1366px å° 1599pxï¼1366px å° 1599px - å¤§åæ¡é¢ï¼2k å±å¹ï¼ */

@media only screen and (min-width: 1366px) and (max-width: 1599px) {



	.section-two .container h1,

	.section-introduce .container h1 {

		font-size: 55px !important;

	}



	.section-two .container p {

		font-size: 18px !important;

	}



	.section-introduce .left-box p {

		font-size: 15px !important;

	}



	.section-first .content-box .handle-box {

		top: 45%;

	}



	/* å¼¹çª */

	.popup-wukong>img {

		width: 80vw;

	}



	.popup-wukong .handle-btn>.btn-box .wireless-btn,

	.popup-wukong .handle-btn>.btn-box .wired-btn {

		width: 180px;

		height: 50px;

	}



	.popup-wukong>.handle-btn {

		bottom: 35px;

	}



	.section-two .container {

		top: 16%;

		padding: 2% 3% 3%;

	}



	.section-introduce .container .left-box {

		width: 520px;

	}



	.left-box>.text-bg {

		width: 520px;

		padding: 30px 35px;

	}



	.left-box>.switch>img {

		width: 60%;

		margin-top: -55px;

	}



	.left-box>.switch,

	.section-introduce .btn-box,

	.section-introduce ul {

		width: 520px;

	}



	.section-introduce .btn-box {

		margin-top: 35px;

	}



	.section-introduce .wukong img {

		transform: translateX(15%);

	}



	.section-introduce ul {

		display: flex;

		justify-content: space-around;

	}



	.introduce-btn {

		width: 210px;

		height: 55px;

	}



	/* ç¬¬åå-è½®æ­ */

	.section-picture .container>img {

		margin-bottom: 35px;

	}



	.swiper-slide img {

		width: 850px;

		border: 3px solid #947b5e;

		border-radius: 32px;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 17%;

	}



	.switch-box {

		width: 800px;

	}



	/* ç¬¬äºå-åè½ */

	.section-feature .container h1 {

		font-size: 28px !important;

	}



	.section-feature .container p {

		font-size: 16px !important;

	}



	.left-box .compatible h2,

	.left-box .compatible h2 {

		font-size: 22px;

	}



	.section-feature .container {

		width: 910px;

	}



	.section-feature .left-box,

	.section-feature .right-box {

		width: 450px;

	}



	.left-box .compatible .Windows img,

	.left-box .compatible .Android img {

		margin-right: 30px;

	}



	.section-feature .compatible,

	.section-feature .reward,

	.section-feature .rocker,

	.section-feature .shoulder,

	.section-feature .abxy,

	.section-feature .d-pad {

		padding: 20px;

		margin-bottom: 10px;

	}



	.section-feature .shoulder {

		height: 440px;

	}



	.section-feature .compatible {

		height: 235px;

	}



	.section-feature .reward {

		height: 195px;

	}



	.left-box .compatible .Windows,

	.left-box .compatible .Android {

		margin-top: 20px;

	}



	.section-feature .rocker {

		height: 470px;

	}



	.section-feature .abxy {

		height: 220px;

	}



	.section-feature .d-pad {

		height: 240px;

	}



	.section-feature .abxy img,

	.section-feature .d-pad img {

		width: 180px;

		margin-right: 15px;

	}



	/* ç¬¬å­å-åæ° */

	.section-parameter .container {

		top: 53%;

	}



	.spec .container .carousel {

		padding: 0;

	}



	.section-parameter.spec h1 {

		margin: 0;

	}



	.spec .text-left h3 {

		margin-top: 20px;

	}



	.section-parameter .container #carousel-spec img {

		width: 80%;

		margin: 0 auto;

	}



	.spec .col-md-6 hr {

		margin: 10px 0;

	}

}



/* 1600px å° 1919pxï¼1600px å° 1919px - å¤§åæ¡é¢ï¼2k å±å¹ï¼ */

@media only screen and (min-width: 1600px) and (max-width: 1900px) {

	/* éå¯¹ 1600px å° 1919px çæ ·å¼ */

}



/* 1920px å° 2559.99pxï¼1920px å° 2560px - è¶å¤§åæ¡é¢ï¼2k å° 2.5k å±å¹ï¼ */

@media only screen and (min-width: 1930px) and (max-width: 2559px) {

	.divide5 {

		bottom: -21%;

	}

}



/* 2560px å° 2879.99pxï¼2560px å° 2880px - ç¹å«éå¯¹ 2560pxï¼2.5k å° 3k å±å¹ï¼ */

@media only screen and (min-width: 2560px) and (max-width: 2879px) {

	.section-two .container {

		top: 20%;

		left: 13%;

	}



	.section-introduce .container {

		left: 48%;

	}



	.section-introduce .container .left-box {

		width: 820px;

	}



	.left-box>.text-bg {

		width: 820px;

		padding: 45px 45px;

	}



	.left-box>.switch>img {

		width: 70%;

		margin-top: -60px;

	}



	.section-introduce .btn-box {

		width: 820px;

	}



	.section-introduce .btn-box {

		margin-top: 60px;

	}



	.section-introduce .wukong img {

		transform: translateX(5%);

	}



	.section-picture .container>img {

		width: 30%;

		margin-bottom: 70px;

	}



	.divide4 {

		bottom: -13%;

	}



	.divide5 {

		bottom: -22%;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 24.5%;

	}

}



/* 2880px åä»¥ä¸ï¼2880px åä»¥ä¸ - è¶é«åè¾¨çè®¾å¤ï¼3k åä»¥ä¸å±å¹ï¼ */

@media only screen and (min-width: 2880px) {

	.popup-wukong>img {

		width: 60vw;

	}



	.popup-wukong>.handle-btn {

		bottom: 5vh;

	}



	.section-two .container {

		left: 15%;

	}



	.section-introduce .container {

		left: 50%;

	}



	.section-introduce .container .left-box {

		width: 800px;

	}



	.left-box>.text-bg {

		width: 800px;

	}



	.left-box>.switch {

		width: 90%;

	}



	.left-box>.switch>img {

		width: 80%;

		margin-top: -45px;

	}



	.section-introduce .btn-box {

		width: 800px;

	}



	.section-introduce ul {

		width: 90%;

	}



	.divide1,

	.divide3,

	.divide4 {

		bottom: -15%;

	}



	.divide2 {

		bottom: -13%;

	}



	.divide5 {

		bottom: -20%;

	}



	.swiper-container .swiper-button-front2,

	.swiper-container .swiper-button-after2 {

		width: 30%;

	}

}