html {

	font-size: calc(100vw / 25.6);

}



body {

	background: #000;

}



h1,

p {

	margin: 0;

	line-height: 1 !important;

	letter-spacing: 0;

	color: #efefef;

}



/* 思源 SourceHanSansCN*/

/* 常规 */

@font-face {

	font-family: 'SourceHanSansCN-Regular';

	src: url('../fonts/source/SourceHanSansCN-Regular.ttf');

	font-weight: normal;

	font-style: normal;

	font-display: swap;

}



/* 中等 */

@font-face {

	font-family: 'SourceHanSansCN-Medium';

	src: url('../fonts/source/SourceHanSansCN-Medium.ttf');

	font-weight: normal;

	font-style: normal;

	font-display: swap;

}



/* 细体 */

@font-face {

	font-family: 'SourceHanSansCN-Light';

	src: url('../fonts/source/SourceHanSansCN-Light.ttf');

	font-weight: normal;

	font-style: normal;

	font-display: swap;

}



/* SVG按钮封装 */

:root {

	--glow-color: #7e6dfa;

}



.svg-btn {

	overflow: visible !important;

}



.svg-btn .a {

	fill: none;

	stroke: #7e6dfa;

	stroke-miterlimit: 10;

	transition: .5s;

}



.svg-btn .b {

	fill: #7e6dfa;

	opacity: 0.14;

	transition: .5s;

}



.svg-btn .txt {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 2.2em;

	letter-spacing: 0.2em;

	fill: #ffffff;

	transition: .5s;

}



.svg-btn:hover {

	--glow-color: #ca8e2e;

	transition: .5s;

}



.svg-btn:hover .a {

	stroke: #db9b34;

}



.svg-btn:hover .b {

	fill: #db9b34;

}



.svg-btn:hover .txt {

	fill: #ca8e2e;

}



.section-first,

.section-trait,

.section-intro,

.section-picture,

.section-ability,

.section-software,

.section-spec {

	position: relative;

	overflow: hidden;

}



/* 马赛克效果封装 */

.pixel-reveal {

	position: relative;

	overflow: hidden;

	display: inline-block;

}



/* 像素层调整 */

.pixel-reveal>.pixel-layer {

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 2;

	display: grid;

	pointer-events: none;

}



/* 图片层调整 */

.pixel-reveal>img {

	width: 100%;

	height: 100%;

	position: relative;

	z-index: 1;

	opacity: 0;

	object-fit: cover;

	transition: opacity 1s ease 0.5s;

}



/* 像素块样式 */

.pixel-reveal .pixel {

	opacity: 0;

	transform: scale(1.2);

	transition:

		opacity 1s ease,

		transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	background-repeat: no-repeat;

	background-size: cover;

}



/* 激活状态 */

.pixel-reveal.active .pixel {

	opacity: 1;

	transform: scale(1);

}



/* 打字效果 */

.typing-effect {

	display: inline-block;

	white-space: pre-wrap;

	/* 允许换行 */

	overflow: hidden;

	word-break: break-word;

}



/* 闪烁的光标 */

.typing-effect::after {

	content: "";

	display: inline-block;

	width: 0.05em;

	height: 1em;

	background-color: white;

	animation: blink 1s infinite;

	vertical-align: middle;

	margin-left: 0.05rem;

}



@keyframes blink {

	50% {

		opacity: 0;

	}

}



/* 打字完成隐藏光标 */

.no-cursor::after {

	display: none;

}



/* 首屏 */

.section-first #videos1 {

	display: block;

}



.section-first #videos2 {

	display: none;

}



.section-first .bg-image {

	display: none;

}



.section-first .bg-video video {

	width: 25.6rem;

	display: block;

}



/* 首屏内容 */

.section-first .content-box {

	position: absolute;

	top: 1.7rem;

	left: 1.65rem;

	display: flex;

	flex-direction: column;

	align-items: center;

}



