*,
:after,
:before {
	box-sizing: border-box;
	backface-visibility: hidden;
	margin: 0;
	padding: 0;
	font-family: "Microsoft YaHei";
}

ol,
ul,
li {
	vertical-align: middle;
	list-style-type: none
}

img {
	vertical-align: middle;
	border: 0
}

input,
select,
textarea,
button {
	vertical-align: middle
}

textarea,
input {
	text-indent: 10px
}

input[type=submit],
input[type=button],
button {
	text-indent: 0;
	text-align: center;
	cursor: pointer
}

label,
button,
a {
	cursor: pointer
}

ins,
em,
b,
i {
	font-style: normal;
	text-decoration: none
}

select:focus,
textarea:focus,
input:focus,
button {
	outline: none
}

.disable-hover {
	pointer-events: none
}

.scroll-animate.animated,
.scroll-animate:not(.father) {
	visibility: hidden
}

.animated {
	animation-duration: 1.2s;
	animation-fill-mode: both
}

.font-fadeIn font {
	display: inline-block
}

::-webkit-scrollbar {
	width: 5px;
	background-color: #000
}

::-webkit-scrollbar-thumb {
	width: 3px;
	background-color: #ec0012;
	border: 1px solid #000;
	border-radius: 4px
}

.xoafk {
	/* height: 25vh; */
	margin-top: -16%;
}

::-webkit-scrollbar-corner {
	background-color: transparent
}

::-webkit-scrollbar:horizontal {
	height: 9px
}

::-webkit-selection {
	color: transparent;
	background: 0 0
}

::-moz-selection {
	color: transparent;
	background: 0 0
}

::selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-color: #1c509c
}

input::-webkit-input-placeholder,
input::-moz-input-placeholder,
textarea::-webkit-textarea-placeholder,
textarea::-moz-textarea-placeholder {
	color: #999;
	transition: color .5s
}

input:focus::-webkit-input-placeholder,
input:focus::-moz-input-placeholder,
input:hover::-webkit-input-placeholder,
input:hover::-moz-input-placeholder,
textarea:focus::-webkit-input-placeholder,
textarea:focus::-moz-input-placeholder,
textarea:hover::-webkit-input-placeholder,
textarea:hover::-moz-input-placeholder {
	color: #c2c2c2
}

a {
	color: inherit;
	text-decoration: none
}

a[href] {
	cursor: pointer
}

a:hover {
	cursor: pointer;
	text-decoration: none
}

a:focus {
	background-color: transparent
}

.yingyong-xiaimg ul {
	gap: .3rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.yingyong-xiaimg ul li img {
	width: 100%;
}
.yingyong-xiaimg ul li p{
	text-align: center;
	margin-top: 10px;
	    font-size: .25rem;
}
audio,
canvas,
progress,
video {
	vertical-align: baseline;
	display: inline-block
}

body {
	-webkit-tap-highlight-color: transparent
}

html {
	width: 100%;
	scroll-behavior: initial;
	font-size: 5.20833vw;
	overflow-x: hidden
}

a:focus,
input:focus,
p:focus,
div:focus {
	-webkit-tap-highlight-color: transparent
}

img[src=""],
img:not([src]) {
	opacity: 0
}

b {
	font-size: inherit;
	color: inherit;
	font-family: inherit
}

font {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	font-family: inherit;
	font-style: inherit;
	text-transform: inherit
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: 400
}

.iconfont {
	font-size: .16rem
}

.grayscale {
	filter: grayscale()
}

.fl {
	float: left
}

.fr {
	float: right
}

.fw-100 {
	font-weight: 100
}

.fw-400 {
	font-weight: 400
}

.fw-600 {
	font-weight: 600
}

.cl:after {
	content: " ";
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	display: block
}

.hide {
	display: none
}

.show {
	display: block
}

.text_overflow {
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow: hidden
}

[data-ahref] {
	cursor: pointer
}

.f-left {
	text-align: left
}

.f-center {
	text-align: center
}

.f-right {
	text-align: right
}

.up-word {
	text-transform: uppercase
}

.v-show {
	visibility: visible
}

.v-hide {
	visibility: hidden
}

.pr {
	position: relative
}

.pa {
	position: absolute
}

.back-cover {
	background-size: cover
}

.back-contain {
	background-size: contain
}

.wid-10 {
	width: 10%
}

.wid-15 {
	width: 15%
}

.wid-20 {
	width: 20%
}

.wid-25 {
	width: 25%
}

.wid-30 {
	width: 30%
}

.wid-35 {
	width: 35%
}

.wid-40 {
	width: 40%
}

.wid-45 {
	width: 45%
}

.wid-50 {
	width: 50%
}

.wid-55 {
	width: 55%
}

.wid-60 {
	width: 60%
}

.wid-65 {
	width: 65%
}

.wid-70 {
	width: 70%
}

.wid-75 {
	width: 75%
}

.wid-80 {
	width: 80%
}

.wid-85 {
	width: 85%
}

.wid-90 {
	width: 90%
}

.wid-95 {
	width: 95%
}

.wid-100 {
	width: 100%
}

.op-0 {
	opacity: 0
}

.op-1 {
	opacity: .1
}

.op-2 {
	opacity: .2
}

.op-3 {
	opacity: .3
}

.op-4 {
	opacity: .4
}

.op-5 {
	opacity: .5
}

.op-6 {
	opacity: .6
}

.op-7 {
	opacity: .7
}

.op-8 {
	opacity: .8
}

.op-9 {
	opacity: .9
}

.op-10 {
	opacity: 1
}

.layout-v-middle,
#service .r2 .inner .items>li .icon,
#searchResult .banner .btm .line,
#searchResult .banner .inner .group .right .part .box .btnIcon,
#about .r6 .inner .btm .line,
.solarInner .AT_r1 .bg .img,
#reference .banner .btm .line,
#blog .banner .btm .line,
#newDetail .r1 .inner .mid .line:after,
#news .banner .btm .line,
#news .banner .inner .top .yearBox .yearDown .arrow,
.imgPopup .popCon .nextBtn,
.imgPopup .popCon .prevBtn,
.layout-middle,
#about .r1 .inner .part .right .player,
#resource .banner .inner .mid .group .box-3 .box .msg .play,
#resource .banner .inner .top .part .typeBox .items .list .dot:after,
#solartrack .r8 .inner .right .midIcon,
#roofSolution .r10 .inner .mid .tab .mask:after,
#roofSolution .r10 .inner .mid .group .right .part .dot .img,
#roofSolution .r1 .inner .clip .svgIcon,
#loading .svgIcon,
.bigPop .imgBox,
.layer-appBigBtn {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0
}

.layout-h-middle {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0
}

.layout-middle,
#about .r1 .inner .part .right .player,
#resource .banner .inner .mid .group .box-3 .box .msg .play,
#resource .banner .inner .top .part .typeBox .items .list .dot:after,
#solartrack .r8 .inner .right .midIcon,
#roofSolution .r10 .inner .mid .tab .mask:after,
#roofSolution .r10 .inner .mid .group .right .part .dot .img,
#roofSolution .r1 .inner .clip .svgIcon,
#loading .svgIcon,
.bigPop .imgBox,
.layer-appBigBtn {
	left: 0;
	right: 0
}

.pa-v {
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.pa-h {
	position: absolute;
	left: 50%;
	transform: translate(-50%)
}

.pa-mid,
.solarInner .simple_r1 .inner .cv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.pic {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover
}

.fxc,
#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo,
#searchResult .banner .inner .top .searchBox .subSearch,
#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon,
#about .r2 .group .mapBox .left .mid .list .icon,
#about .r2 .inner .upSide,
#about .r1 .inner .part .right .player,
#about .r1 .inner .part .right,
.solarInner .rowMore .inner .mid .part .note,
.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo,
.solarInner .simple_r2 .inner .part,
.solarInner .AT_r3 .inner .mid .chunk,
.solarInner .AT_r2 .inner .mid .group .col .box .pic,
#contact .banner .inner .mid .left .box .list .icon,
#resource .banner .inner .mid .group .box-2 .box .arrow,
#resource .banner .inner .til .searchBox .subSearch,
#reference .banner .inner .mid .box .photo,
#blog .banner .inner .top .searchBox .subSearch,
#newDetail .r1 .inner .mid .set .col .arrow,
#newDetail .r1 .inner .mid .line,
#newDetail .r1 .inner .left .return .arrow,
#news .banner .inner .mid .box .msg .note .btnIcon,
#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo,
#solartrack .r5 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo,
#solartrack .r3 .btm,
#solartrack .r3 .mid .part .col .box .pic,
#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo,
#roofDetail .r1 .inner .mid .group .part .box .msg .items>li .chunk,
#roofSolution .r11 .inner .group .part,
#roofSolution .r10 .inner .mid .tab .lists>a,
#roofSolution .r10 .inner .mid .tab .lists,
#roofSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo,
#roofSolution .r1 .inner .group .box .items>li .part>small,
#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide,
.imgPopup .popCon .pager,
.imgPopup .popCon .nextBtn,
.imgPopup .popCon .prevBtn,
.imgPopup,
.packagePop,
.bigPop .close,
#Popup,
#app .pop,
#app footer .mid .shareBox .share,
.layer-map .left .mid .list .icon,
.layer-logoSw .swiper-wrapper .swiper-slide .photo,
.layer-btn,
.layer-icon {
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

.fxs,
#service .r4 .inner .group .items>li,
#about .r2 .group .mapBox .left .mid .list,
.solarInner .simple_r7 .inner .mid .box,
.solarInner .AT_r4 .inner .group .msg .items .list,
.solarInner .AT_r3 .inner .mid .chunk h3,
.solarInner .AT_r1 .inner,
#contact .banner .inner .mid .left .box .list,
#resource .banner .inner .top .part .typeBox .items .list,
#newDetail .r1 .inner .mid .set .col,
#roofDetail .r1 .inner .mid .group .part .box .msg .items,
#roofSolution .r5 .inner .group .items>li,
#roofSolution .banner_Snapfit .inner .group .col,
.layer-map .left .mid .list,
.layer-item .list {
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

.fxb,
#epc .r3 .inner .items>li .msg,
#epc .r3 .inner .top,
#service .r3 .inner .group .items>li .msg,
#searchResult .banner .btm,
#about .r6 .inner .btm,
#resource .banner .inner .mid .group .box-2 .box,
#reference .banner .btm,
#blog .banner .btm,
#blog .banner .inner .mid .box .msg .items .note,
#news .banner .btm,
#news .banner .inner .mid .box .msg .note,
#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li,
#app header nav.appNav .inner_mid .nav-items>.child_first>.firstList {
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

.layer-photo {
	position: relative
}

.sticky {
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0
}

.liangguaun {

	background-color: #f7f7f7;
	padding-bottom: 1rem;
}

.liangguaun .inner {
	padding: 1rem 0.3rem;
	background-color: #fff;
	border-radius: .24rem;
}

.cpxqkd {
	background-color: #f7f7f7;
	padding-top: 2rem;
}

.cpxqkd .inner {
	padding: 0.5rem 0.3rem;
	background-color: #fff;
	border-radius: .24rem;
}

.liangguaun #main {
	margin-bottom: 1rem;
	text-align: center;
}

.over-3 {
	-webkit-line-clamp: 2;
	height: 2.5em;
	-webkit-box-orient: vertical;
	line-height: 1.3;
	display: -webkit-box;
	overflow: hidden
}

.over-2 {
	-webkit-line-clamp: 2;
	height: 2.6em;
	-webkit-box-orient: vertical;
	line-height: 1.3;
	display: -webkit-box;
	overflow: hidden
}

.max-wid {
	width: calc(100% - 1.2rem);
	margin: 0 auto
}

.maxSize {
	width: 80%;
	max-width: 78.125vw;
	margin: 0 auto
}

.full,
#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#service .r4 .bg .pic:after,
#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#groundSolution .r7 .bg .pic:after,
#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#searchResult .banner .inner .group .right .part .box .btnIcon .mask:after,
#searchResult .banner .inner .group .right .part .box .btnIcon .mask,
#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .mask:after,
#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .mask,
#about .r5 .inner .group .box .pic>.mask,
#at-3 .banner .bg .mask:after,
#at-3 .banner .bg .mask:before,
#at-3 .banner .bg .mask,
.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after,
.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask,
.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo:after,
.solarInner .simple_r2 .inner .group .box .mask,
.solarInner .simple_r1 .inner .group .cvPart,
.solarInner .simple_r1 .inner .cv .proCv,
.solarInner .AT_r5 .bg .mask:after,
.solarInner .AT_r5 .bg .mask:before,
.solarInner .AT_r5 .bg .mask,
#contact .r1 .inner .group .tabBox:nth-of-type(2),
#contact .r1 .inner .group .tabBox .form .loadMk,
#resource .banner .inner .mid .group .box-3 .box .msg .play:after,
#resource .banner .inner .mid .group .box-3 .box .msg,
#resource .banner .inner .mid .group .box-3 .box .pic:after,
#resource .banner .inner .mid .group .box-3 .box .pic:before,
#resource .banner .inner .mid .group .box-2 .box .arrow:after,
#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .mask:after,
#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .mask,
#reference .banner .inner .mid .box .photo .btnIcon>.mask:after,
#reference .banner .inner .mid .box .photo .btnIcon>.mask,
#reference .banner .inner .mid .box .photo:after,
#blog .banner .inner .mid .box .msg .items .note .btnIcon .mask:after,
#blog .banner .inner .mid .box .msg .items .note .btnIcon .mask,
#newDetail .r1 .inner .mid .set .col .arrow:after,
#newDetail .r1 .inner .left .return .arrow:after,
#news .banner .inner .mid .box .msg .note .btnIcon .mask:after,
#news .banner .inner .mid .box .msg .note .btnIcon .mask,
#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after,
#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask,
#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo:after,
#solartrack .r8 .inner .right .group .mask,
#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after,
#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask,
#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo:after,
#roofDetail .banner .bg .pic:after,
#roofSolution .r11 .inner .group .part,
#roofSolution .r11 .inner .group .fn_r11 .cvBox,
#roofSolution .r8 .inner .right .form .loadMk,
#roofSolution .r7 .bg .pic:after,
#roofSolution .r5 .bg .pic:after,
#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after,
#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask,
#roofSolution .banner_Snapfit>.bg .shadow:after,
#home .r5 .bg,
#home .banner .part .head:after,
#home .banner .part .mask,
#home .banner .bg:after,
#home .row>.bg,
#loading .bgMask,
.imgPopup .popCon .msg .photo .pic,
.imgPopup .mask,
.packagePop .mask,
#app .pop .mask,
#app main .rowContact .inner .form .col .loadMk,
#app main .row>.bg,
.layer-btnIcon .mask:after,
.layer-btn .mk,
.layer-photo .pic {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.f-160 {
	font-size: 1.2rem
}

.f-120 {
	letter-spacing: -.04em;
	font-size: 1.2rem
}

.f-100 {
	letter-spacing: -.04em;
	font-size: 1rem
}

.f-90 {
	font-size: .9rem
}

.f-80 {
	font-size: .8rem
}

.f-70 {
	font-size: .7rem
}

.f-64 {
	font-size: .64rem
}

.f-60,
.solarInner .simple_r2 .inner .group .box>p sub {
	font-size: .6rem
}

.f-56 {
	font-size: .56rem
}

.f-54 {
	font-size: .54rem
}

.f-50 {
	font-size: .5rem
}

.f-48 {
	font-size: .48rem
}

.f-46 {
	font-size: .46rem
}

.f-44 {
	font-size: .44rem
}

.f-42 {
	font-size: .42rem
}

.f-40 {
	font-size: .4rem
}

.f-38 {
	font-size: .38rem
}

.f-36,
#searchResult .banner .btm .pager>a.on,
#about .r6 .inner .btm .pager>a.on,
#reference .banner .btm .pager>a.on,
#blog .banner .btm .pager>a.on,
#news .banner .btm .pager>a.on {
	font-size: .36rem
}

.f-34 {
	font-size: .34rem
}

.f-32 {
	font-size: .32rem
}

.f-30 {
	font-size: .3rem
}

.f-28 {
	font-size: .28rem
}

.f-26 {
	font-size: .26rem
}

.f-24,
#searchResult .banner .btm .pager>a,
#about .r6 .inner .btm .pager>a,
#reference .banner .btm .pager>a,
#blog .banner .btm .pager>a,
#news .banner .btm .pager>a {
	font-size: .24rem
}

.f-22 {
	font-size: .22rem
}

.f-20 {
	font-size: .2rem
}

.f-18 {
	font-size: .18rem
}

.f-16,
#Popup>span {
	font-size: .16rem
}

.f-14,
#newDetail .r1 .inner .mid .detail * {
	font-size: .14rem
}

.f-12 {
	font-size: .12rem
}

.mb-90 {
	margin-bottom: .9rem
}

.mb-80 {
	margin-bottom: .8rem
}

.mb-70 {
	margin-bottom: .7rem
}

.mb-60 {
	margin-bottom: .6rem
}

.mb-50 {
	margin-bottom: .5rem
}

.mb-40 {
	margin-bottom: .4rem
}

.mb-30 {
	margin-bottom: .3rem
}

.mb-20 {
	margin-bottom: .2rem
}

.mb-10 {
	margin-bottom: .1rem
}

@keyframes fadeInUpSmall {
	0% {
		opacity: 0;
		transform: translateY(30%)
	}

	to {
		opacity: 1;
		transform: translateY(0%)
	}
}

.iconfont {
	font-family: iconfont
}

.word-t,
#taiSimple .banner .inner .topic h1>small,
#roofDetail .r1 .inner .mid .group .part .box h4,
#home .r5 .inner .mid .r5Sw .swiper-pagination .swiper-pagination-total,
#home .r5 .inner .mid .r5Sw .swiper-pagination,
#home .banner .inner .group .list h2 small {
	font-family: "Microsoft YaHei";

}

.word-t.wc,
#taiSimple .banner .inner .topic h1>small.wc,
#roofDetail .r1 .inner .mid .group .part .box h4.wc,
#home .r5 .inner .mid .r5Sw .swiper-pagination .wc.swiper-pagination-total,
#home .r5 .inner .mid .r5Sw .wc.swiper-pagination,
#home .banner .inner .group .list h2 small.wc {
	color: rgba(255, 255, 255, .8)
}

.word-t.bc,
#taiSimple .banner .inner .topic h1>small.bc,
#roofDetail .r1 .inner .mid .group .part .box h4.bc,
#home .r5 .inner .mid .r5Sw .swiper-pagination .bc.swiper-pagination-total,
#home .r5 .inner .mid .r5Sw .bc.swiper-pagination,
#home .banner .inner .group .list h2 small.bc {
	color: rgba(35, 38, 38, .8)
}

.word-l {
	font-family: "Microsoft YaHei";

}

.word-l.wc {
	color: rgba(255, 255, 255, .8)
}

.word-l.bc {
	color: rgba(35, 38, 38, .8)
}

.word-r,
#app header .pcNav .items>li .child>li>a {
	font-family: "Microsoft YaHei";
	font-weight: 400
}

.word-b,
#roofSolution .r1 .inner .group p b,
#home .r5 .inner .mid .r5Sw .swiper-pagination .swiper-pagination-current {
	font-family: "Microsoft YaHei";
	font-weight: 600
}

.word-xb {
	/* letter-spacing: -.03em; */
	font-family: "Microsoft YaHei";
	/* font-weight: 600 */
}

.word-h,
#searchResult .banner .btm .pager>a,
#about .r6 .inner .btm .pager>a,
#reference .banner .btm .pager>a,
#blog .banner .btm .pager>a,
#news .banner .btm .pager>a,
#solartrack .r5 .inner .mid>p b,
#roofDetail .r1 .inner .mid .group .part .box.fill h4,
#roofDetail .r1 .inner .mid .group .part .box.active h4,
#roofSolution .r10 .inner .mid .tab .lists.on>a {
	/*l etter-spacing: -.03em; */
	font-family: "Microsoft YaHei";
	/* font-weight: 700 */
}

.num-t {}

.num-l {}

.num-r {}

.num-b,
.solarInner .simple_r2 .inner .group .box>p sub {
	letter-spacing: -.02em;

}

.num-xb {
	letter-spacing: -.02em;

}

.num-h {
	letter-spacing: -.02em;

}

.en p,
.en h4 {
	text-align: justify
}

.mc {
	color: #ec0012
}

.bc {
	color: #333
}

.gray {
	color: #3c4141
}

.wc {
	color: #fff
}

.move,
#home .r1 .inner .group .list .right .photo .pic,
.dotFn .txt .letter {
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), width 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1)
}

p {
	line-height: 1.9
}

.noTouch {
	touch-action: none
}

.letter {
	min-width: .2em;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	display: inline-block
}

.childLetter {
	font-size: inherit;
	color: inherit;
	margin-right: .2em;
	font-family: inherit;
	display: inline-block
}

.alanFn {
	transform-origin: -50%;
	perspective: 26.0417vw;
	backface-visibility: hidden
}

.alanFn p {
	line-height: 1.9;
}

.layer-icon .icon {
	display: block
}

.layer-icon .mr-10 {
	margin-right: .1rem
}

.layer-icon .mr {
	margin-right: .83333vw
}

.layer-btn {
	height: .6rem;
	cursor: pointer;
	border-radius: 1rem;
	padding: 0 .35rem;
	position: relative;
	overflow: hidden
}

.layer-btn.bc {
	background-color: #232626;
	transition: box-shadow 1s cubic-bezier(.38, 0, 0, 1)
}

.layer-btn .mr-5 {
	margin-right: .3rem
}

.layer-btn .mr {
	margin-right: .2rem
}

.layer-btn .txt {
	z-index: 5;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	color: #fff;
}

.layer-btn .mk {
	width: 200%;
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform .8s cubic-bezier(.38, 0, 0, 1)
}

.layer-btn.color .mk {
	background: linear-gradient(90deg, #ec0012 0%, #ec0012 50%, #ec0012 100%)
}

.layer-btn.bc .mk {
	background-color: #ec0012;
	border-radius: 1rem;
	transform: translate(-100%)
}

.layer-btn.wc {
	background-color: #fff
}

.layer-btn.wc .mk {
	background-color: #ec0012;
	border-radius: 1rem;
	transform: translate(-100%)
}

.layer-btn .iconfont {
	transform-origin: 0 100%;
	z-index: 5;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .8s cubic-bezier(.38, 0, 0, 1), color .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.layer-btn.bc:hover img {
	filter: brightness(0) invert(1);
}

.layer-btn .iconfont img {
	filter: brightness(0)invert(1);
}

@media screen and (orientation: landscape) {
	.layer-btn:hover.bc {
		background-color: #ec0012;
		transition: background-color 1s cubic-bezier(.38, 0, 0, 1) .3s, box-shadow 1s cubic-bezier(.38, 0, 0, 1)
	}

	.layer-btn:hover .mk {
		transform: translate(-50%)
	}

	.layer-btn:hover .txt {
		color: #fff
	}

	.layer-btn:hover .iconfont:not(.mv) {
		color: #232626;
		opacity: 1;
		transform: rotate(45deg)translate(-.1rem)
	}

}

.layer-btnIcon {
	cursor: pointer;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.layer-btnIcon .mask {
	height: .5rem;
	width: .5rem;
	transform-origin: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden
}

.layer-btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

.layer-btnIcon .txt {
	text-align: center;
	z-index: 9;
	white-space: nowrap;
	padding: 0 .3rem 0 .4rem;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1), color .5s cubic-bezier(.38, 0, 0, 1)
}

.layer-btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	width: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.layer-btnIcon.mc .mask {
	background-color: #ec0012
}

.layer-btnIcon.mc:hover .txt {
	color: #232626
}

@media screen and (orientation: landscape) {
	.layer-btnIcon:hover .mask {
		width: 100%
	}

	.layer-btnIcon:hover .mask:after {
		opacity: 1
	}

	.layer-btnIcon:hover .layer-icon {
		transform: translate(-.15rem)rotate(45deg)
	}
}

.alanBox .ani,
.alanBox .letter,
.aniBox .ani,
.aniBox .letter {
	opacity: 1;
	transform-origin: 0;
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1), transform .8s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(0%)
}

.alanBox .ani:nth-child(1),
.alanBox .letter:nth-child(1),
.aniBox .ani:nth-child(1),
.aniBox .letter:nth-child(1) {
	transition-delay: 50ms
}

.alanBox .ani:nth-child(2),
.alanBox .letter:nth-child(2),
.aniBox .ani:nth-child(2),
.aniBox .letter:nth-child(2) {
	transition-delay: .1s
}

.alanBox .ani:nth-child(3),
.alanBox .letter:nth-child(3),
.aniBox .ani:nth-child(3),
.aniBox .letter:nth-child(3) {
	transition-delay: .15s
}

.alanBox .ani:nth-child(4),
.alanBox .letter:nth-child(4),
.aniBox .ani:nth-child(4),
.aniBox .letter:nth-child(4) {
	transition-delay: .2s
}

.alanBox .ani:nth-child(5),
.alanBox .letter:nth-child(5),
.aniBox .ani:nth-child(5),
.aniBox .letter:nth-child(5) {
	transition-delay: .25s
}

.alanBox .ani:nth-child(6),
.alanBox .letter:nth-child(6),
.aniBox .ani:nth-child(6),
.aniBox .letter:nth-child(6) {
	transition-delay: .3s
}

.alanBox .ani:nth-child(7),
.alanBox .letter:nth-child(7),
.aniBox .ani:nth-child(7),
.aniBox .letter:nth-child(7) {
	transition-delay: .35s
}

.alanBox .ani:nth-child(8),
.alanBox .letter:nth-child(8),
.aniBox .ani:nth-child(8),
.aniBox .letter:nth-child(8) {
	transition-delay: .4s
}

.alanBox .ani:nth-child(9),
.alanBox .letter:nth-child(9),
.aniBox .ani:nth-child(9),
.aniBox .letter:nth-child(9) {
	transition-delay: .45s
}

.alanBox .ani:nth-child(10),
.alanBox .letter:nth-child(10),
.aniBox .ani:nth-child(10),
.aniBox .letter:nth-child(10) {
	transition-delay: .5s
}

.alanBox .ani:nth-child(11),
.alanBox .letter:nth-child(11),
.aniBox .ani:nth-child(11),
.aniBox .letter:nth-child(11) {
	transition-delay: .55s
}

.alanBox .ani:nth-child(12),
.alanBox .letter:nth-child(12),
.aniBox .ani:nth-child(12),
.aniBox .letter:nth-child(12) {
	transition-delay: .6s
}

.alanBox .ani:nth-child(13),
.alanBox .letter:nth-child(13),
.aniBox .ani:nth-child(13),
.aniBox .letter:nth-child(13) {
	transition-delay: .65s
}

.alanBox .ani:nth-child(14),
.alanBox .letter:nth-child(14),
.aniBox .ani:nth-child(14),
.aniBox .letter:nth-child(14) {
	transition-delay: .7s
}

.alanBox .ani:nth-child(15),
.alanBox .letter:nth-child(15),
.aniBox .ani:nth-child(15),
.aniBox .letter:nth-child(15) {
	transition-delay: .75s
}

.alanBox .ani:nth-child(16),
.alanBox .letter:nth-child(16),
.aniBox .ani:nth-child(16),
.aniBox .letter:nth-child(16) {
	transition-delay: .8s
}

.alanBox .ani:nth-child(17),
.alanBox .letter:nth-child(17),
.aniBox .ani:nth-child(17),
.aniBox .letter:nth-child(17) {
	transition-delay: .85s
}

.alanBox .ani:nth-child(18),
.alanBox .letter:nth-child(18),
.aniBox .ani:nth-child(18),
.aniBox .letter:nth-child(18) {
	transition-delay: .9s
}

.alanBox .ani:nth-child(19),
.alanBox .letter:nth-child(19),
.aniBox .ani:nth-child(19),
.aniBox .letter:nth-child(19) {
	transition-delay: .95s
}

.alanBox .ani:nth-child(20),
.alanBox .letter:nth-child(20),
.aniBox .ani:nth-child(20),
.aniBox .letter:nth-child(20) {
	transition-delay: 1s
}

.alanBox.active .ani,
.alanBox.active .letter,
.alanBox.go .ani,
.alanBox.go .letter,
.aniBox.active .ani,
.aniBox.active .letter,
.aniBox.go .ani,
.aniBox.go .letter {
	opacity: 1;
	transform: translate(0, 0)
}

.layer-item .list {
	width: 100%;
	padding: 5px 0 5px .2rem;
	position: relative
}

.layer-item .list .dot {
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
	position: absolute;
	top: calc(.7em + 2px);
	left: 0
}

.layer-item .list .dot.gray {
	background-color: #3c4141
}

.layer-item .list .dot.wc {
	background-color: #fff
}

.layer-item .list .dot.mc {
	background-color: #ec0012
}

.layer-item .list p {
	line-height: 1.3
}

.error {
	border: 1px solid red !important
}

.layer-logoSw {
	width: 100%;
	grid-auto-flow: column;
	padding: .5rem 0 .2rem;
	display: grid
}

.layer-logoSw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

.layer-logoSw .swiper-wrapper .swiper-slide {
	padding-right: .5rem
}

.layer-logoSw .swiper-wrapper .swiper-slide .photo {
	height: .8rem
}

.layer-logoSw .swiper-wrapper .swiper-slide .photo>img {
	height: .8rem;
	opacity: .3;
	width: 1.4rem;
	object-fit: contain;
	display: block
}

.layer-logoSw.go .swiper-wrapper {
	animation: 15s linear infinite logoSw
}

.layer-map {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

.layer-map .left .top {
	margin-bottom: .4rem
}

.layer-map .left .mid {
	grid-auto-flow: row;
	gap: .2rem 0;
	display: grid
}

.layer-map .left .mid .list {
	height: 1rem;
	width: 3.6rem;
	background-color: #fff;
	border-radius: .16rem
}

.layer-map .left .mid .list .mr {
	margin-right: .1rem
}

.layer-map .left .mid .list .gray {
	color: gray
}

.layer-map .left .mid .list .icon {
	width: 1.05rem;
	height: 100%;
	position: relative
}

.layer-map .left .mid .list .icon .dot {
	width: 6px;
	height: 6px;
	background-color: #000;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: .15rem;
	left: .15rem
}

.layer-map .left .mid .list .icon .dot.mc {
	background-color: #ec0012;
	border-color: #ec0012
}

.layer-map .left .mid .list .icon .dot.gray {
	background-color: #a5a5a5;
	border-color: #a5a5a5
}

.layer-map .left .mid .list .icon .dot.clear {
	background-color: transparent;
	border-color: #101010
}

.layer-map .left .mid .list .icon>img {
	width: 42%;
	height: 30%;
	object-fit: contain
}

.layer-map .left .mid .list .f-50 {
	line-height: 1
}

.layer-map .left .mid .list>em {
	line-height: .9
}

.layer-map .left .mid .list>.f-60:first-of-type,
.layer-map .left .mid .solarInner .simple_r2 .inner .group .box>p .list>sub:first-of-type,
.solarInner .simple_r2 .inner .group .box>p .layer-map .left .mid .list>sub:first-of-type {
	padding-left: .3rem
}

.layer-map .left .mid .list>small {
	height: 3em;
	line-height: 5em;
	font-size: inherit;
	color: inherit;
	font-family: inherit
}

.layer-map .right {
	height: 6.3rem;
	position: relative
}

.layer-map .right .map {
	height: 6.3rem;
	position: absolute;
	top: 0;
	left: -1.5rem
}

.layer-appBigBtn {
	pointer-events: auto;
	width: 1.2rem;
	height: 1.2rem;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 .1rem -1px rgba(0, 0, 0, .15)
}

#app header {
	width: 100%;
	pointer-events: none;
	z-index: 200;
	transition: all .6s cubic-bezier(.38, 0, 0, 1);
	position: fixed;
	top: 0;
	left: 0
}

#app header .navMask {
	z-index: 1;
	width: 100%;
	height: 5rem;
	transform-origin: 50% 0;
	background-color: rgba(0, 0, 0, .8);
	transition: transform .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	transform: scaleY(0)
}

#home .r5 .part .box .items>li img {
	margin-right: 10px;
	width: 20px;
}

#app header .pcNav {
	height: 1.4rem;
	pointer-events: none;
	z-index: 2;
	transform-origin: 50% 0;
	padding-top: 0rem;
	transition: height .6s cubic-bezier(.38, 0, 0, 1), opacity .8s cubic-bezier(.38, 0, 0, 1), transform .8s cubic-bezier(.38, 0, 0, 1), padding-top .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#app header .pcNav .logoBox {
	pointer-events: auto
}

#app header .pcNav .logoBox .line {
	height: .6rem;
	width: 2px;
	background-color: #fff;
	margin: 0 .25rem
}

#app header .pcNav .logoBox .logo_w {
	height: .9rem;
	display: block
}

#app header .pcNav .items {
	pointer-events: auto;
	-ms-flex: 1;
	flex: 1;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding-right: 3%;
	display: -ms-flexbox;
	display: flex
}

#app header .pcNav .items>li {
	padding-right: .2rem;
	position: relative
}

#app header .pcNav .items>li:last-of-type {
	padding-right: 0
}

#app header .pcNav .items>li>a {
	padding: 0 .24rem;
	line-height: 1rem;
	transition: color .3s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#app header .pcNav .items>li:hover>a,
#app header .pcNav .items>li.on>a {
	color: #ec0012
}

#app header .pcNav .items>li .child {
	width: 100%;
	pointer-events: none;
	opacity: 0;
	padding-top: .2rem;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 100%;
	left: .24rem
}

#app header .pcNav .items>li .child>li>a {
	font-size: inherit;
	color: #fff;
	padding: .05rem .2rem .05rem 0;
	line-height: 1.2;
	transition: color .3s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#app header .pcNav .items>li .child>li>a:hover {
	color: #ec0012
}

#app header .pcNav .items>li .child.active {
	pointer-events: auto;
	opacity: 1
}

#app header .pcNav .set .search {
	pointer-events: auto;
	width: .6rem;
	height: .6rem;
	margin-right: .1rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#app header .pcNav .set .search .layer-icon {
	width: .6rem;
	cursor: pointer;
	height: .6rem;
	z-index: 10;
	background: rgba(255, 255, 255, .3);
	border-radius: 1rem;
	transition: background .3s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#app header .pcNav .set .search .layer-icon .iconfont {
	transition: color .3s cubic-bezier(.38, 0, 0, 1)
}

#app header .pcNav .set .search .putIn {
	width: 2.3rem;
	height: 100%;
	opacity: 0;
	z-index: 3;
	transform-origin: 100%;
	background: #fff;
	border: none;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 0 .3rem;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1), opacity .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	right: 0;
	transform: scaleX(0)
}

#app header .pcNav .set .search:hover {
	width: 2.6rem
}

#app header .pcNav .set .search:hover .layer-icon {
	background: #ec0012
}

#app header .pcNav .set .search:hover .layer-icon .iconfont {
	color: #000
}

#app header .pcNav .set .search:hover .putIn {
	opacity: 1;
	transform: scaleX(1)
}

#app header .pcNav .set .quote {
	cursor: pointer;
	pointer-events: auto
}

#app header .pcNav .other {
	height: .4rem;
	z-index: 10;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding: .1rem 0;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	top: 0;
	right: 0
}

#app header .pcNav .other .line {
	width: 1px;
	height: .16rem;
	background-color: rgba(255, 255, 255, .5);
	margin: 0 .2rem
}

#app header .pcNav .other .layer-icon {
	pointer-events: auto;
	cursor: pointer
}

#app header .pcNav .other .layer-icon .iconfont {
	width: .26rem;
	margin-right: 0
}

#app header .pcNav .other .layer-icon .txt {
	cursor: pointer;
	color: rgba(255, 255, 255, .5);
	transition: color .5s cubic-bezier(.38, 0, 0, 1), font-weight .5s cubic-bezier(.38, 0, 0, 1)
}

#app header .pcNav .other .layer-icon:hover .txt {
	color: #fff;
	font-weight: 600
}

#app header .pcNav .other .langDown {
	position: relative
}

#app header .pcNav .other .langDown .iconfont,
#app header .pcNav .other .langDown .txt {
	z-index: 10;
	position: relative
}

