@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap";

*,
:after,
:before {
  box-sizing: border-box;
  backface-visibility: hidden;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans SC", Microsoft JhengHei, Source Han Sans CN, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif
}

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

img {
  vertical-align: middle;
  border: 0;
  /* width: 100%; */
}

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: #1C1C1C
}

::-webkit-scrollbar-thumb {
  width: 3px;
  background-color: #0057B7;
  border: 1px solid #1C1C1C;
  border-radius: 4px
}

::-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
}

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
}

.icon-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 15px;
  width: 22px;
  height: 22px;
  background: url(../img/icon-menu.png) no-repeat center center;
  background-size: 100% auto;
  z-index: 12;
}

.icon-close {
  display: none;
}

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

.over-3 {
  -webkit-line-clamp: 3;
  height: 3.9em;
  -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: .25rem
}

.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%)
  }
}

@font-face {
  font-family: iconfont;
  src: url(../font/iconfont.woff2)format("woff2"), url(../font/iconfont.woff)format("woff"), url(../font/iconfont.ttf)format("truetype")
}

.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: Noto Sans SC;
  font-weight: 100
}

.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: Noto Sans SC;
  font-weight: 100
}

.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: Noto Sans SC;
  font-weight: 400
}

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

.word-xb {
  letter-spacing: -.03em;
  font-family: Noto Sans SC;
  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 {
  letter-spacing: -.03em;
  font-family: Noto Sans SC;
  font-weight: 700
}

.num-t {
  font-family: AlibabaPuHuiTi_2_35_Thin
}

.num-l {
  font-family: AlibabaPuHuiTi_2_45_Light
}

.num-r {
  font-family: AlibabaPuHuiTi_2_55_Regular
}

.num-b,
.solarInner .simple_r2 .inner .group .box>p sub {
  letter-spacing: -.02em;
  color: #0057B7;
  font-family: AlibabaPuHuiTi_2_85_Bold
}

.num-xb {
  letter-spacing: -.02em;
  font-family: AlibabaPuHuiTi_2_95_ExtraBold
}

.num-h {
  letter-spacing: -.02em;
  font-family: AlibabaPuHuiTi_2_105_Heavy
}

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

.mc {
  color: #0057B7
}

.bc {
  color: #232626
}

.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.35
}

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

.layer-icon .icon {
  display: block
}

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

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

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

.layer-btn.bc {
  background-color: #0057B7;
  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;
  color: #fff;
  transition: color .5s cubic-bezier(.38, 0, 0, 1);
  position: relative
}

.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-color: #0057B7;
}

.layer-btn.color:hover .mk {
  background-color: #0264cc;
  transition: background-color .3s cubic-bezier(.38, 0, 0, 1) .2s, box-shadow .3s cubic-bezier(.38, 0, 0, 1);
}

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

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

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

.layer-btn .iconfont {
  transform-origin: 0 100%;
  z-index: 5;
  color: #FFF;
  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
}

@media screen and (orientation:landscape) {
  .layer-btn:hover.bc {
    background-color: #4BB5E8;
    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) {
    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, #ffeb00, #4BB5E8);
  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: #4BB5E8
}

.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: 0;
  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(30%)
}

.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: #4BB5E8
}

.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: 1.2rem;
  opacity: .3;
  width: 1.8rem;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  transition: .3s
}

.layer-logoSw .swiper-wrapper .swiper-slide:hover .photo>img {
  opacity: 1 !important;
  filter: grayscale(0);
}

.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;
  padding-left: .33rem;
}

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

.layer-map .left .mid .list .mr {
  margin-right: .1rem;
  color: #0057B7 !important;
}

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

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

.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 {
  display: none;
  background-color: #4BB5E8;
  border-color: #4BB5E8
}

.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: 100%;
  height: 100%;
  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>.f-60:first-of-type {
  padding-left: .1rem;
}

.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: absolute;
  top: 0;
  left: 0
}

#app header .navMask {
  z-index: 1;
  width: 100%;
  height: 7rem;
  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)
}

#app header .pcNav {
  height: 1.4rem;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 0;
  padding-top: .2rem;
  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: .55rem;
  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: .36rem;
  position: relative
}

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