.section-first .content-box>h1 {

	font-size: 0.4rem !important;

	font-family: 'SourceHanSansCN-Medium' !important;

	text-shadow: 2px 2px 5px #000;

	margin-right: 0.15rem;

}



.section-first .content-box>p {

	font-size: 0.26rem !important;

	font-family: 'SourceHanSansCN-Medium' !important;

	margin-top: 0.2rem;

	text-transform: uppercase;

}



.section-first .content-box .img1 {

	position: relative;

}



.section-first .content-box .img1>object {

	display: block;

	position: relative;

	height: 0.8rem;

	margin-bottom: 0.2rem;

}



.section-first .content-box .img2 {

	position: relative;

	width: 8.8rem;

	height: 3.98rem;

	margin: 0.93rem 0;

}



.section-first .content-box .img2>img {

	width: 14.21rem;

	height: auto;

	position: absolute;

	left: 50%;

	top: 50%;

	transform: translate(-50%, -50%);

}



.section-first .content-box>a {

	margin-bottom: 0.5rem;

}



.section-first .content-box svg {

	width: 3.65rem;

	cursor: pointer;

}



/* 弹窗样式 */

.popup-heibao {

	width: 6rem;

	text-align: center;

}



.popup-heibao>img {

	width: 94%;

	margin-top: 1.08rem;

}



.popup-heibao .btn-box {

	margin-top: 0.65rem;

}



.popup-heibao .btn-box .bg-btn {

	width: 100%;

	height: 1.3rem;

	background: url('/images/asset-h/keyboard-mechabreak/btn.png') no-repeat;

	background-size: 100% 100%;

	display: flex;

	justify-content: center;

	align-items: center;

}



.popup-heibao .btn-box .bg-btn:hover {

	background: url('/images/asset-h/keyboard-mechabreak/btn-hover.png') no-repeat;

	background-size: 100% 100%;

}



.popup-heibao .btn-box .bg-btn span {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.27rem;

	color: #efefef;

}



.popup-heibao .btn-box .bg-btn:hover span {

	color: #ca8e2e;

}



/* 基础弹窗样式 */

.fancybox-overlay {

	background-image: none;

}



.fancybox-wrap {

	width: 8.25rem !important;

	height: 10.87rem !important;

	background: url('/images/asset-h/keyboard-mechabreak/popup.png') no-repeat center/cover;

	background-size: 100% 100%;

}



.fancybox-wrap .fancybox-skin {

	background: none;

	box-shadow: none;

	display: flex;

	justify-content: center;

}



/* 特点 */

.section-trait img {

	width: 100%;

}



.section-trait .content-box {

	width: 16.8rem;

	height: auto;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}



.section-trait .content-box .box {

	width: 3.1rem;

	height: 1.8rem;

	margin: 0.2rem 0.05rem;

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	background-image: url('/images/asset-h/keyboard-mechabreak/frame.png');

	background-repeat: no-repeat;

	background-size: 100% 100%;

}



.section-trait .content-box .box img {

	width: 0.9rem;

	margin-bottom: 0.1rem;

}



.section-trait .content-box .box p {

	font-size: 0.18rem !important;

	font-family: 'SourceHanSansCN-Regular' !important;

}



/* 视频板块 */

.section-video {

	position: relative;

}



.section-video .container {

	width: 100%;

	height: 100%;

	position: absolute;

	bottom: 0;

	display: flex;

	justify-content: center;

	align-items: center;

}



.section-video .covervid-video {

	vertical-align: bottom !important;

}



.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-intro #videos1 {

	display: block;

}



.section-intro #videos2 {

	display: none;

}



.section-intro .bg-video video {

	width: 100%;

	display: block;

}



.section-intro .bg-video>img {

	width: 7.3rem;

	height: 6.9rem;

	position: absolute;

	top: 0;

	left: 0;

}



.section-intro .content-box {

	width: 9.3rem;

	height: 5.15rem;

	position: absolute;

	top: 1.35rem;

	left: 2.4rem;

}