#app header .pcNav .other .langDown .child {
	width: calc(100% + .8rem);
	opacity: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, .8);
	border-radius: .12rem 0 0 .12rem;
	padding: .4rem 0 .1rem;
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: -.1rem;
	left: -.2rem
}

#app header .pcNav .other .langDown .child>li {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(20%)
}

#app header .pcNav .other .langDown .child>li:nth-child(1) {
	transition-delay: 20ms
}

#app header .pcNav .other .langDown .child>li:nth-child(2) {
	transition-delay: 40ms
}

#app header .pcNav .other .langDown .child>li:nth-child(3) {
	transition-delay: 60ms
}

#app header .pcNav .other .langDown .child>li:nth-child(4) {
	transition-delay: 80ms
}

#app header .pcNav .other .langDown .child>li:nth-child(5) {
	transition-delay: .1s
}

#app header .pcNav .other .langDown .child>li:nth-child(6) {
	transition-delay: .12s
}

#app header .pcNav .other .langDown .child>li:nth-child(7) {
	transition-delay: .14s
}

#app header .pcNav .other .langDown .child>li:nth-child(8) {
	transition-delay: .16s
}

#app header .pcNav .other .langDown .child>li:nth-child(9) {
	transition-delay: .18s
}

#app header .pcNav .other .langDown .child>li:nth-child(10) {
	transition-delay: .2s
}

#app header .pcNav .other .langDown .child>li:nth-child(11) {
	transition-delay: .22s
}

#app header .pcNav .other .langDown .child>li:nth-child(12) {
	transition-delay: .24s
}

#app header .pcNav .other .langDown .child>li:nth-child(13) {
	transition-delay: .26s
}

#app header .pcNav .other .langDown .child>li:nth-child(14) {
	transition-delay: .28s
}

#app header .pcNav .other .langDown .child>li:nth-child(15) {
	transition-delay: .3s
}

#app header .pcNav .other .langDown .child>li:nth-child(16) {
	transition-delay: .32s
}

#app header .pcNav .other .langDown .child>li:nth-child(17) {
	transition-delay: .34s
}

#app header .pcNav .other .langDown .child>li:nth-child(18) {
	transition-delay: .36s
}

#app header .pcNav .other .langDown .child>li:nth-child(19) {
	transition-delay: .38s
}

#app header .pcNav .other .langDown .child>li:nth-child(20) {
	transition-delay: .4s
}

#app header .pcNav .other .langDown .child>li>a {
	white-space: nowrap;
	padding: 2px 0 2px .46rem;
	line-height: .4rem;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#app header .pcNav .other .langDown .child>li>a:hover {
	color: #ec0012
}

@media screen and (orientation: landscape) {
	#app header .pcNav .other .langDown:hover .child {
		opacity: 1;
		pointer-events: auto
	}

	#app header .pcNav .other .langDown:hover .child>li {
		opacity: 1;
		transform: none
	}
}

#app header nav.appNav {
	width: 100%;
	height: 1.2rem;
	z-index: 2000;
	pointer-events: auto;
	transition: all .5s
}

#app header nav.appNav .inner_top {
	height: 1.2rem;
	width: 100%;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 5%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#app header nav.appNav .inner_top .logoBox {
	position: relative
}

#app header nav.appNav .inner_top .logoBox .white {
	height: .54rem;
	display: block
}

#app header nav.appNav .inner_top .Solaraid {
	height: .8rem;
	cursor: pointer;
	position: absolute;
	top: .2rem;
	right: 2.7rem
}

#app header nav.appNav .inner_top .langDownApp {
	height: .8rem;
	cursor: pointer;
	position: absolute;
	top: .2rem;
	right: 1.2rem
}

#app header nav.appNav .inner_top .langDownApp .iconfont,
#app header nav.appNav .inner_top .langDownApp .txt {
	z-index: 10;
	position: relative
}

#app header nav.appNav .inner_top .langDownApp .child {
	width: calc(100% + 1.4rem);
	opacity: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, .8);
	border-radius: .12rem 0 0 .12rem;
	padding: 1.1rem 0 .3rem;
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: -.2rem;
	left: -.2rem
}

#app header nav.appNav .inner_top .langDownApp .child>li {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(20%)
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(1) {
	transition-delay: 20ms
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(2) {
	transition-delay: 40ms
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(3) {
	transition-delay: 60ms
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(4) {
	transition-delay: 80ms
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(5) {
	transition-delay: .1s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(6) {
	transition-delay: .12s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(7) {
	transition-delay: .14s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(8) {
	transition-delay: .16s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(9) {
	transition-delay: .18s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(10) {
	transition-delay: .2s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(11) {
	transition-delay: .22s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(12) {
	transition-delay: .24s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(13) {
	transition-delay: .26s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(14) {
	transition-delay: .28s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(15) {
	transition-delay: .3s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(16) {
	transition-delay: .32s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(17) {
	transition-delay: .34s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(18) {
	transition-delay: .36s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(19) {
	transition-delay: .38s
}

#app header nav.appNav .inner_top .langDownApp .child>li:nth-child(20) {
	transition-delay: .4s
}

#app header nav.appNav .inner_top .langDownApp .child>li>a {
	white-space: nowrap;
	padding: 4px 0 4px .58rem;
	line-height: .5rem;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#app header nav.appNav .inner_top .langDownApp.active .child {
	opacity: 1;
	pointer-events: auto
}

#app header nav.appNav .inner_top .langDownApp.active .child>li {
	opacity: 1;
	transform: none
}

#app header nav.appNav .inner_top #app-menu {
	z-index: 10;
	display: inline-block;
	position: relative
}

#app header nav.appNav .inner_top #app-menu .line {
	padding-top: 3px;
	padding-bottom: 3px;
	transition: all .4s;
	display: block
}

#app header nav.appNav .inner_top #app-menu .line:before {
	content: "";
	height: 2px;
	width: .4rem;
	background-color: #fff;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	transition: transform .4s .2s, background-color .5s;
	display: block
}

#app header nav.appNav .inner_top #app-menu .line:nth-of-type(2):before {
	width: .3rem;
	margin-left: .1rem
}

#app header nav.appNav .inner_mid {
	width: 100%;
	height: calc(100% - 1.2rem);
	background-color: #000;
	position: absolute;
	top: 1.2rem;
	left: 0;
	overflow: hidden
}

#app header nav.appNav .inner_mid .firstList {
	opacity: 0;
	transition: background-color .3s, opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(.25rem)
}

#app header nav.appNav .inner_mid .firstList:nth-child(1) {
	transition-delay: 50ms
}

#app header nav.appNav .inner_mid .firstList:nth-child(2) {
	transition-delay: .1s
}

#app header nav.appNav .inner_mid .firstList:nth-child(3) {
	transition-delay: .15s
}

#app header nav.appNav .inner_mid .firstList:nth-child(4) {
	transition-delay: .2s
}

#app header nav.appNav .inner_mid .firstList:nth-child(5) {
	transition-delay: .25s
}

#app header nav.appNav .inner_mid .firstList:nth-child(6) {
	transition-delay: .3s
}

#app header nav.appNav .inner_mid .firstList:nth-child(7) {
	transition-delay: .35s
}

#app header nav.appNav .inner_mid .firstList:nth-child(8) {
	transition-delay: .4s
}

#app header nav.appNav .inner_mid .firstList:nth-child(9) {
	transition-delay: .45s
}

#app header nav.appNav .inner_mid .firstList:nth-child(10) {
	transition-delay: .5s
}

#app header nav.appNav .inner_mid .firstList:nth-child(11) {
	transition-delay: .55s
}

#app header nav.appNav .inner_mid .firstList:nth-child(12) {
	transition-delay: .6s
}

#app header nav.appNav .inner_mid .firstList:nth-child(13) {
	transition-delay: .65s
}

#app header nav.appNav .inner_mid .firstList:nth-child(14) {
	transition-delay: .7s
}

#app header nav.appNav .inner_mid .firstList:nth-child(15) {
	transition-delay: .75s
}

#app header nav.appNav .inner_mid .firstList:nth-child(16) {
	transition-delay: .8s
}

#app header nav.appNav .inner_mid .firstList:nth-child(17) {
	transition-delay: .85s
}

#app header nav.appNav .inner_mid .firstList:nth-child(18) {
	transition-delay: .9s
}

#app header nav.appNav .inner_mid .firstList:nth-child(19) {
	transition-delay: .95s
}

#app header nav.appNav .inner_mid .firstList:nth-child(20) {
	transition-delay: 1s
}

#app header nav.appNav .inner_mid .nav-items {
	padding-top: .1rem
}

#app header nav.appNav .inner_mid .nav-items>.child_first>.firstList {
	padding: 0 5%;
	position: relative
}

#app header nav.appNav .inner_mid .nav-items>.child_first>.firstList>a {
	height: 1.2rem;
	white-space: nowrap;
	min-width: 50%;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
	-ms-flex-align: center;
	align-items: center;
	line-height: 1.2rem;
	display: -ms-flexbox;
	display: flex
}

#app header nav.appNav .inner_mid .nav-items>.child_first>.firstList>i {
	height: .48rem;
	width: 50%;
	text-align: right;
	font-size: .24rem;
	line-height: .48rem;
	transition: transform .5s ease-in-out;
	display: inline-block
}

#app header nav.appNav .inner_mid .nav-items>.child_first>.firstList.active>i {
	transform: scaleY(-1)
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second {
	max-height: 0;
	background-color: #ec0012;
	transition: all .5s;
	overflow: hidden
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li {
	padding: 0 9%;
	transition: background-color .3s, opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li:first-of-type {
	padding-top: .2rem
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li:last-of-type {
	padding-bottom: .2rem
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li>a {
	width: 72%;
	padding: .2rem 0;
	display: block;
	color: #fff;
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li>i {
	height: .48rem;
	width: .54rem;
	text-align: center;
	font-size: .24rem;
	line-height: .48rem;
	transition: transform .5s ease-in-out;
	display: inline-block
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li.active {
	background-color: #042819
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li.active>i {
	transform: scaleY(-1)
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second>li.down_el>a {
	pointer-events: none
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_second.active {
	max-height: 100vh
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three {
	max-height: 0;
	background-color: #022819;
	transition: all .5s;
	overflow: hidden
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three>li {
	padding: 0 15%;
	position: relative
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three>li:last-of-type {
	padding-bottom: .2rem
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three>li>a {
	color: #fff;
	padding: .2rem 0;
	font-size: 13px;
	display: block
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three>li.active {
	background-color: #f0f1f2
}

#app header nav.appNav .inner_mid .nav-items>.child_first .child_three.active {
	max-height: 100vh
}

#app header nav.appNav.on {
	height: 100vh
}

#app header nav.appNav.on .inner_top {
	background-color: #000
}

#app header nav.appNav.on .inner_top #app-menu .line:nth-of-type(1) {
	transform: translateY(8px)
}

#app header nav.appNav.on .inner_top #app-menu .line:nth-of-type(1):before {
	transform: rotate(45deg)
}

#app header nav.appNav.on .inner_top #app-menu .line:nth-of-type(2) {
	opacity: 0
}

#app header nav.appNav.on .inner_top #app-menu .line:nth-of-type(3) {
	transform: translateY(-8px)
}

#app header nav.appNav.on .inner_top #app-menu .line:nth-of-type(3):before {
	transform: rotate(-45deg)
}

#app header nav.appNav.on .inner_mid .firstList {
	opacity: 1;
	transform: none
}

#app header.open .appNav .inner_mid {
	opacity: 1;
	pointer-events: auto
}

#app header.open .appNav .inner_mid .nav-items>.child_first>.firstList {
	opacity: 1;
	transform: none
}

#app header.down {
	background-color: rgba(0, 0, 0, .8)
}

#app header.down .pcNav {
	height: 0.8rem
}

#app header.down .logoBox .logo_w {
	height: .7rem;

}

#app header.down+.pageTree {
	background-color: rgba(26, 28, 31, .6);
	top: 1.2rem;
	display: none
}

#app header.open {
	background-color: transparent
}

#app header.open .navMask {
	opacity: 1;
	transform: scaleY(1)
}

#app header.black {
	/* background-color: #000 */
}

#app header.black+.pageTree {
	/* 	background-color: rgba(26, 28, 31, .4) */
}

#app .pageTree {
	height: .4rem;
	width: 100%;
	z-index: 180;
	transition: top .6s cubic-bezier(.38, 0, 0, 1), background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: fixed;
	top: 1.4rem;
	left: 0
}

#app .pageTree .group {
	height: 100%
}

#app .pageTree .group .items .iconfont {
	margin: 0 0 0 .15rem
}

#app .pageTree .group .items .iconfont img {
	width: 35%;
}

#app .pageTree .group .items .downIcon {
	/* padding-right: .22rem; */
	position: relative
}

#app .pageTree .group .items .downIcon .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #fff;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 6px;
	bottom: 0;
	right: 0
}

#app .pageTree .group .items>li {
	position: relative
}

#app .pageTree .group .tab {
	-ms-flex-pack: end;
	justify-content: flex-end
}

#app .pageTree .group .tab>a {
	color: rgba(255, 255, 255, .5);
	padding: 0 .3rem;
	transition: color .3s cubic-bezier(.38, 0, 0, 1)
}

#app .pageTree .group .tab>a:last-of-type {
	padding-right: 0
}

#app .pageTree .group .tab>a:hover,
#app .pageTree .group .tab>a.on {
	color: #fff
}

#app main .row {
	position: relative
}

#app main .row>.line {
	height: 1px;
	background-color: rgba(60, 65, 65, .3)
}

#app main .row>.bg {
	z-index: 1
}

#app main .row>.bg>.pic[data-scroll] {
	height: calc(100% + 2rem);
	top: -1rem
}

#app main .row>.inner {
	z-index: 10;
	position: relative
}

#app main .rowContact {
	background: linear-gradient(90deg, #ec0012, #ec0012);
	padding: 1rem 0 .85rem
}

#app main .rowContact .inner .form {
	-ms-flex-align: start;
	align-items: flex-start
}

#app main .rowContact .inner .form h2 {
	line-height: 2rem
}

#app main .rowContact .inner .form .col {
	width: 9.3rem;
	position: relative
}

#app main .rowContact .inner .form .col .inRow {
	width: 100%;
	grid-template-columns: repeat(var(--col), 1fr);
	gap: .1rem;
	margin-bottom: .1rem;
	display: grid;
	position: relative
}

#app main .rowContact .inner .form .col .inRow:nth-of-type(2) {
	z-index: 5
}

#app main .rowContact .inner .form .col .inRow .inTxt {
	height: .5rem;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#app main .rowContact .inner .form .col .inRow .inTxt>input[type=text] {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	padding: 0;
	line-height: .5rem;
	display: block
}

#app main .rowContact .inner .form .col .inRow .inTxt>input[type=text]::-ms-input-placeholder {
	color: #1c1f1f;
	font-size: 12px
}

#app main .rowContact .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
	color: #1c1f1f;
	font-size: 12px
}

#app main .rowContact .inner .form .col .inRow .inTxt .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#app main .rowContact .inner .form .col .inRow .inDown {
	height: .5rem;
	position: relative
}

#app main .rowContact .inner .form .col .inRow .inDown .input-text {
	height: .5rem;
	width: 100%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .9);
	border: none;
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#app main .rowContact .inner .form .col .inRow .inDown .input-text .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#app main .rowContact .inner .form .col .inRow .inDown .input-text>input[type=text] {
	height: 100%;
	text-indent: 0;
	width: 100%;
	pointer-events: none;
	background-color: transparent;
	border: none
}

#app main .rowContact .inner .form .col .inRow .inDown .input-text .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #1c1f1f;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 5px;
	bottom: 0;
	right: .2rem
}

#app main .rowContact .inner .form .col .inRow .inDown .childDown {
	width: 100%;
	max-height: calc(1.04167vw + 2rem);
	background-color: rgba(255, 255, 255, .9);
	border-bottom-right-radius: .18rem;
	border-bottom-left-radius: .18rem;
	padding: .1rem .2rem;
	display: none;
	position: absolute;
	top: calc(100% - .09rem);
	left: 0;
	overflow: auto
}

#app main .rowContact .inner .form .col .inRow .inDown .childDown>li {
	width: 100%
}

#app main .rowContact .inner .form .col .inRow .inDown .childDown>li>a,
#app main .rowContact .inner .form .col .inRow .inDown .childDown>li>span {
	width: 100%;
	cursor: pointer;
	line-height: .4rem;
	display: block
}

#app main .rowContact .inner .form .col .inRow .inArea {
	width: 100%;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: .2rem
}

#app main .rowContact .inner .form .col .inRow .inArea textarea {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	display: block
}

#app main .rowContact .inner .form .col .inRow .inArea textarea::-ms-input-placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: 12px
}

#app main .rowContact .inner .form .col .inRow .inArea textarea::placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: 12px
}

#app main .rowContact .inner .form .col .inRow .btm {
	padding: 5px 0 5px .2rem
}

#app main .rowContact .inner .form .col .inRow .btm .layer-btn {
	width: 2.4rem
}

#app main .rowContact .inner .form .col .inRow .btm .layer-btn .mk {
	background-color: #fff
}

#app main .rowContact .inner .form .col .inRow .btm .layer-btn:hover {
	box-shadow: 0 .1rem .2rem -4px rgba(35, 38, 38, .3)
}

#app main .rowContact .inner .form .col .loadMk {
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(255, 255, 255, .8);
	border-radius: .18rem;
	transition: opacity .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#app main .rowContact .inner .form .col .loadMk .loader {
	width: 1rem
}

#app main .rowContact .inner .form .col .loadMk.active {
	opacity: 1
}

#app main .rowMap {
	background-color: #efefef;
	padding: 1rem 0 1.7rem
}

#app main .rowMap .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#app main .Foot .btm {
	height: 1.5rem;
	z-index: 10;
	background-color: #fff;
	position: relative
}

#app main .Foot .btm .putIn .inRow {
	width: 6.2rem;
	height: .6rem;
	text-align: center;
	background-color: #f2f2f2;
	border: none;
	border-radius: 1rem;
	margin-right: .1rem
}

#app main .Foot .btm .putIn .sub .iconfont {
	transform: none !important
}

#app footer {
	background-color: #1c1f1f;
	padding-top: 0.4rem
}

#app footer .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .4rem
}

#app footer .top .logo>img {
	height: .84rem;
	display: block
}

#home .r3 .inner>.mid .left {
	width: 39%;
	max-width: 48%;
	display: flex;
	flex-wrap: wrap;
}

#home .r3 .inner>.mid .left p {
	color: #232626;
	font-weight: 700;
	line-height: 1.5;
}

#home .r3 .inner>.mid .left small {
	color: #232626;
	font-weight: 500;
	line-height: 1.9;
	margin-top: 30px;
	display: inline-block;
}

#home .r3 .inner>.mid .right {
	width: 73%;
	height: 72vh;
}

#home .r3 .inner>.mid .right video {
	width: 127%;
	vertical-align: middle;
	margin-left: 0;
	position: relative;
	bottom: 0px;
	right: 199px;
	height: 100%;
	object-fit: cover;
}

#home .r3 .layer-map {
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	display: flex;
}

#app footer .top .items {
	width: 75%;
	grid-template-columns: repeat(6, auto);
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-top: .0rem;
	padding-right: 1rem;
	display: flex;
}

.aniBox.alanGo.zio p {
	color: #fff;
	font-size: 16px;
	width: 100%;
	padding-left: 13px;
	margin-top: -111px;
}

#app footer .top .items>li {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	width: 100%;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-right: 0;
	display: -ms-flexbox;
	display: flex;
}

#app footer .top .items>li:last-of-type {
	margin-right: 0
}

#app footer .top .items>li .f-16,
#app footer .top .items>li #Popup>span {
	margin-bottom: .2rem
}

#app footer .top .items>li .f-14,
#app footer .top .items>li #newDetail .r1 .inner .mid .detail *,
#newDetail .r1 .inner .mid .detail #app footer .top .items>li * {
	color: rgba(255, 255, 255, .5);
	line-height: .3rem
}

#app footer .top .items>li .f-14:hover,
#app footer .top .items>li #newDetail .r1 .inner .mid .detail :hover,
#newDetail .r1 .inner .mid .detail #app footer .top .items>li :hover {
	color: #fff
}

#app footer .mid {
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .6rem
}

#app footer .mid .items {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: flex
}

#app footer .mid .items>li {
	width: 3.4rem;
	padding: .12rem 0
}

#app footer .mid .items>li .iconfont {
	margin-right: .2rem
}

#app footer .mid .box {
	width: 50%;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-right: 1rem
}

#app footer .mid .box .sendBox .putIn .inRow {
	height: .54rem;
	text-align: center;
	width: 3.2rem;
	background-color: #f2f2f2;
	border: none;
	border-radius: 1rem;
	margin-right: .1rem
}

#app footer .mid .box .sendBox .putIn .sub {
	height: .54rem
}

#app footer .mid .box .sendBox .putIn .sub .iconfont {
	transform: none !important
}

#app footer .mid .shareBox .share {
	width: .44rem;
	height: .44rem;
	background: #efefef;
	border: 1px solid #ec0012;
	border-radius: 50%;
	margin-right: .12rem
}

#app footer .mid .shareBox .share.face .iconfont {
	color: #3c5a99
}

#app footer .mid .shareBox .share.twi .iconfont {
	color: #000
}

#app footer .mid .shareBox .share.tuBe .iconfont {
	color: #d81e06
}

#app footer .mid .shareBox .share.liIn .iconfont {
	color: #0077b5
}

#app footer .btm {
	border-top: 1px solid rgba(242, 242, 242, .15);
	grid-template-columns: 50% 2fr 1fr;
	padding: .3rem 0 .3rem;
	display: grid
}

#app footer .btm .c1 {
	color: #efefef
}

#app footer .btm .c2 {
	color: rgba(239, 239, 239, .8)
}

#app footer .btm .c3 {
	color: rgba(239, 239, 239, .3);
	text-align: right
}

#app footer .btm .line {
	margin: 0 .1rem
}

#app .pop {
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	position: fixed;
	top: 0;
	left: 0
}

#app .pop .mask {
	background-color: rgba(0, 0, 0, .8)
}

#app .pop .popCon {
	width: 68vw;
	z-index: 10;
	opacity: 0;
	position: relative;
	transform: translateY(15%)
}

#app .pop .popCon .media {
	width: 100%;
	object-fit: cover;
	display: block
}

#app .pop .popCon .closePop {
	color: #fff;
	transition: transform .3s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: calc(100% + .1rem)
}

@media screen and (orientation: landscape) {
	#app .pop .popCon .closePop:hover {
		transform: rotate(90deg)
	}
}

#app .pop.on {
	display: -ms-flexbox;
	display: flex
}

#Popup {
	width: 100%;
	height: 2rem;
	z-index: 200;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: fixed;
	bottom: 30%;
	left: 0;
	transform: translateY(.3rem)
}

#Popup>span {
	color: #fff;
	background-color: #000;
	border-radius: .12rem;
	padding: .1rem .3rem
}

#Popup.on {
	opacity: 1;
	transform: translateY(0)
}

.bigPop {
	width: 100%;
	height: 100%;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, .8);
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden
}

.bigPop .close {
	width: .64rem;
	height: .64rem;
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 5vw;
	right: 5vw
}

.bigPop .imgBox {
	width: 100%;
	height: 50%;
	overflow: auto
}

.bigPop .imgBox .img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	display: block
}

.bigPop .imgBox #canvas {
	background-color: #f2f2f2
}

.bigPop.active {
	opacity: 1;
	pointer-events: auto
}

.packagePop {
	width: 100%;
	height: 100%;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: -ms-flexbox;
	display: flex;
	position: fixed;
	top: 0;
	left: 0
}

.packagePop .mask {
	background-color: rgba(0, 0, 0, .8)
}

.packagePop .popCon {
	width: 80vw;
	z-index: 10;
	opacity: 0;
	height: 39.1949vw;
	background-color: #000;
	border-radius: .2rem;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	transform: translateY(15%)
}

.packagePop .popCon .box {
	height: 95%;
	width: 100%;
	overflow: auto
}

.packagePop .popCon .box>img {
	width: 100%;
	display: block
}

.packagePop .popCon .closePackagePop {
	color: #fff;
	transition: transform .3s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: calc(100% + .1rem)
}

.packagePop .popCon .closePackagePop:hover {
	transform: rotate(90deg)
}

.packagePop.on {
	pointer-events: auto
}

.imgPopup {
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	position: fixed;
	top: 0;
	left: 0
}

.imgPopup.on {
	display: -ms-flexbox;
	display: flex
}

.imgPopup .mask {
	background-color: rgba(0, 0, 0, .8)
}

.imgPopup .popCon {
	width: 55vw;
	opacity: 0;
	position: relative;
	transform: translateY(15%)
}

.imgPopup .popCon .msg {
	width: 100%;
	border-radius: .2rem;
	overflow: hidden;
	transform: translateZ(0)
}

.imgPopup .popCon .msg .photo {
	width: 100%;
	padding-bottom: 55%;
	display: block;
	position: relative
}

.imgPopup .popCon .msg .photo .pic {
	opacity: 0;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1)
}

.imgPopup .popCon .msg .photo .pic.on {
	opacity: 1
}

.imgPopup .popCon .msg .box {
	width: 100%;
	background: linear-gradient(0deg, #000 0, transparent 100%);
	grid-template-columns: repeat(4, auto);
	gap: 0 1rem;
	padding: 0 .4rem;
	display: grid;
	position: absolute;
	bottom: 0;
	left: 0
}

.imgPopup .popCon .msg .box .list {
	height: 2.2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-top: .8rem;
	padding-bottom: .4rem;
	display: -ms-flexbox;
	display: flex
}

.imgPopup .popCon .msg .box .list>small {
	color: rgba(255, 255, 255, .5);
	display: block
}

.imgPopup .popCon .msg .box .list>h4 {
	text-align: left;
	line-height: 1
}

.imgPopup .popCon .prevBtn {
	width: .55rem;
	height: .55rem;
	z-index: 9;
	-webkit-backdrop-filter: blur(.1rem);
	-webkit-backdrop-filter: blur(.1rem);
	backdrop-filter: blur(.1rem);
	background-color: rgba(0, 0, 0, .1);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	left: .32rem
}

@media screen and (orientation: landscape) {
	.imgPopup .popCon .prevBtn:hover {
		background-color: rgba(0, 0, 0, .6)
	}
}

.imgPopup .popCon .nextBtn {
	width: .55rem;
	height: .55rem;
	z-index: 9;
	-webkit-backdrop-filter: blur(.1rem);
	-webkit-backdrop-filter: blur(.1rem);
	backdrop-filter: blur(.1rem);
	background-color: rgba(0, 0, 0, .1);
	border-radius: 50%;
	right: .32em
}

@media screen and (orientation: landscape) {
	.imgPopup .popCon .nextBtn:hover {
		background-color: rgba(0, 0, 0, .6)
	}
}

.imgPopup .popCon .pager {
	width: 100%;
	height: .6rem;
	position: absolute;
	top: 0;
	left: 0
}

.imgPopup .popCon .pager>li {
	width: 7px;
	height: 7px;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 50%;
	margin: 0 .05rem
}

.imgPopup .popCon .pager>li.on {
	background-color: #fff
}

.imgPopup .popCon .closeImgPop {
	width: .32rem;
	height: .32rem;
	color: #fff;
	margin: 0 auto;
	transition: transform .3s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: calc(100% + .2rem);
	left: 0;
	right: 0
}

.imgPopup .popCon .closeImgPop:hover {
	transform: rotate(90deg)
}

#loading {
	width: 100%;
	height: 100%;
	z-index: 210;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0
}

#loading .svgIcon {
	width: 100vw;
	z-index: 2;
	pointer-events: none
}

#loading .svgIcon .cls-w {
	fill: #fff
}

#loading .svgIcon .cls-b {
	fill: #000;
	transform: scale(0.5)translate(24%, -32%);
	transition: transform 1.2s cubic-bezier(.38, 0, 0, 1);
	transform-origin: 50% 82% !important;
}

#loading .svgIcon .cls-b.active {
	transform: scale(0.5)translate(24%, -32%);
}



#loading .group {
	z-index: 5;
	width: 100%;
	height: 100%;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 5vw;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#loading .group .img {
	height: 1em;
	margin-top: -.1em
}

#loading .group .txt {
	opacity: 0;
	text-transform: uppercase;
	padding-left: 1%
}

#loading .group .txt .letter {
	margin: 0 .2em
}

#loading .loadMask {
	height: 50%;
	width: 100%;
	z-index: 1;
	background: linear-gradient(#ec0012 0%, rgba(254, 219, 0, 0) 100%);
	transition: transform 1.8s cubic-bezier(.38, 0, 0, 1) .5s, opacity .5s cubic-bezier(.38, 0, 0, 1) 1.6s;
	position: absolute;
	top: 80%;
	left: 0
}

#loading .bgMask {
	z-index: 0;
	background-color: #000;
	transition: opacity 1.6s cubic-bezier(.38, 0, 0, 1) .5s
}

#loading.active .group .txt {
	opacity: 1
}

#loading.active .loadMask {
	opacity: 0;
	transform: translateY(-200%)
}

#loading.active .bgMask {
	opacity: 0
}

.dotFn {
	margin-left: .15rem;
	position: relative
}

.dotFn:before {
	content: "";
	width: .12rem;
	max-width: .8rem;
	height: 100%;
	max-height: .4rem;
	transform-origin: 0;
	opacity: 0;
	background-color: #ec0012;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), width .7s cubic-bezier(.38, 0, 0, 1), transform .7s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	left: -.07rem;
	transform: skew(-10deg)
}

.dotFn .txt {
	z-index: 10;
	white-space: nowrap;
	line-height: 1em;
	position: relative
}

.dotFn .txt .letter {
	/* 	opacity: 0;
	margin-right: .3em */
}

.dotFn .txt .letter:nth-of-type(1) {
	transform: translate(.3rem)
}

.dotFn .txt .letter:nth-of-type(2) {
	transform: translate(.4rem)
}

.dotFn .txt .letter:nth-of-type(3) {
	transform: translate(.5rem)
}

.dotFn .txt .letter:nth-of-type(4) {
	transform: translate(.6rem)
}

.dotFn .txt .letter:nth-of-type(5) {
	transform: translate(.7rem)
}

.dotFn .txt .letter:nth-of-type(6) {
	transform: translate(.8rem)
}

.dotFn .txt .letter:nth-of-type(7) {
	transform: translate(.9rem)
}

.dotFn .txt .letter:nth-of-type(8) {
	transform: translate(1rem)
}

.dotFn .txt .letter:nth-of-type(9) {
	transform: translate(1.1rem)
}

.dotFn .txt .letter:nth-of-type(10) {
	transform: translate(1.2rem)
}

.dotFn .txt .letter:nth-of-type(11) {
	transform: translate(1.3rem)
}

.dotFn .txt .letter:nth-of-type(12) {
	transform: translate(1.4rem)
}

.dotFn .txt .letter:nth-of-type(13) {
	transform: translate(1.5rem)
}

.dotFn .txt .letter:nth-of-type(14) {
	transform: translate(1.6rem)
}

.dotFn .txt .letter:nth-of-type(15) {
	transform: translate(1.7rem)
}

.dotFn .txt .letter:nth-of-type(16) {
	transform: translate(1.8rem)
}

.dotFn .txt .letter:nth-of-type(17) {
	transform: translate(1.9rem)
}

.dotFn .txt .letter:nth-of-type(18) {
	transform: translate(2rem)
}

.dotFn .txt .letter:nth-of-type(19) {
	transform: translate(2.1rem)
}

.dotFn .txt .letter:nth-of-type(20) {
	transform: translate(2.2rem)
}

.dotFn.go:before {
	opacity: 1
}

.dotFn.go .txt .letter {
	opacity: 1;
	transform: translate(0, 0)
}

.startBody {
	height: 100vh;
	width: 100vw;
	overflow: hidden
}

#home {
	width: 100%;
	background-color: #efefef;
	display: block
}

#home .row {
	width: 100%
}

#home .row>.line {
	height: 1px;
	background-color: rgba(60, 65, 65, .3)
}

#home .row>.inner {
	z-index: 4;
	position: relative
}

#home .banner {
	width: 100%;
	display: block
}

#home .banner .bg {
	background-color: #000;
	transition: transform 1.2s cubic-bezier(.38, 0, 0, 1)
}

#home .banner .bg:after {
	content: "";
	pointer-events: none;
	z-index: 20;
	background-color: rgba(0, 0, 0, .15)
}

#home .banner .bg .pic {
	opacity: 0;
	transition: opacity .7s cubic-bezier(.38, 0, 0, 1), transform 2.4s cubic-bezier(.38, 0, 0, 1);
	transform: scale(1.1)
}

#home .banner .bg .pic .media {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	display: block
}

#home .banner .bg .pic .bannerMediaApp {
	height: 100%;
	width: 278.4vw;
	position: absolute;
	top: 0;
	left: -89.2vw
}

#home .banner .bg .pic.active {
	opacity: 1;
	transform: scale(1)
}

#home .banner .inner {
	position: relative
}

#home .banner .inner .group {
	height: calc(100vh - 0vw);
	width: 100%;
	max-height: 100vh;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 0 .6rem .6rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#home .banner .inner .group .list {
	pointer-events: none;
	position: absolute;
	bottom: .6rem;
	margin-bottom: 100px;
	left: .6rem
}

#home .banner .inner .group .list p {
	margin: 20px 0;
}

#home .banner .inner .group .list .set .tab {
	text-align: center;
	border: 3px solid #ec0012;
	border-radius: 1rem;
	margin-right: .2rem;
	padding: .12rem .3rem;
	position: relative;
	overflow: hidden
}

#home .banner .inner .group .list .set .tab:after {
	content: "";
	width: 120%;
	height: 100%;
	background-color: #ec0012;
	border-radius: 1rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), background-color .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: -10%;
	transform: translate(-100%)
}

#home .banner .inner .group .list .set .tab>span {
	z-index: 10;
	line-height: 1;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative
}

#home .banner .inner .group .list .set .tab:hover,
#home .banner .inner .group .list .set .tab.on {
	background-color: #ec0012;
	transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#home .banner .inner .group .list .set .tab:hover:after,
#home .banner .inner .group .list .set .tab.on:after {
	transform: translate(0, 0)
}

#home .banner .inner .group .list .set .tab:hover>span,
#home .banner .inner .group .list .set .tab.on>span {
	/* color: #232626 */
}

#home .banner .inner .group .list h2 {
	line-height: 1;
	font-weight: 700;
}

#home .banner .inner .group .list h2 small {
	font-weight: 100;
	font-size: inherit;
	text-transform: uppercase
}

#home .banner .inner .group .list p {
	line-height: 3
}

#home .banner .inner .group .list:first-of-type {
	position: relative;
	bottom: 0;
	left: 0
}

#home .banner .inner .group .list.active {
	pointer-events: auto
}

#home .banner .inner .group h1 {
	line-height: 1.18
}

#home .banner .inner .group h1 .letter {
	display: block;
	overflow: hidden
}

#home .banner .inner .group h1 .letter .childLetter {
	margin-right: .2em
}

#home .banner .inner .group .bannerPage {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	padding-top: .6rem;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	top: 0;
	right: .6rem
}

#home .banner .inner .group .bannerPage .bannerDot {
	cursor: pointer;
	width: .12rem;
	height: .12rem;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	margin: .12rem 0;
	transition: background-color .6s cubic-bezier(.38, 0, 0, 1), border-color .6s cubic-bezier(.38, 0, 0, 1)
}

#home .banner .inner .group .bannerPage .bannerDot.active {
	background-color: #fff;
	border-color: #fff
}

#home .banner .part {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 1.1rem .6rem 1.2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#home .banner .part .mask {
	background-color: #efefef;
	transition: transform 1s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(15vw)
}

#home .banner .part .head {
	width: .9rem;
	height: .9rem;
	z-index: 2;
	opacity: 0;
	background-color: #fff;
	border-radius: 50%;
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: -.45rem;
	right: .6rem;
	transform: translateY(.25rem);
	box-shadow: 10px .83333vw 3.125vw rgba(0, 0, 0, .1)
}

#home .banner .part .head:after {
	content: "";
	background: linear-gradient(150deg, rgba(0, 0, 0, .35) 100%, transparent 0%);
	border-radius: 50%
}