#app header .pcNav .items>li>a {
  padding: 0 .15rem;
  line-height: 1rem;
  font-weight: normal;
  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: #FFF;
  font-weight: bold;
}

#app header .pcNav .items>li .navToggle,
#app header .pcNav .other .mobile-lang-current,
#app header .pcNav .other .mobile-lang-divider,
#app header .pcNav .other .mobile-lang-link {
  display: none;
}

#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: .14rem
}

#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: #4BB5E8
}

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

#app header .pcNav .set .search {
  pointer-events: auto;
  width: 2.6rem;
  height: .4rem;
  margin-right: .1rem;
  transition: none;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff
}

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

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

#app header .pcNav .set .search .layer-icon:disabled {
  cursor: not-allowed;
  background: #4BB5E8
}

#app header .pcNav .set .search .layer-icon:disabled .iconfont {
  color: #FFF
}

#app header .pcNav .set .search .putIn {
  width: 2rem;
  height: 100%;
  opacity: 1;
  z-index: 3;
  transform-origin: 100%;
  background: #fff;
  border: none;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding: 0 .22rem;
  transition: none;
  position: static;
  top: auto;
  right: auto;
  transform: none;
  flex: 1 1 auto
}

#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: #4BB5E8
}

@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: #4BB5E8;
  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
}

#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 {
  position: fixed;
  background-color: rgba(0, 0, 0, .8)
}

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

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

#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: absolute;
  top: 1.4rem;
  left: 0
}

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

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

#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, #ffeb00, #4BB5E8);
  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: #1C1C1C;
  padding-top: 1.2rem
}

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

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

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

#app footer .top .items>li {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-right: .64rem;
  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-18,
#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-18: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.8rem;
  padding: .12rem 0
}

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

#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 h3 {
  color: #4BB5E8;
}

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

#app footer .mid .shareBox .share .iconfont {
  transition: all 0.2s;
}

#app footer .mid .shareBox .share:hover .iconfont {
  font-size: .26rem;
}

#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 .6rem;
  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;
  position: relative;
}

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

#loading .svgIcon .cls-b,
#loading .svgIcon .cls-c {
  fill: #000;
  transition: transform 1.2s cubic-bezier(.38, 0, 0, 1);
  transform-origin: center center !important;
}

#loading .svgIcon .cls-b.active,
#loading .svgIcon .cls-c.active {
  transform: scale(50);
}

#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(#4BB5E8 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: #4BB5E8;
  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, .0)
}

#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 - 10vw);
  width: 100%;
  max-height: 78vh;
  -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;
  left: .6rem
}

#home .banner .inner .group .list .set .tab {
  text-align: center;
  border: 3px solid #4BB5E8;
  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: #4BB5E8;
  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: #4BB5E8;
  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
}

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

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

#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: #EEEEEF;
  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
}

#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: .8rem;
  display: block;
  margin: 0 0 0 auto;
}

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

#home .banner .part .box .right .chunk .col h4 {
  color: #0057B7;
  text-align: left
}

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

#home .banner .part .box .right .chunk .col p {
  color: #000;
  text-align: left
}

@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.active .bg {
  transform: translateY(-10vw)
}

#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 .alanFn {
  line-height: 24px;
}

#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: 1.0rem;
  margin-bottom: .3rem;
  display: block
}

#home .r1 .inner .group .list .left h3 {
  margin-bottom: .32rem;
  line-height: 1.2;
  overflow: hidden;
  color: #0057B7;
}

#home .r1 .inner .group .list .left h3 span {
  display: block;
  font-size: 0.35rem;
}

#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;
  background: url(../img/bg-pro.jpg) no-repeat center center;
  background-size: cover;
  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
}

#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;
  display: none;
  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: .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%
}

#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: .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%
}

#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: transparent;
  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: transparent;
  background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, #efefef 100%);
  position: absolute;
  bottom: 0;
  right: 0
}

#home .r3 {
  padding-bottom: 1.2rem
}

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

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

#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: 4rem;
  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
}

#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%;
  opacity: 0;
  line-height: .8rem;
  transition: opacity .5s cubic-bezier(.38, 0, 0, 1), transform .5s cubic-bezier(.38, 0, 0, 1);
  position: absolute;
  transform: scale(0)
}