.section-intro .content-box>img {

	width: 13.55rem;

	position: absolute;

	top: 52%;

	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 1;

}



.section-intro .content-box .text-box {

	width: 7.2rem;

	position: absolute;

	top: 52%;

	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 2;

}



.section-intro .text-box h1 {

	margin: 0.05rem 0 0.13rem;

}



.section-intro .text-box h1>img {

	width: 2.13rem;

}



.section-intro .text-box h2 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.44rem;

	color: #efefef;

	margin: 0;

}



.section-intro .text-box h3 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.36rem;

	color: #efefef;

	margin: 0;

}



.section-intro .text-box p {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.24rem !important;

	line-height: 1.5 !important;

	margin-top: 0.3rem;

	height: 1.9rem;

	opacity: 0;

}



/* 轮播图板块 */

.section-picture img {

	width: 100%;

}



.section-picture .content-box {

	width: 100%;

	position: absolute;

	top: 0;

}



.section-picture .content-box>h1 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.68rem !important;

	color: #7e6dfa !important;

	text-align: center;

	margin: 2.6rem 0 1.4rem;

}



/* Swiper */

.swiper-slide {

	width: 17.2rem !important;

	height: 9.1rem;

	padding: 0.01rem;

	background-color: #583af8;

	clip-path: polygon(0 0, 15.3rem 0, 100% 3.2rem, 100% 100%, 100% 100%, 1.8rem 100%, 0 6.15rem);

	margin: 0 4.2rem !important;

}



.swiper-slide img {

	width: 100%;

	height: 100%;

	clip-path: polygon(0 0, 15.28rem 0, 100% 3.2rem, 100% 100%, 100% 100%, 1.8rem 100%, 0 6.13rem);

	/* 控制裁剪焦点 */

	object-fit: cover;

	object-position: center;

}



.swiper-slide .icon {

	position: absolute;

	top: 0.5rem;

	left: 0.5rem;

}



.swiper-slide .icon>.fa {

	color: #583af8;

	cursor: pointer;

	font-size: 0.4rem;

	/* opacity: .5; */

}



.swiper-slide .icon>.fa:hover {

	color: #db9b34;

	opacity: 1;

}



.swiper-pagination-bullet {

	width: 0.25rem;

	height: 0.23rem;

	background-color: #1e1f25;

	border-radius: 0;

	box-sizing: border-box;

	transform: skew(-60deg);

	transition: .5s;

	display: inline-block;

	opacity: 1;

	margin: 0 0.2rem;

}



.swiper-pagination-bullet:hover {

	background-color: #583af8;

}



.swiper-pagination-bullet-active {

	background-color: #583af8;

}



.swiper-pagination-bullet-active:hover {

	background-color: #583af8;

}



.swiper-button-front,

.swiper-button-after {

	width: 21px;

	height: 33px;

	cursor: pointer;

	display: inline-block;

	opacity: .8;

	transition: .6s;

}



.section-picture [class^="swiper-button"]:hover {

	opacity: 1;

}



.swiper-button-front {

	width: 0.7rem;

	height: 0.55rem;

	background: url('/images/asset-h/keyboard-mechabreak/icon/left-icon.svg') no-repeat;

	background-size: 100%;

	position: absolute;

	left: 2.2rem;

	top: 3.3rem;

	z-index: 2;

}



.swiper-button-after {

	width: 0.7rem;

	height: 0.55rem;

	background: url('/images/asset-h/keyboard-mechabreak/icon/right-icon.svg') no-repeat;

	background-size: 100%;

	position: absolute;

	right: 2.2rem;

	top: 3.3rem;

	z-index: 2;

}



.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;

}



/* swiper Mask */

.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;

}



.switch-box .pagination {

	width: 12.9rem;

	height: 0.73rem;

	margin: 0 auto;

	display: flex;

	align-items: flex-end;

}



.switch-box .swiper-button {

	width: 80px;

	margin: 0 3% 0 2%;

	display: flex;

	justify-content: space-between;

}