#home .banner .part .head>p {
	width: calc(100% + 2rem);
	text-align: center;
	position: absolute;
	bottom: calc(100% + .12rem);
	left: -1rem
}

#home .banner .part .head .pic {
	z-index: 10;
	width: 100%;
	height: 100%;
	background-size: contain;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden
}

#home .banner .part .head.active {
	opacity: 1;
	transform: translate(0, 0)
}

#home .banner .part .topic {
	z-index: 3;
	position: relative
}

#home .banner .part .box {
	width: 100%;
	z-index: 4;
	grid-template-columns: 50% 50%;
	padding: 1rem 0;
	display: grid;
	position: relative
}

#home .banner .part .box .left {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-right: 15%;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#home .banner .part .box .left .list:nth-of-type(1) {
	z-index: 12;
	position: relative
}

#home .banner .part .box .left h3 {
	z-index: 20;
	line-height: 1.1;
	position: relative;
	font-weight: bold;
	font-size: .6rem;
}

#home .banner .part .box .left h3 .letter {
	display: block;
	overflow: hidden
}

#home .banner .part .box .left .mk {
	z-index: 10;
	width: 8.6rem;
	position: absolute;
	top: -1.6rem;
	right: -8.5rem
}

#home .banner .part .box .left .mk .sign {
	height: 8.8rem
}

#home .banner .part .box .right {
	z-index: 10;
	grid-template-rows: repeat(2, 2.6rem);
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	padding-right: 8%;
	display: grid;
	position: relative
}

#home .banner .part .box .right .chunk {
	-webkit-backdrop-filter: blur(.15rem);
	-webkit-backdrop-filter: blur(.15rem);
	backdrop-filter: blur(.15rem);
	background-color: rgba(255, 255, 255, .8);
	border-radius: .16rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: .4rem .4rem .4rem .5rem;
	display: -ms-flexbox;
	display: flex
}

#home .banner .part .box .right .chunk .img {
	max-height: .5rem;
	display: block
}

#home .banner .part .box .right .chunk .col {
	width: 100%;
	text-align: right
}

#home .banner .part .box .right .chunk .col h4 {
	text-align: right
}

#home .banner .part .box .right .chunk .col h4 em {
	color: inherit;
	margin: 0 .1rem;
	font-family: inherit;
	line-height: 1;
	font-weight: 700;
}

#home .banner .part .box .right .chunk .col p {
	color: rgba(35, 38, 38, .7);
	text-align: right
}

@media screen and (orientation: portrait) {
	#home .banner .part .box .left .list {
		opacity: 1
	}

	#home .banner .part .box.go .left .list {
		animation: .8s cubic-bezier(.38, 0, 0, 1) both fadeInUpSmall
	}

	#home .banner .part .box.go .left .list:nth-of-type(1) {
		animation-delay: .2s
	}

	#home .banner .part .box.go .left .list:nth-of-type(2) {
		animation-delay: .3s
	}
}

#home .banner .bg .pic {
	height: calc(100vh - 0vw) !important;
}

#home {
	transform: translateY(-8vw)
}

#home .banner.active .part .mask {
	transform: translate(0, 0)
}

#home .r1 {
	padding-bottom: .8rem
}

#home .r1 .inner {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-top: .5rem;
	display: -ms-flexbox;
	display: flex
}

#home .r1 .inner .group {
	width: 100%
}

#home .r1 .inner .group .list {
	margin-bottom: .4rem
}

#home .r1 .inner .group .list .left {
	width: 4.5rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: .3rem .6rem .3rem .3rem;
	display: -ms-flexbox;
	display: flex
}

#home .r1 .inner .group .list .left>.img {
	height: .55rem;
	margin-bottom: .2rem;
	display: block
}

#home .r1 .inner .group .list .left h3 {
	margin-bottom: .4rem;
	line-height: 1.2;
	overflow: hidden;
	font-weight: 700;
}

#home .r1 .inner .group .list .left h3 .letter {
	transition-duration: .5s
}

#home .r1 .inner .group .list .left .layer-btn {
	margin-top: .4rem
}

#home .r1 .inner .group .list .right {
	width: calc(100% - 4.5rem);
	height: 6rem;
	background-color: #232626;
	border-radius: .2rem;
	padding: 0 .2rem .2rem;
	position: relative;
	overflow: hidden
}

#home .r1 .inner .group .list .right .photo {
	background-color: #232626;
	border-radius: .2rem;
	overflow: hidden
}

#home .r1 .inner .group .list .right .photo .media {
	z-index: 5;
	object-fit: cover;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r1 .inner .group .list .right .photo .media.op-0+.MediaTs {
	opacity: 0
}

#home .r1 .inner .group .list .right .photo .MediaTs {
	z-index: 5;
	object-fit: cover;
	width: 100%;
	padding-bottom: 42.857%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r1 .inner .group .list .right .photo .pic {
	opacity: 0;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1)
}

#home .r1 .inner .group .list .right .photo .pic.on {
	opacity: 1
}

#home .r1 .inner .group .list .right .tree {
	z-index: 10;
	width: calc(100% - .4rem);
	position: absolute;
	bottom: .2rem;
	left: .2rem
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide {
	cursor: pointer;
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	height: .9rem;
	background-color: rgba(51, 51, 51, .5);
	border-radius: .12rem;
	-ms-flex-direction: column;
	flex-direction: column;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1), color .5s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide .layer-icon {
	height: 100%;
	width: 100%;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	margin: 0 auto;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide h5 {
	text-align: center;
	font-weight: 400;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1)
}

@media screen and (orientation: landscape) {
	#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide:hover {
		background-color: #fff
	}

	#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide:hover .layer-icon {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-.12rem)
	}

	#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide:hover h5 {
		color: #232626;
		font-weight: 600;
		transform: translateY(.12rem)
	}
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.on {
	background-color: #fff
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.on .layer-icon {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-.16rem)
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.on h5 {
	color: #232626;
	font-weight: 600;
	transform: translateY(.16rem)
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.active {
	background-color: #fff
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.active .layer-icon {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-.16rem)
}

#home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide.active h5 {
	color: #232626;
	font-weight: 600;
	transform: translateY(.16rem)
}

#home .r1 .inner .group .list .right .tree.items-1 .swiper-wrapper {
	grid-template-columns: repeat(1, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .list .right .tree.items-2 .swiper-wrapper {
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .list .right .tree.items-3 .swiper-wrapper {
	grid-template-columns: repeat(3, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .list .right .tree.items-4 .swiper-wrapper {
	grid-template-columns: repeat(4, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .list .right .tree.items-5 .swiper-wrapper {
	grid-template-columns: repeat(4, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .list .right .tree.items-6 .swiper-wrapper {
	grid-template-columns: repeat(6, 1fr);
	gap: .2rem
}

#home .r1 .inner .group .btm {
	-ms-flex-direction: column;
	flex-direction: column;
	padding-top: .5rem;
	position: relative
}

#home .r1 .inner .group .btm>p {
	color: #3c4141;
	text-align: center;
	padding: .25rem 0
}

#home .r1 .inner .group .btm .set {
	z-index: 10;
	height: 1.4rem;
	width: calc(100% + 1.2rem);
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: -.6rem
}

#home .r1 .inner .group .btm .set .leftMk {
	width: 8rem;
	height: 100%;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 0%, #efefef 90%);
	position: absolute;
	bottom: 0;
	left: 0
}

#home .r1 .inner .group .btm .set .rightMk {
	width: 8rem;
	height: 100%;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, #efefef 90%);
	position: absolute;
	bottom: 0;
	right: 0
}

#home .r2 {
	padding-bottom: 1.5rem
}

#home .r2 .inner {
	padding-top: .5rem
}

#home .r2 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#home .r2 .inner .top .topic {
	width: 25%
}

#home .r2 .inner .top>p {
	-ms-flex: 1;
	flex: 1
}

#home .r2 .inner .mid {
	position: relative
}

#home .r2 .inner .mid .r2Sw {
	width: 100%;
	transition-timing-function: cubic-bezier(.38, 0, 0, 1)
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide {
	width: 46vw
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide h3 {
	margin-bottom: .1rem;
	padding: 0 .4rem;
	font-weight: 700;
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide small {
	font-weight: 500;
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo {
	height: 5rem;
	background-size: cover;
	border-radius: .2rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo h4 {
	text-align: right;
	line-height: .74;
	position: absolute;
	bottom: 0;
	right: .4rem
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo h4 small {
	margin-left: -.2em
}

#home .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide.swiper-slide-active .photo {
	box-shadow: 0 .3rem .8rem -5px rgba(35, 38, 38, .1)
}

#home .r2 .inner .mid .r2Sw .swiper-button-prev {
	height: 5rem;
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 23%
}

#home .r2 .inner .mid .r2Sw .swiper-button-prev .layer-icon {
	width: .6rem;
	height: .6rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%
}

#home .r2 .inner .mid .r2Sw .swiper-button-next {
	height: 5rem;
	cursor: pointer;
	position: absolute;
	bottom: 0;
	right: 23%
}

#home .r2 .inner .mid .r2Sw .swiper-button-next .layer-icon {
	width: .6rem;
	height: .6rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%
}

#home .r2 .inner .mid .set {
	z-index: 10;
	height: 100%;
	width: calc(100% + 1.2rem);
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: -.6rem
}

#home .r2 .inner .mid .set .leftMk {
	width: 6rem;
	height: 100%;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 0%, #efefef 100%);
	position: absolute;
	bottom: 0;
	left: 0
}

#home .r2 .inner .mid .set .rightMk {
	width: 6rem;
	height: 100%;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, #efefef 100%);
	position: absolute;
	bottom: 0;
	right: 0
}

#home .r3 {
	padding-bottom: 0;
	background: #e3e2e3;
}

#home .r3 .inner {
	padding-top: 0rem
}

#home .r3 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 0rem;
	position: absolute;
	top: 10%;
	padding-left: 37px;
}

#home .r3 .inner .top>p {
	width: 75%;
	padding-right: 24%
}

#home .r3 .inner>.mid {
	padding: 0 .4rem
}

@media screen and (orientation: landscape) {
	#home .r3 .inner>.mid .right .map {
		max-width: 100vw
	}
}

#home .r3 .inner>.mid h3 {
	line-height: 1.1
}

#home .r3 .inner>.mid h3 .letter {
	display: block
}

#home .r4 {
	background-color: #fff;
	padding-bottom: 1.2rem;
	position: relative;
	overflow: hidden
}

#home .r4 .bg .pic {
	opacity: 0;
	transition: transform 1.5s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r4 .bg .pic.on {
	opacity: 1
}

#home .r4 .inner {
	padding-top: 1rem
}

#home .r4 .inner .top {
	z-index: 11;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

#home .r4 .inner .top .col {
	width: 75%
}

#home .r4 .inner .top .col h3 {
	line-height: 1.2
}

#home .r4 .inner .top .col h3 .letter {
	display: block
}

#home .r4 .inner .clear {
	height: 2.5rem;
	z-index: 10;
	width: 100%;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#home .r4 .inner .clear .img {
	height: 4.7rem;
	z-index: 5;
	opacity: 0;
	transition: transform 2s cubic-bezier(.38, 0, 0, 1) .8s, opacity 2s cubic-bezier(.38, 0, 0, 1) .8s;
	position: absolute;
	bottom: -.4rem;
	right: 18%;
	transform: translate(-25%)
}

#home .r4 .inner .clear .img.go {
	opacity: 1;
	transform: translate(0, 0)
}

#home .r4 .inner .clear .signBox {
	z-index: 3;
	position: absolute;
	top: -1rem;
	right: -.5rem
}

#home .r4 .inner .clear .signBox .mk {
	width: 200%;
	height: 100%;
	z-index: 4;
	background: #fff;
	transition: transform 4s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%)
}

#home .r4 .inner .clear .signBox .mk.go {
	transform: translate(50%)
}

#home .r4 .inner .clear .signBox .sign {
	width: 9.2rem;
	z-index: 3;
	opacity: 0;
	transition: transform 2s cubic-bezier(.38, 0, 0, 1), opacity 1s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative;
	transform: translate(-20%)
}

#home .r4 .inner .clear .signBox .sign.go {
	opacity: 1;
	transform: translate(0)
}

#home .r4 .inner .mid {
	width: 100%;
	z-index: 10;
	grid-template-columns: repeat(3, 1fr);
	gap: .2rem;
	display: grid;
	position: relative
}

#home .r4 .inner .mid .list {
	height: 2rem;
	cursor: pointer;
	padding: 0 .6rem;
	position: relative
}

#home .r4 .inner .mid .list .mk {
	-webkit-backdrop-filter: blur(.1rem);
	-webkit-backdrop-filter: blur(.1rem);
	backdrop-filter: blur(.1rem);
	background-color: rgba(245, 245, 245, .9);
	border-radius: .16rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r4 .inner .mid .list .txt {
	z-index: 10;
	position: relative;
	font-weight: 700;
	margin-bottom: 5px;
	display: inline-block;
}

#home .r4 .inner .mid .list .layer-icon {
	width: .8rem;
	height: .8rem;
	z-index: 10;
	background-color: #fff;
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	transform: scale(.75)
}

#home .r4 .inner .mid .list .layer-icon .icon-1 {
	opacity: 1;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r4 .inner .mid .list .layer-icon .icon-2 {
	height: 100%;
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	line-height: .7rem;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	transform: scale(0)
}

#home .r4 .inner .mid .list .layer-icon .icon-2 img {
	width: 38px;
}

@media screen and (orientation: landscape) {
	#home .r4 .inner .mid .list:hover .mk {
		background-color: #fff
	}

	#home .r4 .inner .mid .list:hover .layer-icon {
		background-color: #ec0012;
		transform: scale(1)
	}

	#home .r4 .inner .mid .list:hover .layer-icon .icon-1 {
		opacity: 0;
		transform: scale(.5)
	}

	#home .r4 .inner .mid .list:hover .layer-icon .icon-2 {
		opacity: 1;
		transform: scale(1)
	}
}

@media screen and (orientation: portrait) {
	#home .r4 .inner .mid .list .layer-icon {
		background-color: #ec0012;
		transform: scale(1)
	}

	#home .r4 .inner .mid .list .layer-icon .icon-1 {
		opacity: 0;
		transform: scale(.5)
	}

	#home .r4 .inner .mid .list .layer-icon .icon-2 {
		opacity: 1;
		transform: scale(1)
	}
}

#home .r4 .inner.white .top .bc,
#home .r4 .inner.white .top .gray {
	color: #fff
}

#home .r4 .inner.white .clear {
	opacity: 0
}

#home .r5 {
	position: relative;
	overflow: hidden
}

#home .r5 .bg>.sign {
	width: 10rem;
	position: absolute;
	top: 5rem;
	left: -5rem;
}

#home .r5 .inner {
	z-index: 10;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	position: relative
}

#home .r5 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .9rem
}

#home .r5 .inner .top .col {
	width: 75%
}

#home .r5 .inner .top .col .tab {
	width: 1.8rem;
	height: .6rem;
	text-align: center;
	border: 1px solid rgba(41, 46, 46, .3);
	border-radius: 1rem;
	margin-right: .2rem;
	line-height: .6rem;
	position: relative;
	overflow: hidden
}

#home .r5 .inner .top .col .tab:after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #232626;
	border-radius: 1rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), background-color .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-100%)
}

#home .r5 .inner .top .col .tab>span {
	z-index: 10;
	transition: color .3s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#home .r5 .inner .top .col .tab:hover:after,
#home .r5 .inner .top .col .tab.on:after {
	transform: translate(0, 0)
}

#home .r5 .inner .top .col .tab:hover>span,
#home .r5 .inner .top .col .tab.on>span {
	color: #fff
}

#home .r5 .inner .mid {
	position: relative;
	overflow: hidden;
	margin-top: -104px;
	padding-top: 59px;
}

#home .r5 .inner .mid .r5Sw {
	opacity: 0;
	width: 100%;
	height: 68%;
	pointer-events: none;
	padding-top: 0rem;
	padding-bottom: 1.5rem;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(15%)
}

#home .r5 .inner .mid .r5Sw:nth-of-type(1) {
	position: relative
}

#home .r5 .inner .mid .r5Sw.on {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0)
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide {
	background-color: #f7f7f7;
	border-radius: .12rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide .msg {
	padding: .5rem
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide .msg small {
	margin-bottom: .3rem;
	display: block
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide .photo {
	height: 2.7rem;
	width: 100%;
	position: relative;
	overflow: hidden
}

#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide .photo .pic {
	filter: grayscale();
	opacity: .2;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(50%)
}

@media screen and (orientation: landscape) {

	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-next,
	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-duplicate-next {
		box-shadow: 0 .4rem .8rem rgba(35, 38, 38, .3)
	}

	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-next .photo .pic,
	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-duplicate-next .photo .pic {
		filter: grayscale(0%);
		opacity: 1;
		transform: translate(0, 0)
	}
}

@media screen and (orientation: portrait) {

	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-active,
	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
		box-shadow: 0 .4rem .8rem rgba(35, 38, 38, .3)
	}

	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-active .photo .pic,
	#home .r5 .inner .mid .r5Sw .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .photo .pic {
		filter: grayscale(0%);
		opacity: 1;
		transform: translate(0, 0)
	}
}

#home .r5 .inner .mid .r5Sw .swiper-button-prev {
	cursor: pointer;
	position: absolute;
	bottom: 14px;
	left: 27%
}

#home .r5 .part .box .items>li p {
	font-size: 18px;
}

#home .r5 .inner .mid .r5Sw .swiper-button-prev .layer-icon {
	width: .6rem;
	height: .6rem;
	background-color: #fff;
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r5 .inner .mid .r5Sw .swiper-button-prev:hover .layer-icon {
	background-color: #ec0012
}

#home .r5 .inner .mid .r5Sw .swiper-button-next {
	cursor: pointer;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 14px;
	left: calc(25% + 1.1rem)
}

#home .r5 .inner .mid .r5Sw .swiper-button-next .layer-icon {
	width: .6rem;
	height: .6rem;
	background-color: #fff;
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#home .r5 .inner .mid .r5Sw .swiper-button-next:hover .layer-icon {
	background-color: #ec0012
}

#home .r5 .inner .mid .r5Sw .swiper-button-prev:hover .layer-icon img {
	filter: brightness(0)invert(1);
}

#home .r5 .inner .mid .r5Sw .swiper-button-next:hover .layer-icon img {
	filter: brightness(0)invert(1);
}

#home .r5 .inner .mid .r5Sw .swiper-pagination {
	position: absolute;
	top: -62px;
	right: 0
}

#home .r5 .inner .mid .r5Sw .swiper-pagination .swiper-pagination-current,
#home .r5 .inner .mid .r5Sw .swiper-pagination .swiper-pagination-total {
	color: #232626
}

#home .r5 .inner .mid .moreBox {
	height: .9rem;
	z-index: 10;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	bottom: 0;
	right: 0
}

#home .r5 .inner .mid .moreBox .line {
	width: 49vw;
	height: 1px;
	border-top: 1px dashed #292e2e;
	margin-right: .18rem
}

#home .r5 .part {
	z-index: 10;
	padding-bottom: 1rem;
	position: relative
}

#home .r5 .part .box {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	height: 3rem;
	background-color: rgba(0, 0, 0, .85);
	border-radius: .32rem;
	padding: 0 1.3rem
}

#home .r5 .part .box .col {
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: center;
	margin-right: .8rem;
	display: -ms-flexbox;
	display: flex;
}

#home .r5 .part .box .col h2 {
	font-weight: 700;
	line-height: 1.1
}

#home .r5 .part .box .col h2 .letter {
	display: block
}

#home .r5 .part .box .col .layer-icon {
	height: .8em;
	margin-left: .2rem
}

#home .r5 .part .box .col .layer-icon .img {
	height: .32rem
}

#home .r5 .part .box .items {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: flex
}

#home .r5 .part .box .items>li {
	width: 6.1rem;
	padding: 0.1rem 0;
}

#home .r5 .part .box .items>li .iconfont {
	margin-right: .2rem
}

#home .r5 .btm {
	height: 1.5rem;
	z-index: 10;
	background-color: #fff;
	position: relative
}

#home .r5 .btm .putIn .inRow {
	width: 6.2rem;
	height: .6rem;
	text-align: center;
	background-color: #f2f2f2;
	border: none;
	border-radius: 1rem;
	margin-right: .1rem
}

#home .r5 .btm .putIn .sub .iconfont {
	transform: none !important
}

#roofSolution .banner {
	position: relative;
	overflow: hidden
}

#roofSolution .banner>.bg .pro {
	width: 106%;
	height: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: -15%;
	left: -3%
}

#roofSolution .banner>.bg .shadow {
	z-index: 8;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%
}

#roofSolution .banner .inner {
	height: 12.8rem;
	width: 72%;
	-ms-flex-direction: column;
	flex-direction: column;
	margin: 0 auto;
	padding: 2rem 0 1.2rem
}

#roofSolution .banner .inner .topic h1 {
	margin-bottom: .4rem;
	line-height: .9
}

#roofSolution .banner .inner .group {
	grid-template-columns: repeat(2, 5.2rem);
	gap: 0 .8rem;
	display: grid
}

#roofSolution .banner .inner .group .col {
	padding: 0 2% 0 .6rem;
	position: relative
}

#roofSolution .banner .inner .group .col .icon {
	height: .4rem;
	z-index: 10;
	display: block;
	position: absolute;
	top: 0;
	left: 0
}

#roofSolution .banner .inner .group .col h2 {
	line-height: .4rem
}

#roofSolution .banner .inner .group .col p {
	color: rgba(255, 255, 255, .6)
}

#roofSolution .banner_Snapfit {
	position: relative;
	overflow: hidden
}

#roofSolution .banner_Snapfit>.bg .pro {
	width: 106%;
	height: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: -15%;
	left: -3%
}

#roofSolution .banner_Snapfit>.bg .shadow {
	z-index: 8;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%
}

#roofSolution .banner_Snapfit>.bg .shadow:after {
	content: "";
	background: linear-gradient(rgba(23, 24, 26, 0) 60%, #17181a 100%)
}

#roofSolution .banner_Snapfit .inner {
	height: 12.8rem;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 2.8rem 0 1.6rem
}

#roofSolution .banner_Snapfit .inner .topic {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#roofSolution .banner_Snapfit .inner .topic h1 {
	line-height: .9
}

#roofSolution .banner_Snapfit .inner .topic>.img {
	height: 1.15rem;
	margin: 0 auto .1rem;
	display: block
}

#roofSolution .banner_Snapfit .inner .topic p {
	color: #fff
}

#roofSolution .banner_Snapfit .inner .group {
	grid-template-columns: repeat(2, 5.2rem);
	gap: 0 1.5rem;
	display: grid
}

#roofSolution .banner_Snapfit .inner .group .col {
	padding: 0 2% 0 0;
	position: relative
}

#roofSolution .banner_Snapfit .inner .group .col .icon {
	height: .4rem;
	z-index: 10;
	margin-right: .4rem;
	display: block
}

#roofSolution .banner_Snapfit .inner .group .col h2 {
	margin-bottom: 0;
	line-height: 1.5
}

#roofSolution .banner_Snapfit .inner .group .col p {
	color: rgba(255, 255, 255, .6)
}

#roofSolution .banner_Snapfit .inner .group .col>.note {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	display: -ms-flexbox;
	display: flex
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set {
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	display: -ms-flexbox;
	display: flex
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set .upIcon {
	width: .3rem;
	opacity: 0;
	transform-origin: 50% 100%;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	transform: scale(.6)
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set .upIcon path {
	fill: #fff
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set .upIcon.go {
	opacity: 1;
	transform: rotate(-25deg)translate(.1rem, -.1rem)scale(1)
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set em {
	line-height: 1
}

#roofSolution .banner_Snapfit .inner .group .col>.note .set sub {
	vertical-align: baseline
}

#roofSolution .banner_Snapfit .inner .btm {
	width: 100%;
	padding: .8rem 0 0;
	position: absolute;
	bottom: 0;
	left: 0
}

#roofSolution .r1 {
	width: 100%;
	height: 250vh
}

#roofSolution .r1 .inner {
	padding: 1.5rem 1.8rem 1rem;
	overflow: hidden;
	position: sticky !important
}

#roofSolution .r1 .inner .clip {
	background-color: #000;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 1.5rem 1.8rem 1.2rem
}

#roofSolution .r1 .inner .clip h2 {
	background: linear-gradient(156deg, #fff 40%, #404040 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-background-clip: text;
	background-clip: text;
	line-height: .9;
	display: inline-block
}

#roofSolution .r1 .inner .clip .svgIcon {
	width: 100vw;
	z-index: 2;
	pointer-events: none
}

#roofSolution .r1 .inner .clip .svgIcon .cls-w {
	fill: #000
}

#roofSolution .r1 .inner .clip .svgIcon .cls-b {
	fill: #fff;
	transform: scale(var(--scale));
	transform-origin: 50% 35% !important
}

#roofSolution .r1 .inner .group {
	width: 100%;
	height: 100%;
	z-index: 5;
	padding-top: 8vw;
	position: relative
}

#roofSolution .r1 .inner .group h3 {
	width: 40%;
	position: absolute;
	bottom: 0;
	left: 0
}

#roofSolution .r1 .inner .group h3 b {
	color: #ec0012;
	display: block
}

#roofSolution .r1 .inner .group p {
	width: 50%;
	margin-left: 50%
}

#roofSolution .r1 .inner .group .box {
	width: 100%;
	position: absolute;
	bottom: -3vw;
	left: 0
}

#roofSolution .r1 .inner .group .box h4 {
	padding: .3rem;
	line-height: 1
}

#roofSolution .r1 .inner .group .box .items {
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 0 .2rem;
	display: grid
}

#roofSolution .r1 .inner .group .box .items>li {
	grid-template-rows: .6rem 3fr;
	gap: .1rem 0;
	display: grid
}

#roofSolution .r1 .inner .group .box .items>li:first-of-type {
	grid-template-rows: repeat(4, .6rem)
}

#roofSolution .r1 .inner .group .box .items>li:first-of-type .chunk {
	text-align: left
}

#roofSolution .r1 .inner .group .box .items>li:last-of-type .chunk {
	-webkit-backdrop-filter: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #232626;
	background: linear-gradient(90deg, #ec0012, #ec0012)
}

#roofSolution .r1 .inner .group .box .items>li:last-of-type .part {
	-webkit-backdrop-filter: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background-color: #000
}

#roofSolution .r1 .inner .group .box .items>li:last-of-type .part>small {
	color: #ec0012
}

#roofSolution .r1 .inner .group .box .items>li .chunk {
	height: .6rem;
	text-align: center;
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(0, 0, 0, .2);
	border-radius: .12rem;
	padding: 0 .32rem;
	line-height: .6rem
}

#roofSolution .r1 .inner .group .box .items>li .part {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(0, 0, 0, .2);
	border-radius: .12rem;
	grid-template-rows: repeat(3, 1fr);
	gap: .1rem 0;
	display: grid
}

#roofSolution .r1 .inner .group .box .items>li .part>small {
	text-align: center
}

#roofSolution .r2 {
	background-color: #efefef;
	padding-top: 2.2rem;
	padding-bottom: 2rem
}

#roofSolution .r2 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 1.5rem
}

#roofSolution .r2 .inner .top .topic {
	width: 50%
}

#roofSolution .r2 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#roofSolution .r2 .inner .mid {
	position: relative
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	width: 90%;
	margin: 0 auto;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.2)
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		width: 2.2rem
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.25rem)
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
		height: .8rem
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
		opacity: 1
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
		height: .8rem;
		transform: translate(.4rem)rotate(45deg)
	}

	#roofSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon i {
		font-size: 12px
	}
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r2 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#roofSolution .r2 .inner .line {
	width: 100%;
	height: 1px;
	border-top: 1px dashed rgba(41, 46, 46, .3);
	margin: .5rem 0
}

#roofSolution .r2 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	overflow: hidden
}

#roofSolution .r2 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#roofSolution .r2 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#roofSolution .r2 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#roofSolution .r3 {
	padding-top: 1rem;
	padding-bottom: 1.2rem
}

#roofSolution .r3 .bg {
	overflow: hidden
}

#roofSolution .r3 .bg>.mask {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	z-index: 10;
	background-color: rgba(0, 0, 0, .5)
}

#roofSolution .r3 .inner .imgLogo {
	height: .64rem;
	margin: 0 auto;
	display: block
}

#roofSolution .r3 .inner .title {
	padding-right: 50%;
	position: relative
}

#roofSolution .r3 .inner .title .layer-btn {
	margin: auto 0;
	position: absolute;
	top: .4rem;
	bottom: 0;
	right: 0
}

#roofSolution .r3 .inner>.note {
	-ms-flex-align: end;
	align-items: flex-end;
	margin-top: .4rem;
	margin-bottom: .2rem
}

#roofSolution .r3 .inner>.note .set {
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	display: -ms-flexbox;
	display: flex
}

#roofSolution .r3 .inner>.note .set .upIcon {
	width: .3rem;
	opacity: 0;
	transform-origin: 50% 100%;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	transform: scale(.6)
}

#roofSolution .r3 .inner>.note .set .upIcon path {
	fill: #ec0012
}

#roofSolution .r3 .inner>.note .set .upIcon.go {
	opacity: 1;
	transform: rotate(-25deg)translate(.1rem, -.1rem)scale(1)
}

#roofSolution .r3 .inner>.note .set em {
	line-height: 1
}

#roofSolution .r3 .inner>.note .set sub {
	vertical-align: baseline
}

#roofSolution .r3 .inner .group {
	grid-template-columns: repeat(2, 1fr);
	gap: 0 .4rem;
	margin-bottom: .3rem;
	display: grid
}

#roofSolution .r3 .inner .group .pic {
	height: 3.6rem;
	border-radius: .18rem;
	overflow: hidden
}

#roofSolution .r3 .inner .group .pic video {
	object-fit: cover
}

#roofSolution .r3 .inner .group .pic .MediaTs {
	width: 100%;
	height: 100%;
	display: block
}

#roofSolution .r4 {
	background-color: #efefef;
	padding-top: 1.6rem;
	padding-bottom: 1.7rem
}

#roofSolution .r4 .inner {
	margin-bottom: 1.5rem
}

#roofSolution .r4 .inner .mid {
	z-index: 4;
	position: relative
}

#roofSolution .r4 .inner .mid>p {
	width: 48%;
	padding-bottom: .8rem;
	line-height: 1.33
}

#roofSolution .r4 .inner .mid .imgBox {
	position: relative
}

#roofSolution .r4 .inner .mid .imgBox .img {
	height: 7.8rem;
	display: block
}

#roofSolution .r4 .inner .mid .imgBox .years {
	position: absolute;
	bottom: 27%;
	right: -8%
}

#roofSolution .r4 .inner .mid .imgBox .years>em {
	letter-spacing: -.2em;
	text-indent: -.92em;
	font-size: 4.6rem;
	line-height: .8;
	display: inline-block
}

#roofSolution .r4 .inner .mid .imgBox .years sub {
	vertical-align: baseline
}

#roofSolution .r4 .inner .btm {
	z-index: 2;
	margin-top: -1.2rem;
	position: relative
}

#roofSolution .r4 .inner .btm .note {
	margin-bottom: .6rem
}

#roofSolution .r4 .inner .btm .note .txt {
	padding-right: .2rem
}

#roofSolution .r4 .inner .btm .note .line {
	height: 1px;
	background-color: rgba(26, 26, 26, .3);
	-ms-flex: 1;
	flex: 1
}

#roofSolution .r4 .inner .btm .logoSw {
	width: 100%;
	grid-auto-flow: column;
	padding: .2rem 0;
	display: grid
}

#roofSolution .r4 .inner .btm .logoSw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#roofSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide {
	padding-right: 1rem
}

#roofSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo {
	height: .88rem
}

#roofSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo>img {
	max-height: .88rem;
	opacity: .2;
	display: block
}

#roofSolution .r4 .part .top {
	margin-bottom: .9rem
}

#roofSolution .r4 .part .mid {
	width: 100%
}

#roofSolution .r4 .part .mid .box {
	width: 100%;
	height: 6.8rem;
	background-color: #fff;
	border-radius: .3rem;
	margin-bottom: .6rem;
	overflow: hidden
}

#roofSolution .r4 .part .mid .box .left {
	width: 50%;
	height: 100%;
	z-index: 10;
	position: relative
}

#roofSolution .r4 .part .mid .box .left .pic {
	opacity: .6;
	background-position: 15%
}

#roofSolution .r4 .part .mid .box .left .layer-play {
	width: 1.2rem;
	height: 1.2rem;
	cursor: pointer;
	z-index: 5;
	background-color: rgba(28, 31, 31, .6);
	border-radius: 50%;
	-ms-flex-direction: column;
	flex-direction: column;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r4 .part .mid .box .left .layer-play p {
	margin-top: .1rem
}

#roofSolution .r4 .part .mid .box .left .layer-play:hover {
	background-color: #232626
}

#roofSolution .r4 .part .mid .box .right {
	width: 50%;
	height: 100%;
	z-index: 11;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 0 1rem 0 3%;
	position: relative
}

#roofSolution .r4 .part .mid .box .right>.mask {
	height: 100%;
	width: 100%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 26%);
	position: absolute;
	top: 0;
	left: -2rem
}

#roofSolution .r4 .part .mid .box .right>.sign {
	z-index: 5;
	height: .96rem;
	margin-bottom: .3rem;
	position: relative
}

#roofSolution .r4 .part .mid .box .right h3 {
	z-index: 5;
	position: relative
}

#roofSolution .r4 .part .mid .box .right p {
	z-index: 5;
	margin-bottom: .5rem;
	position: relative
}

#roofSolution .r4 .part .mid .box .right .items {
	z-index: 5;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

#roofSolution .r4 .part .mid .box .right .items>li {
	opacity: 0;
	transform-origin: 0;
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden;
	transform: translate(60%)
}

#roofSolution .r4 .part .mid .box .right .items>li>img {
	height: .52rem;
	margin: 0 auto .2rem;
	display: block
}

#roofSolution .r4 .part .mid .box .right .items>li.layer-icon {
	height: 100%;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-right: .05rem;
	padding: 0 .25rem 0 .3rem;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	overflow: hidden
}

#roofSolution .r4 .part .mid .box .right .items>li.layer-icon>i {
	line-height: .52rem
}

#roofSolution .r4 .part .mid .box .right .items>li.layer-icon .lines {
	width: 4.7rem;
	display: block;
	position: absolute;
	bottom: .5em;
	left: .05rem
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(1) {
	transition-delay: 50ms
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(2) {
	transition-delay: .1s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(3) {
	transition-delay: .15s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(4) {
	transition-delay: .2s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(5) {
	transition-delay: .25s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(6) {
	transition-delay: .3s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(7) {
	transition-delay: .35s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(8) {
	transition-delay: .4s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(9) {
	transition-delay: .45s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(10) {
	transition-delay: .5s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(11) {
	transition-delay: .55s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(12) {
	transition-delay: .6s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(13) {
	transition-delay: .65s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(14) {
	transition-delay: .7s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(15) {
	transition-delay: .75s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(16) {
	transition-delay: .8s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(17) {
	transition-delay: .85s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(18) {
	transition-delay: .9s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(19) {
	transition-delay: .95s
}

#roofSolution .r4 .part .mid .box .right .items>li:nth-child(20) {
	transition-delay: 1s
}

#roofSolution .r4 .part .mid .box .right .items.go>li {
	opacity: 1;
	transform: translate(0)
}

#roofSolution .r4 .part .mid .box:first-of-type .right {
	padding-bottom: 6%
}

#roofSolution .r5 {
	height: 100vh;
	overflow: hidden
}

#roofSolution .r5 .bg .pic:after {
	content: "";
	background-color: rgba(0, 0, 0, .3)
}

#roofSolution .r5 .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start
}

#roofSolution .r5 .inner h2 {
	line-height: 1.2
}

#roofSolution .r5 .inner .group {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: 1.15rem
}

#roofSolution .r5 .inner .group .layer-btn {
	margin-bottom: .5rem
}

#roofSolution .r5 .inner .group .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r5 .inner .group .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

#roofSolution .r5 .inner .group .layer-btn:hover .txt {
	transform: translate(-.15rem)
}

#roofSolution .r5 .inner .group .layer-btn:hover .iconfont {
	opacity: 1;
	transform: translate(.03rem)rotate(45deg)
}

#roofSolution .r5 .inner .group .items>li>em {
	margin-right: .1rem;
	font-size: .32rem
}

#roofSolution .r6 {
	background-color: #efefef;
	padding: 1.7rem 0
}

#roofSolution .r6 .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#roofSolution .r7 {
	padding: 1.2rem 0 1.5rem;
	overflow: hidden
}

#roofSolution .r7 .bg .pic:after {
	content: "";
	background-color: rgba(0, 0, 0, .5)
}

#roofSolution .r7 .inner h2 {
	line-height: 1
}

#roofSolution .r7 .inner .col {
	width: 50%;
	margin-top: 1.8rem;
	margin-left: 50%
}

#roofSolution .r7 .inner .col>img {
	height: .72rem;
	margin-bottom: .5rem;
	display: block
}