@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: #4BB5E8;
    transform: scale(1)
  }

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

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

@media screen and (orientation:portrait) {
  #home .r4 .inner .mid .list .layer-icon {
    background-color: #4BB5E8;
    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: 12rem;
  position: absolute;
  top: 4.5rem;
  left: -8rem;
}

#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(32, 74, 147, .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: #0057B7;
  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
}

#home .r5 .inner .mid .r5Sw {
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  padding-top: .6rem;
  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: 0;
  left: 25%
}

#home .r5 .inner .mid .r5Sw .swiper-button-prev .layer-icon {
  width: .9rem;
  height: .9rem;
  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: #4BB5E8
}

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

#home .r5 .inner .mid .r5Sw .swiper-button-next .layer-icon {
  width: .9rem;
  height: .9rem;
  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: #4BB5E8
}

#home .r5 .inner .mid .r5Sw .swiper-pagination {
  position: absolute;
  top: 0;
  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: 4rem;
  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: flex-end;
  margin-right: .8rem;
  display: -ms-flexbox;
  display: flex
}

#home .r5 .part .box .col h2 {
  line-height: 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: 5.5rem;
  padding: .2rem 0
}

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

#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: #4BB5E8;
  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, #ffeb00, #4BB5E8)
}

#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: #4BB5E8
}

#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, #ffeb00, #4BB5E8);
  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: #4BB5E8
  }

  #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: #4BB5E8
}

#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: #4BB5E8
}

#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: #4BB5E8
}

#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: #4BB5E8;
  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: #4BB5E8;
  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: 100vh;
  overflow: hidden
}

#roofDetail .banner .bg .pic:after {
  content: "";
  /* background-color: rgba(0, 0, 0, .4) */
}

#roofDetail .banner .inner {
  height: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 1.6rem
}

#roofDetail .banner .inner .top {
  width: 100%;
  margin-bottom: 1.6rem;
  margin-top: 5.2rem;
}

#roofDetail .banner .inner .top h1 {
  line-height: 1.1
}

#roofDetail .banner .inner .top small {
  display: block;
  font-size: .50rem;
}

#roofDetail .banner .inner .group {
  width: 100%
}

#roofDetail .banner .inner .group p {
  width: 7.2rem
}

#roofDetail .r1 {
  padding: 1.2rem 0
}

#roofDetail .r1 .inner .mid {
  width: 100%
}

#roofDetail .r1 .inner .mid .tabItem {
  width: 100%;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: .2rem;
  margin-bottom: .8rem;
  display: grid
}

#roofDetail .r1 .inner .mid .tabItem .tab {
  height: 2rem;
  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: .5;
  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 .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 .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: .5rem 50% .5rem .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: 2%
}

#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, #ffeb00, #4BB5E8);
  transition: opacity .5s cubic-bezier(.38, 0, 0, 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, #4BB5E8 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, #ffeb00, #4BB5E8);
  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, #ffeb00, #4BB5E8);
  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: #4BB5E8
  }

  #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: #4BB5E8
  }

  #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, #ffeb00, #4BB5E8);
  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: #4BB5E8
}

#roofDetail .r5 .inner>.box>li:first-of-type .photo {
  border-color: #4BB5E8
}

#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: #4BB5E8
}

#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, #4BB5E8 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, #ffeb00, #4BB5E8);
  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, #ffeb00, #4BB5E8);
  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: 1.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
}

#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: #0057B7;
  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: #4BB5E8
}

#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: .6rem;
  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, #ffeb00, #4BB5E8);
  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
}

#news.tags-page .banner .inner .mid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .24rem;
  margin-bottom: .36rem
}

#news.tags-page .banner .inner .mid .box {
  min-height: 3.3rem;
  display: block
}

#news.tags-page .banner .inner .mid .box .msg {
  min-height: 3.3rem;
  padding-bottom: .32rem;
  display: flex;
  flex-direction: column
}

#news.tags-page .banner .inner .mid .box .msg .til {
  padding: .28rem .28rem .2rem
}

#news.tags-page .banner .inner .mid .box .msg .til h3 {
  font-size: .22rem;
  line-height: 1.45;
  height: auto;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden
}