/* 功能板块 */

.section-ability img {

	width: 100%;

}



.section-ability .content-box {

	width: 15rem;

	height: auto;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



.section-ability [class^="ability"] {

	background-repeat: no-repeat;

	background-size: 100% 100%;

	margin-bottom: 0.26rem;

}



.section-ability [class^="ability"]>h1 {

	font-family: 'SourceHanSansCN-Medium' !important;

	color: #fff;

	font-size: 0.36rem !important;

	line-height: 1.2 !important;

	padding-bottom: 0.2rem;

}



.section-ability [class^="ability"]>p,

.ability-7 .ability-box:first-child p {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.18rem !important;

	line-height: 1.5 !important;

	opacity: .7;

}



.section-ability .ability-1 {

	width: 7.37rem;

	height: 3.22rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-1.png');

	display: flex;

	flex-direction: column;

	flex-wrap: wrap;

	justify-content: center;

	align-content: center;

}



.section-ability .ability-1 h1,

.section-ability .ability-1 p,

.section-ability .ability-2 h1,

.section-ability .ability-2 p {

	width: 3rem;

}



.section-ability .ability-1 img {

	width: 3.05rem;

	margin-left: 0.45rem;

}



.section-ability .ability-2 {

	width: 7.37rem;

	height: 3.22rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-2.png');

	display: flex;

	flex-direction: column;

	flex-wrap: wrap;

	justify-content: center;

	align-content: center;

}



.section-ability .ability-2 img {

	width: 3.05rem;

	margin-right: 0.45rem;

}



.section-ability .ability-3 {

	width: 10rem;

	height: 6.42rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-3.png');

	position: relative;

}



.section-ability .ability-3 img {

	width: 9.98rem;

	position: absolute;

	left: 50%;

	bottom: 0.01rem;

	transform: translate(-50%, 0%);

}



.section-ability .ability-3 p {

	width: 100%;

	text-align: left;

	padding: 0 0.43rem;

}



.section-ability .ability-3 h1 {

	width: 100%;

	text-align: left;

	padding: 0.5rem 0.43rem 0.2rem;

}



.section-ability .ability-4 {

	width: 4.74rem;

	height: 6.42rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-4.png');

	text-align: center;

}



.section-ability .ability-4 img {

	width: 4.71rem;

	padding: 0.02rem 0 0.3rem;

}



.section-ability .ability-5 {

	width: 4.87rem;

	height: 5.12rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-5.png');

	text-align: center;

}



.section-ability .ability-5,

.section-ability .ability-6,

.ability-7 .ability-box:last-child {

	padding: 0 0.4rem;

}



.section-ability .ability-5 h1,

.section-ability .ability-6 h1 {

	padding-top: 0.5rem;

}



.section-ability .ability-5 p {

	padding-bottom: 0.66rem;

}



.section-ability .ability-5 img {

	width: 2.1rem;

	height: 2.1rem;

}



.section-ability .ability-6 {

	width: 4.87rem;

	height: 5.12rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-6.png');

	text-align: center;

}



.section-ability .ability-6 img {

	width: 3rem;

	padding-top: 0.38rem;

}



.section-ability .ability-7 {

	width: 4.74rem;

	height: auto;

	display: flex;

	flex-wrap: wrap;

}



.ability-7 .ability-box:first-child {

	width: 4.74rem;

	height: 2.43rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-2.png');

	display: flex;

	text-align: center;

	justify-content: space-evenly;

	align-items: center;

}



.ability-7 .ability-box:first-child .icon {

	width: 1.05rem;

}



.ability-7 .ability-box:first-child img {

	height: 0.45rem;

	margin-bottom: 0.2rem;

}



.ability-7 .ability-box:first-child h3 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.24rem !important;

	color: #fff;

	margin: 0 0 0.1rem;

}



.ability-7 .ability-box:first-child p {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.18rem !important;

	opacity: .7;

}