#roofSolution .r8 {
	background-color: #efefef;
	padding: 1.2rem 0;
	overflow: hidden
}

#roofSolution .r8 .bg .sign {
	width: 14rem;
	position: absolute;
	top: -2.2rem;
	right: -3.6rem
}

#roofSolution .r8 .inner {
	grid-template-columns: 4fr 6fr;
	gap: 0 .2rem;
	display: grid
}

#roofSolution .r8 .inner .left {
	background-color: rgba(0, 0, 0, .9);
	border-radius: .28rem;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: .7rem 0;
	overflow: hidden
}

#roofSolution .r8 .inner .left h2 {
	text-align: center;
	line-height: 1
}

#roofSolution .r8 .inner .left h2 .letter {
	color: #ec0012
}

#roofSolution .r8 .inner .left .clear {
	height: 4.75rem;
	width: 100%;
	position: relative
}

#roofSolution .r8 .inner .left .clear .people {
	height: 5.56rem;
	margin: 0 auto;
	position: absolute;
	top: -.1rem;
	left: 0;
	right: 0
}

#roofSolution .r8 .inner .left .people {
	height: 8rem;
	margin: -.2rem auto 0;
	display: block
}

#roofSolution .r8 .inner .right {
	-webkit-backdrop-filter: blur(.4rem);
	-webkit-backdrop-filter: blur(.4rem);
	backdrop-filter: blur(.4rem);
	background-color: rgba(255, 255, 255, .9);
	border-radius: .28rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .7rem 0;
	display: -ms-flexbox;
	display: flex
}

#roofSolution .r8 .inner .right h2 {
	text-align: center;
	margin-bottom: .48rem;
	line-height: 1
}

#roofSolution .r8 .inner .right .form {
	background-color: #fff;
	border-radius: .18rem;
	margin: 0 auto;
	display: block;
	position: relative
}

#roofSolution .r8 .inner .right .form .loadMk {
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(255, 255, 255, .8);
	border-radius: .18rem;
	transition: opacity .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#roofSolution .r8 .inner .right .form .loadMk .loader {
	width: 1rem
}

#roofSolution .r8 .inner .right .form .loadMk.active {
	opacity: 1
}

#roofSolution .r8 .inner .right .form .inRow {
	z-index: 5;
	grid-template-columns: 1fr;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 0 .1rem;
	margin-bottom: .1rem;
	display: grid;
	position: relative
}

#roofSolution .r8 .inner .right .form .inRow>.note {
	text-align: center;
	color: #1c1f1f;
	width: 100%
}

#roofSolution .r8 .inner .right .form .inRow>.note small {
	vertical-align: middle;
	line-height: 1
}

#roofSolution .r8 .inner .right .form .inRow.half {
	grid-template-columns: 3rem 3rem
}

#roofSolution .r8 .inner .right .form .inRow>.part {
	background-color: #efefef;
	border-radius: .1rem;
	position: relative
}

#roofSolution .r8 .inner .right .form .inRow>.part textarea {
	text-indent: 0;
	width: 100%;
	background-color: transparent;
	border: none;
	padding: .2rem;
	display: block
}

#roofSolution .r8 .inner .right .form .inRow>.part textarea::-ms-input-placeholder {
	color: rgba(28, 31, 31, .7)
}

#roofSolution .r8 .inner .right .form .inRow>.part textarea::placeholder {
	color: rgba(28, 31, 31, .7)
}

#roofSolution .r8 .inner .right .form .inRow>.part>sup {
	color: gray;
	z-index: 2;
	position: absolute;
	top: .18em;
	left: .1rem
}

#roofSolution .r8 .inner .right .form .inRow>.part>.inTxt {
	height: .5rem;
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	padding: 0 .2rem;
	display: block
}

#roofSolution .r8 .inner .right .form .inRow>.part>.inTxt::-ms-input-placeholder {
	color: rgba(28, 31, 31, .7)
}

#roofSolution .r8 .inner .right .form .inRow>.part>.inTxt::placeholder {
	color: rgba(28, 31, 31, .7)
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown {
	width: 100%;
	position: relative
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .input-text {
	height: .5rem;
	width: 100%;
	text-indent: 0;
	cursor: pointer;
	background-color: #efefef;
	border: none;
	border-radius: .1rem;
	padding: 0 .24rem 0 .2rem;
	position: relative
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .input-text input[type=text] {
	height: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .input-text .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #1c1f1f;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 5px;
	bottom: 0;
	right: .2rem
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .childDown {
	width: 100%;
	max-height: 2.2rem;
	background-color: #efefef;
	border-bottom-right-radius: .18rem;
	border-bottom-left-radius: .18rem;
	padding: .1rem .2rem;
	display: none;
	position: absolute;
	top: calc(100% - .1rem);
	left: 0;
	overflow: auto
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .childDown>li {
	width: 100%
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .childDown>li>a {
	width: 100%;
	line-height: .4rem;
	display: block
}

#roofSolution .r8 .inner .right .form .inRow>.part .inDown .childDown>li:hover>a {
	color: #ec0012
}

#roofSolution .r8 .inner .right .form .inRow:nth-of-type(4) {
	z-index: 6
}

#roofSolution .r8 .inner .right .form>.btm {
	width: 100%;
	margin-top: .3rem
}

#roofSolution .r8 .inner .right .form>.btm .layer-btn {
	padding: 0 .55rem
}

#roofSolution .r9 {
	background-color: #17181a;
	padding: 1.8rem 0
}

#roofSolution .r9 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .7rem
}

#roofSolution .r9 .inner .top .topic {
	width: 50%
}

#roofSolution .r9 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#roofSolution .r9 .inner .top>p small {
	color: #ec0012;
	vertical-align: sub;
	padding: 0 .2em;
	line-height: .5em
}

#roofSolution .r9 .inner .mid {
	grid-template-rows: repeat(2, 3.2rem);
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	display: grid
}

#roofSolution .r9 .inner .mid .part {
	border: 1px solid #4d4d4d;
	border-radius: .16rem;
	position: relative;
	overflow: hidden
}

#roofSolution .r9 .inner .mid .part video {
	object-fit: cover
}

#roofSolution .r9 .inner .mid .part .MediaTs {
	width: 100%;
	height: 100%;
	display: block
}

#roofSolution .r10 {
	background-color: #17181a;
	padding: 1.4rem 0 1.8rem
}

#roofSolution .r10 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .7rem
}

#roofSolution .r10 .inner .top .topic {
	width: 50%
}

#roofSolution .r10 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#roofSolution .r10 .inner .top>p small {
	color: #ec0012;
	vertical-align: sub;
	padding: 0 .2em;
	line-height: .5em
}

#roofSolution .r10 .inner .mid .group {
	grid-template-columns: 58% 42%;
	padding-bottom: .4rem;
	display: grid
}

#roofSolution .r10 .inner .mid .group .left {
	position: relative
}

#roofSolution .r10 .inner .mid .group .left>.photo {
	width: 100%;
	height: 100%;
	opacity: 0;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	top: 0;
	left: 0
}

#roofSolution .r10 .inner .mid .group .left>.photo:nth-of-type(1) {
	opacity: 1;
	position: relative
}

#roofSolution .r10 .inner .mid .group .right {
	grid-template-rows: repeat(2, 2.1rem);
	-ms-flex-pack: center;
	justify-content: center;
	gap: .95rem 0;
	display: grid
}

#roofSolution .r10 .inner .mid .group .right .part {
	position: relative
}

#roofSolution .r10 .inner .mid .group .right .part .pic {
	width: 3rem;
	height: 2.1rem;
	border-radius: .18rem;
	display: block
}

#roofSolution .r10 .inner .mid .group .right .part .dot {
	width: 1.1rem;
	height: 1.1rem;
	background-color: #1a1a1a;
	border-radius: 50%;
	position: absolute;
	bottom: -.55rem;
	left: -.55rem
}

#roofSolution .r10 .inner .mid .group .right .part .dot .img {
	width: 80%;
	height: 80%;
	object-fit: contain;
	opacity: 0;
	display: block
}

#roofSolution .r10 .inner .mid .group .right .part .dot .img:nth-of-type(1) {
	opacity: 1
}

#roofSolution .r10 .inner .mid .group .right .part .dot .mk {
	height: 100%;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 0
}

#roofSolution .r10 .inner .mid .tab {
	grid-template-columns: repeat(var(--col), 1fr);
	background-color: #222426;
	border-radius: .2rem;
	grid-template-rows: 1.2rem;
	margin: .8rem 0;
	display: grid;
	position: relative
}

#roofSolution .r10 .inner .mid .tab .lists {
	z-index: 10;
	position: relative
}

#roofSolution .r10 .inner .mid .tab .lists>a {
	width: calc(100% - .3rem);
	height: calc(100% - .3rem);
	text-align: center;
	font-size: inherit;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

#roofSolution .r10 .inner .mid .tab .lists.on>a {
	color: #1a1a1a
}

#roofSolution .r10 .inner .mid .tab .mask {
	width: calc(100%/var(--col));
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

#roofSolution .r10 .inner .mid .tab .mask:after {
	content: "";
	width: calc(100% - .3rem);
	height: calc(100% - .3rem);
	background-color: #fff;
	border-radius: .2rem
}

#roofSolution .r10 .inner .mid .btm {
	height: 2.4rem;
	background-color: #222426;
	border-radius: .18rem;
	overflow: hidden
}

#roofSolution .r10 .inner .mid .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#roofSolution .r10 .inner .mid .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#roofSolution .r10 .inner .mid .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(34, 36, 38, 0) 0%, #222426 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#roofSolution .r11 {
	background-color: #efefef;
	padding-top: 1.6rem
}

#roofSolution .r11 .top {
	margin-bottom: .5rem
}

#roofSolution .r11 .inner {
	width: 100%;
	height: 480vh;
	margin-top: -1rem;
	position: relative
}

#roofSolution .r11 .inner .group .fn_r11 {
	width: 100%;
	z-index: 10;
	height: 100%;
	display: block;
	position: relative
}

#roofSolution .r11 .inner .group .fn_r11 .cvBox {
	height: calc(100% - 1rem);
	z-index: 6;
	top: 1rem
}

#roofSolution .r11 .inner .group .fn_r11 .cvBox .proCv {
	width: 100%;
	height: 100%;
	display: block;
	position: relative
}

#roofSolution .r11 .inner .group .part {
	z-index: 12;
	-ms-flex-align: start;
	align-items: flex-start
}

#roofSolution .r11 .inner .group .part:nth-child(2) {
	z-index: 3
}

#roofSolution .r11 .inner .group .part:last-of-type {
	-ms-flex-align: center;
	align-items: center
}

#roofSolution .r11 .inner .group .part:last-of-type .msg {
	padding-top: 0
}

#roofSolution .r11 .inner .group .part .msg {
	width: 50%;
	margin-left: 50%;
	padding-top: 2.2rem
}

#roofSolution .r11 .inner .group .part .msg .f-320 {
	letter-spacing: -.03em;
	text-indent: -.05em;
	font-size: 3.2rem;
	line-height: .8;
	display: block
}

#roofSolution .r11 .inner .group .part .msg h2 {
	margin-bottom: .12rem;
	line-height: 1;
	display: block
}

#roofSolution .r11 .inner .group .part .msg p {
	display: block
}

#roofSolution .r11 .inner .group .part .msg p b {
	font-weight: 100;
	line-height: 1
}

#roofSolution .r11 .inner .group .part .img {
	width: 9.5rem;
	height: 5.2rem;
	object-fit: contain;
	z-index: 13;
	margin: auto 0;
	position: absolute;
	top: 2rem;
	bottom: 0;
	right: 40%
}

#roofDetail {
	background-color: #ededed
}

#roofDetail .banner {
	height: 70vh;
	overflow: hidden
}

#roofDetail .banner .bg .pic:after {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(237, 237, 237, 0) 50%, #ededed 100%);
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
}

#epc .banner .bg .pic:after {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(237, 237, 237, 0) 50%, #ededed 100%);
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
}

#roofDetail .banner .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-top: 2.6rem
}

#roofDetail .banner .inner .top {
	width: 100%;
	margin-bottom: 0.4rem
}

#roofDetail .banner .inner .top h1 {
	line-height: 1.1;
	font-weight: 700;
}

#roofDetail .banner .inner .top small {
	display: block
}

#roofDetail .banner .inner .group {
	width: 100%
}

#roofDetail .banner .inner .group p {
	width: 9.2rem
}

#roofDetail .r1 {
	padding: 0.6rem 0
}

#roofDetail .r1 .inner .mid {
	width: 100%
}

#roofDetail .r1 .inner .mid .tabItem {
	width: 100%;
	grid-template-columns: repeat(var(3), 1fr);
	gap: .2rem;
	margin-bottom: .8rem;
	grid-template-columns: repeat(3, 1fr);
	/* grid-column-gap: 20px; */
	/* grid-row-gap: 20px; */
	display: grid
}

#roofDetail .r1 .inner .mid .tabItem .tab {
	height: 1rem;
	cursor: pointer;
	background-color: #1c1f1f;
	border-radius: .18rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#roofDetail .r1 .inner .mid .tabItem .tab .content {
	filter: grayscale();
	-webkit-filter: grayscale();
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	height: 100%;
	opacity: 1;
	grid-auto-flow: column;
	-ms-flex-line-pack: center;
	-ms-flex-pack: center;
	align-content: center;
	justify-content: center;
	gap: .2rem .5rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	display: grid
}

#roofDetail .r1 .inner .mid .tabItem .tab .content h3 {
	color: #fff !important;
}

#roofDetail .r1 .inner .mid .tabItem .tab .content h3 {
	flex-wrap: wrap;
	text-align: center;
}

#roofDetail .r1 .inner .mid .tabItem .tab .content h3 span {
	display: block;
	width: 100%;
	/* 	margin-top: 10px; */
}

#roofDetail .r1 .inner .mid .tabItem .tab .content .icon {
	max-width: 1.3rem;
	max-height: .7rem;
	object-fit: contain
}

#roofDetail .r1 .inner .mid .tabItem .tab .arrow {
	width: .4rem;
	opacity: 0;
	margin: 0 auto;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 98%;
	left: 0;
	right: 0
}

#roofDetail .r1 .inner .mid .tabItem .tab .arrow path {
	fill: #1c1f1f
}

#roofDetail .r1 .inner .mid .tabItem .tab:hover .content {
	opacity: 1;
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%)
}

#roofDetail .r1 .inner .mid .tabItem .tab.on {
	box-shadow: 0 3.125vw 5.20833vw rgba(0, 0, 0, .25)
}

#roofDetail .r1 .inner .mid .tabItem .tab.on .content {
	opacity: 1;
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%)
}

#roofDetail .r1 .inner .mid .tabItem .tab.on .content h3 {
	color: #fff !important;
}

#roofDetail .r1 .inner .mid .tabItem .tab.on .arrow {
	opacity: 1
}

#roofDetail .r1 .inner .mid .tabItem .tab:after {
	content: ""
}

#roofDetail .r1 .inner .mid .group .part {
	display: none
}

#roofDetail .r1 .inner .mid .group .part .box {
	cursor: pointer;
	background-color: #f7f7f7;
	border-radius: .24rem;
	margin-bottom: .3rem;
	padding: .7em 50% .7rem .7rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	animation-name: fadeInUpSmall;
	animation-duration: .7s;
	animation-timing-function: cubic-bezier(.38, 0, 0, 1);
	animation-fill-mode: both;
	position: relative;
	overflow: hidden
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(1) {
	animation-delay: .1s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(2) {
	animation-delay: .2s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(3) {
	animation-delay: .3s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(4) {
	animation-delay: .4s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(5) {
	animation-delay: .5s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(6) {
	animation-delay: .6s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(7) {
	animation-delay: .7s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(8) {
	animation-delay: .8s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(9) {
	animation-delay: .9s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(10) {
	animation-delay: 1s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(11) {
	animation-delay: 1.1s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(12) {
	animation-delay: 1.2s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(13) {
	animation-delay: 1.3s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(14) {
	animation-delay: 1.4s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(15) {
	animation-delay: 1.5s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(16) {
	animation-delay: 1.6s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(17) {
	animation-delay: 1.7s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(18) {
	animation-delay: 1.8s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(19) {
	animation-delay: 1.9s
}

#roofDetail .r1 .inner .mid .group .part .box:nth-child(20) {
	animation-delay: 2s
}

#roofDetail .r1 .inner .mid .group .part .box h4 {
	font-size: .32rem;
	line-height: 1.2;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r1 .inner .mid .group .part .box .msg {
	margin-top: .3rem;
	padding-left: .2rem
}

#roofDetail .r1 .inner .mid .group .part .box .msg p {
	max-width: 5.7rem;
	text-align: justify;
	margin-bottom: 4px;
	line-height: 1.7
}

#roofDetail .r1 .inner .mid .group .part .box .msg p:last-of-type {
	margin-bottom: 0
}

#roofDetail .r1 .inner .mid .group .part .box .msg .items {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: .3rem
}

#roofDetail .r1 .inner .mid .group .part .box .msg .items>li {
	width: .8rem;
	padding: 0 .1rem
}

#roofDetail .r1 .inner .mid .group .part .box .msg .items>li .chunk {
	width: .6rem;
	height: .6rem;
	background-color: #ededed;
	border-radius: .1rem;
	margin: 0 auto
}

#roofDetail .r1 .inner .mid .group .part .box .msg .items>li .chunk>img {
	width: 100%
}

#roofDetail .r1 .inner .mid .group .part .box .msg .items>li p {
	text-align: center;
	margin-top: .1rem;
	line-height: 1.1
}

#roofDetail .r1 .inner .mid .group .part .box .imgBox {
	height: calc(100% + .3rem);
	width: 50%;
	position: absolute;
	top: -.1rem;
	right: -3%
}

#roofDetail .r1 .inner .mid .group .part .box .imgBox>img {
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	margin: 0 auto;
	display: block;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%)
}

#roofDetail .r1 .inner .mid .group .part .box .downIcon {
	width: .6rem;
	height: .6rem;
	background-color: #fff;
	border-radius: 50%;
	margin: auto 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .6rem;
	overflow: hidden
}

#roofDetail .r1 .inner .mid .group .part .box .downIcon .mask {
	z-index: 1;
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r1 .inner .mid .group .part .box.active .downIcon svg {
	filter: brightness(0)invert(1);
}

#roofDetail .r1 .inner .mid .group .part .box .downIcon .layer-icon {
	z-index: 10;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r1 .inner .mid .group .part .box.active {
	box-shadow: 0 .5rem 1rem -.1rem rgba(0, 0, 0, .2)
}

#roofDetail .r1 .inner .mid .group .part .box.active h4 {
	font-size: .36rem
}

#roofDetail .r1 .inner .mid .group .part .box.active .msg {
	display: block
}

#roofDetail .r1 .inner .mid .group .part .box.active .downIcon .mask {
	opacity: 1
}

#roofDetail .r1 .inner .mid .group .part .box.active .downIcon .layer-icon {
	transform: scaleY(-1)
}

#roofDetail .r1 .inner .mid .group .part .box.fill h4 {
	font-size: .36rem
}

#roofDetail .r1 .inner .mid .group .part .box.fill .msg {
	display: block
}

#roofDetail .r1 .inner .mid .group .part .box.fill .downIcon {
	display: none
}

#roofDetail .r1 .inner .mid .group .part.on {
	display: block
}

#roofDetail .r2 {
	padding-top: .3rem
}

#roofDetail .r2 .inner {
	border-bottom: 1px solid rgba(26, 26, 26, .3);
	padding-bottom: 1.3rem
}

#roofDetail .r2 .inner .mid {
	overflow: hidden
}

#roofDetail .r2 .inner .mid .r2Sw {
	width: 100%;
	padding-top: 1rem;
	transition-timing-function: cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide {
	width: 46vw
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo {
	height: 3rem;
	background-size: cover;
	border-radius: .2rem;
	margin-bottom: .2rem;
	transition: all .8s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo:after {
	content: "";
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0, 0, 0, .2);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	background: linear-gradient(30deg, #ec0012 5%, rgba(254, 219, 0, 0) 28%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	top: auto;
	bottom: -2px;
	left: -2px
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon {
	width: .5rem;
	opacity: 0;
	z-index: 5;
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .msg {
	padding: 0 .15rem;
	position: relative
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .msg h3 {
	line-height: 1.2
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .msg h4 {
	text-align: right;
	color: #232626;
	line-height: .8;
	position: absolute;
	top: 0;
	right: 0
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .msg h4 small {
	color: #232626;
	margin-left: -.2em
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo {
	box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo:after,
#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo>.mask {
	opacity: 1
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon {
	width: 1.2rem;
	opacity: 1
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .txt {
	opacity: 1;
	transform: translate(-.15rem)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .mask:after {
	opacity: 1
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .layer-icon {
	transform: translate(.2rem)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-prev {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 1.1rem
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-prev .layer-icon:hover {
	opacity: 1
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-next {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-button-next .layer-icon:hover {
	opacity: 1
}

#roofDetail .r3 {
	padding-top: 1rem;
	padding-bottom: 1.2rem
}

#roofDetail .r3 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#roofDetail .r3 .inner .top .topic {
	width: 50%
}

#roofDetail .r3 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#roofDetail .r3 .inner .mid {
	position: relative
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	height: 2.09rem;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.05)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		opacity: 0
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active h3,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active h3 {
		color: #ec0012
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active>img,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active>img {
		transform: scale(1.05)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon {
		width: 3.2rem;
		opacity: 1
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .txt,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.15rem)
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask {
		height: .8rem
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask:after,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask:after {
		opacity: 1
	}

	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .layer-icon,
	#roofDetail .r3 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .layer-icon {
		transform-origin: 46% 100%;
		line-height: .8rem;
		transform: translate(.7rem)rotate(45deg)
	}
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r3 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#roofDetail .r3 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	margin-top: .25rem;
	overflow: hidden
}

#roofDetail .r3 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#roofDetail .r3 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#roofDetail .r3 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#roofDetail .r4 {
	background: linear-gradient(90deg, #ec0012, #ec0012);
	padding: 1rem 0 .85rem
}

#roofDetail .r4 .inner .form {
	-ms-flex-align: start;
	align-items: flex-start
}

#roofDetail .r4 .inner .form h2 {
	line-height: 2rem
}

#roofDetail .r4 .inner .form .col {
	width: 9.3rem
}

#roofDetail .r4 .inner .form .col .inRow {
	width: 100%;
	grid-template-columns: repeat(var(--col), 1fr);
	gap: .1rem;
	margin-bottom: .1rem;
	display: grid;
	position: relative
}

#roofDetail .r4 .inner .form .col .inRow:nth-of-type(2) {
	z-index: 5
}

#roofDetail .r4 .inner .form .col .inRow .inTxt {
	height: .5rem;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#roofDetail .r4 .inner .form .col .inRow .inTxt>input[type=text] {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	padding: 0;
	line-height: .5rem;
	display: block
}

#roofDetail .r4 .inner .form .col .inRow .inTxt>input[type=text]::-ms-input-placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#roofDetail .r4 .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#roofDetail .r4 .inner .form .col .inRow .inTxt .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#roofDetail .r4 .inner .form .col .inRow .inDown {
	height: .5rem;
	position: relative
}

#roofDetail .r4 .inner .form .col .inRow .inDown .input-text {
	height: .5rem;
	width: 100%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .9);
	border: none;
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#roofDetail .r4 .inner .form .col .inRow .inDown .input-text .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#roofDetail .r4 .inner .form .col .inRow .inDown .input-text>input[type=text] {
	height: 100%;
	text-indent: 0;
	width: 100%;
	pointer-events: none;
	background-color: transparent;
	border: none
}

#roofDetail .r4 .inner .form .col .inRow .inDown .input-text .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #1c1f1f;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 5px;
	bottom: 0;
	right: .2rem
}

#roofDetail .r4 .inner .form .col .inRow .inDown .childDown {
	width: 100%;
	max-height: calc(1.04167vw + 2rem);
	background-color: rgba(255, 255, 255, .9);
	border-bottom-right-radius: .18rem;
	border-bottom-left-radius: .18rem;
	padding: .1rem .2rem;
	display: none;
	position: absolute;
	top: calc(100% - .09rem);
	left: 0;
	overflow: auto
}

#roofDetail .r4 .inner .form .col .inRow .inDown .childDown>li {
	width: 100%
}

#roofDetail .r4 .inner .form .col .inRow .inDown .childDown>li>a {
	width: 100%;
	line-height: .4rem;
	display: block
}

#roofDetail .r4 .inner .form .col .inRow .inArea {
	width: 100%;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: .2rem
}

#roofDetail .r4 .inner .form .col .inRow .inArea textarea {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	display: block
}

#roofDetail .r4 .inner .form .col .inRow .inArea textarea::-ms-input-placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#roofDetail .r4 .inner .form .col .inRow .inArea textarea::placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#roofDetail .r4 .inner .form .col .inRow .btm {
	padding: 5px 0 5px .2rem
}

#roofDetail .r4 .inner .form .col .inRow .btm .layer-btn {
	width: 2.4rem
}

#roofDetail .r4 .inner .form .col .inRow .btm .layer-btn .mk {
	background-color: #fff
}

#roofDetail .r4 .inner .form .col .inRow .btm .layer-btn:hover {
	box-shadow: 0 .1rem .2rem -4px rgba(35, 38, 38, .3)
}

#roofDetail .r5 {
	overflow: hidden
}

#roofDetail .r5 .inner {
	padding: 1.6rem 40% 1.6rem 0
}

#roofDetail .r5 .inner .top {
	margin-bottom: .5rem
}

#roofDetail .r5 .inner>.box {
	grid-template-columns: repeat(2, 1fr);
	gap: 0 .3rem;
	display: grid
}

#roofDetail .r5 .inner>.box>li .photo {
	height: 2rem;
	border: 2px solid #fff;
	border-radius: .12rem;
	position: relative;
	overflow: hidden
}

#roofDetail .r5 .inner>.box>li:first-of-type h3 {
	color: #ec0012
}

#roofDetail .r5 .inner>.box>li:first-of-type .photo {
	border-color: #ec0012
}

#roofDetail .r5 .inner .items {
	padding-top: .4rem
}

#roofDetail .r6 {
	width: 100%;
	height: 56.25vw;
	overflow: hidden
}

#roofDetail .r6 .inner {
	height: 100%;
	padding: 1.6rem 0;
	position: relative
}

#roofDetail .r6 .inner .top {
	margin-bottom: .5rem
}

#roofDetail .r6 .inner .mid {
	width: 45%;
	position: absolute;
	bottom: 1.08rem;
	right: 0
}

#roofDetail .r7 {
	width: 100%;
	height: 56.25vw;
	overflow: hidden
}

#roofDetail .r7 .inner {
	height: 100%;
	padding: 1.6rem 0;
	position: relative
}

#roofDetail .r7 .inner .top {
	margin-bottom: .5rem
}

#roofDetail .r7 .inner .mid {
	width: 50%
}

#solartrack .banner {
	height: 10.6rem;
	position: relative;
	overflow: hidden
}

#solartrack .banner .bg {
	height: 10.6rem
}

#solartrack .banner .bg .pic {
	background-position: bottom
}

#solartrack .banner .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-top: 1.8rem;
	padding-bottom: .7rem
}

#solartrack .banner .inner h1 {
	text-align: center;
	line-height: 1
}

#solartrack .banner .inner h1 .letter {
	display: block
}

#solartrack .banner .inner .group {
	width: 100%;
	grid-template-columns: repeat(3, auto);
	-ms-flex-pack: justify;
	justify-content: space-between;
	display: grid
}

#solartrack .banner .inner .group .part>img {
	height: .62rem;
	margin-right: .35rem
}

#solartrack .r1 {
	background-color: #efefef;
	padding-top: 1.1rem;
	padding-bottom: .9rem
}

#solartrack .r1 .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .75rem
}

#solartrack .r1 .top .topic {
	width: 50%
}

#solartrack .r1 .top>p {
	width: 50%;
	line-height: 1.33
}

#solartrack .r1 .mid {
	display: grid
}

@media screen and (orientation: landscape) {
	#solartrack .r1 .mid {
		grid-auto-flow: column;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0 .24rem
	}
}

#solartrack .r1 .mid .part {
	width: 4.8rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	padding-bottom: 1.8rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#solartrack .r1 .mid .part h2 {
	padding: .5rem .6rem .3rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r1 .mid .part .pic {
	height: 2rem;
	width: 100%;
	background-size: auto 78%
}

#solartrack .r1 .mid .part h3 {
	margin-top: .2rem;
	margin-bottom: .2rem;
	padding: 0 .6rem
}

#solartrack .r1 .mid .part p {
	padding: 0 .6rem
}

#solartrack .r1 .mid .part .line {
	border-bottom: 1px dashed rgba(0, 0, 0, .5);
	margin: .2rem .6rem;
	display: block
}

#solartrack .r1 .mid .part .items {
	padding: 0 .6rem
}

#solartrack .r1 .mid .part .items>li {
	color: rgba(60, 65, 65, .8);
	padding: 5px 0 5px 1em;
	line-height: 1.2;
	position: relative
}

#solartrack .r1 .mid .part .items>li em {
	line-height: .8em;
	position: absolute;
	top: 0;
	left: 0
}

#solartrack .r1 .mid .part .layer-btn {
	width: 1.8rem;
	height: .64rem;
	border: 4px solid rgba(35, 38, 38, .2);
	margin: 0 auto;
	transition: border-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: .45rem;
	left: 0;
	right: 0
}

#solartrack .r1 .mid .part .layer-btn .mk {
	opacity: 0
}

#solartrack .r1 .mid .part .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r1 .mid .part .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

@media screen and (orientation: landscape) {
	#solartrack .r1 .mid .part:hover {
		transform: translateY(-2%);
		box-shadow: 0 80px 120px rgba(0, 0, 0, .2)
	}

	#solartrack .r1 .mid .part:hover h2 {
		letter-spacing: -.03em;
		font-weight: 700
	}

	#solartrack .r1 .mid .part:hover .layer-btn {
		border-color: rgba(35, 38, 38, 0)
	}

	#solartrack .r1 .mid .part:hover .layer-btn .mk {
		opacity: 1
	}

	#solartrack .r1 .mid .part:hover .layer-btn .txt {
		transform: translate(-.15rem)
	}

	#solartrack .r1 .mid .part:hover .layer-btn .iconfont {
		opacity: 1;
		transform: translate(.03rem)rotate(45deg)
	}
}

@media screen and (orientation: portrait) {
	#solartrack .r1 .mid .part {
		transform: scale(.9)
	}

	#solartrack .r1 .mid .part.swiper-slide-active,
	#solartrack .r1 .mid .part.swiper-slide-duplicate-active {
		transform: scale(1)
	}
}

#solartrack .r2 {
	padding: 1.5rem 0
}

#solartrack .r2 .inner .left {
	width: 50%
}

#solartrack .r2 .inner .left .topic {
	margin-bottom: .4rem
}

#solartrack .r2 .inner .left>p {
	margin-bottom: 1.5rem;
	line-height: 1.3
}

#solartrack .r2 .inner .left .items>li {
	margin-bottom: .45rem
}

#solartrack .r2 .inner .left .items>li:last-of-type {
	margin-bottom: 0
}

#solartrack .r2 .inner .left .items>li p {
	line-height: 2
}

#solartrack .r3 {
	padding: 1.3rem 0 1rem
}

#solartrack .r3 .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .9rem
}

#solartrack .r3 .top .topic {
	width: 50%
}

#solartrack .r3 .top>p {
	width: 50%;
	line-height: 1.33
}

#solartrack .r3 .mid .part {
	grid-template-columns: repeat(var(--col), 1fr);
	gap: 0 .2rem;
	display: grid;
	overflow: hidden
}

#solartrack .r3 .mid .part:nth-of-type(1) {
	margin-bottom: .3rem
}

#solartrack .r3 .mid .part .col {
	background-color: #1c1e21;
	border-radius: .28rem;
	padding: .55rem .45rem
}

#solartrack .r3 .mid .part .col h3 {
	margin-bottom: .3rem
}

#solartrack .r3 .mid .part .col .box {
	height: 3.2rem;
	border: 1px dashed rgba(255, 255, 255, .6);
	border-radius: .16rem;
	position: relative
}

#solartrack .r3 .mid .part .col .box .pic {
	background-size: auto 64%
}

#solartrack .r3 .mid .part .col .box .pic video {
	width: 72%;
	mix-blend-mode: lighten;
	display: block
}

#solartrack .r3 .mid .part .col .box .pic .MediaTs {
	width: 72%;
	height: 88%;
	mix-blend-mode: lighten;
	display: block
}

#solartrack .r3 .mid .part .col .box h4 {
	text-align: center;
	white-space: nowrap;
	background-color: #1c1e21;
	padding: 0 .2rem;
	position: absolute;
	bottom: -.5em;
	left: 50%;
	transform: translate(-50%)
}

#solartrack .r3 .mid .part .chunk {
	background-color: #1c1e21;
	border-radius: .28rem;
	padding: .6rem .5rem .5rem .6rem
}

#solartrack .r3 .mid .part .chunk .pic {
	height: 1.2rem;
	background-position: 0 100%;
	background-size: auto 100%;
	margin-bottom: .4rem
}

#solartrack .r3 .mid .part .chunk h3 {
	margin-bottom: .2rem
}

#solartrack .r3 .btm {
	padding-top: .5rem
}

#solartrack .r3 .btm .layer-btn .txt {
	margin-right: .15rem;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r4 {
	padding: 1.6rem 0 1.2rem
}

#solartrack .r4 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .9rem;
	position: relative
}

#solartrack .r4 .inner .top .topic,
#solartrack .r4 .inner .top .half {
	width: 50%
}

#solartrack .r4 .inner .top .half p {
	line-height: 1.33
}

#solartrack .r4 .inner .top .half>.note {
	-ms-flex-align: end;
	align-items: flex-end;
	margin-top: .05rem
}

#solartrack .r4 .inner .top .half>.note .set {
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	margin: 0 5px;
	display: -ms-flexbox;
	display: flex
}

#solartrack .r4 .inner .top .half>.note .set .upIcon {
	width: .3rem;
	opacity: 0;
	transform-origin: 50% 100%;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	transform: scale(.6)
}

#solartrack .r4 .inner .top .half>.note .set .upIcon path {
	fill: #ec0012
}

#solartrack .r4 .inner .top .half>.note .set .upIcon.go {
	opacity: 1;
	transform: rotate(-25deg)translate(.1rem, -.1rem)scale(1)
}

#solartrack .r4 .inner .top .half>.note .set em {
	line-height: 1
}

#solartrack .r4 .inner .top .half>.note .set sub {
	vertical-align: baseline
}

#solartrack .r4 .inner .top>img {
	height: 2.6rem;
	opacity: .1;
	position: absolute;
	top: .75rem;
	left: 2.3rem
}

#solartrack .r4 .inner .mid {
	height: 5.25rem;
	width: 100%;
	position: relative
}

#solartrack .r4 .inner .mid>.img {
	width: 100%;
	display: block
}

#solartrack .r4 .inner .mid #proCv {
	width: 100%
}

#solartrack .r5 {
	background-color: #efefef;
	padding-top: 1.6rem;
	padding-bottom: .5rem
}

#solartrack .r5 .inner {
	margin-bottom: 1.5rem
}

#solartrack .r5 .inner .mid {
	z-index: 4;
	position: relative
}