#news.tags-page .banner .inner .mid .box .msg .til .desc {
  color: rgba(35, 38, 38, .68);
  font-size: .15rem;
  line-height: 1.8;
  margin-top: .16rem;
  min-height: 5.4em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden
}

#news.tags-page .banner .inner .mid .box .msg .note {
  margin-top: auto;
  padding: 0 .28rem 0.2rem;
}

#news.search-page .banner .inner .mid {
  margin-bottom: .4rem
}

#news.search-page .search-page__keyword {
  color: rgba(255, 255, 255, .9);
  font-size: .18rem;
  line-height: 1.7;
  margin: .16rem 0 .36rem
}

#news.search-page .search-empty {
  color: #232626;
  background: rgba(255, 255, 255, .92);
  border-radius: .16rem;
  padding: .32rem .36rem;
  font-size: .16rem;
  line-height: 1.8;
  grid-column: 1 / -1
}

@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
}

#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:hover {
  color: #0057B7
}

#news .banner .btm .pager>a.on {
  color: #232626
}

#news .banner .btm .pagination {
  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 .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:hover {
  background-color: #0057B7
}

#news .banner .btm .set .layer-icon:hover i {
  color: #FFF;
}

#news .banner .btm .set .layer-icon.disable>i {
  color: rgba(0, 0, 0, .3)
}

#news .banner .btm .set .layer-icon:hover.disable {
  background-color: #f2f2f2;
}

#newDetail .r1 {
  background-color: #f7f7f7;
  padding-top: 3rem;
  padding-bottom: 1rem
}

#newDetail .r1 .inner {
  max-width: 15rem;
  width: 78%;
  background-color: #fff;
  border-radius: .24rem;
  margin: 0 auto;
  padding-top: 1rem
}

#newDetail .r1 .inner .left {
  width: 22%;
  padding: 0 .3rem;
  position: absolute;
  top: 0;
  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
}

#newDetail .r1 .inner .left .lab>span {
  padding-left: .18rem;
  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 .note>li:hover {
  background-color: #0057B7;
  color: #FFF;
}

#newDetail .r1 .inner .left .return {
  width: .8rem;
  cursor: pointer;
  margin-top: 1.3rem
}

#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 .left .return .arrow:after {
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, #4BB5E8, #4BB5E8);
  transition: opacity .5s cubic-bezier(.38, 0, 0, 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: 9rem;
  width: 56%;
  margin: 0 auto;
  padding-bottom: 1.2rem
}

#newDetail .r1 .inner .mid .topic {
  padding-bottom: .6rem
}

#newDetail .r1 .inner .mid .topic h1 {
  margin-bottom: .6rem;
  line-height: 1.1
}

#newDetail .r1 .inner .mid .topic p {
  position: relative
}

#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
}

#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.5rem;
  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, #4BB5E8, #4BB5E8);
  transition: opacity .5s cubic-bezier(.38, 0, 0, 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);
  margin-top: .1rem
}

#newDetail .r1 .inner .mid .set .col.prevEl {
  padding-right: .5rem
}

#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: 65%;
}

@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: 1.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
}

#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 .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, #4BB5E8 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, #ffeb00, #4BB5E8);
  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%;
  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;
  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: 1.6rem
}

#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: 1.5rem;
  line-height: 1.2
}

#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: #4BB5E8;
  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, #4BB5E8 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, #ffeb00, #4BB5E8);
  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 1.2rem 0 .15rem;
  position: relative
}

#reference .banner .inner .mid .box .msg h3 {
  line-height: 1.2
}

#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;
    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
}

#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: #4BB5E8;
  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: #4BB5E8
}

#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: #4BB5E8;
  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, #ffeb00, #4BB5E8);
  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, #ffeb00, #4BB5E8);
  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: #4BB5E8;
    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, #ffeb00, #4BB5E8);
  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: #4BB5E8
  }
}

#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 {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0) 60%, #efefef 95%);
  position: absolute;
  top: 0;
  left: 0
}

#contact .banner .inner {
  padding-top: 5.2rem;
  padding-bottom: .8rem
}