.ability-7 .ability-box:last-child {

	width: 4.74rem;

	height: 2.43rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg-1.png');

	text-align: center;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}



.ability-7 .ability-box:last-child img {

	width: 2.2rem;

	margin: 0 0 0.2rem;

}



/* 精英软件 */

.section-software>img {

	width: 100%;

}



.section-software .content-box {

	width: 15rem;

	height: auto;

	position: absolute;

	top: 0;

	left: 50%;

	transform: translate(-50%, 0);

	display: flex;

	flex-direction: column;

	text-align: center;

}



.section-software .content-box>h1 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.68rem !important;

	color: #7e6dfa !important;

	margin: 0.9rem 0 0.55rem;

}



.section-software .content-box>p {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.24rem !important;

	line-height: 1.3 !important;

	color: #fff !important;

	text-align: center;

}



.section-software .feature-btn {

	margin: 0.65rem 0 0.55rem;

}



.section-software .feature-btn svg {

	width: 5.15rem;

	height: 0.85rem;

}



.section-software .software-img {

	display: flex;

	justify-content: space-between;

}



.software-img>div {

	width: 7.05rem;

	height: 6.45rem;

	background-image: url('/images/asset-h/keyboard-mechabreak/bg-software.png');

	background-repeat: no-repeat;

	background-size: 100% 100%;

	color: #ffffff;

	text-align: left;

}



.software-img>div>img {

	width: 6.71rem;

	height: 4.5rem;

	margin: 0.15rem 0.2rem 0;

	border: 0.02rem solid #232426;

}



.software-img h2 {

	font-family: 'SourceHanSansCN-Medium' !important;

	width: 6.2rem;

	font-size: 0.43rem;

	padding-left: 0.2rem;

	margin: 0.55rem 0 0.2rem;

}



.software-img p {

	font-family: 'SourceHanSansCN-Regular' !important;

	font-size: 0.2rem !important;

	width: 6.2rem;

	padding-left: 0.2rem;

}



/* 参数板块 */

.section-spec>img {

	width: 100%;

}



.section-spec .content-box {

	width: 15rem;

	height: auto;

	position: absolute;

	top: 0;

	left: 50%;

	transform: translate(-50%, 0%);

	margin-top: 1rem;

	display: flex;

	flex-direction: column;

	align-items: center;

}



.section-spec .content-box>h1 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.68rem !important;

	color: #7e6dfa !important;

}



.section-spec .content-box>img {

	width: 9rem;

	height: 2.6rem;

	margin: 1.2rem 0 0.4rem;

}



.spec-box>div {

	padding: 0;

}



.spec-box h3 {

	font-family: 'SourceHanSansCN-Medium' !important;

	font-size: 0.35rem !important;

	color: #ffffff !important;

	margin: 0.75rem 0 0;

}



.spec-box hr {

	border: 1px solid #583af83b;

	margin: 0.30rem 0;

}



.spec-box li {

	font-family: 'SourceHanSansCN-Light' !important;

	font-size: 0.19rem !important;

	color: #ffffff !important;

	position: relative;

	list-style-type: none;

	padding-left: 0.3rem;

	margin-bottom: 0.05rem;

}



.spec-box li::before {

	content: "";

	position: absolute;

	left: 0;

	top: 45%;

	width: 0.09rem;

	/* 控制 SVG 图标大小 */

	height: 0.11rem;

	background: url("/images/asset-h/keyboard-mechabreak/icon/arrow.svg") no-repeat center / contain;

	transform: translateY(-50%);

}



/*幻灯片过场效果-start*/

.Carousel .container {

	position: absolute;

	text-align: left;

	width: 100%;

	top: 11%;

	padding-right: 15%;

	padding-left: 52%;

}



.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;

}



.footer-wrap-1-1 p {

	line-height: 1.6 !important;

}