#solartrack .r5 .inner .mid>p {
	width: 48%;
	padding-bottom: .8rem;
	line-height: 1.33
}

#solartrack .r5 .inner .mid>p b {
	font-size: inherit
}

#solartrack .r5 .inner .mid .imgBox {
	position: relative
}

#solartrack .r5 .inner .mid .imgBox .img {
	height: 7.8rem;
	display: block
}

#solartrack .r5 .inner .mid .imgBox .years {
	position: absolute;
	bottom: 27%;
	right: -8%
}

#solartrack .r5 .inner .mid .imgBox .years>em {
	letter-spacing: -.2em;
	text-indent: -.92em;
	font-size: 4.6rem;
	line-height: .8;
	display: inline-block
}

#solartrack .r5 .inner .mid .imgBox .years sub {
	vertical-align: baseline
}

#solartrack .r5 .inner .btm {
	z-index: 2;
	margin-top: -1.2rem;
	position: relative
}

#solartrack .r5 .inner .btm .note {
	margin-bottom: .6rem
}

#solartrack .r5 .inner .btm .note .txt {
	padding-right: .2rem
}

#solartrack .r5 .inner .btm .note .line {
	height: 1px;
	background-color: rgba(26, 26, 26, .3);
	-ms-flex: 1;
	flex: 1
}

#solartrack .r5 .inner .btm .logoSw {
	width: 100%;
	grid-auto-flow: column;
	padding: .2rem 0;
	display: grid
}

#solartrack .r5 .inner .btm .logoSw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#solartrack .r5 .inner .btm .logoSw .swiper-wrapper .swiper-slide {
	padding-right: 1rem
}

#solartrack .r5 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo {
	height: .88rem
}

#solartrack .r5 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo>img {
	max-height: .88rem;
	opacity: .2;
	display: block
}

#solartrack .r6 {
	background-color: #efefef;
	padding: .5rem 0 1.7rem
}

#solartrack .r6 .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#solartrack .r7 {
	padding-top: 1.7rem;
	padding-bottom: 1.6rem;
	overflow: hidden
}

#solartrack .r7 .bg .sign {
	width: 19rem;
	position: absolute;
	top: 3.2rem;
	right: -3rem
}

#solartrack .r7 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 1rem
}

#solartrack .r7 .inner .top .topic {
	width: 50%
}

#solartrack .r7 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#solartrack .r7 .inner .mid {
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(2, 1fr);
	gap: .4rem;
	display: grid
}

#solartrack .r7 .inner .mid .part {
	border-radius: .2rem;
	overflow: hidden;
	box-shadow: 0 .3rem 1rem -5px rgba(0, 0, 0, .15)
}

#solartrack .r7 .inner .mid .part .pic {
	height: 3rem
}

#solartrack .r7 .inner .mid .part .msg {
	-webkit-backdrop-filter: blur(.6rem);
	-webkit-backdrop-filter: blur(.6rem);
	backdrop-filter: blur(.6rem);
	background-color: rgba(255, 255, 255, .5);
	padding: .4rem .7rem;
	position: relative
}

#solartrack .r7 .inner .mid .part .msg .icon {
	height: .4rem;
	position: absolute;
	top: .4rem;
	right: .6rem
}

#solartrack .r7 .inner .mid .part .msg h3 {
	margin-bottom: .1rem
}

#solartrack .r7 .inner .mid .part .msg .items>li {
	padding: 5px 0 5px 1em;
	line-height: 1.2;
	position: relative
}

#solartrack .r7 .inner .mid .part .msg .items>li em {
	line-height: 1.2em;
	position: absolute;
	top: 0;
	left: 0
}

#solartrack .r8 {
	padding-top: 2rem;
	padding-bottom: 1.7rem;
	position: relative;
	overflow: hidden
}

#solartrack .r8>svg {
	opacity: 0;
	pointer-events: none;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0
}

#solartrack .r8 .inner {
	grid-template-columns: 46% 50%;
	-ms-flex-pack: justify;
	justify-content: space-between;
	display: grid
}

#solartrack .r8 .inner .left h2 {
	margin-bottom: .2rem
}

#solartrack .r8 .inner .right {
	position: relative
}

#solartrack .r8 .inner .right .midIcon {
	width: 1.35rem
}

#solartrack .r8 .inner .right .group {
	width: 100%;
	grid-template-rows: repeat(2, 2.9rem);
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	display: grid
}

#solartrack .r8 .inner .right .group .mask {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	z-index: 1;
	background-color: rgba(0, 0, 0, .3);
	border-radius: .5rem;
	overflow: hidden;
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x
}

#solartrack .r8 .inner .right .group .box {
	z-index: 3;
	padding: .4rem .35rem;
	position: relative
}

#solartrack .r8 .inner .right .group .box h3 {
	z-index: 10;
	margin-bottom: .1rem;
	line-height: 1.1;
	position: relative
}

#solartrack .r8 .inner .right .group .box p {
	z-index: 10;
	position: relative
}

#solartrack .r8 .inner .right .group .box:nth-of-type(3),
#solartrack .r8 .inner .right .group .box:nth-of-type(4) {
	padding-top: 30%
}

#solartrack .r9 {
	background-color: #ededed;
	padding-top: .9rem
}

#solartrack .r9 .inner {
	padding-bottom: 1.3rem
}

#solartrack .r9 .inner .mid {
	overflow: hidden
}

#solartrack .r9 .inner .mid .r9Sw {
	width: 100%;
	padding-top: 1rem;
	transition-timing-function: cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide {
	width: 46vw
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo {
	height: 3rem;
	background-size: cover;
	border-radius: .2rem;
	margin-bottom: .2rem;
	transition: all .8s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo:after {
	content: "";
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0, 0, 0, .2);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	background: linear-gradient(30deg, #ec0012 5%, rgba(254, 219, 0, 0) 28%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	top: auto;
	bottom: -2px;
	left: -2px
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon {
	width: .5rem;
	opacity: 0;
	z-index: 5;
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .photo .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .msg {
	padding: 0 .15rem;
	position: relative
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .msg h3 {
	line-height: 1.2
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .msg h4 {
	text-align: right;
	color: #232626;
	line-height: .8;
	position: absolute;
	top: 0;
	right: 0
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .msg h4 small {
	color: #232626;
	margin-left: -.2em
}

@media screen and (orientation: landscape) {
	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo {
		box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo:after,
	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo>.mask {
		opacity: 1
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon {
		width: 1.2rem;
		opacity: 1
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .mask:after {
		opacity: 1
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide.swiper-slide-active .photo {
		box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
	}

	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide.swiper-slide-active .photo:after,
	#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide.swiper-slide-active .photo>.mask {
		opacity: 1
	}
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-prev {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 1.1rem
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-prev .layer-icon:hover {
	opacity: 1
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-next {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#solartrack .r9 .inner .mid .r9Sw .swiper-button-next .layer-icon:hover {
	opacity: 1
}

#solartrack .r10 {
	background: linear-gradient(90deg, #ec0012, #ec0012);
	padding: 1rem 0 .85rem
}

#solartrack .r10 .inner .form {
	-ms-flex-align: start;
	align-items: flex-start
}

#solartrack .r10 .inner .form h2 {
	line-height: 2rem
}

#solartrack .r10 .inner .form .col {
	width: 9.3rem
}

#solartrack .r10 .inner .form .col .inRow {
	width: 100%;
	grid-template-columns: repeat(var(--col), 1fr);
	gap: .1rem;
	margin-bottom: .1rem;
	display: grid;
	position: relative
}

#solartrack .r10 .inner .form .col .inRow:nth-of-type(2) {
	z-index: 5
}

#solartrack .r10 .inner .form .col .inRow .inTxt {
	height: .5rem;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#solartrack .r10 .inner .form .col .inRow .inTxt>input[type=text] {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	padding: 0;
	line-height: .5rem;
	display: block
}

#solartrack .r10 .inner .form .col .inRow .inTxt>input[type=text]::-ms-input-placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#solartrack .r10 .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#solartrack .r10 .inner .form .col .inRow .inTxt .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#solartrack .r10 .inner .form .col .inRow .inDown {
	height: .5rem;
	position: relative
}

#solartrack .r10 .inner .form .col .inRow .inDown .input-text {
	height: .5rem;
	width: 100%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, .9);
	border: none;
	border-radius: .12rem;
	padding: 0 .2rem;
	position: relative
}

#solartrack .r10 .inner .form .col .inRow .inDown .input-text .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#solartrack .r10 .inner .form .col .inRow .inDown .input-text>input[type=text] {
	height: 100%;
	text-indent: 0;
	width: 100%;
	pointer-events: none;
	background-color: transparent;
	border: none
}

#solartrack .r10 .inner .form .col .inRow .inDown .input-text .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #1c1f1f;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 5px;
	bottom: 0;
	right: .2rem
}

#solartrack .r10 .inner .form .col .inRow .inDown .childDown {
	width: 100%;
	max-height: calc(1.04167vw + 2rem);
	background-color: rgba(255, 255, 255, .9);
	border-bottom-right-radius: .18rem;
	border-bottom-left-radius: .18rem;
	padding: .1rem .2rem;
	display: none;
	position: absolute;
	top: calc(100% - .09rem);
	left: 0;
	overflow: auto
}

#solartrack .r10 .inner .form .col .inRow .inDown .childDown>li {
	width: 100%
}

#solartrack .r10 .inner .form .col .inRow .inDown .childDown>li>a {
	width: 100%;
	line-height: .4rem;
	display: block
}

#solartrack .r10 .inner .form .col .inRow .inArea {
	width: 100%;
	background-color: rgba(255, 255, 255, .9);
	border-radius: .12rem;
	padding: .2rem
}

#solartrack .r10 .inner .form .col .inRow .inArea textarea {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	display: block
}

#solartrack .r10 .inner .form .col .inRow .inArea textarea::-ms-input-placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#solartrack .r10 .inner .form .col .inRow .inArea textarea::placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#solartrack .r10 .inner .form .col .inRow .btm {
	padding: 5px 0 5px .2rem
}

#solartrack .r10 .inner .form .col .inRow .btm .layer-btn {
	width: 2.4rem
}

#solartrack .r10 .inner .form .col .inRow .btm .layer-btn .mk {
	background-color: #fff
}

#solartrack .r10 .inner .form .col .inRow .btm .layer-btn:hover {
	box-shadow: 0 .1rem .2rem -4px rgba(35, 38, 38, .3)
}

#news .banner {
	padding-bottom: 0.6rem
}

#news .banner>.bg {
	background-color: #fff;
	position: absolute;
	height: 5.6rem !important;
	overflow: hidden !important
}

#news .banner>.bg .img {
	width: 100%;
	display: block
}

#news .banner>.bg .mask {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 100%);
	position: absolute;
	top: 0;
	left: 0
}

#news .banner .inner {
	padding-top: 4.5rem;
	padding-bottom: .8rem
}

#news .banner .inner h1 {
	margin-bottom: .5rem;
	line-height: 1.2;
	font-weight: bold;
	font-size: .6rem;
}

#news .banner .inner .top {
	z-index: 12;
	margin-bottom: .6rem;
	position: relative
}

#news .banner .inner .top .tabBox .tab {
	min-width: 1.8rem;
	text-align: center;
	border: 1px solid rgba(41, 46, 46, .3);
	border-radius: 2rem;
	margin-right: .2rem;
	padding: .2rem .3rem;
	position: relative;
	overflow: hidden
}

#news .banner .inner .top .tabBox .tab:after {
	content: "";
	width: 120%;
	height: 100%;
	background-color: #1c1f1f;
	border-radius: 1rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), background-color .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: -10%;
	transform: translate(-100%)
}

#news .banner .inner .top .tabBox .tab>span {
	z-index: 10;
	line-height: 1;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative
}

#news .banner .inner .top .tabBox .tab.on {
	background-color: rgba(41, 46, 46, .3);
	transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#news .banner .inner .top .tabBox .tab.on:after {
	transform: translate(0, 0)
}

#news .banner .inner .top .tabBox .tab.on>span {
	color: #fff
}

@media screen and (orientation: landscape) {
	#news .banner .inner .top .tabBox .tab:hover {
		background-color: rgba(41, 46, 46, .3);
		transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
	}

	#news .banner .inner .top .tabBox .tab:hover:after {
		transform: translate(0, 0)
	}

	#news .banner .inner .top .tabBox .tab:hover>span {
		color: #fff
	}
}

#news .banner .inner .top .yearBox {
	position: relative
}

#news .banner .inner .top .yearBox .yearDown {
	cursor: pointer;
	padding-right: .38rem;
	position: relative
}

#news .banner .inner .top .yearBox .yearDown .arrow {
	width: 0;
	height: 0;
	border: .08rem solid transparent;
	border-top-color: #232626;
	top: .04rem;
	right: 0
}

#news .banner .inner .top .yearBox .child {
	width: 100%;
	opacity: 0;
	pointer-events: none;
	background-color: #292e2e;
	border-radius: .1rem;
	padding: .2rem 0;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 100%;
	right: 0;
	transform: translateY(10%);
	box-shadow: 0 .2rem .6rem -5px rgba(35, 38, 38, .3)
}

#news .banner .inner .top .yearBox .child>a {
	width: 100%;
	text-align: center;
	color: #fff;
	line-height: .4rem;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#news .banner .inner .top .yearBox .child>a.on,
#news .banner .inner .top .yearBox .child>a:hover {
	color: #ec0012
}

#news .banner .inner .top .yearBox:hover .child {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, 0)
}

#news .banner .inner .mid {
	background-color: #fff;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem .3rem;
	display: grid
}

#news .banner .inner .mid .box {
	cursor: pointer;
	background-color: #f5f5f5;
	border-radius: .12rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#news .banner .inner .mid .box .msg {
	z-index: 10;
	padding-bottom: .2rem;
	position: relative
}

#news .banner .inner .mid .box .msg .til {
	z-index: 10;
	padding: .3rem .4rem;
	position: relative
}

#news .banner .inner .mid .box .msg .til small {
	margin-bottom: .3rem;
	display: block
}

#news .banner .inner .mid .box .msg .note {
	width: 100%;
	background-color: #f5f5f5;
	padding: 1rem .4rem .1rem;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0
}

#news .banner .inner .mid .box .msg .note .btnIcon {
	width: 1.2rem;
	opacity: 1;
	height: .5rem;
	background-color: rgba(28, 31, 31, .1);
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#news .banner .inner .mid .box .msg .note .btnIcon .mask {
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#news .banner .inner .mid .box .msg .note .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#news .banner .inner .mid .box .msg .note .btnIcon .txt {
	text-align: center;
	z-index: 9;
	margin-right: .15rem;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1)
}

#news .banner .inner .mid .box .msg .note .btnIcon .layer-icon {
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#news .banner .inner .mid .box .photo {
	height: 3rem;
	width: 100%;
	position: relative;
	overflow: hidden
}

#news .banner .inner .mid .box .photo .pic {
	width: 100%;
	height: 100%;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0
}

@media screen and (orientation: landscape) {
	#news .banner .inner .mid .box:hover {
		box-shadow: 0 .7rem .8rem -5px rgba(35, 38, 38, .3)
	}

	#news .banner .inner .mid .box:hover .photo .pic {
		height: 100%
	}
}

#news .banner .btm {
	position: relative;
	margin-bottom: 60px;
}

#news .banner .btm .pager {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .15em;
	padding-right: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#news .banner .btm .pager>a {
	color: rgba(35, 38, 38, .5);
	width: .4rem;
	text-align: center;
	line-height: 1;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#news .banner .btm .pager>a.on {
	color: #232626
}

#news .banner .btm .line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #292e2e
}

#news .banner .btm .set {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding-left: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#news .banner .btm .set .layer-icon {
	width: .9rem;
	height: .9rem;
	background-color: #f2f2f2;
	border-radius: 50%;
	margin-left: .2rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#news .banner .btm .set .layer-icon.disable>i {
	color: rgba(0, 0, 0, .3)
}

#newDetail .r1 {
	background-color: #f7f7f7;
	padding-top: 1.5rem;
	padding-bottom: 0.5rem
}

.cpxqkd-one {
	display: flex;
	justify-content: space-between;
}

.cpxqkd-onea {
	width: 38%;
	padding-left: 0.7rem;
}

.cpxqkd-oneb {
	width: 50%;
}

.cpxqkd-onea .layer-btn.bc {
	width: 179px !important;
	height: 0.5rem;
	margin-top: 0.6rem;
}

.cpxqkd-onea .msg {
	margin-top: 30px;
}

#newDetail .r1 .inner {
	max-width: 15rem;
	width: 78%;
	background-color: #fff;
	border-radius: .24rem;
	margin: 0 auto;
	padding-top: 0.7rem
}

#newDetail .r1 .inner .left {
	width: 22%;
	padding: 0 .3rem;
	position: absolute;
	top: 70px;
	left: 0
}

#newDetail .r1 .inner .left .lab {
	height: .4rem;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	margin-bottom: .3rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#newDetail .r1 .inner .left .lab .img {
	/* 	height: .4rem;
	display: block;
	position: absolute;
	top: 0;
	left: 0 */
}

.cpxqkd-oneb {
	text-align: center;
}

#newDetail .r1 .inner .left .lab>span {
	padding-left: .10rem;
	display: block
}

#newDetail .r1 .inner .left .note {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: flex
}

#newDetail .r1 .inner .left .note>li {
	color: rgba(0, 0, 0, .8);
	background-color: #f5f5f5;
	border-radius: 1rem;
	margin-bottom: .1rem;
	padding: .1rem .2rem
}

#newDetail .r1 .inner .left .return {
	width: .8rem;
	cursor: pointer;
	margin-top: 1.3rem;
	margin-left: 0.2rem
}

#newDetail .r1 .inner .left .return .arrow {
	width: .8rem;
	height: .8rem;
	background-color: #f7f7f7;
	border-radius: 50%;
	margin: 0 auto;
	position: relative;
	overflow: hidden
}

#newDetail .r1 .inner .mid .set .col .arrow {
	text-align: center;
}

#newDetail .r1 .inner .left .return .arrow:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#newDetail .r1 .inner .left .return:hover .arrow i svg {
	filter: brightness(0)invert(1);
}

#newDetail .r1 .inner .left .return .arrow i {
	z-index: 5;
	position: relative
}

#newDetail .r1 .inner .left .return h4 {
	width: 100%;
	text-align: center;
	padding: .1rem 0
}

#newDetail .r1 .inner .left .return:hover .arrow:after {
	opacity: 1
}

#newDetail .r1 .inner .mid {
	max-width: 10rem;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 1.2rem
}

#newDetail .r1 .inner .mid .topic {
	padding-bottom: .6rem
}

#newDetail .r1 .inner .mid .topic h1 {
	margin-bottom: .4rem;
	line-height: 1.1;
	font-weight: bold;
}

#newDetail .r1 .inner .mid .topic p {
	padding-bottom: 10px;
	position: relative
}

#newDetail .r1 .inner .mid .topic p img {
	padding-right: 10px;
}

#newDetail .r1 .inner .mid .topic p>small {
	z-index: 10;
	color: rgba(35, 38, 38, .6);
	background-color: #fff;
	padding-right: .2rem;
	display: block;
	position: relative
}

#newDetail .r1 .inner .mid .topic p .line {
	height: 1px;
	width: 100%;
	border-bottom: 1px dashed rgba(41, 46, 46, .6);
	margin: auto 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0
}

#newDetail .r1 .inner .mid .detail * {
	font-family: SourceHanSansCN-Regular;
	line-height: 1.6
}

#newDetail .r1 .inner .mid .detail img {
	/* width: 100%; */
	margin: .3rem auto;
	display: block;
	height: auto !important
}

#newDetail .r1 .inner .mid .line {
	width: 100%;
	height: .4rem;
	text-align: center;
	margin: .6rem 0;
	position: relative
}

#newDetail .r1 .inner .mid .line:after {
	content: "";
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed rgba(41, 46, 46, .6);
	left: 0
}

#newDetail .r1 .inner .mid .line>span {
	/* color: rgba(35, 38, 38, .6); */
	z-index: 10;
	text-transform: uppercase;
	background-color: #fff;
	padding: 0 .2rem;
	position: relative;
	font-weight: 600;
}

#newDetail .r1 .inner .mid .set {
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 .2rem;
	display: grid
}

#newDetail .r1 .inner .mid .set .col {
	height: 1.0rem;
	cursor: pointer;
	background-color: #f7f7f7;
	border-radius: .18rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1), box-shadow .5s cubic-bezier(.38, 0, 0, 1)
}

#newDetail .r1 .inner .mid .set .col .arrow {
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	margin: 0 .3rem;
	position: relative;
	overflow: hidden
}

#newDetail .r1 .inner .mid .set .col .arrow:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r1 .inner .mid .group .part .box .msg .layer-btn {
	width: 179px !important;
	height: 0.5rem;
	margin-top: 30px;
}

#newDetail .r1 .inner .mid .set .col:hover .arrow svg {
	filter: brightness(0)invert(1);
}

#newDetail .r1 .inner .mid .set .col .arrow i {
	z-index: 5;
	position: relative
}

#newDetail .r1 .inner .mid .set .col .msg {
	width: calc(100% - 1.2rem)
}

#newDetail .r1 .inner .mid .set .col .msg P {
	color: rgba(35, 38, 38, .6);
	line-height: 1.4;
}

#newDetail .r1 .inner .mid .set .col.prevEl {
	padding-right: .3rem
}

#newDetail .r1 .inner .mid .set .col.nextEl {
	padding-left: .5rem
}

@media screen and (orientation: landscape) {
	#newDetail .r1 .inner .mid .set .col:hover {
		background-color: #fff;
		box-shadow: 0 30px 70px rgba(35, 38, 38, .15)
	}

	#newDetail .r1 .inner .mid .set .col:hover .arrow:after {
		opacity: 1
	}
}

#newDetail .r1 .inner .mid .moreBox {
	grid-template-columns: repeat(2, 1fr);
	gap: 0 .4rem;
	display: grid
}

#newDetail .r1 .inner .mid .moreBox .box {
	background-color: #f7f7f7;
	border-radius: .15rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1), box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#newDetail .r1 .inner .mid .moreBox .box .msg {
	padding: .4rem
}

#newDetail .r1 .inner .mid .moreBox .box .msg p {
	margin-bottom: .1rem
}

#newDetail .r1 .inner .mid .moreBox .box .photo .pic {
	width: 100%;
	padding-bottom: 40%
}

@media screen and (orientation: landscape) {
	#newDetail .r1 .inner .mid .moreBox .box:hover {
		background-color: #fff;
		box-shadow: 0 30px 70px rgba(35, 38, 38, .15)
	}
}

#newDetail .r2 {
	background-color: #f7f7f7;
	padding-top: 3rem;
	padding-bottom: 1rem
}

#newDetail .r2 .inner {
	max-width: 15rem;
	width: 78%;
	background-color: #fff;
	border-radius: .24rem;
	margin: 0 auto;
	padding: 1rem
}

#newDetail .r2 .inner h1 {
	text-align: center;
	margin-bottom: .5rem
}

#newDetail .r2 .inner .detail {
	font-size: .72917vw;
	line-height: 1.5
}

#newDetail .r2 .inner .detail h2 {
	margin: .2rem 0
}

#blog .banner {
	padding-bottom: 0.6rem
}

#blog .banner>.bg {
	background-color: #fff;
	position: absolute;
	height: 5.6rem !important;
	overflow: hidden !important
}

#blog .banner>.bg .img {
	width: 100%;
	display: block
}

#blog .banner>.bg .mask {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 100%);
	position: absolute;
	top: 0;
	left: 0
}

#blog .banner .inner {
	padding-top: 4.5rem;
	padding-bottom: .8rem
}

#blog .banner .inner h1 {
	margin-bottom: .5rem;
	line-height: 1.2;
	font-weight: 700;
}

#blog .banner .inner .top {
	z-index: 12;
	margin-bottom: .6rem;
	position: relative
}

#blog .banner .inner .top .tabBox .tab {
	min-width: 1.8rem;
	text-align: center;
	border: 1px solid rgba(41, 46, 46, .3);
	border-radius: 2rem;
	margin-right: .2rem;
	padding: .2rem .3rem;
	position: relative;
	overflow: hidden
}

#blog .banner .inner .top .tabBox .tab:after {
	content: "";
	width: 120%;
	height: 100%;
	background-color: #292e2e;
	border-radius: 1rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), background-color .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: -10%;
	transform: translate(-100%)
}

#blog .banner .inner .top .tabBox .tab>span {
	z-index: 10;
	line-height: 1;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative
}

#blog .banner .inner .top .tabBox .tab:hover,
#blog .banner .inner .top .tabBox .tab.on {
	background-color: rgba(41, 46, 46, .3);
	transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#blog .banner .inner .top .tabBox .tab:hover:after,
#blog .banner .inner .top .tabBox .tab.on:after {
	transform: translate(0, 0)
}

#blog .banner .inner .top .tabBox .tab:hover>span,
#blog .banner .inner .top .tabBox .tab.on>span {
	color: #fff
}

#blog .banner .inner .top .searchBox {
	width: 4.8rem;
	height: .6rem;
	background-color: #f5f5f5;
	border-radius: 1rem;
	padding: 0 0 0 .25rem
}

#blog .banner .inner .top .searchBox input {
	height: 100%;
	width: calc(100% - 1rem);
	background-color: transparent;
	border: none
}

#blog .banner .inner .top .searchBox form {
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
}

#blog .banner .inner .top .searchBox .subSearch {
	width: .6rem;
	height: .6rem;
	background-color: #1c1f1f;
	border-radius: 50%
}

#blog .banner .inner .mid {
	background-color: #fff;
	grid-template-columns: repeat(3, 1fr);
	gap: .3rem;
	display: grid
}

#blog .banner .inner .mid .box {
	cursor: pointer;
	background-color: #f5f5f5;
	border-radius: .12rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

#blog .banner .inner .mid .box>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: linear-gradient(30deg, #ec0012 2%, rgba(254, 219, 0, 0) 22%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: auto;
	bottom: -2px;
	left: -2px
}

#blog .banner .inner .mid .box .msg {
	z-index: 10;
	padding-bottom: .4rem;
	position: relative
}

#blog .banner .inner .mid .box .msg .til {
	z-index: 10;
	padding: .3rem .4rem .5rem;
	position: relative
}

#blog .banner .inner .mid .box .msg .til small {
	margin-bottom: .3rem;
	display: block
}

#blog .banner .inner .mid .box .msg .items {
	z-index: 10;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: .6rem .4rem 0;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#blog .banner .inner .mid .box .msg .items>.list {
	color: rgba(0, 0, 0, .7);
	opacity: 0;
	background-color: rgba(0, 0, 0, .05);
	border-radius: 1rem;
	margin-bottom: .1rem;
	padding: 6px .12rem;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(.2rem)
}

#blog .banner .inner .mid .box .msg .items>.list:last-of-type {
	margin-bottom: 0
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(1) {
	transition-delay: 50ms
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(2) {
	transition-delay: .1s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(3) {
	transition-delay: .15s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(4) {
	transition-delay: .2s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(5) {
	transition-delay: .25s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(6) {
	transition-delay: .3s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(7) {
	transition-delay: .35s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(8) {
	transition-delay: .4s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(9) {
	transition-delay: .45s
}

#blog .banner .inner .mid .box .msg .items>.list:nth-child(10) {
	transition-delay: .5s
}

#blog .banner .inner .mid .box .msg .items .note {
	height: 100%;
	width: 100%;
	-ms-flex-align: end;
	align-items: flex-end;
	padding: .1rem .4rem;
	transition: transform .7s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0
}

#blog .banner .inner .mid .box .msg .items .note .btnIcon {
	width: .5rem;
	opacity: 0;
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: calc(100% - .2rem);
	right: .4rem
}

#blog .banner .inner .mid .box .msg .items .note .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#blog .banner .inner .mid .box .msg .items .note .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#blog .banner .inner .mid .box .msg .items .note .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	color: #fff;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#blog .banner .inner .mid .box .msg .items .note .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	margin-left: 10px;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#blog .banner .inner .mid .box:hover {
		background-color: #fff;
		box-shadow: 0 .7rem .8rem -5px rgba(35, 38, 38, .3)
	}

	#blog .banner .inner .mid .box:hover>.mask {
		opacity: 1
	}

	#blog .banner .inner .mid .box:hover .msg .items>.list {
		opacity: 1;
		transform: translateY(0)
	}

	#blog .banner .inner .mid .box:hover .msg .items .note {
		transform: translateY(calc(-100% - .1rem))
	}

	#blog .banner .inner .mid .box:hover .msg .items .note .btnIcon {
		width: 1.2rem;
		opacity: 1
	}

	#blog .banner .inner .mid .box:hover .msg .items .note .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#blog .banner .inner .mid .box:hover .msg .items .note .btnIcon .mask:after {
		opacity: 1
	}

	#blog .banner .inner .mid .box:hover .msg .items .note .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#blog .banner .inner .mid .box {
		background-color: #fff;
		box-shadow: 0 .2rem .6rem -5px rgba(35, 38, 38, .3)
	}

	#blog .banner .inner .mid .box>.mask {
		opacity: 1
	}

	#blog .banner .inner .mid .box .msg .items>.list {
		opacity: 1;
		transform: translateY(0)
	}

	#blog .banner .inner .mid .box .msg .items .note {
		transform: translateY(calc(-100% - .1rem))
	}

	#blog .banner .inner .mid .box .msg .items .note .btnIcon {
		width: 1.2rem;
		opacity: 1;
		display: none
	}

	#blog .banner .inner .mid .box .msg .items .note .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#blog .banner .inner .mid .box .msg .items .note .btnIcon .mask:after {
		opacity: 1
	}

	#blog .banner .inner .mid .box .msg .items .note .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

#blog .banner .btm {
	position: relative
}

#blog .banner .btm .pager {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .15em;
	padding-right: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#blog .banner .btm .pager>a {
	color: rgba(35, 38, 38, .5);
	width: .4rem;
	text-align: center;
	line-height: 1;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#blog .banner .btm .pager>a.on {
	color: #232626
}

#blog .banner .btm .line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #292e2e
}

#blog .banner .btm .set {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding-left: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#blog .banner .btm .set .layer-icon {
	width: .9rem;
	height: .9rem;
	background-color: #f2f2f2;
	border-radius: 50%;
	margin-left: .2rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#blog .banner .btm .set .layer-icon.disable>i {
	color: rgba(0, 0, 0, .3)
}

#reference .banner {
	padding-bottom: 0.4rem
}

#reference .banner>.bg {
	background-color: #fff;
	position: absolute;
	height: 5.6rem !important;
	overflow: hidden !important
}

#reference .banner>.bg .img {
	width: 100%;
	display: block
}

#reference .banner>.bg .mask {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 100%);
	position: absolute;
	top: 0;
	left: 0
}

#reference .banner .inner {
	padding-top: 4.5rem;
	padding-bottom: .8rem
}

#reference .banner .inner h1 {
	margin-bottom: 0.6rem;
	line-height: 1.2;
	font-weight: bold;
	font-size: .6rem;
}

#reference .banner .inner .top {
	z-index: 12;
	grid-template-columns: 1fr 1fr;
	-ms-flex-align: start;
	align-items: start;
	gap: 0 2rem;
	margin-bottom: .6rem;
	display: grid;
	position: relative
}

#reference .banner .inner .top .part h3 {
	margin-bottom: .3rem
}

#reference .banner .inner .top .part .tab {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: flex
}

#reference .banner .inner .top .part .tab>a {
	white-space: nowrap;
	border: 1px solid rgba(35, 38, 38, .2);
	border-radius: 1rem;
	margin-bottom: .1rem;
	margin-right: .1rem;
	padding: .12rem .25rem;
	transition: background-color .6s cubic-bezier(.38, 0, 0, 1), border-color .6s cubic-bezier(.38, 0, 0, 1)
}

#reference .banner .inner .top .part .tab>a:hover,
#reference .banner .inner .top .part .tab>a.on {
	background-color: #ec0012;
	border-color: transparent
}

#reference .banner .inner .mid {
	background-color: #fff;
	grid-template-columns: repeat(3, 1fr);
	gap: .3rem;
	display: grid
}

#reference .banner .inner .mid .box .photo {
	height: 3rem;
	background-size: cover;
	border-radius: .2rem;
	margin-bottom: .2rem;
	transition: all .8s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

#reference .banner .inner .mid .box .photo:after {
	content: "";
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0, 0, 0, .2);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1)
}

#reference .banner .inner .mid .box .photo>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	background: linear-gradient(30deg, #ec0012 5%, rgba(254, 219, 0, 0) 28%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	top: auto;
	bottom: -2px;
	left: -2px
}

#reference .banner .inner .mid .box .photo .btnIcon {
	width: .5rem;
	opacity: 0;
	z-index: 5;
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#reference .banner .inner .mid .box .photo .btnIcon>.mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#reference .banner .inner .mid .box .photo .btnIcon>.mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#reference .banner .inner .mid .box .photo .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#reference .banner .inner .mid .box .photo .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#reference .banner .inner .mid .box .msg {
	padding: 0 .15rem;
	position: relative;
	text-align: center;
}

#reference .banner .inner .mid .box .msg h3 {
	line-height: 1.6
}

#reference .banner .inner .mid .box .msg h4 {
	text-align: right;
	color: #232626;
	line-height: .8;
	position: absolute;
	top: 0;
	right: 0
}

#reference .banner .inner .mid .box .msg h4 small {
	color: #232626;
	margin-left: -.2em
}

@media screen and (orientation: landscape) {
	#reference .banner .inner .mid .box:hover .photo {
		box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
	}

	#reference .banner .inner .mid .box:hover .photo:after,
	#reference .banner .inner .mid .box:hover .photo>.mask {
		opacity: 1
	}

	#reference .banner .inner .mid .box:hover .photo .btnIcon {
		width: 1.2rem;
		opacity: 1
	}

	#reference .banner .inner .mid .box:hover .photo .btnIcon .txt {
		opacity: 1;
		color: #fff;
		transform: translate(-.15rem)
	}

	#reference .banner .inner .mid .box:hover .photo .btnIcon .mask:after {
		opacity: 1
	}

	#reference .banner .inner .mid .box:hover .photo .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

#reference .banner .btm {
	position: relative;
	margin-bottom: 60px;
}

#reference .banner .btm .pager {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .15em;
	padding-right: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#reference .banner .btm .pager>a {
	color: rgba(35, 38, 38, .5);
	width: .4rem;
	text-align: center;
	line-height: 1;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#reference .banner .btm .pager>a.on {
	color: #232626
}

#reference .banner .btm .line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #292e2e
}

#reference .banner .btm .set {
	z-index: 4;
	background-color: #fff;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding-left: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#reference .banner .btm .set .layer-icon {
	width: .9rem;
	height: .9rem;
	background-color: #f2f2f2;
	border-radius: 50%;
	margin-left: .2rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#reference .banner .btm .set .layer-icon.disable>i {
	color: rgba(0, 0, 0, .3)
}

#resource .banner {
	background-color: #efefef
}

#resource .banner>.bg {
	background-color: #fff;
	position: absolute;
	height: 6.2rem !important;
	overflow: hidden !important
}

#resource .banner>.bg .img {
	width: 100%;
	display: block
}

#resource .banner>.bg .mask {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0) 60%, #efefef 90%);
	position: absolute;
	top: 0;
	left: 0
}

#resource .banner .inner {
	padding-top: 5.2rem;
	padding-bottom: .8rem
}

#resource .banner .inner .til {
	-ms-flex-align: end;
	align-items: flex-end;
	margin-bottom: 1.5rem;
	position: relative
}

#resource .banner .inner .til h1 {
	padding-bottom: .1em;
	line-height: 1
}

#resource .banner .inner .til .searchBox {
	width: 7rem;
	height: .8rem;
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	background-color: rgba(0, 0, 0, .07);
	border-radius: 1rem;
	padding: 0 0 0 .25rem
}

#resource .banner .inner .til .searchBox>input {
	height: 100%;
	width: calc(100% - 1rem);
	color: #1c1f1f;
	background-color: transparent;
	border: none
}

#resource .banner .inner .til .searchBox .subSearch {
	width: .8rem;
	height: .8rem;
	background-color: #ec0012;
	border-radius: 50%
}