#contact .banner .inner .til {
  border-bottom: 1px dashed rgba(60, 65, 65, .5);
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  position: relative
}

#contact .banner .inner .til h1 {
  line-height: 1
}

#contact .banner .inner .til .tabBox {
  width: 100%;
  margin-top: .3rem
}

#contact .banner .inner .til .tabBox .tabList {
  margin-right: .5rem
}

#contact .banner .inner .til .tabBox .tabList .iconfont {
  margin-right: .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: #4BB5E8 !important;
  border: 1px solid #4BB5E8 !important;
  border-radius: 50%;
  position: absolute;
  top: .15rem;
  left: .15rem
}

#contact .banner .inner .mid .left .box .list .icon .dot.mc {
  background-color: #4BB5E8;
  border-color: #4BB5E8
}

#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: 52%;
  height: 40%;
  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: .7rem;
  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: .9rem 0 .6rem
}

#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: #4BB5E8
}

#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: #4BB5E8
}

#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 #4BB5E8;
  border-left: 1px solid #4BB5E8;
  border-right: 1px solid #4BB5E8;
  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%
}

#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: #4BB5E8;
  --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: #4BB5E8;
  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: #4BB5E8
  }
}

@media screen and (orientation:portrait) {
  .solarInner .AT_r3 .inner .mid .chunk.swiper-slide-active h3 {
    height: 1.8rem;
    color: #4BB5E8
  }
}

.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 #4BB5E8;
  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, #ffeb00, #4BB5E8);
  -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: Noto Sans SC;
    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, #ffeb00, #4BB5E8);
  -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: #4BB5E8
}

.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: #4BB5E8
}

.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, #4BB5E8 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, #ffeb00, #4BB5E8);
  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: Noto Sans SC;
    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, #ffeb00, #4BB5E8);
  -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
}

#about .r1 {
  background-color: #efefef;
  padding: 2.4rem 0 2.2rem;
  overflow: hidden
}

#about .r1 .bg .sign {
  height: 12rem;
  position: absolute;
  bottom: 0.1rem;
  left: -45%;
}

#about .r1 .inner .group {
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  margin-bottom: .4rem;
  display: grid
}

#about .r1 .inner .group .left {
  min-height: 4.7rem
}

#about .r1 .inner .group .left h2 {
  margin-bottom: .1rem
}

#about .r1 .inner .group .left small {
  line-height: 1.1;
  display: block
}

#about .r1 .inner .group .left p {
  margin: .3rem 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: .8rem;
  display: block;
  margin: 0 0 0 auto;
}

#about .r1 .inner .part .left .chunk .col {
  width: 100%;
  text-align: center
}

#about .r1 .inner .part .left .chunk .col h4 {
  text-align: left;
  font-weight: bold;
  color: #0057B7;
}

#about .r1 .inner .part .left .chunk .col h4 em {
  color: inherit;
  letter-spacing: -.04em;
  margin-right: .1rem;
  font-family: inherit;
  line-height: 1;
  color: #0057B7;
}

#about .r1 .inner .part .left .chunk .col p {
  color: #000;
  text-align: left
}

#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)
}

@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: 100vh;
  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(-1.2rem)
}

#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
}

#about .r2 .group .box>.items .list {
  display: none;
  opacity: 1;
  transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
  position: relative;
  top: 0;
  left: 0
}

#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: #4BB5E8;
  background-color: #1C1C1C;
  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;
  padding-left: .33rem;
}

#about .r2 .group .mapBox .left .mid .list {
  height: 1rem;
  width: 3.3rem;
  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;
  margin-left: -.33rem;
}

#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: #4BB5E8;
  display: none;
  border-color: #4BB5E8
}

#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: 100%;
  height: 100%;
  /*width: 52%;
  height: 40%;*/
  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: 100vh
}

#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.4rem
}

#about .r3 .inner h3 {
  margin-bottom: .2rem;
  line-height: 1.1
}

#about .r4 {
  background-color: #efefef;
  padding: 1.3rem 0 2rem
}

#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: 1.5rem;
  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: .5rem .6rem .3rem;
  transition: all .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r4 .inner .mid .part .pic {
  height: 2rem;
  width: 80%;
  background-size: contain;
  margin: 0 auto;
  display: block
}