@media screen and (max-width:767px) {

	html {

		font-size: calc(100vw / 75);

	}



	h1,

	p {

		margin: 0;

		line-height: 1.3 !important;

		letter-spacing: 0;

		color: #efefef;

	}



	/* 首屏 */

	.section-first {

		overflow: hidden;

		padding-bottom: 48rem;

	}



	.section-first #videos1 {

		display: none;

	}



	.section-first #videos2 {

		display: block;

	}



	.section-first .bg-video video {

		width: 100%;

		/* display: none; */

	}



	.section-first .content-box {

		position: absolute;

		top: 41rem;

		left: 50%;

		transform: translate(-50%, 0%);

		width: 80rem;

		margin: 0 auto;

	}



	.section-first .content-box .img1 {

		/* margin-bottom: 2rem; */

	}



	.section-first .content-box .img1>object {

		width: 60rem;

		height: auto;

	}



	.section-first .content-box>h1 {

		font-size: 4rem !important;

		text-align: center;

	}



	.section-first .content-box .img2 {

		width: auto;

		height: auto;

		margin: 2.5rem 0 3rem;

	}



	.section-first .content-box .img2>img {

		width: 85rem;

		height: auto;

		position: relative;

		top: auto;

		left: auto;

		transform: none;

	}



	.section-first .content-box>a {

		margin: 0 0 5rem;

	}



	.section-first .content-box svg {

		width: 37.5rem;

		height: auto;

	}



	.section-first .content-box>.name1 {

		font-size: 3.7rem !important;

	}



	.section-first .content-box>p {

		font-size: 2.8rem !important;

	}



	/* 弹窗样式 */

	.popup-heibao {

		width: 60rem;

		text-align: center;

	}



	.popup-heibao>img {

		width: 94%;

		margin-top: 10rem;

	}



	.popup-heibao .btn-box {

		margin-top: 7rem;

	}



	.popup-heibao .btn-box .bg-btn {

		width: 100%;

		height: 12rem;

	}



	.popup-heibao .btn-box .bg-btn span {

		font-size: 3rem;

	}



	/* 基础弹窗样式 */

	.fancybox-wrap {

		width: 65rem !important;

		height: 100rem !important;

	}



	/* 第二屏 */

	.section-trait .content-box {

		width: 100%;

	}



	.section-trait .content-box .box {

		width: 29rem;

		height: 16rem;

		margin: 1.5rem 0rem;

	}



	.section-trait .content-box .box img {

		width: 9.45rem;

		margin-bottom: 0.5rem;

	}



	.section-trait .content-box .box p {

		font-size: 2.4rem !important;

		color: #efefef !important;

	}



	.section-trait .content-box .left p {

		margin-right: 3rem;

	}



	.w-video .fa,

	.w-video span {

		font-size: 3.7rem !important;

	}



	.w-video span {

		margin-left: 1rem;

	}



	/* 第四屏 */

	.section-intro {

		overflow: hidden;

		padding-bottom: 17rem;

	}



	.section-intro #videos1 {

		display: none;

	}



	.section-intro #videos2 {

		display: block;

	}



	.section-intro .content-box {

		width: 62rem;

		position: absolute;

		top: 55rem;

		left: 50%;

		transform: translate(-50%, 0%);

	}



	.section-intro .content-box .text-box {

		width: 100%;

		position: relative;

		transform: none;

		top: auto;

		left: auto;

	}



	.section-intro .text-box h2 {

		font-size: 2.7rem;

	}



	.section-intro .text-box h1>img {

		width: 13rem;

	}



	.section-intro .text-box h3 {

		font-size: 2.3rem !important;

	}



	.section-intro .text-box p {

		font-size: 2.4rem !important;

		color: #bababa !important;

		height: 25rem;

		margin-top: 2.3rem;

	}



	/* 第五屏 */

	.section-picture .content-box>h1 {

		font-size: 4rem !important;

		margin: 13rem 0 7.5rem;

	}



	.section-picture .swiper-slide {

		width: 68rem !important;

		height: 63rem;

		padding: 0.2rem;

		margin: 0 3.8rem !important;

		clip-path: polygon(0 0, 60.5rem 0, 100% 12.5rem, 100% 100%, 100% 100%, 6.7rem 100%, 0 52rem);

	}



	.section-picture .swiper-slide img {

		clip-path: polygon(0 0, 60.3rem 0, 100% 12.5rem, 100% 100%, 100% 100%, 6.7rem 100%, 0 51.6rem);

	}



	.section-picture .swiper-slide .icon {

		top: 3rem;

		left: 3rem;

	}



	.swiper-slide .icon>.fa {

		font-size: 5rem;

	}



	.swiper-button-front,

	.swiper-button-after {

		width: 6.5rem;

		height: 5rem;

		position: absolute;

		top: 50%;

		transform: translateY(-50%);

	}



	.switch-box .pagination {

		display: none;

	}



	/* 第六屏 */

	.section-ability .content-box {

		width: 100%;

		display: flex;

		flex-direction: column;

		align-content: center;

	}



	.section-ability [class^="ability"] {

		margin-bottom: 3rem;

	}



	.section-ability [class^="ability"]:last-child {

		margin: 0;

	}



	.section-ability [class^="ability"]>h1 {

		font-size: 3rem !important;

	}



	.section-ability [class^="ability"]>p {

		font-size: 2rem !important;

		color: #bababa !important;

		opacity: 1;

	}



	.section-ability .ability-1 {

		width: 68.5rem;

		height: 30rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-1.png')

	}



	.section-ability .ability-1>p {

		margin-top: 2rem;

	}



	.section-ability .ability-1 h1,

	.section-ability .ability-1 p,

	.section-ability .ability-2 h1,

	.section-ability .ability-2 p {

		width: 26.5rem;

	}



	.section-ability .ability-1 img {

		width: 30.5rem;

		margin-left: 6rem;

	}



	.section-ability .ability-2 {

		width: 68.5rem;

		height: 30rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-2.png')

	}



	.section-ability .ability-2>img {

		width: 30.5rem;

		margin: 1rem 6rem 1rem 0;

		order: 1;

	}



	.section-ability .ability-2>h1 {

		order: 2;

	}



	.section-ability .ability-2>p {

		margin-top: 2rem;

		order: 3;

	}



	.section-ability .ability-3 {

		width: 68.5rem;

		height: 46rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-3.png')

	}



	.section-ability .ability-3 h1 {

		padding: 3.5rem 3rem 2rem;

	}



	.section-ability .ability-3 p {

		padding: 0 3rem

	}



	.section-ability .ability-3 img {

		width: 67.8rem;

		bottom: 0.3rem;

	}



	.section-ability .ability-4 {

		width: 68.5rem;

		height: 30.3rem;

		text-align: left;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-4.png');

		display: flex;

		justify-content: center;

		align-items: center;

	}



	.section-ability .ability-4 img {

		width: 30.5rem;

		margin: 1rem 6rem 1rem 0;

	}



	.section-ability .ability-4 h1 {

		width: 26.5rem;

	}



	.section-ability .ability-5 {

		width: 32.7rem;

		height: 37.2rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-5.png');

		margin: 0;

		display: flex;

		flex-direction: column;

		align-items: center;

		position: absolute;

		bottom: 0rem;

		right: 3.25rem;

	}



	.section-ability .ability-5>h1 {

		width: 25rem;

		margin: 2.3rem 0 1.5rem;

	}



	.section-ability .ability-5>p {

		width: 30rem;

	}



	.section-ability .ability-5 br {

		display: none;

	}



	.section-ability .ability-5>img {

		width: 17rem;

		height: 17rem;

		margin-top: 1rem;

	}



	.section-ability .ability-6 {

		width: 68.5rem;

		height: 28rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/bg2-6.png');

		display: flex;

		flex-direction: column;

		flex-wrap: wrap;

		justify-content: center;

		align-content: center;

	}



	.section-ability .ability-6 h1,

	.section-ability .ability-6 p {

		width: 31rem;

		text-align: left;

	}



	.section-ability .ability-6 p {

		margin-top: 1.5rem;

	}



	.section-ability .ability-6 img {

		width: 22rem;

		margin-left: 6rem;

	}



	.section-ability .ability-6 br {

		display: none;

	}



	.section-ability .ability-7 {

		width: 68.5rem;

		height: auto;

	}



	.ability-7 .ability-box:first-child {

		width: 68.5rem;

		height: 18.2rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/compatible.png');

	}



	.ability-7 .ability-box:first-child .icon {

		width: 18rem;

	}



	.ability-7 .ability-box:first-child img {

		height: 4.5rem;

		margin-bottom: 1.8rem;

	}



	.ability-7 .ability-box:first-child h3 {

		font-size: 3rem !important;

	}



	.ability-7 .ability-box:first-child p {

		font-size: 2rem !important;

		color: #bababa !important;

	}



	.ability-7 .ability-box:last-child {

		width: 32.7rem;

		height: 37.2rem;

		background-image: url('/images/asset-h/keyboard-mechabreak/ability/lighting.png');

	}



	.ability-7 .ability-box:last-child img {

		width: 22rem;

		margin: 0 0 3.5rem;

	}



	.ability-7 .ability-box:last-child p {

		width: 25rem;

	}



	.ability-7 .ability-box:last-child br {

		display: none;

	}



	/* 第七块 */

	.section-software .content-box {

		width: 68.5rem;

	}



	.section-software .content-box>h1 {

		font-size: 4rem !important;

		margin: 7rem 0 2.5rem;

	}



	.section-software .content-box>p {

		font-size: 2rem !important;

	}



	.section-software .feature-btn {

		margin: 3rem 0;

	}



	.section-software .feature-btn svg {

		width: 37.5rem;

		height: 10rem;

	}



	.section-software .software-img {

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.software-img>div {

		width: 68.5rem;

		height: 59.5rem;

		display: flex;

		flex-direction: column;

		align-items: center;

	}



	.software-img>div>img {

		width: 65.3rem;

		height: 45rem;

		margin-top: 1.5rem;

	}



	.software-img>div:first-child {

		margin-bottom: 4rem;

	}



	.software-img h2,

	.software-img p {

		width: 65.3rem;

	}



	.software-img h2 {

		font-size: 3rem;

		margin: 3rem 0 1.2rem;

	}



	.software-img p {

		font-size: 2rem !important;

	}



	/* 底部参数 */

	.section-spec .content-box {

		width: 68.5rem;

		height: auto;

		margin-top: 7rem;

	}



	.section-spec .content-box>h1 {

		font-size: 4rem !important;

	}



	.section-spec .content-box>img {

		width: 54rem;

		height: auto;

		margin: 6.5rem 0 .5rem;

	}



	.section-spec .content-box .spec-box {

		width: 100%;

	}



	.spec-box h3 {

		font-size: 3.2rem !important;

		margin: 5.5rem 0 0;

	}



	.spec-box li {

		font-size: 2.4rem !important;

		padding-left: 3rem;

	}



	.spec-box li::before {

		width: 1rem;

		height: 1.2rem;

	}



	.spec-box hr {

		margin: 2rem 0;

	}

}



@media only screen and (min-width:768px) and (max-width:1023px) {

	.section-first .content-box .img2 {

		margin-bottom: 0.5rem;

	}



	.section-first .content-box svg {

		margin: 0;

	}

}



@media only screen and (min-width:768px) and (max-width:1920px) {

	.section-trait .content-box .box p {

		font-size: 0.2rem !important;

	}



	.software-img p {

		font-size: 0.22rem !important;

	}



	.section-ability [class^="ability"]>p,

	.ability-7 .ability-box:first-child p {

		font-size: 0.2rem !important;

	}



	.section-ability .ability-5 {

		padding: 0 0.2rem;

	}



	.spec-box li {

		font-size: 0.21rem !important;

	}

}