#resource .banner .inner .top {
	z-index: 12;
	grid-template-columns: 1fr 1fr;
	gap: 0 .2rem;
	display: grid;
	position: relative
}

#resource .banner .inner .top .part h2 {
	margin-bottom: .2rem
}

#resource .banner .inner .top .part .typeBox {
	height: 1.5rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	padding: 0 .5rem;
	position: relative
}

#resource .banner .inner .top .part .typeBox .inRow {
	height: 100%;
	width: 100%
}

#resource .banner .inner .top .part .typeBox .inRow .icon {
	height: .55rem;
	margin-right: .35rem
}

#resource .banner .inner .top .part .typeBox .items {
	width: 100%;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	background-color: #fff;
	border-bottom-right-radius: .2rem;
	border-bottom-left-radius: .2rem;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: calc(100% - .2rem);
	left: 0;
	overflow: hidden
}

#resource .banner .inner .top .part .typeBox .items .list {
	width: 100%;
	padding: .3rem .4rem;
	transition: background-color .3s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#resource .banner .inner .top .part .typeBox .items .list input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	opacity: 0;
	box-shadow: none;
	cursor: pointer;
	width: 100%;
	height: 100%;
	outline: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0
}

#resource .banner .inner .top .part .typeBox .items .list input[type=radio]:checked+.dot {
	border-color: #ec0012
}

#resource .banner .inner .top .part .typeBox .items .list input[type=radio]:checked+.dot:after {
	opacity: 1
}

#resource .banner .inner .top .part .typeBox .items .list .dot {
	width: .2rem;
	height: .2rem;
	pointer-events: none;
	background: #f9f9f9;
	border: 1px solid #bcbcbc;
	border-radius: 50%;
	position: relative
}

#resource .banner .inner .top .part .typeBox .items .list .dot:after {
	content: "";
	opacity: 0;
	width: .1rem;
	height: .1rem;
	background-color: #ec0012;
	border-radius: 50%;
	transition: opacity .3s cubic-bezier(.38, 0, 0, 1), transform .3s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#resource .banner .inner .top .part .typeBox .items .list h3 {
	text-indent: 0;
	padding-left: .3rem;
	line-height: .56rem
}

#resource .banner .inner .top .part .typeBox .items .list:hover {
	background-color: #f7f7f7
}

#resource .banner .inner .top .part .typeBox .arrow {
	height: 100%;
	position: absolute;
	top: 0;
	right: .5rem
}

@media screen and (orientation: landscape) {
	#resource .banner .inner .top .part .typeBox:hover .items {
		opacity: 1;
		pointer-events: auto
	}
}

@media screen and (orientation: portrait) {
	#resource .banner .inner .top .part .typeBox.active .items {
		opacity: 1;
		pointer-events: auto
	}
}

#resource .banner .inner .line {
	padding: .6rem 0 .8rem
}

#resource .banner .inner .line .img {
	width: 100%;
	display: block
}

#resource .banner .inner .mid .group {
	margin-bottom: .9rem
}

#resource .banner .inner .mid .group h2 {
	margin-bottom: .35rem
}

#resource .banner .inner .mid .group .box-1 {
	grid-template-columns: repeat(3, 1fr);
	gap: .48rem .24rem;
	display: grid
}

#resource .banner .inner .mid .group .box-1 .box {
	border-radius: .18rem;
	-ms-flex-direction: column;
	flex-direction: column;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex;
	overflow: hidden
}

#resource .banner .inner .mid .group .box-1 .box .photo {
	height: 1.8rem;
	width: 100%;
	position: relative
}

#resource .banner .inner .mid .group .box-1 .box .photo .pic {
	width: 100%;
	height: calc(100% + .5rem);
	position: absolute;
	top: 0;
	left: 0
}

#resource .banner .inner .mid .group .box-1 .box .msg {
	z-index: 5;
	height: 1.2rem;
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(255, 255, 255, .8);
	padding: 0 .3rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#resource .banner .inner .mid .group .box-1 .box .msg h3 {
	width: calc(100% - 2.2rem)
}

#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon {
	width: .6rem;
	cursor: pointer;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .mask {
	height: .6rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .6rem;
	transition: opacity .3s cubic-bezier(.38, 0, 0, 1), transform .3s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#resource .banner .inner .mid .group .box-1 .box .msg .btnIcon .layer-icon {
	height: .6rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#resource .banner .inner .mid .group .box-1 .box:hover {
		box-shadow: 0 80px 120px rgba(0, 0, 0, .2)
	}

	#resource .banner .inner .mid .group .box-1 .box:hover .msg {
		background-color: #fff
	}

	#resource .banner .inner .mid .group .box-1 .box:hover .msg .btnIcon {
		width: 1.9rem;
		opacity: 1
	}

	#resource .banner .inner .mid .group .box-1 .box:hover .msg .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#resource .banner .inner .mid .group .box-1 .box:hover .msg .btnIcon .mask:after {
		opacity: 1
	}

	#resource .banner .inner .mid .group .box-1 .box:hover .msg .btnIcon .layer-icon {
		transform: translate(.6rem)
	}
}

#resource .banner .inner .mid .group .box-2 {
	grid-template-columns: repeat(2, 1fr);
	gap: .25rem .4rem;
	display: grid
}

#resource .banner .inner .mid .group .box-2 .box {
	height: .8rem;
	cursor: pointer;
	background-color: #fff;
	border: 1px solid rgba(254, 219, 0, 0);
	border-radius: .1rem;
	padding: 0 .2rem 0 .3rem;
	transition: border-color .5s cubic-bezier(.38, 0, 0, 1), box-shadow .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-2 .box .msg .img {
	margin-right: .2rem
}

#resource .banner .inner .mid .group .box-2 .box .msg h3 {
	transition: font-weight .3s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-2 .box .arrow {
	width: .6rem;
	height: .6rem;
	background-color: #eee;
	border-radius: 50%;
	position: relative;
	overflow: hidden
}

#resource .banner .inner .mid .group .box-2 .box .arrow:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-2 .box .arrow i {
	z-index: 5;
	position: relative
}

@media screen and (orientation: landscape) {
	#resource .banner .inner .mid .group .box-2 .box:hover {
		border-color: #ec0012;
		box-shadow: 0 50px 80px rgba(0, 0, 0, .1)
	}

	#resource .banner .inner .mid .group .box-2 .box:hover .msg h3 {
		font-weight: 600
	}

	#resource .banner .inner .mid .group .box-2 .box:hover .arrow:after {
		opacity: 1
	}
}

#resource .banner .inner .mid .group .box-3 {
	grid-template-columns: repeat(2, 1fr);
	gap: .3rem;
	display: grid
}

#resource .banner .inner .mid .group .box-3 .box {
	cursor: pointer;
	border-radius: .2rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

#resource .banner .inner .mid .group .box-3 .box .pic {
	width: 100%;
	height: 0;
	padding-bottom: 55.6%;
	display: block
}

#resource .banner .inner .mid .group .box-3 .box .pic:before {
	content: "";
	opacity: 0;
	background: linear-gradient(transparent 60%, #000 100%);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-3 .box .pic:after {
	content: "";
	opacity: 1;
	background-color: rgba(0, 0, 0, .4);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-3 .box .msg {
	z-index: 5;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding: .4rem;
	display: -ms-flexbox;
	display: flex
}

#resource .banner .inner .mid .group .box-3 .box .msg h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-3 .box .msg .play {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(255, 255, 255, .7);
	border-radius: 50%;
	overflow: hidden
}

#resource .banner .inner .mid .group .box-3 .box .msg .play:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#resource .banner .inner .mid .group .box-3 .box .msg .play i {
	z-index: 5;
	position: relative
}

@media screen and (orientation: landscape) {
	#resource .banner .inner .mid .group .box-3 .box:hover {
		box-shadow: 0 90px 110px rgba(35, 38, 38, .15)
	}

	#resource .banner .inner .mid .group .box-3 .box:hover .pic:before {
		opacity: 1
	}

	#resource .banner .inner .mid .group .box-3 .box:hover .pic:after {
		opacity: 0
	}

	#resource .banner .inner .mid .group .box-3 .box:hover .msg .play:after {
		opacity: 1
	}

	#resource .banner .inner .mid .group .box-3 .box:hover .msg h3 {
		color: #ec0012
	}
}

#contact .banner {
	background-color: #efefef
}

#contact .banner>.bg {
	background-color: #fff;
	position: absolute;

	height: 6.2rem !important;
	overflow: hidden !important
}

#contact .banner>.bg .img {
	width: 100%;
	display: block
}

#contact .banner>.bg .mask {

	/* background: linear-gradient(rgba(255, 255, 255, 0) 60%, #efefef 95%); */
	position: absolute;
	top: 47%;
	left: 34%;

	z-index: 1;
}

#contact .banner>.bg .maskaa {
	width: 25px;
	background: #fff;
	height: 25px;
	border-radius: 50%;
	border: 8px solid #ec0012;
	z-index: 999;
}

#contact .banner>.bg .mask::before {
	position: absolute;
	left: -36px;
	right: 0;
	top: -36px;
	width: 100px;
	height: 100px;
	bottom: 0;
	content: '';
	background: rgba(236, 0, 18, 0.4);
	border-radius: 50%;
	animation: opens 2s 1s linear infinite both;
	z-index: -1;
}

#contact .banner>.bg .mask::after {
	position: absolute;
	left: -17px;
	right: 0;
	top: -17px;
	width: 60px;
	height: 60px;
	bottom: 0;
	content: '';
	background: rgba(236, 0, 18, 0.4);
	border-radius: 50%;
	animation: opens 2s 1s linear infinite both;
	z-index: -1;
}

@-webkit-keyframes opens {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(2);
		opacity: 0;
	}
}

@-webkit-keyframes openss {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		opacity: 0;
	}
}

#contact .banner .inner {
	padding-top: 5.2rem;
	padding-bottom: .2rem
}

#contact .banner .inner .til {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

#contact .banner .inner .til h1 {
	line-height: 1;
	font-weight: bold;
}

#contact .banner .inner .til .tabBox {
	width: 100%;
	margin-top: .8rem;
	align-items: inherit;
}

#contact .banner .inner .til .tabBox .tabList {
	margin-right: .5rem
}

#contact .banner .inner .til .tabBox .tabList {
	flex-wrap: wrap;
	justify-content: center;
	width: 33.3%;
	text-align: center;

}

#contact .banner .inner .til .tabBox .tabList .gray {
	display: block;
	width: 100%;
	font-weight: 600;
	line-height: 26px;
}

#contact .banner .inner .til .tabBox .tabList .iconfont {
	margin-bottom: .2rem
}

#contact .banner .inner .mid {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#contact .banner .inner .mid .left .box {
	grid-auto-flow: row;
	gap: .2rem 0;
	display: grid
}

#contact .banner .inner .mid .left .box .list {
	height: 1rem;
	width: 3.6rem;
	background-color: #fff;
	border-radius: .16rem
}

#contact .banner .inner .mid .left .box .list .mr {
	margin-right: .1rem
}

#contact .banner .inner .mid .left .box .list .gray {
	color: gray
}

#contact .banner .inner .mid .left .box .list .icon {
	width: 1.05rem;
	height: 100%;
	position: relative
}

#contact .banner .inner .mid .left .box .list .icon .dot {
	width: 6px;
	height: 6px;
	background-color: #000;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: .15rem;
	left: .15rem
}

#contact .banner .inner .mid .left .box .list .icon .dot.mc {
	background-color: #ec0012;
	border-color: #ec0012
}

#contact .banner .inner .mid .left .box .list .icon .dot.gray {
	background-color: #a5a5a5;
	border-color: #a5a5a5
}

#contact .banner .inner .mid .left .box .list .icon .dot.clear {
	background-color: transparent;
	border-color: #101010
}

#contact .banner .inner .mid .left .box .list .icon>img {
	width: 42%;
	height: 30%;
	object-fit: contain
}

#contact .banner .inner .mid .left .box .list>em {
	line-height: .9
}

#contact .banner .inner .mid .left .box .list>small {
	height: 3em;
	line-height: 5em;
	font-size: inherit;
	color: inherit;
	font-family: inherit
}

#contact .banner .inner .mid .right {
	height: 6.3rem;
	position: relative
}

#contact .banner .inner .mid .right .map {
	height: 6.3rem;
	position: absolute;
	top: 0;
	left: -1.5rem
}

#contact .r1 {
	background-color: #efefef;
	padding-top: .4rem;
	padding-bottom: 1.5rem
}

#contact .r1 .inner .top {
	height: .7rem;
	-ms-flex-align: end;
	align-items: flex-end
}

#contact .r1 .inner .top .tab {
	cursor: pointer;
	background-color: #d9d9d9;
	border-radius: .2rem .2rem 0 0;
	margin-left: -.2rem;
	padding: .16rem .8rem;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#contact .r1 .inner .top .tab:first-of-type {
	margin-left: 0
}

#contact .r1 .inner .top .tab.on {
	z-index: 10;
	background-color: #fff;
	padding-top: .3rem
}

#contact .r1 .inner .top .tab.on .dotFn:before {
	width: .12rem;
	opacity: 1;
	transform: skew(-10deg)
}

#contact .r1 .inner .group {
	width: 100%;
	background-color: #fff;
	border-radius: 0 .2rem .2rem;
	position: relative
}

#contact .r1 .inner .group .tabBox {
	opacity: 0;
	pointer-events: none;
	padding-bottom: .8rem;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	display: block
}

#contact .r1 .inner .group .tabBox.on {
	opacity: 1;
	pointer-events: auto !important
}

#contact .r1 .inner .group .tabBox h2 {
	padding: .6rem 0 .6rem;
	font-weight: 600;
}

#contact .r1 .inner .group .tabBox .form {
	width: 100%;
	padding: 0 1.8rem
}

#contact .r1 .inner .group .tabBox .form .inRow {
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	margin-bottom: .1rem;
	display: grid;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow:nth-of-type(3) {
	z-index: 12;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow:nth-of-type(4) {
	z-index: 11;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow:nth-of-type(5) {
	grid-template-columns: repeat(1, 1fr);
	gap: 0
}

#contact .r1 .inner .group .tabBox .form .inRow:nth-of-type(6) {
	gap: 0 .5rem
}

#contact .r1 .inner .group .tabBox .form .inRow h3 {
	margin-bottom: 5px;
	line-height: 1.3
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt {
	height: .6rem;
	border-radius: .08rem;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text] {
	width: 100%;
	height: 100%;
	text-indent: 0;
	background-color: #efefef;
	border: 1px solid transparent;
	border-radius: .08rem;
	padding: 0 .2rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	overflow: hidden
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text]::-ms-input-placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text]::placeholder {
	color: #1c1f1f;
	font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text]:focus {
	background-color: #fff;
	border-color: #ec0012
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt .must {
	color: #000;
	font-size: .2rem;
	position: absolute;
	top: .04rem;
	left: .12rem
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown {
	height: .6rem;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown.active {
	z-index: 100
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown.active .input-text>input[type=text] {
	background-color: #fff;
	border-color: #ec0012
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .input-text {
	height: .6rem;
	width: 100%;
	cursor: pointer;
	border: none;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .input-text>input[type=text] {
	height: 100%;
	text-indent: 0;
	width: 100%;
	pointer-events: none;
	text-align: center;
	background-color: #efefef;
	border: 1px solid transparent;
	border-radius: .12rem;
	padding: 0 .2rem;
	transition: all .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .input-text .arrow {
	width: 0;
	height: 0;
	transform-origin: 0 20%;
	z-index: 10;
	border: 5px solid transparent;
	border-top-color: #1c1f1f;
	margin: auto 0;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 5px;
	bottom: 0;
	right: .2rem
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .childDown {
	width: 100%;
	max-height: calc(1.04167vw + 2rem);
	background-color: #fff;
	border-bottom: 1px solid #ec0012;
	border-left: 1px solid #ec0012;
	border-right: 1px solid #ec0012;
	border-bottom-right-radius: .18rem;
	border-bottom-left-radius: .18rem;
	padding: .1rem .2rem;
	display: none;
	position: absolute;
	top: calc(100% - .08rem);
	left: 0;
	overflow: auto
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .childDown>li {
	width: 100%;
	line-height: 4px;
}

#contact .r1 .inner .group .tabBox .form .inRow .inDown .childDown>li>span {
	width: 100%;
	cursor: pointer;
	line-height: .4rem;
	display: block
}

#contact .r1 .inner .group .tabBox .form .inRow .inArea {
	width: 100%;
	background-color: #efefef;
	border-radius: .08rem;
	padding: .2rem
}

#contact .r1 .inner .group .tabBox .form .inRow .inArea textarea {
	width: 100%;
	text-indent: 0;
	background-color: transparent;
	border: none;
	display: block
}

#contact .r1 .inner .group .tabBox .form .inRow .inArea textarea::-ms-input-placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inArea textarea::placeholder {
	color: rgba(28, 31, 31, .5);
	font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
	padding-top: .4rem;
	display: -ms-flexbox;
	display: flex
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk input[type=checkbox] {
	--active: #ec0012;
	--active-inner: #fff;
	--background: #fff;
	--border: #bbc1e1;
	width: .16rem;
	height: .16rem;
	cursor: pointer;
	border: 1px solid var(--bc, var(--border));
	background: var(--b, var(--background));
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: .05rem;
	outline: none;
	margin: 0;
	position: relative
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk input[type=checkbox]:after {
	content: "";
	width: .05rem;
	height: .09rem;
	border: 2px solid var(--active-inner);
	border-top: 0;
	border-left: 0;
	display: block;
	position: absolute;
	top: .02rem;
	left: .05rem;
	transform: rotate(43deg)
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk input[type=checkbox]:checked {
	--b: var(--active);
	--bc: var(--active)
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk input[type=checkbox]+label {
	vertical-align: top;
	white-space: nowrap;
	cursor: pointer;
	margin-left: .1rem;
	display: inline-block
}

#contact .r1 .inner .group .tabBox .form .inRow .inChk p {
	width: 100%;
	padding-top: .12rem;
	padding-left: .26rem
}

#contact .r1 .inner .group .tabBox .form .btm {
	width: 100%;
	margin-top: .5rem
}

#contact .r1 .inner .group .tabBox .form .btm .layer-btn {
	padding: 0 .55rem
}

#contact .r1 .inner .group .tabBox .form .loadMk {
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(255, 255, 255, .8);
	border-radius: .18rem;
	transition: opacity .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden
}

#contact .r1 .inner .group .tabBox .form .loadMk .loader {
	width: 1rem
}

#contact .r1 .inner .group .tabBox .form .loadMk.active {
	opacity: 1
}

.solarInner {
	background-color: #fff
}

.solarInner .AT_r1 {
	padding-top: 1rem
}

.solarInner .AT_r1 .bg .img {
	height: 8.38rem;
	left: 55%
}

.solarInner .AT_r1 .inner {
	height: 8.38rem
}

.solarInner .AT_r1 .inner h3 {
	line-height: 1.3
}

.solarInner .AT_r2 {
	padding-top: 1.2rem;
	padding-bottom: 1.8rem
}

.solarInner .AT_r2 .inner .top {
	margin-bottom: 1.2rem
}

.solarInner .AT_r2 .inner .mid {
	width: 100%
}

.solarInner .AT_r2 .inner .mid .group {
	width: 100%;
	margin-bottom: .9rem
}

.solarInner .AT_r2 .inner .mid .group:last-of-type {
	margin-bottom: 0
}

.solarInner .AT_r2 .inner .mid .group .col {
	width: 50%;
	background-color: #1b1d21;
	border-radius: .28rem;
	padding: .6rem .5rem;
	overflow: hidden
}

.solarInner .AT_r2 .inner .mid .group .col .box {
	height: 3.2rem;
	width: 100%;
	border: 1px dashed rgba(255, 255, 255, .6);
	border-radius: .16rem;
	position: relative
}

.solarInner .AT_r2 .inner .mid .group .col .box .pic {
	background-size: auto 64%
}

.solarInner .AT_r2 .inner .mid .group .col .box .pic video {
	width: 72%;
	mix-blend-mode: lighten;
	margin: 0 auto;
	display: block
}

.solarInner .AT_r2 .inner .mid .group .col .box .pic .MediaTsApp {
	width: 72%;
	height: 88%;
	mix-blend-mode: lighten;
	display: block
}

.solarInner .AT_r2 .inner .mid .group .col .box h4 {
	text-align: center;
	white-space: nowrap;
	background-color: #1c1e21;
	padding: 0 .2rem;
	position: absolute;
	bottom: -.5em;
	left: 50%;
	transform: translate(-50%)
}

.solarInner .AT_r2 .inner .mid .group .msg {
	width: 50%;
	padding: 0 .4rem
}

.solarInner .AT_r2 .inner .mid .group:nth-of-type(2n+1) .msg {
	padding-right: 0
}

.solarInner .AT_r3 .bg .pic {
	opacity: 0;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	transform: scale(1.05)
}

.solarInner .AT_r3 .bg .pic .video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.solarInner .AT_r3 .bg .pic .MediaTs {
	width: 231.01vw;
	height: 130vw;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%)
}

.solarInner .AT_r3 .bg .pic.on {
	opacity: 1;
	transform: none
}

.solarInner .AT_r3 .inner {
	height: 100vh;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .8rem 0;
	display: -ms-flexbox;
	display: flex
}

.solarInner .AT_r3 .inner .top {
	width: 100%;
	-ms-flex-align: start;
	align-items: flex-start
}

.solarInner .AT_r3 .inner .top>p {
	width: 50%
}

.solarInner .AT_r3 .inner .top>p .dot {
	width: 7px;
	height: 7px;
	vertical-align: middle;
	background-color: #ec0012;
	border-radius: 50%;
	margin-right: .1rem;
	display: inline-block
}

.solarInner .AT_r3 .inner .mid {
	width: 100%;
	grid-auto-flow: column;
	-ms-flex-align: end;
	align-items: end;
	display: grid
}

@media screen and (orientation: landscape) {
	.solarInner .AT_r3 .inner .mid {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 .25rem
	}
}

.solarInner .AT_r3 .inner .mid .chunk {
	cursor: pointer;
	padding: 0 .2rem 0 .3rem;
	position: relative
}

.solarInner .AT_r3 .inner .mid .chunk .mask {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	transform-origin: 50% 100%;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	border-radius: .18rem;
	transition: height .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0
}

.solarInner .AT_r3 .inner .mid .chunk .pic {
	width: 1.2rem;
	height: .85rem;
	z-index: 10;
	background-size: contain;
	margin-right: .15rem;
	position: relative
}

.solarInner .AT_r3 .inner .mid .chunk h3 {
	z-index: 10;
	white-space: nowrap;
	height: 1.4rem;
	line-height: 1.2;
	transition: height .5s cubic-bezier(.38, 0, 0, 1), color .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	.solarInner .AT_r3 .inner .mid .chunk.on h3 {
		height: 1.8rem;
		color: #ec0012
	}
}

@media screen and (orientation: portrait) {
	.solarInner .AT_r3 .inner .mid .chunk.swiper-slide-active h3 {
		height: 1.8rem;
		color: #ec0012
	}
}

.solarInner .AT_r4 {
	padding-bottom: .6rem
}

.solarInner .AT_r4 .inner {
	padding-top: 1.4rem
}

.solarInner .AT_r4 .inner .group {
	position: relative
}

.solarInner .AT_r4 .inner .group>img {
	width: 100%;
	display: block
}

.solarInner .AT_r4 .inner .group .msg {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 5% 52% 0 1.3rem;
	display: -ms-flexbox;
	display: flex
}

.solarInner .AT_r4 .inner .group .msg h2 {
	margin-bottom: 1rem;
	line-height: 1.16
}

.solarInner .AT_r4 .inner .group .msg .items .list {
	margin-bottom: .4rem
}

.solarInner .AT_r4 .inner .group .msg .items .list>img {
	width: .6rem;
	margin-right: .4rem
}

.solarInner .AT_r4 .inner .group .msg .items .list:last-of-type {
	margin-bottom: 0
}

.solarInner .AT_r4 .inner .top {
	margin-bottom: .5rem
}

.solarInner .AT_r4 .inner .part {
	background-color: #111214;
	border: 2px dashed #ec0012;
	border-radius: .28rem;
	grid-template-columns: repeat(2, 1fr);
	display: grid;
	overflow: hidden
}

.solarInner .AT_r4 .inner .part .img {
	mix-blend-mode: screen;
	height: 7rem
}

.solarInner .AT_r4 .inner .part .box {
	padding: .7rem .7rem .7rem 0
}

.solarInner .AT_r4 .inner .part .box>.list {
	background-color: #1e2024;
	border-radius: .16rem;
	margin-bottom: .2rem;
	padding: .5rem
}

.solarInner .AT_r4 .inner .part .box>.list:last-of-type {
	margin-bottom: 0
}

.solarInner .AT_r4 .inner .part .box>.list h3 {
	margin-bottom: .2rem
}

.solarInner .AT_r4 .inner .part .box>.list .layer-item>.list {
	margin-bottom: .07rem
}

.solarInner .AT_r4 .inner .part .box>.list .layer-item>.list:last-of-type {
	margin-bottom: 0
}

.solarInner .AT_r5 {
	overflow: hidden
}

.solarInner .AT_r5 .bg .mask:before {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(#111214 0%, rgba(17, 18, 20, 0) 50%);
	position: absolute;
	top: 0;
	left: 0
}

.solarInner .AT_r5 .bg .mask:after {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(17, 18, 20, 0) 50%, #111214 100%);
	position: absolute;
	top: 0;
	left: 0
}

.solarInner .AT_r5 .inner {
	height: 100vh
}

.solarInner .AT_r5 .inner .box {
	width: 50%;
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-left: 50%;
	padding-right: .9rem;
	display: -ms-flexbox;
	display: flex
}

.solarInner .AT_r5 .inner .box h2 {
	margin-bottom: .6rem;
	line-height: 1.1
}

.solarInner .AT_r5 .inner .box h2 small {
	font-family: inherit;
	font-size: inherit;
	background: linear-gradient(170deg, #fff, #ec0012, #ec0012);
	-webkit-background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-background-clip: text;
	background-clip: text;
	display: block
}

.solarInner .AT_r5 .inner .box .layer-item>.list {
	margin-bottom: .3rem
}

.solarInner .AT_r5 .inner .box .layer-item>.list:last-of-type {
	margin-bottom: 0
}

.solarInner .AT_r6 {
	padding-bottom: 1.6rem
}

.solarInner .AT_r6 .inner .top {
	margin-bottom: .75rem
}

.solarInner .AT_r6 .inner .mid {
	grid-auto-flow: column;
	display: grid
}

@media screen and (orientation: landscape) {
	.solarInner .AT_r6 .inner .mid {
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0 .24rem
	}
}

.solarInner .AT_r6 .inner .mid .part {
	width: 4.8rem;
	background-color: #fff;
	border-radius: .2rem;
	padding-bottom: 1.8rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.solarInner .AT_r6 .inner .mid .part h2 {
	padding: .5rem .6rem .3rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .AT_r6 .inner .mid .part .pic {
	height: 2rem;
	width: 100%;
	background-size: auto 50%
}

.solarInner .AT_r6 .inner .mid .part h3 {
	margin-top: .2rem;
	margin-bottom: .2rem;
	padding: 0 .6rem
}

.solarInner .AT_r6 .inner .mid .part p {
	padding: 0 .6rem
}

.solarInner .AT_r6 .inner .mid .part .line {
	border-bottom: 1px dashed rgba(0, 0, 0, .5);
	margin: .2rem .6rem;
	display: block
}

.solarInner .AT_r6 .inner .mid .part .items {
	padding: 0 .6rem
}

.solarInner .AT_r6 .inner .mid .part .items>li {
	color: rgba(60, 65, 65, .8);
	padding: 5px 0 5px 1em;
	line-height: 1.2;
	position: relative
}

.solarInner .AT_r6 .inner .mid .part .items>li em {
	line-height: .8em;
	position: absolute;
	top: 0;
	left: 0
}

.solarInner .AT_r6 .inner .mid .part .layer-btn {
	width: 1.8rem;
	height: .64rem;
	border: 4px solid rgba(35, 38, 38, .2);
	margin: 0 auto;
	transition: border-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: .45rem;
	left: 0;
	right: 0
}

.solarInner .AT_r6 .inner .mid .part .layer-btn .mk {
	opacity: 0
}

.solarInner .AT_r6 .inner .mid .part .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .AT_r6 .inner .mid .part .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

@media screen and (orientation: landscape) {
	.solarInner .AT_r6 .inner .mid .part:hover {
		transform: translateY(-2%);
		box-shadow: 0 80px 120px rgba(0, 0, 0, .2)
	}

	.solarInner .AT_r6 .inner .mid .part:hover h2 {
		font-family: "Microsoft YaHei";
		font-weight: 700
	}

	.solarInner .AT_r6 .inner .mid .part:hover .layer-btn {
		border-color: rgba(35, 38, 38, 0)
	}

	.solarInner .AT_r6 .inner .mid .part:hover .layer-btn .mk {
		opacity: 1
	}

	.solarInner .AT_r6 .inner .mid .part:hover .layer-btn .txt {
		transform: translate(-.15rem)
	}

	.solarInner .AT_r6 .inner .mid .part:hover .layer-btn .iconfont {
		opacity: 1;
		transform: translate(.03rem)rotate(45deg)
	}
}

.solarInner .simple_r1 {
	width: 100%;
	height: 800vh;
	background-color: #010101
}

.solarInner .simple_r1 .inner {
	position: sticky !important
}

.solarInner .simple_r1 .inner .cv {
	width: 100%;
	padding-bottom: 56.25%
}

.solarInner .simple_r1 .inner .group {
	height: 100%;
	position: relative
}

.solarInner .simple_r1 .inner .group .cvPart {
	opacity: 0;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .7s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex;
	transform: translateY(10%)
}

.solarInner .simple_r1 .inner .group .cvPart h2 {
	background: linear-gradient(170deg, #ec0012, #ec0012);
	-webkit-background-clip: text;
	color: transparent;
	width: 50%;
	-webkit-background-clip: text;
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: .2rem;
	line-height: 1.2
}

.solarInner .simple_r1 .inner .group .cvPart p {
	width: 50%
}

.solarInner .simple_r1 .inner .group .cvPart:nth-of-type(2n) h2,
.solarInner .simple_r1 .inner .group .cvPart:nth-of-type(2n) p {
	width: 45%;
	margin-left: 55%
}

.solarInner .simple_r1 .inner .group .cvPart.on {
	opacity: 1;
	transform: none
}

.solarInner .simple_r2 {
	padding-bottom: 1.6rem
}

.solarInner .simple_r2 .bg .pro {
	width: 96%;
	opacity: .3;
	height: 45%;
	object-fit: contain;
	position: absolute;
	top: 8%;
	left: 2%
}

.solarInner .simple_r2 .inner {
	padding-top: 2.2rem
}

.solarInner .simple_r2 .inner h2 {
	margin-bottom: 1.4rem
}

.solarInner .simple_r2 .inner .group {
	grid-template-rows: 3rem;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 .2rem;
	margin-bottom: 1rem;
	display: grid
}

.solarInner .simple_r2 .inner .group .box {
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	overflow: hidden
}

.solarInner .simple_r2 .inner .group .box .mask {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	background-color: rgba(0, 0, 0, .05)
}

.solarInner .simple_r2 .inner .group .box>p {
	z-index: 4;
	text-align: center;
	position: relative
}

.solarInner .simple_r2 .inner .group .box>p .count {
	letter-spacing: -.08em
}

.solarInner .simple_r2 .inner .group .box>p small {
	vertical-align: baseline;
	margin-right: .2rem
}

.solarInner .simple_r2 .inner .group .box>p sup {
	font-size: inherit;
	vertical-align: baseline
}

.solarInner .simple_r2 .inner .group .box>p sub {
	vertical-align: baseline;
	margin-left: .05em;
	line-height: 1
}

.solarInner .simple_r2 .inner .group .box h3 {
	z-index: 3;
	margin-top: .3rem;
	position: relative
}

.solarInner .simple_r2 .inner .part {
	height: 3rem;
	background-color: #1f1f1f;
	border-radius: .2rem;
	position: relative;
	box-shadow: 0 3.07292vw 4.21875vw rgba(0, 0, 0, .15)
}

.solarInner .simple_r2 .inner .part .img {
	width: 45%;
	position: absolute;
	bottom: 0;
	left: 0
}

.solarInner .simple_r2 .inner .part .msg {
	width: 50%;
	-ms-flex-align: end;
	align-items: flex-end;
	margin-left: 50%;
	padding-right: .9rem
}

.solarInner .simple_r2 .inner .part .msg small {
	display: block
}

.solarInner .simple_r2 .inner .part .msg h4 {
	line-height: 1
}

.solarInner .simple_r2 .inner .btm {
	padding-top: .6rem
}

.solarInner .simple_r2 .inner .btm .img {
	max-width: 100%;
	margin: 0 auto;
	display: block
}

.solarInner .simple_r3 {
	background-color: #efefef;
	padding: 1.5rem 0
}

.solarInner .simple_r3 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

.solarInner .simple_r3 .inner .top .topic,
.solarInner .simple_r3 .inner .top .msg {
	width: 50%
}

.solarInner .simple_r3 .inner .top .msg p {
	margin-bottom: .3rem
}

.solarInner .simple_r3 .inner .mid .swiper {
	position: relative
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	width: 100%
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-wrapper .swiper-slide .pic {
	width: 100%;
	border-radius: .2rem;
	padding-bottom: 64%
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	white-space: nowrap;
	height: .6rem;
	padding-top: .3rem
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-prev {
	width: .9rem;
	height: .9rem;
	cursor: pointer;
	background-color: #666;
	border-radius: 50%;
	margin: auto 0;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	bottom: .6rem;
	left: -.45rem
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-prev .iconfont {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-prev:hover {
	background-color: #ec0012
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-prev:hover .iconfont {
	color: #232626
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-next {
	width: .9rem;
	height: .9rem;
	cursor: pointer;
	background-color: #666;
	border-radius: 50%;
	margin: auto 0;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	bottom: .6rem;
	right: -.45rem
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-next .iconfont {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-next:hover {
	background-color: #ec0012
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-next:hover .iconfont {
	color: #232626
}

.solarInner .simple_r4 {
	overflow: hidden
}

.solarInner .simple_r4 .bg {
	background-color: #000
}

.solarInner .simple_r4 .bg .pic {
	opacity: .6
}

.solarInner .simple_r4 .inner {
	height: 100vh;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-top: 1.6rem;
	display: -ms-flexbox;
	display: flex
}

.solarInner .simple_r4 .inner .group {
	width: 6rem;
	padding: 1.6rem 0 2rem
}

.solarInner .simple_r4 .inner .group>p {
	margin-bottom: .5rem
}

.solarInner .simple_r5 {
	width: 100%;
	overflow: hidden
}

.solarInner .simple_r5 .inner {
	height: 100vh;
	padding-top: 1.5rem
}

.solarInner .simple_r5 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

.solarInner .simple_r5 .inner .top .topic,
.solarInner .simple_r5 .inner .top .msg {
	width: 50%
}

.solarInner .simple_r5 .inner .top .msg p {
	margin-bottom: .3rem
}

.solarInner .simple_r6 {
	background-color: #efefef;
	padding: 1.7rem 0
}

.solarInner .simple_r6 .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

.solarInner .simple_r7 {
	padding-top: 1.5rem;
	padding-bottom: 1.3rem;
	overflow: hidden
}

.solarInner .simple_r7 .inner .topic {
	margin-bottom: 1.8rem
}

.solarInner .simple_r7 .inner .mid {
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	display: grid
}

.solarInner .simple_r7 .inner .mid .box {
	height: 1.3rem;
	background-color: #fff;
	border-radius: .16rem;
	padding-left: .5rem;
	padding-right: .4rem;
	overflow: hidden
}

.solarInner .simple_r7 .inner .mid .box .img {
	width: .5rem;
	height: .5rem;
	object-fit: contain
}

.solarInner .simple_r7 .inner .mid .box .msg {
	padding-left: .45rem
}

.solarInner .simple_r7 .inner .mid .box .msg h3 {
	margin-bottom: .06rem
}

.solarInner .simple_r8 {
	background-color: #efefef;
	padding-top: 1.4rem;
	padding-bottom: .7rem
}

.solarInner .simple_r8 .inner {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: .36rem;
	padding: 1.2rem 1rem 1rem;
	overflow: hidden
}

.solarInner .simple_r8 .inner h2 {
	width: 100%;
	margin-bottom: .2rem;
	line-height: 1.2
}

.solarInner .simple_r8 .inner h2 small {
	display: block
}

.solarInner .simple_r8 .inner .layer-item {
	margin-top: .5rem
}

.solarInner .simple_r8 .inner .layer-item .list {
	margin-bottom: .15rem
}

.solarInner .simple_r8 .inner .layer-item .list:last-of-type {
	margin-bottom: 0
}

.solarInner .simple_r8 .inner .layer-item p {
	color: #fff
}

.solarInner .simple_r8 .inner .btm {
	padding-top: .6rem
}

.solarInner .simple_r8 .inner .btm .layer-btn {
	width: 1.6rem
}

.solarInner .simple_r8 .inner .btm .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .simple_r8 .inner .btm .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

.solarInner .simple_r8 .inner .btm .layer-btn:hover .txt {
	transform: translate(-.15rem)
}

.solarInner .simple_r8 .inner .btm .layer-btn:hover .iconfont {
	opacity: 1;
	transform: translate(.03rem)rotate(45deg)
}

.solarInner .simple_r9 {
	background-color: #efefef;
	padding-top: .7rem
}

.solarInner .simple_r9 .inner {
	padding: .6rem 0
}

.solarInner .simple_r9 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

.solarInner .simple_r9 .inner .top .topic,
.solarInner .simple_r9 .inner .top .msg {
	width: 50%
}

.solarInner .simple_r9 .inner .top .msg p {
	margin-bottom: .3rem
}

.solarInner .simple_r9 .inner .mid {
	grid-template-columns: repeat(2, 1fr);
	gap: .38rem;
	display: grid
}

.solarInner .simple_r9 .inner .mid .box {
	height: 5rem;
	border-radius: .2rem;
	overflow: hidden
}

.solarInner .simple_r9 .inner .mid .box .pic {
	width: 100%;
	height: 100%;
	display: block
}

.solarInner .rowReference {
	background-color: #efefef;
	padding-top: .7rem
}

.solarInner .rowReference .inner {
	padding-bottom: 1.3rem
}

.solarInner .rowReference .inner .mid {
	overflow: hidden
}

.solarInner .rowReference .inner .mid .referenceSw {
	width: 100%;
	padding-top: 1rem;
	transition-timing-function: cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide {
	width: 46vw
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo {
	height: 3rem;
	background-size: cover;
	border-radius: .2rem;
	margin-bottom: .2rem;
	transition: all .8s cubic-bezier(.38, 0, 0, 1);
	position: relative;
	overflow: hidden
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo:after {
	content: "";
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0, 0, 0, .2);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	background: linear-gradient(30deg, #ec0012 5%, rgba(254, 219, 0, 0) 28%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	top: auto;
	bottom: -2px;
	left: -2px
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon {
	width: .5rem;
	opacity: 0;
	z-index: 5;
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon>.mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .photo .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .msg {
	padding: 0 .15rem;
	position: relative
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .msg h3 {
	line-height: 1.2
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .msg h4 {
	text-align: right;
	color: #232626;
	line-height: .8;
	position: absolute;
	top: 0;
	right: 0
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .msg h4 small {
	color: #232626;
	margin-left: -.2em
}

@media screen and (orientation: landscape) {
	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo {
		box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
	}

	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo:after,
	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo>.mask {
		opacity: 1
	}

	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo .btnIcon {
		width: 1.2rem;
		opacity: 1
	}

	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .mask:after {
		opacity: 1
	}

	.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide:hover .photo .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-prev {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 1.1rem
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-prev .layer-icon:hover {
	opacity: 1
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-next {
	height: .9rem;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	opacity: .4;
	background-color: #f5f5f5;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-button-next .layer-icon:hover {
	opacity: 1
}

.solarInner .rowMore {
	padding-top: 1.5rem;
	padding-bottom: .8rem
}

.solarInner .rowMore .inner .top {
	margin-bottom: .75rem
}

.solarInner .rowMore .inner .mid {
	grid-auto-flow: column;
	display: grid
}

@media screen and (orientation: landscape) {
	.solarInner .rowMore .inner .mid {
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0 .24rem
	}
}

.solarInner .rowMore .inner .mid .part {
	width: 4.8rem;
	background-color: #fff;
	border-radius: .2rem;
	padding-bottom: 1.8rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

.solarInner .rowMore .inner .mid .part h2 {
	padding: .5rem .6rem .3rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowMore .inner .mid .part .pic {
	height: 2rem;
	width: 100%;
	background-size: auto 50%
}

.solarInner .rowMore .inner .mid .part h3 {
	margin-top: .2rem;
	margin-bottom: .2rem;
	padding: 0 .6rem
}

.solarInner .rowMore .inner .mid .part p {
	padding: 0 .6rem
}

.solarInner .rowMore .inner .mid .part .line {
	border-bottom: 1px dashed rgba(0, 0, 0, .5);
	margin: .2rem .6rem .4rem;
	display: block
}

.solarInner .rowMore .inner .mid .part .items {
	padding: 0 .6rem
}

.solarInner .rowMore .inner .mid .part .items>li {
	color: rgba(60, 65, 65, .8);
	padding: .1rem 0 .1rem 1em;
	line-height: 1.2;
	position: relative
}

.solarInner .rowMore .inner .mid .part .items>li .icon {
	width: .26rem;
	height: .28rem;
	object-fit: contain;
	margin-right: .15rem
}

.solarInner .rowMore .inner .mid .part .items>li em {
	line-height: .8em;
	position: absolute;
	top: 0;
	left: 0
}

.solarInner .rowMore .inner .mid .part .layer-btn {
	width: 1.8rem;
	height: .64rem;
	border: 4px solid rgba(35, 38, 38, .2);
	margin: 0 auto;
	transition: border-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: .45rem;
	left: 0;
	right: 0
}

.solarInner .rowMore .inner .mid .part .layer-btn .mk {
	opacity: 0
}

.solarInner .rowMore .inner .mid .part .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

.solarInner .rowMore .inner .mid .part .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

.solarInner .rowMore .inner .mid .part .note {
	width: 100%;
	height: .64rem;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	bottom: .45rem;
	left: 0;
	right: 0
}

@media screen and (orientation: landscape) {
	.solarInner .rowMore .inner .mid .part:hover {
		z-index: 10
	}

	.solarInner .rowMore .inner .mid .part:hover h2 {
		font-family: "Microsoft YaHei";
		font-weight: 700
	}

	.solarInner .rowMore .inner .mid .part:hover .layer-btn {
		border-color: rgba(35, 38, 38, 0)
	}

	.solarInner .rowMore .inner .mid .part:hover .layer-btn .mk {
		opacity: 1
	}

	.solarInner .rowMore .inner .mid .part:hover .layer-btn .txt {
		transform: translate(-.15rem)
	}

	.solarInner .rowMore .inner .mid .part:hover .layer-btn .iconfont {
		opacity: 1;
		transform: translate(.03rem)rotate(45deg)
	}
}

@media screen and (orientation: portrait) {
	.solarInner .rowMore .inner .mid .part {
		transition: transform .7s ease-in-out;
		transform: scale(.9);
		box-shadow: 0 .1rem .3rem -5px rgba(0, 0, 0, .15)
	}

	.solarInner .rowMore .inner .mid .part.swiper-slide-active {
		z-index: 10;
		transform: scale(1)
	}
}

#at-3 {
	width: 100%;
	background-color: #111214;
	overflow: hidden
}

#at-3 .banner {
	overflow: hidden
}

#at-3 .banner .bg .mask:before {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(#111214 0%, rgba(17, 18, 20, 0) 50%);
	position: absolute;
	top: 0;
	left: 0
}

#at-3 .banner .bg .mask:after {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(17, 18, 20, 0) 50%, #111214 100%);
	position: absolute;
	top: 0;
	left: 0
}

#at-3 .banner .inner {
	height: 100vh;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding: 1.8rem 0 1.2rem;
	display: -ms-flexbox;
	display: flex
}

#at-3 .banner .inner h1 {
	background: linear-gradient(170deg, #fff, #ec0012, #ec0012);
	-webkit-background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-background-clip: text;
	background-clip: text;
	line-height: 1
}

#at-3 .banner .inner h2 {
	line-height: 1.5
}

#taiSimple .banner {
	overflow: hidden
}

#taiSimple .banner .inner {
	-ms-flex-pack: center;
	justify-content: center;
	padding-top: 3rem;
	padding-bottom: .4rem
}

#taiSimple .banner .inner .topic h1>small {
	font-size: inherit;
	text-transform: uppercase
}

#taiSimple .banner .inner .topic>small {
	text-align: center;
	display: block
}

#taiSimple .banner .inner .topic>p {
	text-align: center;
	margin-top: .3rem
}

#taiSimple .banner .inner .topic .pro {
	width: 100%;
	min-height: 5rem;
	margin-top: .2rem
}

#about .banner {
	overflow: hidden
}

#about .banner .inner {
	height: 8.6rem;
	width: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#about .banner .inner small {
	text-align: center
}

#about .banner .inner h1 {
	color: #fff;
	/* letter-spacing: -.04em; */
	line-height: .8;
	margin-top: 20px;
	font-weight: 600;
}

#about .r1 {
	background-color: #efefef;
	padding: 1.0rem 0 2.2rem;
	overflow: hidden
}

#about .r1 .bg .sign {
	height: 16rem;
	position: absolute;
	bottom: -5rem;
	left: -48%
}

#about .r4 .inner .mid .part .layer-btn .txt {
	color: #000;
}

#about .r4 .inner .mid .part:hover .layer-btn .txt {
	color: #fff;
}

#about .r1 .inner .group {
	grid-template-columns: repeat(1, 1fr);
	gap: .4rem;
	/* margin-bottom: .4rem; */
	display: grid
}

#about .r1 .inner .group .left {
	min-height: 4.2rem
}

#about .r1 .inner .group .left h2 {
	margin-bottom: .1rem;
	font-weight: 600;
}

#about .r1 .inner .group .left small {
	line-height: 1.1;
	display: block;
	font-weight: 700;
}

#about .r1 .inner .group .left p {
	margin: .6rem 0 0 0
}

#about .r1 .inner .group .right {
	position: relative
}

#about .r1 .inner .group .right .img {
	height: 4.7rem;
	margin: 0 auto;
	position: absolute;
	top: .2rem;
	left: 0;
	right: 0
}

#about .r1 .inner .part {
	grid-template-columns: repeat(2, 1fr);
	gap: .4rem;
	display: grid
}

#about .r1 .inner .part .left {
	grid-template-rows: repeat(2, 2.6rem);
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	display: grid
}

#about .r1 .inner .part .left .chunk {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(255, 255, 255, .8);
	border-radius: .16rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .4rem .4rem .4rem .5rem;
	display: -ms-flexbox;
	display: flex
}