#about .r4 .inner .mid .part h3 {
  text-align: justify;
  margin-top: .2rem;
  margin-bottom: .2rem;
  padding: 0 .6rem
}

#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, #4BB5E8 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 {
    background-color: rgba(0, 0, 0, 0.6);
  }

  #about .r5 .inner .group .box:hover .msg h3 {
    color: #4BB5E8;
    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, #ffeb00, #4BB5E8);
  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: #4BB5E8
}

#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, #ffeb00, #4BB5E8);
  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: 11%
}

#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;
  justify-items: center;
}

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

#groundSolution .banner .inner .group .col .icon {
  height: .5rem;
  z-index: 10;
  margin: auto 0;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0
}

#groundSolution .banner .inner .group .col h2 {
  line-height: 1.5
}

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

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

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

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

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

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper {
  grid-auto-flow: column;
  display: grid;
  justify-content: start;
}

#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: .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
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide h3 {
  transition: color .5s cubic-bezier(.38, 0, 0, 1);
  width: 75%;
  margin: 0 auto;
  text-align: center;
}

#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, #ffeb00, #4BB5E8);
  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; */
    background-color: #fff;
    box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
  }

  #groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
    color: #4BB5E8
  }

  #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: 28.5%;
  right: 0%
}

#groundSolution .r4 .inner .mid .imgBox .years>em {
  letter-spacing: 0;
  text-indent: -.60em;
  font-size: 2.6rem;
  line-height: .6;
  display: 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: -0.7rem;
  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: 1.02rem;
  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, #ffeb00, #4BB5E8);
  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: #4BB5E8
  }

  #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: #4BB5E8
  }

  #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, #ffeb00, #4BB5E8);
  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: #4BB5E8
  }

  #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: #4BB5E8
  }

  #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: 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
}

#epc .banner .inner small {
  text-align: center;
  margin-top: .2rem;
  color: #FFF;
}

#epc .banner .inner h1 {
  color: #fff;
  letter-spacing: -.04em;
  text-align: center;
  line-height: .8
}

#epc .r1 {
  width: 100%;
  background-color: #efefef;
  padding: 2.4rem 0 2rem;
  overflow: hidden
}

#epc .r1 .bg .sign {
  height: 8rem;
  position: absolute;
  bottom: -0.2rem;
  left: -27%;
}

#epc .r1 .inner {
  grid-template-columns: 7.5rem calc(100% - 7.2rem);
  gap: .4rem;
  margin-bottom: .4rem;
  display: grid
}

#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: 6.7rem;
  margin: 0 auto;
  /* position: absolute; */
  top: -.8rem;
  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;
  transition: ease-in-out .3s;
}

#epc .r2 .inner .right .items>li:hover {
  background-color: rgba(0, 87, 183, .8);
  transform: translate(0, -10px);
}

#epc .r2 .inner .right .items>li .img {
  height: 1.05rem;
  margin: 0 auto .5rem;
  display: block
}

#epc .r2 .inner .right .items>li h3 {
  text-align: center;
  color: #FFF;
}

#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:hover {
  box-shadow: 0 .2rem .5rem -5px rgba(35, 38, 38, .2);
}

#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: .6rem
}

#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: 6%;
  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;
  transition: ease-in-out .3s;
}

#epc .r4 .inner .right .items>li:hover {
  background-color: rgba(0, 87, 183, .8);
  transform: translate(0, -10px);
}

#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;
  color: #FFF;
}

#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, #ffeb00, #4BB5E8);
  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; */
    background-color: #fff;
    box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
  }

  #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover h3 {
    color: #4BB5E8
  }

  #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: #fff;
    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: #4BB5E8
  }

  #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
}

@keyframes logoSw {
  0% {
    transform: translate(0, 0)
  }

  to {
    transform: translate(-100%)
  }
}

/* 唤醒表单 */
.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  background-color: #f6f6f6;
  margin: 8% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 98%;
  max-width: 1000px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.close-btn {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 5px;
  z-index: 998;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.home-btn {
  margin-top: 0.5rem;
}

.home-btn img {
  display: block;
  width: 2.60rem;
  height: auto;
}