#about .r1 .inner .part .left .chunk .img {
	max-height: .5rem;
	display: block
}

#about .r1 .inner .part .left .chunk .col {
	width: 100%;
	text-align: center
}

#about .r1 .inner .part .left .chunk .col h4 {
	text-align: center
}

#about .r1 .inner .part .left .chunk .col h4 em {
	color: inherit;
	letter-spacing: -.04em;
	margin-right: .1rem;
	font-family: inherit;
	line-height: 1;
	font-weight: 700;
}

#about .r1 .inner .part .left .chunk .col p {
	color: rgba(35, 38, 38, .5);
	text-align: center
}

#about .r1 .inner .part .right {
	position: relative
}

#about .r1 .inner .part .right .img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: .16rem;
	overflow: hidden
}

#about .r1 .inner .part .right .player {
	width: 1rem;
	height: 1rem;
	background-color: rgba(0, 0, 0, .5);
	border-radius: 50%;
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r1 .inner .part .right .player .iconfont {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}


#newsing .swiper .swiper-wrapper {
	background-color: #fff;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem .3rem;
	display: grid;
}

#newsing .swiper .swiper-wrapper .swiper-slide {
	height: 5.2rem;
	cursor: pointer;
	background-color: #f5f5f5;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#newsing .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#newsing .swiper .swiper-wrapper .swiper-slide>img {
	width: 70%;
	margin: 0 auto;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}


#news .banner .inner .mid#newsing {
	background-color: #fff;
	grid-template-columns: initial;
	gap: initial;
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.8rem;
}

@media screen and (orientation: landscape) {
	#newsing .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.2)
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		color: #fff;
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon img {
		filter: brightness(0)invert(1);
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(90deg, #ec0012, #ec0012);
		transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#newsing .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}


@media screen and (orientation: landscape) {
	#about .r1 .inner .part .right .player:hover {
		transform: scale(1.2)
	}

	#about .r1 .inner .part .right .player:hover .iconfont {
		transform: scale(.85)
	}
}

#about .r2 {
	background-color: #d9d9d9;
	/* overflow: hidden */
}

#about .r2 .inner {
	height: 80vh;
	width: 100%;
	/* background-color: #000; */
	position: relative;
	/* overflow: hidden */
}

#about .r2 .inner .clear {
	/* opacity: .7; */
	height: 100%;
	width: 100%;
	display: block
}

#about .r2 .inner .upSide {
	width: 45%;
	height: 100%;
	z-index: 10;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	position: absolute;
	top: 0;
	left: 50%
}

#about .r2 .inner .upSide h3 {
	line-height: 1.2
}

#about .r2 .group {
	z-index: 10;
	position: relative;
	transform: translateY(-0.5rem)
}

#about .r2 .group .box {
	background-color: #fff;
	border-radius: .28rem;
	margin-bottom: .4rem;
	padding: .8rem .4rem;
	position: relative;
	overflow: hidden
}

#about .r2 .group .box>.til {
	position: absolute;
	top: .8rem;
	left: .4rem
}

#about .r2 .group .box>.til h3 {
	margin-bottom: .05rem
}

#about .r2 .group .box>.til small {
	display: block
}

#about .r2 .group .box>.items {
	margin-bottom: .5rem;
	position: relative;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	color: #666;
}

#about .r2 .group .box>.items .list {
	opacity: 0;
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 100px;
	margin-bottom: 8%;
}

#about .r2 .group .box>.items .list:first-of-type {
	position: relative
}

#about .r2 .group .box>.items .list .img {
	width: 100%;
	display: block
}

#about .r2 .group .box>.items .list.on {
	opacity: 1
}

#about .r2 .group .box>.set {
	grid-template-columns: repeat(2, 1fr);
	gap: .2rem;
	display: grid
}

#about .r2 .group .box>.set .tab {
	cursor: pointer;
	text-align: center;
	height: 1rem;
	background-color: #efefef;
	border-radius: .2rem;
	line-height: 1rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r2 .group .box>.set .tab:hover,
#about .r2 .group .box>.set .tab.on {
	color: #fff;
	background-color: #1b1f1f;
	font-weight: 600;
	box-shadow: 0 3.125vw 4.6875vw rgba(35, 38, 38, .3)
}

#about .r2 .group .mapBox {
	background-color: #f2f2f2;
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#about .r2 .group .mapBox .left {
	z-index: 10;
	position: relative
}

#about .r2 .group .mapBox .left .top {
	margin-bottom: .8rem
}

#about .r2 .group .mapBox .left .mid {
	grid-auto-flow: row;
	gap: .2rem 0;
	display: grid
}

#about .r2 .group .mapBox .left .mid .list {
	height: 1rem;
	width: 3.6rem;
	background-color: #fff;
	border-radius: .16rem
}

#about .r2 .group .mapBox .left .mid .list .mr {
	margin-right: .1rem
}

#about .r2 .group .mapBox .left .mid .list .gray {
	color: gray
}

#about .r2 .group .mapBox .left .mid .list .icon {
	width: 1.05rem;
	height: 100%;
	position: relative
}

#about .r2 .group .mapBox .left .mid .list .icon .dot {
	width: 6px;
	height: 6px;
	background-color: #000;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: .15rem;
	left: .15rem
}

#about .r2 .group .mapBox .left .mid .list .icon .dot.mc {
	background-color: #ec0012;
	border-color: #ec0012
}

#about .r2 .group .mapBox .left .mid .list .icon .dot.gray {
	background-color: #a5a5a5;
	border-color: #a5a5a5
}

#about .r2 .group .mapBox .left .mid .list .icon .dot.clear {
	background-color: transparent;
	border-color: #101010
}

#about .r2 .group .mapBox .left .mid .list .icon>img {
	width: 42%;
	height: 30%;
	object-fit: contain
}

#about .r2 .group .mapBox .left .mid .list>em {
	line-height: .9
}

#about .r2 .group .mapBox .left .mid .list>small {
	height: 3em;
	line-height: 5em;
	font-size: inherit;
	color: inherit;
	font-family: inherit
}

#about .r2 .group .mapBox .right {
	pointer-events: none;
	width: 100%;
	height: 100%;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	top: 0;
	right: 0
}

#about .r2 .group .mapBox .right .map {
	width: 85%;
	display: block
}

#about .r3 {
	height: 90vh
}

#about .r3 .bg {
	height: 100%;
	background-color: #000
}

#about .r3 .bg .pic {
	opacity: .8;
	background-attachment: fixed
}

#about .r3 .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -ms-flexbox;
	display: flex
}

#about .r3 .inner .topic {
	margin-bottom: 1.0rem
}

#about .r3 .inner h3 {
	margin-bottom: .2rem;
	line-height: 1.3;
	font-weight: 600;
}

#about .r4 {
	background-color: #efefef;
	padding: 1.3rem 0
}

#about .r4 .inner .top {
	margin-bottom: .5rem
}

#about .r4 .inner .mid {
	grid-auto-flow: column;
	display: grid
}

@media screen and (orientation: landscape) {
	#about .r4 .inner .mid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 .24rem
	}
}

#about .r4 .inner .mid .part {
	background-color: #fff;
	border-radius: .2rem;
	padding-bottom: 0.4rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#about .r4 .inner .mid .part h2 {
	padding: .2rem .6rem .1rem;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	text-align: center;
	font-weight: 600;
}

#about .r4 .inner .mid .part .pic {
	margin: 0 auto;
	text-align: center;
}

#about .r4 .inner .mid .part h3 {
	text-align: justify;
	margin-top: .2rem;
	margin-bottom: .2rem;
	padding: 0 .5rem;
	text-align: center;
	line-height: 1.8;
	color: #666;

}

#about .r4 .inner .mid .part p {
	padding: 0 .6rem
}

#about .r4 .inner .mid .part .line {
	border-bottom: 1px dashed rgba(0, 0, 0, .5);
	margin: .2rem .6rem .4rem;
	display: block
}

#about .r4 .inner .mid .part .items {
	padding: 0 .6rem
}

#about .r4 .inner .mid .part .items>li {
	color: #3c4141;
	padding: .1rem 0 .1rem 1em;
	line-height: 1.2;
	position: relative
}

#about .r4 .inner .mid .part .items>li .icon {
	width: .26rem;
	height: .28rem;
	object-fit: contain;
	margin-right: .15rem
}

#about .r4 .inner .mid .part .items>li em {
	line-height: 1em;
	position: absolute;
	top: 0;
	left: 0
}

#about .r4 .inner .mid .part .layer-btn {
	width: 1.6rem;
	height: .64rem;
	border: 4px solid rgba(35, 38, 38, .2);
	margin: 0 auto;
	transition: border-color .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: .45rem;
	left: .6rem
}

#about .r4 .inner .mid .part .layer-btn .mk {
	opacity: 0
}

#about .r4 .inner .mid .part .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r4 .inner .mid .part .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

#about .r4 .inner .mid .part .note {
	width: 100%;
	height: .64rem;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	bottom: .45rem;
	left: 0;
	right: 0
}

@media screen and (orientation: landscape) {
	#about .r4 .inner .mid .part:hover {
		z-index: 10;
		box-shadow: 0 80px 120px rgba(0, 0, 0, .2)
	}

	#about .r4 .inner .mid .part:hover .layer-btn {
		border-color: rgba(35, 38, 38, 0)
	}

	#about .r4 .inner .mid .part:hover .layer-btn .mk {
		opacity: 1
	}

	#about .r4 .inner .mid .part:hover .layer-btn .txt {
		transform: translate(-.15rem)
	}

	#about .r4 .inner .mid .part:hover .layer-btn .iconfont {
		opacity: 1;
		transform: translate(.03rem)rotate(45deg)
	}
}

#about .r5 {
	height: 8rem;
	width: 100%
}

#about .r5 .inner {
	height: 100%;
	width: 100%;
	display: block
}

#about .r5 .inner .top {
	z-index: 8;
	width: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	top: .8rem;
	left: 0
}

#about .r5 .inner .top .topic {
	margin-bottom: .15rem
}

#about .r5 .inner .group {
	height: 100%;
	width: 100%;
	grid-template-columns: repeat(5, 1fr);
	display: grid
}

#about .r5 .inner .group .box {
	height: 100%;
	position: relative;
	overflow: hidden
}

#about .r5 .inner .group .box .pic {
	width: 100%;
	height: 100%;
	transition: transform 1s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#about .r5 .inner .group .box .pic>.mask {
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	background: linear-gradient(-30deg, #ec0012 5%, rgba(254, 219, 0, 0) 28%);
	transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
	top: auto;
	bottom: -2px;
	left: -2px
}

#about .r5 .inner .group .box .msg {
	height: 100%;
	z-index: 10;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#about .r5 .inner .group .box .msg h3 {
	text-align: center;
	margin-bottom: .2rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), color .8s cubic-bezier(.38, 0, 0, 1), font-weight .8s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(.2rem)
}

#about .r5 .inner .group .box .msg .items {
	width: 100%;
	height: .2rem;
	opacity: 0;
	padding: 0 .4rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), opacity .8s cubic-bezier(.38, 0, 0, 1);
	transform: translateY(.15rem)
}

#about .r5 .inner .group .box .msg .items>li {
	text-align: center
}

@media screen and (orientation: landscape) {
	#about .r5 .inner .group .box:hover .pic {
		transform: scale(1.05)
	}

	#about .r5 .inner .group .box:hover .pic>.mask {
		opacity: 1
	}

	#about .r5 .inner .group .box:hover .msg h3 {
		color: #ec0012;
		font-weight: 600;
		transform: none
	}

	#about .r5 .inner .group .box:hover .msg .items {
		opacity: 1;
		transform: none
	}
}

#about .r6 {
	background-color: #efefef;
	padding: 1.3rem 0 1.6rem;
	overflow: hidden
}

#about .r6 .bg .sign {
	height: 13rem;
	position: absolute;
	top: -1.7rem;
	right: -25%
}

#about .r6 .inner {
	width: 100%
}

#about .r6 .inner .topic {
	margin-bottom: .7rem
}

#about .r6 .inner .group .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

@media screen and (orientation: landscape) {
	#about .r6 .inner .group .swiper-wrapper {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 .3rem
	}
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box {
	cursor: pointer;
	border-radius: .12rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	overflow: hidden
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg {
	z-index: 10;
	background-color: #fff;
	padding-bottom: .2rem;
	position: relative
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til {
	z-index: 10;
	padding: .5rem .4rem .3rem;
	position: relative
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til h3 {
	margin-bottom: .3rem;
	line-height: 1
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til p {
	margin-bottom: .3rem;
	line-height: 1.6;
	display: block
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon {
	width: 1.2rem;
	height: .5rem;
	opacity: 0;
	background-color: rgba(28, 31, 31, .1);
	transition: width .6s cubic-bezier(.38, 0, 0, 1), opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: .5rem;
	right: .4rem;
	transform: translate(.2rem)
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .mask {
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .mask:after {
	content: "";
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
	transform: none
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .txt {
	text-align: center;
	z-index: 9;
	margin-right: .15rem;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1)
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .msg .til .btnIcon .layer-icon {
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .photo {
	height: 2.4rem;
	width: 100%;
	background-color: #fff;
	position: relative;
	overflow: hidden
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box .photo .pic {
	width: 100%;
	opacity: .6;
	height: 100%;
	transition: all .5s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box:hover {
	box-shadow: 0 .2rem .5rem -5px rgba(35, 38, 38, .3)
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box:hover .msg .til .btnIcon,
#about .r6 .inner .group .swiper-wrapper .swiper-slide .box:hover .msg .til .btnIcon .mk {
	opacity: 1;
	transform: none
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box:hover .msg .til .btnIcon .layer-icon .iconfont {
	transform: rotate(45deg)translate(-.1rem)
}

#about .r6 .inner .group .swiper-wrapper .swiper-slide .box:hover .photo .pic {
	opacity: 1
}

#about .r6 .inner .btm {
	margin-top: .8rem;
	position: relative
}

#about .r6 .inner .btm .pager {
	z-index: 4;
	background-color: #efefef;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .15em;
	padding-right: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#about .r6 .inner .btm .pager>a {
	color: rgba(35, 38, 38, .5);
	width: .4rem;
	text-align: center;
	line-height: 1;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#about .r6 .inner .btm .pager>a.on {
	color: #232626
}

#about .r6 .inner .btm .line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #292e2e
}

#about .r6 .inner .btm .set {
	z-index: 4;
	background-color: #efefef;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding-left: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#about .r6 .inner .btm .set .layer-icon {
	width: .9rem;
	height: .9rem;
	background-color: #fff;
	border-radius: 50%;
	margin-left: .2rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r6 .inner .btm .set .layer-icon.disable>i {
	color: rgba(0, 0, 0, .3)
}

#about .r6 .inner .btm .set .layer-icon:not(.disable):hover {
	background-color: #ec0012
}

#searchResult {
	background-color: #ededed
}

#searchResult .banner {
	padding-bottom: 1.6rem
}

#searchResult .banner>.bg {
	background-color: #fff;
	position: absolute;
	height: 4rem !important;
	overflow: hidden !important
}

#searchResult .banner>.bg .img {
	width: 100%;
	display: block
}

#searchResult .banner>.bg .mask {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(237, 237, 237, 0) 30%, #ededed 100%);
	position: absolute;
	top: 0;
	left: 0
}

#searchResult .banner .inner {
	padding-top: 3.5rem;
	padding-bottom: .8rem
}

#searchResult .banner .inner h1 {
	line-height: 1.2
}

#searchResult .banner .inner h1 small {
	font-weight: 100;
	font-size: inherit;
	font-family: inherit
}

#searchResult .banner .inner .top {
	z-index: 12;
	-ms-flex-align: end;
	align-items: flex-end;
	margin-bottom: 1rem;
	position: relative
}

#searchResult .banner .inner .top .tabBox .tab {
	min-width: 1.8rem;
	text-align: center;
	border: 1px solid rgba(41, 46, 46, .3);
	border-radius: 2rem;
	margin-right: .2rem;
	padding: .2rem .3rem;
	position: relative;
	overflow: hidden
}

#searchResult .banner .inner .top .tabBox .tab:after {
	content: "";
	width: 120%;
	height: 100%;
	background-color: #292e2e;
	border-radius: 1rem;
	transition: transform .8s cubic-bezier(.38, 0, 0, 1), background-color .8s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: -10%;
	transform: translate(-100%)
}

#searchResult .banner .inner .top .tabBox .tab>span {
	z-index: 10;
	line-height: 1;
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	display: block;
	position: relative
}

#searchResult .banner .inner .top .tabBox .tab:hover,
#searchResult .banner .inner .top .tabBox .tab.on {
	background-color: rgba(41, 46, 46, .3);
	transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#searchResult .banner .inner .top .tabBox .tab:hover:after,
#searchResult .banner .inner .top .tabBox .tab.on:after {
	transform: translate(0, 0)
}

#searchResult .banner .inner .top .tabBox .tab:hover>span,
#searchResult .banner .inner .top .tabBox .tab.on>span {
	color: #fff
}

#searchResult .banner .inner .top .searchBox {
	width: 3.6rem;
	height: .6rem;
	background-color: #fff;
	border-radius: 1rem;
	margin-bottom: .1rem;
	padding: 0 0 0 .25rem
}

#searchResult .banner .inner .top .searchBox>input {
	height: 100%;
	width: calc(100% - 1rem);
	background-color: transparent;
	border: none
}

#searchResult .banner .inner .top .searchBox .subSearch {
	width: .6rem;
	height: .6rem;
	background-color: #1c1f1f;
	border-radius: 50%
}

#searchResult .banner .inner .group {
	grid-template-columns: 1fr 4fr;
	gap: 0 .3rem;
	display: grid
}

#searchResult .banner .inner .group .left {
	min-height: 5rem;
	padding-bottom: 2rem
}

#searchResult .banner .inner .group .left .items .list {
	width: 100%;
	height: 1rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	margin-bottom: .2rem;
	transition: box-shadow .8s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#searchResult .banner .inner .group .left .items .list.on {
	z-index: 10;
	box-shadow: 0 .6rem 1rem -1px rgba(0, 0, 0, .2)
}

#searchResult .banner .inner .group .left .items .list.on>a {
	font-weight: 600
}

#searchResult .banner .inner .group .left .items .list:hover {
	box-shadow: 0 .6rem 1rem -1px rgba(0, 0, 0, .12)
}

#searchResult .banner .inner .group .left .items.fx {
	position: fixed;
	top: 200px
}

#searchResult .banner .inner .group .right .part .box {
	width: 100%;
	cursor: pointer;
	background-color: #f7f7f7;
	border-radius: .18rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .2rem;
	padding: .4rem;
	transition: box-shadow .5s cubic-bezier(.38, 0, 0, 1), background-color .5s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#searchResult .banner .inner .group .right .part .box .lab {
	background-color: rgba(0, 0, 0, .1);
	border-radius: 1rem;
	margin-bottom: .2rem;
	padding: 5px .2rem
}

#searchResult .banner .inner .group .right .part .box .msg {
	width: calc(100% - 2rem)
}

#searchResult .banner .inner .group .right .part .box .msg h2 {
	margin-bottom: .12rem
}

#searchResult .banner .inner .group .right .part .box .msg p {
	-webkit-line-clamp: 2;
	height: 3em;
	-webkit-box-orient: vertical;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden
}

#searchResult .banner .inner .group .right .part .box .btnIcon {
	width: .5rem;
	height: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	right: .6rem
}

#searchResult .banner .inner .group .right .part .box .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, 0);
	border-radius: 1rem;
	overflow: hidden
}

#searchResult .banner .inner .group .right .part .box .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#searchResult .banner .inner .group .right .part .box .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#searchResult .banner .inner .group .right .part .box .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#searchResult .banner .inner .group .right .part .box .key {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	background-color: #fce700
}

@media screen and (orientation: landscape) {
	#searchResult .banner .inner .group .right .part .box:hover {
		background-color: #fff;
		box-shadow: 0 .2rem .5rem -3px rgba(0, 0, 0, .15)
	}

	#searchResult .banner .inner .group .right .part .box:hover .btnIcon {
		width: 1.2rem
	}

	#searchResult .banner .inner .group .right .part .box:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#searchResult .banner .inner .group .right .part .box:hover .btnIcon .mask:after {
		opacity: 1
	}

	#searchResult .banner .inner .group .right .part .box:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

#searchResult .banner .inner .group .right .part .line {
	height: 1px;
	width: 100%;
	background-color: rgba(0, 0, 0, .2);
	margin-top: .5rem;
	margin-bottom: .5rem
}

#searchResult .banner .inner .group .right .part:last-of-type .line {
	display: none
}

#searchResult .banner .btm {
	margin-top: .5rem;
	position: relative
}

#searchResult .banner .btm .pager {
	z-index: 4;
	background-color: #ededed;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	padding-bottom: .15em;
	padding-right: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#searchResult .banner .btm .pager>a {
	color: rgba(35, 38, 38, .5);
	width: .4rem;
	text-align: center;
	line-height: 1;
	transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

#searchResult .banner .btm .pager>a.on {
	color: #232626
}

#searchResult .banner .btm .line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed rgba(41, 46, 46, .6)
}

#searchResult .banner .btm .set {
	z-index: 4;
	background-color: #ededed;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center;
	padding-left: .2rem;
	display: -ms-flexbox;
	display: flex;
	position: relative
}

#searchResult .banner .btm .set .layer-icon {
	width: .9rem;
	height: .9rem;
	background-color: #fff;
	border-radius: 50%;
	margin-left: .2rem;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#searchResult .banner .btm .set .layer-icon.disable>i {
	color: rgba(0, 0, 0, .3)
}

#groundSolution .banner {
	position: relative;
	overflow: hidden
}

#groundSolution .banner>.bg .pro {
	width: 76%;
	height: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: 7%;
	left: 14%
}

#groundSolution .banner>.bg .shadow {
	z-index: 8;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%
}

#groundSolution .banner .inner {
	height: 12rem;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 2rem 0 1.2rem
}

#groundSolution .banner .inner .topic h1 {
	line-height: .9
}

#groundSolution .banner .inner .topic p {
	text-align: center
}

#groundSolution .banner .inner .group {
	grid-template-columns: repeat(2, 5.2rem);
	gap: 0 .8rem;
	display: grid
}

#groundSolution .banner .inner .group .col {
	padding: 0 2% 0 .6rem;
	position: relative
}

#groundSolution .banner .inner .group .col .icon {
	height: .4rem;
	z-index: 10;
	margin: auto 0;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
	color: #fff;
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon img {
	filter: brightness(0)invert(1);
}

#groundSolution .banner .inner .group .col h2 {
	line-height: 1.5
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-prev .layer-icon img {
	filter: brightness(0)invert(1);
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-next .layer-icon img {
	filter: brightness(0)invert(1);
}

#groundSolution .r2 {
	/* background-color: #efefef; */
	padding-top: 0.6rem;
	padding-bottom: 0
}

#groundSolution .r2 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 0.6rem
}

#groundSolution .r2 .inner .top .topic {
	width: 50%
}

#groundSolution .r2 .inner .top>p {
	width: 50%;
	line-height: 2
}

#groundSolution .r2 .inner .mid {
	position: relative
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .3rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1);
	text-align: center;
	padding: 0 6%;
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	width: 90%;
	margin: 0 auto;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.2)
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		width: 2.2rem
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.25rem)
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
		height: .8rem
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
		opacity: 1
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
		height: .8rem;
		transform: translate(.4rem)rotate(45deg)
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon i {
		font-size: 12px
	}
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r2 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#groundSolution .r2 .inner .line {
	width: 100%;
	height: 1px;
	border-top: 1px dashed rgba(41, 46, 46, .3);
	margin: .5rem 0
}

#groundSolution .r2 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	overflow: hidden
}

#groundSolution .r2 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#groundSolution .r2 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#groundSolution .r2 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#groundSolution .r4 {
	background-color: #efefef;
	padding-top: 1rem;
	padding-bottom: 1.7rem
}

#groundSolution .r4 .inner {
	margin-bottom: 1.5rem
}

#groundSolution .r4 .inner .mid {
	z-index: 4;
	position: relative
}

#groundSolution .r4 .inner .mid>p {
	width: 48%;
	padding-bottom: .8rem;
	line-height: 1.33
}

#groundSolution .r4 .inner .mid .imgBox {
	position: relative
}

#groundSolution .r4 .inner .mid .imgBox .img {
	height: 7.8rem;
	display: block
}

#groundSolution .r4 .inner .mid .imgBox .years {
	position: absolute;
	bottom: 27%;
	right: -8%
}

#groundSolution .r4 .inner .mid .imgBox .years>em {
	letter-spacing: -.2em;
	text-indent: -.92em;
	font-size: 4.6rem;
	line-height: .8;
	display: inline-block
}

#groundSolution .r4 .inner .mid .imgBox .years sub {
	vertical-align: baseline
}

#groundSolution .r4 .inner .btm {
	z-index: 2;
	margin-top: -1.2rem;
	position: relative
}

#groundSolution .r4 .inner .btm .note {
	margin-bottom: .6rem
}

#groundSolution .r4 .inner .btm .note .txt {
	padding-right: .2rem
}

#groundSolution .r4 .inner .btm .note .line {
	height: 1px;
	background-color: rgba(26, 26, 26, .3);
	-ms-flex: 1;
	flex: 1
}

#groundSolution .r4 .inner .btm .logoSw {
	width: 100%;
	grid-auto-flow: column;
	padding: .2rem 0;
	display: grid
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide {
	padding-right: 1rem
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo {
	height: .88rem
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo>img {
	max-height: .88rem;
	opacity: .2;
	display: block
}

#groundSolution .r4 .part .top {
	margin-bottom: .9rem
}

#groundSolution .r4 .part .mid {
	width: 100%
}

#groundSolution .r4 .part .mid .box {
	width: 100%;
	height: 6.8rem;
	background-color: #fff;
	border-radius: .3rem;
	margin-bottom: .6rem;
	overflow: hidden
}

#groundSolution .r4 .part .mid .box .left {
	width: 50%;
	height: 100%;
	z-index: 10;
	position: relative
}

#groundSolution .r4 .part .mid .box .left .pic {
	opacity: .6;
	background-position: 15%
}

#groundSolution .r4 .part .mid .box .left .layer-play {
	width: 1.2rem;
	height: 1.2rem;
	cursor: pointer;
	z-index: 5;
	background-color: rgba(28, 31, 31, .6);
	border-radius: 50%;
	-ms-flex-direction: column;
	flex-direction: column;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r4 .part .mid .box .left .layer-play p {
	margin-top: .1rem
}

#groundSolution .r4 .part .mid .box .left .layer-play:hover {
	background-color: #232626
}

#groundSolution .r4 .part .mid .box .right {
	width: 50%;
	height: 100%;
	z-index: 11;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 0 1rem 0 3%;
	position: relative
}

#groundSolution .r4 .part .mid .box .right>.mask {
	height: 100%;
	width: 100%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 26%);
	position: absolute;
	top: 0;
	left: -2rem
}

#groundSolution .r4 .part .mid .box .right>.sign {
	z-index: 5;
	height: .96rem;
	margin-bottom: .3rem;
	position: relative
}

#groundSolution .r4 .part .mid .box .right h3 {
	z-index: 5;
	position: relative
}

#groundSolution .r4 .part .mid .box .right p {
	z-index: 5;
	margin-bottom: .5rem;
	position: relative
}

#groundSolution .r4 .part .mid .box .right .items {
	z-index: 5;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

#groundSolution .r4 .part .mid .box .right .items>li {
	opacity: 0;
	transform-origin: 0;
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden;
	transform: translate(60%)
}

#groundSolution .r4 .part .mid .box .right .items>li>img {
	height: .52rem;
	margin: 0 auto .2rem;
	display: block
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon {
	height: 100%;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-right: .05rem;
	padding: 0 .25rem 0 .3rem;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	overflow: hidden
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon>i {
	line-height: .52rem
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon .lines {
	width: 4.7rem;
	display: block;
	position: absolute;
	bottom: .5em;
	left: .05rem
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(1) {
	transition-delay: 50ms
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(2) {
	transition-delay: .1s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(3) {
	transition-delay: .15s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(4) {
	transition-delay: .2s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(5) {
	transition-delay: .25s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(6) {
	transition-delay: .3s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(7) {
	transition-delay: .35s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(8) {
	transition-delay: .4s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(9) {
	transition-delay: .45s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(10) {
	transition-delay: .5s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(11) {
	transition-delay: .55s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(12) {
	transition-delay: .6s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(13) {
	transition-delay: .65s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(14) {
	transition-delay: .7s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(15) {
	transition-delay: .75s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(16) {
	transition-delay: .8s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(17) {
	transition-delay: .85s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(18) {
	transition-delay: .9s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(19) {
	transition-delay: .95s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(20) {
	transition-delay: 1s
}

#groundSolution .r4 .part .mid .box .right .items.go>li {
	opacity: 1;
	transform: translate(0)
}

#groundSolution .r4 .part .mid .box:first-of-type .right {
	padding-bottom: 6%
}

#groundSolution .r7 {
	padding: 1.2rem 0 1.5rem;
	overflow: hidden
}

#groundSolution .r7 .bg .pic:after {
	content: "";
	background-color: rgba(0, 0, 0, .5)
}

#groundSolution .r7 .inner h2 {
	line-height: 1
}

#groundSolution .r7 .inner .col {
	width: 50%;
	margin-top: 1.8rem;
	margin-left: 50%
}

#groundSolution .r7 .inner .col>img {
	height: .72rem;
	margin-bottom: .5rem;
	display: block
}

#devploper .banner {
	width: 100%;
	overflow: hidden
}

#devploper .banner .inner {
	height: 8.6rem;
	width: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#devploper .banner .inner small {
	text-align: center;
	margin-top: .2rem
}

#devploper .banner .inner h1 {
	color: #fff;
	letter-spacing: -.04em;
	text-align: center;
	line-height: .8
}

#devploper .r1 {
	width: 100%;
	background-color: #efefef;
	padding: 2.4rem 0 2rem;
	overflow: hidden
}

#devploper .r1 .bg .sign {
	height: 12rem;
	position: absolute;
	bottom: -8rem;
	left: -27%
}

#devploper .r1 .inner {
	grid-template-columns: 7.5rem calc(100% - 7.2rem);
	gap: .4rem;
	margin-bottom: .4rem;
	display: grid
}

#devploper .r1 .inner .left {
	min-height: 4.7rem;
	width: 7.5rem
}

#devploper .r1 .inner .left .topic {
	margin-bottom: .2rem
}

#devploper .r1 .inner .left p {
	margin-bottom: .5rem
}

#devploper .r1 .inner .left .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .24rem;
	display: grid
}

#devploper .r1 .inner .left .items>li {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(255, 255, 255, .8);
	border-radius: .16rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .7rem .4rem .5rem;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden
}

#devploper .r1 .inner .left .items>li .icon {
	height: .75rem;
	margin-bottom: .6rem
}

#devploper .r1 .inner .left .items>li h3 {
	text-align: center;
	line-height: 1.8
}

#devploper .r1 .inner .right {
	position: relative
}

#devploper .r1 .inner .right .img {
	height: 5.7rem;
	margin: 0 auto;
	position: absolute;
	top: .2rem;
	right: 0
}

#devploper .r2 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#devploper .r2 .inner {
	height: 100%
}

#devploper .r2 .inner .right {
	width: 50%;
	margin-left: 50%
}

#devploper .r2 .inner .right .topic,
#devploper .r2 .inner .right p {
	margin-bottom: .5rem
}

#devploper .r2 .inner .right .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .24rem;
	display: grid
}

#devploper .r2 .inner .right .items>li {
	background-color: #1c1c1c;
	border-radius: .16rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .7rem .4rem .5rem;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden
}

#devploper .r2 .inner .right .items>li .icon {
	height: .75rem;
	margin-bottom: .6rem
}

#devploper .r2 .inner .right .items>li h3 {
	text-align: center;
	line-height: 1.8
}

#devploper .r3 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#devploper .r3 .inner {
	height: 100%
}

#devploper .r3 .inner .left {
	width: 45%;
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: start;
	align-items: flex-start;
	padding-bottom: 2rem;
	display: -ms-flexbox;
	display: flex
}

#devploper .r3 .inner .left .topic {
	margin-bottom: .4rem
}

#devploper .r3 .inner .left h3 {
	margin-bottom: .1rem
}

#devploper .r3 .inner .left p {
	line-height: 1.5
}

#devploper .r4 {
	height: 100vh;
	overflow: hidden
}

#devploper .r4 .inner {
	height: 100%
}

#devploper .r4 .inner .left {
	width: 45%;
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-left: 50%;
	padding-bottom: 1.6rem;
	display: -ms-flexbox;
	display: flex
}

#devploper .r4 .inner .left .topic {
	margin-bottom: .5rem
}

#devploper .r4 .inner .left>p {
	margin-bottom: .4rem;
	line-height: 1.5
}

#devploper .rowMap {
	width: 100%;
	background-color: #efefef;
	padding: 1.5rem 0 1.2rem
}

#devploper .rowMap .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .6rem
}

#devploper .rowMap .top>p {
	width: 50%
}

#devploper .rowMap .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#devploper .r6 {
	width: 100%;
	overflow: hidden
}

#devploper .r6 .inner {
	height: 100vh;
	padding-top: 2rem
}

#devploper .r6 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#devploper .r6 .inner .top .topic,
#devploper .r6 .inner .top .msg {
	width: 50%
}

#devploper .r6 .inner .top .msg p {
	margin-bottom: .45rem
}

#devploper .r6 .inner .top .msg .layer-btn {
	width: 2rem
}

#devploper .r6 .inner .top .msg .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r6 .inner .top .msg .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

@media screen and (orientation: landscape) {
	#devploper .r6 .inner .top .msg .layer-btn:hover .txt {
		transform: translate(-.15rem)
	}

	#devploper .r6 .inner .top .msg .layer-btn:hover .iconfont {
		opacity: 1;
		transform: translate(.03rem)rotate(45deg)
	}
}

#devploper .r7 {
	width: 100%;
	background-color: #efefef;
	padding-top: 1.5rem;
	padding-bottom: 1.8rem;
	overflow: hidden
}

#devploper .r7 .bg .sign {
	height: 13rem;
	position: absolute;
	top: 1.5rem;
	right: -25%
}

#devploper .r7 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#devploper .r7 .inner .top .topic {
	width: 50%
}

#devploper .r7 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#devploper .r7 .inner .mid {
	position: relative
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	height: 2.09rem;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.05)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		opacity: 0
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active h3,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active h3 {
		color: #ec0012
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active>img,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active>img {
		transform: scale(1.05)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon {
		width: 2.2rem;
		opacity: 1
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .txt,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.15rem)
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask {
		height: .8rem
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask:after,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask:after {
		opacity: 1
	}

	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .layer-icon,
	#devploper .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .layer-icon {
		transform-origin: 43% 100%;
		line-height: .8rem;
		transform: translate(.5rem)rotate(45deg)
	}
}

#devploper .r7 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#devploper .r7 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r7 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#devploper .r7 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#devploper .r7 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#devploper .r7 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#devploper .r7 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	margin-top: .25rem;
	overflow: hidden
}

#devploper .r7 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#devploper .r7 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#devploper .r7 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#service .banner {
	width: 100%;
	overflow: hidden
}

#service .banner .inner {
	height: 8.6rem;
	width: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#service .banner .inner small {
	text-align: center;
	margin-top: .2rem
}

#service .banner .inner h1 {
	color: #fff;
	letter-spacing: -.04em;
	text-align: center;
	line-height: .8
}

#service .r1 {
	width: 100%;
	background-color: #efefef;
	padding: 2.4rem 0 2rem;
	overflow: hidden
}

#service .r1 .bg .sign {
	height: 12rem;
	position: absolute;
	bottom: -8rem;
	left: -27%
}

#service .r1 .inner {
	grid-template-columns: 7.5rem calc(100% - 7.2rem);
	gap: .4rem;
	margin-bottom: .4rem;
	display: grid
}

#service .r1 .inner .left {
	min-height: 4.7rem;
	width: 7.5rem
}

#service .r1 .inner .left .topic {
	margin-bottom: .2rem
}

#service .r1 .inner .left p {
	margin-bottom: .5rem
}

#service .r1 .inner .left .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .24rem;
	display: grid
}

#service .r1 .inner .left .items>li {
	-webkit-backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: blur(.3rem);
	backdrop-filter: blur(.3rem);
	background-color: rgba(255, 255, 255, .8);
	border-radius: .16rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .7rem .4rem .5rem;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden
}

#service .r1 .inner .left .items>li .icon {
	height: .75rem;
	margin-bottom: .6rem
}

#service .r1 .inner .left .items>li h3 {
	text-align: center;
	line-height: 1.8
}

#service .r1 .inner .right {
	position: relative
}

#service .r1 .inner .right .img {
	height: 5.7rem;
	margin: 0 auto;
	position: absolute;
	top: .2rem;
	right: 0
}

#service .r2 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#service .r2 .inner {
	height: 100%;
	padding-top: 2.5rem
}

#service .r2 .inner .topic {
	margin-bottom: .5rem
}

#service .r2 .inner p {
	width: 6.4rem
}

#service .r2 .inner .items {
	width: 7rem;
	position: absolute;
	bottom: 1.6rem;
	right: 0
}

#service .r2 .inner .items>li {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	height: 1.2rem;
	background-color: rgba(0, 0, 0, .5);
	border-radius: .18rem;
	margin-bottom: .2rem;
	padding: .3rem .3rem .3rem 1.5rem;
	overflow: hidden
}

#service .r2 .inner .items>li:last-of-type {
	margin-bottom: 0
}

#service .r2 .inner .items>li .icon {
	height: .68rem;
	left: .5rem
}

#service .r3 {
	width: 100%;
	background-color: #efefef;
	padding-top: 1.4rem;
	padding-bottom: 1.5rem
}

#service .r3 .inner .group {
	padding-bottom: 1rem
}

#service .r3 .inner .group .topic {
	margin-bottom: .25rem
}

#service .r3 .inner .group p {
	width: 7.5rem
}

#service .r3 .inner .group .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .2rem;
	margin-top: 1rem;
	display: grid
}

#service .r3 .inner .group .items>li {
	background-color: #fff;
	border-radius: .2rem;
	overflow: hidden
}

#service .r3 .inner .group .items>li .img {
	height: 2.4rem;
	width: 100%;
	object-fit: cover
}

#service .r3 .inner .group .items>li .msg {
	height: 1rem;
	padding: 0 .4rem
}

#service .r3 .inner .group .items>li .msg .icon {
	height: .4rem
}

#service .r3 .inner .part {
	padding-top: 1rem;
	padding-bottom: 1rem
}

#service .r3 .inner .part .topic {
	margin-bottom: .6rem
}

#service .r3 .inner .part .mid {
	width: 100%
}

#service .r3 .inner .part .mid .box {
	width: 100%;
	height: 6.8rem;
	background-color: #fff;
	border-radius: .3rem;
	overflow: hidden
}

#service .r3 .inner .part .mid .box .left {
	width: 50%;
	height: 100%;
	z-index: 10;
	position: relative
}

#service .r3 .inner .part .mid .box .left .pic {
	opacity: .6;
	background-position: 15%
}

#service .r3 .inner .part .mid .box .left .layer-play {
	width: 1.2rem;
	height: 1.2rem;
	cursor: pointer;
	z-index: 5;
	background-color: rgba(28, 31, 31, .6);
	border-radius: 50%;
	-ms-flex-direction: column;
	flex-direction: column;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r3 .inner .part .mid .box .left .layer-play p {
	margin-top: .1rem
}

#service .r3 .inner .part .mid .box .left .layer-play:hover {
	background-color: #232626
}

#service .r3 .inner .part .mid .box .right {
	width: 50%;
	height: 100%;
	z-index: 11;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 0 1rem 0 3%;
	position: relative
}

#service .r3 .inner .part .mid .box .right>.mask {
	height: 100%;
	width: 100%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 26%);
	position: absolute;
	top: 0;
	left: -2rem
}

#service .r3 .inner .part .mid .box .right>.sign {
	z-index: 5;
	height: .96rem;
	margin-bottom: .3rem;
	position: relative
}

#service .r3 .inner .part .mid .box .right h3 {
	z-index: 5;
	position: relative
}

#service .r3 .inner .part .mid .box .right p {
	z-index: 5;
	margin-bottom: .7rem;
	position: relative
}

#service .r3 .inner .part .mid .box .right .items {
	z-index: 5;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

#service .r3 .inner .part .mid .box .right .items>li {
	opacity: 0;
	transform-origin: 0;
	transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
	overflow: hidden;
	transform: translate(60%)
}

#service .r3 .inner .part .mid .box .right .items>li>img {
	height: .52rem;
	margin: 0 auto .2rem;
	display: block
}

#service .r3 .inner .part .mid .box .right .items>li.layer-icon {
	height: 100%;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-right: .05rem;
	padding: 0 .25rem 0 .3rem;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	overflow: hidden
}

#service .r3 .inner .part .mid .box .right .items>li.layer-icon>i {
	line-height: .52rem
}

#service .r3 .inner .part .mid .box .right .items>li.layer-icon .lines {
	width: 4.7rem;
	display: block;
	position: absolute;
	bottom: .5em;
	left: .05rem
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(1) {
	transition-delay: 50ms
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(2) {
	transition-delay: .1s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(3) {
	transition-delay: .15s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(4) {
	transition-delay: .2s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(5) {
	transition-delay: .25s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(6) {
	transition-delay: .3s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(7) {
	transition-delay: .35s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(8) {
	transition-delay: .4s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(9) {
	transition-delay: .45s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(10) {
	transition-delay: .5s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(11) {
	transition-delay: .55s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(12) {
	transition-delay: .6s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(13) {
	transition-delay: .65s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(14) {
	transition-delay: .7s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(15) {
	transition-delay: .75s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(16) {
	transition-delay: .8s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(17) {
	transition-delay: .85s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(18) {
	transition-delay: .9s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(19) {
	transition-delay: .95s
}

#service .r3 .inner .part .mid .box .right .items>li:nth-child(20) {
	transition-delay: 1s
}

#service .r3 .inner .part .mid .box .right .items.go>li {
	opacity: 1;
	transform: translate(0)
}

#service .r4 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#service .r4 .bg .pic:after {
	content: "";
	background-color: rgba(0, 0, 0, .3)
}

#service .r4 .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start
}

#service .r4 .inner .topic {
	margin-bottom: .8rem
}

#service .r4 .inner h3 {
	color: #fff;
	margin-bottom: .12rem;
	line-height: 1.2
}

#service .r4 .inner .group {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: .6rem
}

#service .r4 .inner .group .items {
	margin-bottom: .4rem
}

#service .r4 .inner .group .items>li>em {
	margin-right: .1rem;
	font-size: .32rem
}

#service .r4 .inner .group .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r4 .inner .group .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

#service .r4 .inner .group .layer-btn:hover .txt {
	transform: translate(-.15rem)
}

#service .r4 .inner .group .layer-btn:hover .iconfont {
	opacity: 1;
	transform: translate(.03rem)rotate(45deg)
}

#service .r7 {
	width: 100%;
	background-color: #efefef;
	padding-top: 1.5rem;
	padding-bottom: 1.8rem;
	overflow: hidden
}

#service .r7 .bg .sign {
	height: 13rem;
	position: absolute;
	top: 1.5rem;
	right: -25%
}

#service .r7 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#service .r7 .inner .top .topic {
	width: 50%
}

#service .r7 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#service .r7 .inner .mid {
	position: relative
}

#service .r7 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	height: 2.09rem;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.05)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		opacity: 0
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active h3,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active h3 {
		color: #ec0012
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active>img,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active>img {
		transform: scale(1.05)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon {
		width: 2.2rem;
		opacity: 1
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .txt,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.15rem)
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask {
		height: .8rem
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask:after,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask:after {
		opacity: 1
	}

	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .layer-icon,
	#service .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .layer-icon {
		transform-origin: 43% 100%;
		line-height: .8rem;
		transform: translate(.5rem)rotate(45deg)
	}
}

#service .r7 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#service .r7 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r7 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#service .r7 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#service .r7 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#service .r7 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#service .r7 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	margin-top: .25rem;
	overflow: hidden
}

#service .r7 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#service .r7 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#service .r7 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#epc .banner {
	width: 100%;
	overflow: hidden
}

#epc .banner .inner {
	height: 70vh;
	width: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#epc .banner .inner small {
	text-align: center;
	margin-top: .2rem
}

#epc .banner .inner h1 {
	color: #000;
	font-weight: 700;
	letter-spacing: -.04em;
	text-align: center;
	line-height: .8
}

#epc .r1 {
	width: 100%;
	background-color: #efefef;
	padding: 0.8rem 0 0.8rem;
	overflow: hidden
}

#epc .r1 .bg .sign {
	height: 12rem;
	position: absolute;
	bottom: -8rem;
	left: -27%
}

#epc .r1 .inner {
	grid-template-columns: 7.5rem calc(100% - 7.2rem);
	gap: .4rem;
	margin-bottom: .4rem;
	display: block
}

#epc .r1 .inner .left {
	min-height: 4.7rem;
	width: 7.5rem
}

#epc .r1 .inner .left .topic {
	margin-bottom: .5rem
}

#epc .r1 .inner .right {
	position: relative
}

#epc .r1 .inner .right .img {
	height: 5.7rem;
	margin: 0 auto;
	position: absolute;
	top: .2rem;
	right: 0
}

#epc .r2 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#epc .r2 .inner {
	height: 100%;
	grid-template-columns: repeat(2, 1fr);
	-ms-flex-align: center;
	align-items: center;
	gap: 0 1.5rem;
	padding-bottom: 1rem;
	display: grid
}

#epc .r2 .inner .left .topic {
	margin-bottom: .5rem
}

#epc .r2 .inner .right .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .25rem;
	display: grid
}

#epc .r2 .inner .right .items>li {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	background-color: rgba(0, 0, 0, .5);
	border-radius: .18rem;
	padding: .6rem .2rem .4rem
}

#epc .r2 .inner .right .items>li .img {
	height: .85rem;
	margin: 0 auto .5rem;
	display: block
}

#epc .r2 .inner .right .items>li h3 {
	text-align: center
}

#epc .r3 {
	width: 100%;
	background-color: #efefef;
	padding-top: 1.6rem;
	padding-bottom: 2rem;
	overflow: hidden
}

#epc .r3 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start
}

#epc .r3 .inner .top>p {
	width: 50%
}

#epc .r3 .inner .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .2rem;
	margin-top: 1rem;
	display: grid
}

#epc .r3 .inner .items>li {
	background-color: #fff;
	border-radius: .2rem;
	overflow: hidden
}

#epc .r3 .inner .items>li .img {
	height: 2.4rem;
	width: 100%;
	object-fit: cover
}

#epc .r3 .inner .items>li .msg {
	height: 1rem;
	padding: 0 .4rem
}

#epc .r3 .inner .items>li .msg .icon {
	height: .4rem
}

#epc .r4 {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#epc .r4 .inner {
	height: 100%;
	grid-template-columns: repeat(2, 1fr);
	-ms-flex-align: center;
	align-items: center;
	gap: 0 .7rem;
	padding-top: 15%;
	display: grid
}

#epc .r4 .inner .left .topic {
	margin-bottom: .5rem
}

#epc .r4 .inner .right .items {
	grid-template-columns: repeat(3, 1fr);
	gap: 0 .25rem;
	display: grid
}

#epc .r4 .inner .right .items>li {
	-webkit-backdrop-filter: blur(.2rem);
	-webkit-backdrop-filter: blur(.2rem);
	backdrop-filter: blur(.2rem);
	background-color: rgba(0, 0, 0, .5);
	border-radius: .18rem;
	padding: .6rem .2rem .4rem
}

#epc .r4 .inner .right .items>li .img {
	height: .85rem;
	margin: 0 auto .5rem;
	display: block
}

#epc .r4 .inner .right .items>li h3 {
	text-align: center
}

#epc .rowMap {
	width: 100%;
	background-color: #efefef;
	padding: 1rem 0 1.2rem
}

#epc .rowMap .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .6rem
}

#epc .rowMap .top>p {
	width: 50%
}

#epc .rowMap .inner {
	grid-auto-flow: column;
	-ms-flex-pack: start;
	justify-content: start;
	-ms-flex-align: center;
	align-items: center;
	display: grid
}

#epc .r7 {
	width: 100%;
	background-color: #efefef;
	/* padding-top: 1.5rem; */
	padding-bottom: 1rem;
	overflow: hidden
}

#epc .r7 .bg .sign {
	height: 13rem;
	position: absolute;
	top: 1.5rem;
	right: -25%
}

#epc .r7 .inner .top {
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: .8rem
}

#epc .r7 .inner .top .topic {
	width: 50%
}

#epc .r7 .inner .top>p {
	width: 50%;
	line-height: 1.33
}

#epc .r7 .inner .mid {
	position: relative
}

#epc .r7 .inner .mid .swiper .swiper-wrapper {
	grid-auto-flow: column;
	display: grid
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide {
	height: 5.6rem;
	cursor: pointer;
	background-color: #fff;
	border-radius: .2rem;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: .6rem 0;
	transition: box-shadow .6s cubic-bezier(.38, 0, 0, 1), background-color .6s cubic-bezier(.38, 0, 0, 1);
	display: -ms-flexbox;
	display: flex
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
	transition: color .5s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
	height: 2.09rem;
	transition: transform .6s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
	width: .5rem;
	transition: width .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask {
	height: .5rem;
	width: 100%;
	z-index: 1;
	background-color: rgba(28, 31, 31, .1);
	border-radius: 1rem;
	overflow: hidden
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .mask:after {
	content: "";
	opacity: 0;
	background: linear-gradient(90deg, #ec0012, #ec0012);
	transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
	text-align: center;
	opacity: 0;
	width: 100%;
	z-index: 9;
	line-height: .5rem;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: absolute;
	top: 0;
	left: 0
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
	height: .5rem;
	z-index: 10;
	transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
	position: relative
}

@media screen and (orientation: landscape) {
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
		background-color: #1b1f1f;
		box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
		color: #ec0012
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
		transform: scale(1.05)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
		width: 1.2rem
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
		opacity: 1;
		transform: translate(-.15rem)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
		opacity: 1
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
		transform: translate(.2rem)
	}
}

@media screen and (orientation: portrait) {
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
		opacity: 0
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
		background-color: #1b1f1f;
		box-shadow: 0 .2rem .5rem rgba(35, 38, 38, .3)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active h3,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active h3 {
		color: #ec0012
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active>img,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active>img {
		transform: scale(1.05)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon {
		width: 2.2rem;
		opacity: 1
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .txt,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .txt {
		opacity: 1;
		line-height: .8rem;
		transform: translate(-.15rem)
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask {
		height: .8rem
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .mask:after,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .mask:after {
		opacity: 1
	}

	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btnIcon .layer-icon,
	#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .btnIcon .layer-icon {
		transform-origin: 43% 100%;
		line-height: .8rem;
		transform: translate(.5rem)rotate(45deg)
	}
}

#epc .r7 .inner .mid .swiper .swiper-button-prev {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: end;
	justify-content: flex-end;
	position: absolute;
	bottom: 0;
	right: calc(100% - .45rem)
}

#epc .r7 .inner .mid .swiper .swiper-button-prev .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-button-prev .layer-icon:hover {
	background-color: #000
}

#epc .r7 .inner .mid .swiper .swiper-button-next {
	width: 30vw;
	height: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(239, 239, 239, 0) 10%, #efefef 32%);
	-ms-flex-pack: start;
	justify-content: flex-start;
	position: absolute;
	bottom: 0;
	left: calc(100% - .45rem)
}

#epc .r7 .inner .mid .swiper .swiper-button-next .layer-icon {
	width: .9rem;
	height: .9rem;
	-webkit-backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	backdrop-filter: blur(.12rem);
	background-color: rgba(156, 156, 157, .4);
	border-radius: 50%;
	transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-button-next .layer-icon:hover {
	background-color: #000
}

#epc .r7 .inner .btm {
	height: 2.4rem;
	background-color: #fff;
	border-radius: .18rem;
	margin-top: .25rem;
	overflow: hidden
}

#epc .r7 .inner .btm>.pic {
	width: 50%;
	height: 100%;
	object-fit: cover;
	background-position: top;
	display: block
}

#epc .r7 .inner .btm .col {
	width: 50%;
	height: 100%;
	position: relative
}

#epc .r7 .inner .btm .col>.mask {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%);
	position: absolute;
	top: 0;
	left: -2rem
}

#noPage .banner {
	height: 100vh;
	width: 100%;
	overflow: hidden
}

#noPage .banner .inner {
	height: 100%;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex
}

#noPage .banner .inner h1 {
	color: #34405b;
	font-size: 2.8rem;
	line-height: 1.1
}

#noPage .banner .inner .note {
	color: rgba(255, 255, 255, .4)
}

#noPage .banner .inner .set {
	width: 100%;
	grid-template-columns: auto auto;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 0 .2rem;
	padding-top: 1rem;
	display: grid
}

#noPage .banner .inner .set .layer-btn {
	margin-bottom: .5rem
}

#noPage .banner .inner .set .layer-btn .txt {
	transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#noPage .banner .inner .set .layer-btn .iconfont {
	opacity: 0;
	height: .5rem;
	transform-origin: 0;
	margin: auto 0;
	line-height: .42rem;
	position: absolute;
	top: 0;
	bottom: 0;
	right: .25rem;
	transform: translate(.12rem)
}

#noPage .banner .inner .set .layer-btn:hover .txt {
	transform: translate(-.15rem)
}

#noPage .banner .inner .set .layer-btn:hover .iconfont {
	opacity: 1;
	transform: translate(.03rem)rotate(45deg)
}

#noPage .banner .inner .set .apply .mk {
	background-color: #fff
}

#about .banner .bg .pic:after {
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(237, 237, 237, 0) 50%, #ededed 100%);
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
}

@keyframes logoSw {
	0% {
		transform: translate(0, 0)
	}

	to {
		transform: translate(-100%)
	}
}

@media screen and (max-width: 1700px) {
	.aniBox.alanGo.zio p {

		margin-top: -54%;
	}

	#home .r5 .part .box .items>li p {
		font-size: 16px;
	}
}

@media screen and (max-width: 1300px) {
	.aniBox.alanGo.zio p {
		margin-top: -38%;
		font-size: 14px;
	}

	#home .r3 .inner>.mid .right video {

		right: 0;
	}

	#home .r5 .inner .mid .r5Sw {
		height: 43%;
	}

	#home .r3 .inner>.mid .right {
		height: 47vh;
	}

	#home .r5 .part .box .items>li p {
		font-size: 12px;
	}

	#home .r5 .part .box .col {
		margin-right: .2rem;
	}
}

@media screen and (max-width: 1000px) {
	#home {
		transform: translateY(0vw);
		margin-top: -67px;
	}


	#app header nav.appNav .inner_top .logoBox .white {
		height: 1.1rem;
		display: block;
	}

	#newsing .swiper .swiper-wrapper .swiper-slide {
		height: auto;

	}

	#home .banner .inner .group .list.active {
		opacity: 1;
	}

	#home .banner .inner .group .list {
		opacity: 0;
	}

	#about .r3 .inner .topic {
		margin-bottom: 0.6rem;
	}

	#about .r2 .group .box>.items .list {

		padding: 0 1%;
	}

	.f-46 {
		font-size: .4rem;
	}

	#news .banner .inner .top {
		margin-bottom: 1rem !important;
	}

	#epc .r1 .inner .left>p {
		font-size: 14px !important;
	}

	#epc .r1 {
		padding-top: 1rem !important;
	}

	#contact .r1 .inner .group .tabBox .form .inRow .inChk input[type=checkbox]+label {
		vertical-align: top;
		white-space: inherit;
		display: inline-block;
		max-width: 92%;
	}

	#contact .r1 {
		padding-top: 0;
		padding-bottom: 1.5rem;
	}

	#contact .r1 .inner .group .tabBox h2 {
		padding: .5rem 0 .5rem;
	}

	#about .r4 .inner .mid .part .pic img {
		width: 40px;
	}

	#contact .banner .inner {
		padding-top: 6.2rem;
		padding-bottom: .2rem;
	}

	#contact .banner .inner .til .tabBox .tabList {
		margin: 0.1rem 0 !important;
	}

	#contact .banner .inner .til .tabBox .tabList img {
		width: 40px;
	}

	#contact .banner .inner .til .tabBox .tabList {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		flex-wrap: inherit;
		text-align: center;
	}

	#contact .banner .inner .til .tabBox .tabList:last-child {
		width: 100%;
	}

	#about .r4 {
		padding: 1rem 0;
	}

	#about .r4 {
		padding-bottom: 1rem !important;
	}

	#about .r3 {
		height: auto;
		padding: 9% 0;
	}

	#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide>img {
		width: 78% !important;
	}

	#about #groundSolution .r2 .inner {
		height: 150vw;
	}

	#groundSolution .r2 {
		padding-top: 0rem !important;
	}

	.f-24 {
		font-size: 14px !important;
	}

	#about .r2 .group .box>.items {
		margin-bottom: .5rem;

		font-size: 14px;
		padding-top: 0 !important;
		color: #666;
	}

	.f-60,
	.solarInner .simple_r2 .inner .group .box>p sub {
		font-size: 0.5rem;
	}

	#about .r2 {
		margin-top: 13%;
	}

	#about .banner .inner h1 {
		font-size: 11vw !important;
		line-height: 1.2 !important;
	}

	#newDetail .r1 .inner .mid .detail {
		font-size: 14px !important;
	}

	#newDetail .r1 .inner .left {

		min-height: 61vw !important;
	}

	#newDetail .r1 .inner .left .return {
		width: 1.8rem;
	}

	.cpxqkd-onea {
		padding-left: 0rem;
	}

	.cpxqkd-onea .layer-btn.bc {
		width: 137px !important;
		height: 0.8rem;
		margin-top: 0.6rem;
	}

	.cpxqkd-one {
		flex-wrap: wrap;
	}

	.cpxqkd-onea {
		width: 100%;
	}

	#newDetail .r1 {
		padding-top: 0.5rem !important;
	}

	.cpxqkd-oneb {
		width: 100%;
	}

	.cpxqkd-oneb img {
		width: 100%;
	}

	#newsing .swiper .swiper-wrapper .swiper-slide .btnIcon {
		display: none;
	}

	#newsing .swiper .swiper-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}

	#home .banner .part .box .right .chunk {
		padding: .2rem;
	}

	#home .r1 .inner {
		padding-top: 0.8rem;
	}

	#home .banner .part .box {

		padding: 0.5rem 0;
	}

	.f-70 {
		font-size: .6rem;
	}
}

@media only screen and (max-width:1000px) {
	#home .banner .inner .group .list {
		margin-bottom: 0;
	}

	.r2 .layer-btn.bc {
		margin-top: -26px;
		position: relative;
		top: 62px;
	}

	#home .r3 .inner>.mid .right {
		width: 100%;
		height: auto;
	}

	#home .r3 .inner>.mid .right video {
		width: 100%;
		display: none;
	}

	a.layer-btn.color.alanFn {
		margin-top: 25px !important;
	}

	#home .r3 .inner>.mid {
		flex-wrap: wrap;
	}

	#home .r3 .inner .top {
		padding-left: 2px;
	}

	#home .r3 .inner>.mid {
		padding: 30px 0 40px !important;
	}

	.layer-btn .iconfont img {
		filter: brightness(0) invert(1);
		width: 70%;
	}

	#app footer .btm {
		margin-top: -10%;
	}

	#app footer {
		margin-top: 0% !important;
	}

	#app footer {
		padding-top: .5rem !important;
	}

	#home .r5 .part .box .col h2 {
		font-size: 7vw !important;
	}

	#home .r5 .part .box .items>li p {
		font-size: 15px;
	}

	#home .r4 .inner .mid .list .layer-icon .icon-2 img {
		width: 20px;
	}

	#home .r5 .inner .mid .r5Sw .swiper-button-prev .layer-icon img {
		width: 68%;
	}

	#home .r5 .inner .mid .r5Sw .swiper-button-next .layer-icon img {
		width: 68%;
	}

	#home .r5 .inner .mid .r5Sw {
		height: 60%;
	}

	#home .r5 .inner .mid .r5Sw .swiper-pagination {
		position: absolute;
		top: -38px;
		right: 0;
	}

	#home .r4 .inner .clear {
		height: 1rem;
	}

	#home .r4 .inner .mid {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	#home .r3 a.layer-btn.color.alanFn {
		margin-top: 9px !important;
		position: relative;
		top: 8px;
	}

	#home .r3 .inner>.mid .left {
		width: 100%;
		max-width: 100%;
		display: flex;
		padding-top: 47px;
		flex-wrap: wrap;
	}

	#home .banner .part .box .right .chunk {
		padding: .2rem !important;
	}

	#home .r1 .inner .group .btm {
		padding-top: 0rem;
	}

	.layer-logoSw {
		padding: 0;
	}

	#home .banner .part .box .left .mk {
		z-index: -1;
		top: -1.6rem;
		right: -5.5rem;
	}
}
.pages {
	text-align: center;
	margin-top: 40px;
}

.pages li {
	display: inline-block;
	vertical-align: top;

}

.pages li a {
    display: block;
    background: #fff;
    padding: 5px 14px;
    font-size: 13px;
    margin: 0 3px;
    color: rgb(90, 88, 88);
    border-radius: 5px;
    border: 2px solid #efeff0;
}

.pages li:hover a,
.pages li.active a {
	background: #d80c18 ;
	color: #fff;
}