@import "fft.css";

*,
:after,
:before {
    box-sizing: border-box;
    backface-visibility: hidden;
    margin: 0;
    padding: 0;
}

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

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

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

textarea,
input {
    text-indent: 10px
}

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

label,
button,
a {
    cursor: pointer
}

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

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

.disable-hover {
    pointer-events: none
}

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

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

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

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

::-webkit-scrollbar-thumb {
    width: 3px;
    background-color: #ca1b22;
    border: 1px solid #000;
    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
}

#product .row_nav_box {
    z-index: 5;
    position: relative
}
#product .row_nav_box .pub_case {
    min-height: 4.6875vw;
    position: relative
}
#product .row_nav_box .swiper_sel_case .sel_o_box {
    align-items: flex-start;
    display: flex;
    position: relative
}
#product .row_nav_box .swiper_sel_case .sel_o_box .btn_sty_q {
    padding: .2rem .3rem;
    cursor: pointer;
    background: #fff;
    border-radius: 2.34375vw;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(41, 46, 46, .3);
    border-radius: 2rem;
}
#product .row_nav_box .swiper_sel_case .sel_o_box .btn_sty_q:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.435,.25,.15,.965);
    background-color: #ca1b22
}
#product .row_nav_box .swiper_sel_case .sel_o_box .btn_sty_q span {
    z-index: 3;
    font-weight: 700;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    position: relative
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right {
    width: calc(100% - 11.4583vw);
    pointer-events: none;
    margin-top: -.52083vw;
    margin-bottom: -26.0417vw;
    padding-top: .52083vw;
    padding-bottom: 26.0417vw;
    -webkit-mask: linear-gradient(90deg, #f0f7f7 0%, #f0f7f7 90%, rgba(240, 247, 247, 0) 99%);
    mask: linear-gradient(90deg, #f0f7f7 0%, #f0f7f7 90%, rgba(240, 247, 247, 0) 99%)
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .swiper {
    pointer-events: all;
    overflow: visible
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .swiper .swiper-slide {
    width: auto
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .sel_block {
    padding: .2rem .3rem;
    box-sizing: border-box;
    border-radius: 4.6875vw;
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .sel_block .sel_sha {
    border-radius: 2.34375vw
}
#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .sel_block .sel_show span {
    color: #000;
}
#product .sel_block {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: block;
    position: relative
}
#product .sel_block .sel_show {
    cursor: pointer;
    color: #ca1b22;
    height: 100%;
    z-index: 2;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative
}
#product .sel_block .sel_show span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
#product .sel_block .sel_show i {
    width: 2.70833vw;
    transform-origin: 20%;
    padding-left: .52083vw;
    padding-right: 1.5625vw;
    font-size: .625vw;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    transform: scale(.8)
}
#product .sel_block .sel_box {
    width: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: 1.25vw;
    transition: opacity .2s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 101%;
    left: 0;
    overflow: hidden;
}
#product .sel_block .sel_box ul {
    max-height: 18.2292vw;
    overflow-y: auto
}
#product .sel_block .sel_box ul::-webkit-scrollbar {
    width: 5px;
    background-color: #fff;
}
#product .sel_block .sel_box ul::-webkit-scrollbar-thumb {
    width: 5px;
    cursor: pointer;
    background-color: #ca1b22
}
#product .sel_block .sel_box ul li {
    color: #a4aaa7;
    cursor: pointer;
    padding:.1rem;
    font-size: .16rem;
    font-weight: 600;
    line-height: .16rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
}
#product .sel_block .sel_box ul li:hover {
    color: #fff;
    background-color: #ca1b22
}
#product .sel_block .sel_sha {
    content: "";
    pointer-events: none;
    width: 100%;
    z-index: 1;
    height: 100%;
    opacity: 0;
    background-color: #fff;
    border: 2px solid #ca1b22;
    border-radius: 1.82292vw;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), height .3s cubic-bezier(.435, .25, .15, .965) .1s, box-shadow .3s cubic-bezier(.435, .25, .15, .965) .1s, border-radius .3s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    left: 0
}
#product .sel_block.on .sel_sha {
    opacity: 1;
    border-radius: 1.25vw !important;
}
#product .sel_block.on .sel_show i {
    opacity: 0;
    pointer-events: none
}
#product .sel_block.on .sel_box {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .2s cubic-bezier(.435, .25, .15, .965) .3s;
    background-color: #fff;
    border: 1px solid #ca1b22;
    overflow: hidden;
}
#product .row_nav_box .swiper_sel_case .sel_o_box .onc{
    border: 1px solid #ca1b22;
    background-color: #ca1b22;
    color: #fff;
}

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,
#product .banner .btm .line,
#blog .banner .btm .line,
#newDetail .r1 .inner .mid .line:after,
#news .banner .btm .line,
#news .banner .inner .top .yearBox .yearDown .arrow,
.imgPopup .popCon .nextBtn,
.imgPopup .popCon .prevBtn,
.layout-middle,
#about .r1 .inner .part .right .player,
#resource .banner .inner .mid .group .box-3 .box .msg .play,
#resource .banner .inner .top .part .typeBox .items .list .dot:after,
#solartrack .r8 .inner .right .midIcon,
#roofSolution .r10 .inner .mid .tab .mask:after,
#roofSolution .r10 .inner .mid .group .right .part .dot .img,
#roofSolution .r1 .inner .clip .svgIcon,
#loading .svgIcon,
.bigPop .imgBox,
.layer-appBigBtn {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0
}

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

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

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

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

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

.pic {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}
#home .photo .tpicw {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 50%;
}

.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,
#product .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,
#roofDetail .r1 .inner .set .col .arrow,
.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,
#roofDetail .r1 .inner .set .col,
#product .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,
#product .banner .inner .mid .box .photo .btnIcon>.mask:after,
#product .banner .inner .mid .box .photo .btnIcon>.mask,
#product .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,
#roofDetail .r1 .inner .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,
#product .banner .btm .pager>a.on,
#blog .banner .btm .pager>a.on,
#news .banner .btm .pager>a.on {
    font-size: .36rem
}

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

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

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

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

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

.f-24,
#searchResult .banner .btm .pager>a,
#about .r6 .inner .btm .pager>a,
#reference .banner .btm .pager>a,
#product .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/font_4640056_uavfz20zxb.woff2)format("woff2"), url(../font/font_4640056_uavfz20zxb.woff)format("woff"), url(../font/font_4640056_uavfz20zxb.ttf)format("truetype")
}

@font-face {
    font-family: AlibabaPuHuiTi_2_35_Thin;
    src: url(../font/AlibabaPuHuiTi-3-35-Thin.e0836d37.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: AlibabaPuHuiTi_2_45_Light;
    src: url(../font/AlibabaPuHuiTi-3-45-Light.c809a744.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    src: url(../font/AlibabaPuHuiTi-3-55-Regular.02f0dba1.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    src: url(../font/AlibabaPuHuiTi-3-85-Bold.a7f822d4.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: AlibabaPuHuiTi_2_95_ExtraBold;
    src: url(../font/AlibabaPuHuiTi-3-95-ExtraBold.0a882f8a.ttf)format("truetype");
    font-display: swap
}

@font-face {
    font-family: AlibabaPuHuiTi_2_105_Heavy;
    src: url(../font/AlibabaPuHuiTi-3-105-Heavy.c2d5aff9.ttf)format("truetype");
    font-display: swap
}

.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-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-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-weight: 400
}

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

.word-xb {
    letter-spacing: -.03em;
    
    font-weight: 600
}

.word-h,
#searchResult .banner .btm .pager>a,
#about .r6 .inner .btm .pager>a,
#reference .banner .btm .pager>a,
#product .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-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;
    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: #ca1b22
}

.bc {
    color: #000
}

.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: .6rem;
    cursor: pointer;
    border-radius: 1rem;
    padding: 0 .35rem;
    position: relative;
    overflow: hidden
}

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

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

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

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

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

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

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

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

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

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

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

    .layer-btn:hover .iconfont:not(.mv) {
        color: #000;
        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, #ca1b22, #ca1b22);
    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: #ca1b22
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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.down nav.appNav .inner_top #app-menu .line:before {
    background-color: #000;
}

#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: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    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: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    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: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

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

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

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

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

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

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

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

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

#app header.down {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    top: 0;
}
#app header.up{
    top: -100%;
}

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

#app header.down+.pageTree {
    background-color: #fff;
    top: 1.2rem
}
#app header.down .wc{
    color: #000;
}
#app header.down .pcNav .items>li .child>li>a{
    color: #000;

}
#app header.down .navMask{
    background-color: #fff;
}
#app header.open {
    background-color: transparent
}

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

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

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

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

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

#app .pageTree .group .items .iconfont {
    margin: 0 .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, #ca1b22, #ca1b22);
    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: #000;
    font-size: 12px
}

#app main .rowContact .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
    color: #000;
    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: #000;
    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: #fff;
    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: #000;
    padding-top: 1.2rem
}

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

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

#app footer .top .items {
    width: 50%;
    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: .8rem;
    display: -ms-flexbox;
    display: flex
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#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);
    background-size: contain;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#loading .svgIcon .cls-b {
    fill: #000;
    transition: transform 1.2s cubic-bezier(.3, 0, 0, 3);
    transform-origin: 50% 56% !important
}

#loading .svgIcon .cls-b.active {
    transform: scale(60)
}

#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(#ca1b22 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 {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0px auto;
    padding-bottom: 20px;
}

.dotFn:before {
    content: "";
    width: 50px;
    height: 2px;
    transform-origin: 0;
    opacity: 0;
    background-color: #ca1b22;
    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: calc(50% - 25px);
    bottom: 0;
    transform: skew(-10deg)
}

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

.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: #fff;
    display: block
}

#home .row {
    width: 100%
}

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

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

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

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

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

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

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

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

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

#home .banner .inner {
    position: relative
}

#home .banner .inner .group {
    height: calc(100vh);
    width: 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: 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 #ca1b22;
    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: #ca1b22;
    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: #ca1b22;
    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: #000
}

#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 {
    flex-direction: row; /* 改为横向排列 */
    position: absolute;
    bottom: 1rem; /* 距离底部1rem */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中调整 */
    /* 其他保持原样 */
    height: auto;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    display: flex;
    right: auto;
    top: auto;
}

#home .banner .inner .group .bannerPage .bannerDot {
    cursor: pointer;
    width: .12rem;
    height: .12rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    margin: 0 .12rem;
    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: #fff;
    transition: transform 1s cubic-bezier(.38, 0, 0, 1);
    transform: translateY(15vw)
}

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

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

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

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

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

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

#home .banner .part .box {
    width: 100%;
    z-index: 4;
    grid-template-columns: 100%;
    grid-auto-rows: auto; /* 自动行高 */
    padding: .3rem 0;
    display: grid;
    position: relative;
    gap: 1rem; /* 可选：添加行间距 */
}

#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;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#home .banner .part .box .left .list {
    z-index: 12;
    position: relative;
    width: 100%;
    text-align: center;
}

#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: auto; /* 单行，高度自适应内容 */
    grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
    gap: .2rem;
    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;
    box-shadow: 
        0 0px 8px rgba(0, 0, 0, 0.08),
        0 0px 4px rgba(0, 0, 0, 0.05);
}

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

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

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

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

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

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

    #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%;
    padding-top: .2rem;
}

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

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

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

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

#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%);
    height: 8rem;
    background-color: #000;
    border-radius: .2rem;
    padding: 0 .2rem .2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.08), 0 0px 4px rgba(0, 0, 0, 0.05);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    #home .r1 .inner .group .list .right .tree .swiper-wrapper .swiper-slide:hover h5 {
        color: #000;
        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: #000;
    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: #000;
    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(5, 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%, #fff 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%, #fff 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;
    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: linear-gradient(-90deg, rgba(239, 239, 239, 0) 0%, #fff 100%);
    position: absolute;
    bottom: 0;
    left: 0
}

#home .r2 .inner .mid .set .rightMk {
    width: 6rem;
    height: 100%;
    background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, #fff 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 .r3 .inner .group .r3Sw {
    width: 95%;
    -webkit-transform: translate3d(40vw, 0, 0);
    transform: translate3d(40vw, 0, 0);
    opacity: 0;
    -webkit-transition: opacity 1s var(--ease), -webkit-transform 1.5s var(--ease);
    transition: opacity 1s var(--ease), -webkit-transform 1.5s var(--ease);
    transition: opacity 1s var(--ease), transform 1.5s var(--ease);
    transition: opacity 1s var(--ease), transform 1.5s var(--ease), -webkit-transform 1.5s var(--ease)
}

#home .r3 .inner .group .r3Sw .swiper-wrapper {
    display: grid;
    grid-auto-flow: column
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide {
    display: block;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo {
    padding-bottom: 125%;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .2rem;
    overflow: hidden;
    cursor: pointer
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo .pic {
    -webkit-transition: -webkit-transform 1s var(--ease1);
    transition: -webkit-transform 1s var(--ease1);
    transition: transform 1s var(--ease1);
    transition: transform 1s var(--ease1), -webkit-transform 1s var(--ease1)
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo .layer-set {
    position: absolute;
    right: .2rem;
    top: .2rem;
    z-index: 2;
    width: .5rem;
    height: .5rem
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo:hover .layer-set {
    border-color: #afe226
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo:hover .layer-set>.mask {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0)
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo:hover .layer-set .layer-icon .iconfont {
    color: #fff
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .msg {
    padding-top: .4rem
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .msg h3 {
    margin-bottom: .1rem
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide:hover .photo .pic {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide:hover .photo .layer-set {
    border-color: #afe226
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide:hover .photo .layer-set>.mask {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0)
}

#home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide:hover .photo .layer-set .layer-icon .iconfont {
    color: #fff
}

#home .r3 .inner .group.go .r3Sw {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0);
    opacity: 1
}

#home .r3 .inner .group.go .r3Sw .swiper-wrapper .swiper-slide:nth-of-type(1) {
    -webkit-animation: fadeRight 2s var(--ease1);
    animation: fadeRight 2s var(--ease1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

#home .r3 .inner .group.go .r3Sw .swiper-wrapper .swiper-slide:nth-of-type(2) {
    -webkit-animation: fadeRight 2s var(--ease1) .1s;
    animation: fadeRight 2s var(--ease1) .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

#home .r3 .inner .group.go .r3Sw .swiper-wrapper .swiper-slide:nth-of-type(3) {
    -webkit-animation: fadeRight 2s var(--ease1) .2s;
    animation: fadeRight 2s var(--ease1) .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

#home .r3 .inner .group.go .r3Sw .swiper-wrapper .swiper-slide:nth-of-type(4) {
    -webkit-animation: fadeRight 2s var(--ease1) .3s;
    animation: fadeRight 2s var(--ease1) .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@media screen and (orientation:portrait) {
    #home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide .photo .layer-set {
        width: .8rem;
        height: .8rem
    }

    #home .r3 .inner .group .r3Sw .swiper-wrapper .swiper-slide {
        width: 68vw
    }
}

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

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

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

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

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

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

#home .r5 .inner .top .col .tab:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    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: #ca1b22
}

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

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

#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: 50vw;
    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: 3.4rem;
    padding: .2rem 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#roofSolution .r1 .inner .group h3 b {
    color: #ca1b22;
    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: #000;
    background: linear-gradient(90deg, #ca1b22, #ca1b22)
}

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

#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: #fff;
    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, #ca1b22, #ca1b22);
    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: #ca1b22
    }

    #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%, #fff 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%, #fff 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: #ca1b22
}

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

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

#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: #000;
    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: #fff;
    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: #fff;
    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: #000;
    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: #fff;
    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: #ca1b22
}

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

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

#roofDetail .banner .inner .top small {
    display: block
}

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

#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(2) {
    cursor: pointer;
    background-color: #f7f7f7;
    border-radius: .24rem;
    margin-bottom: .3rem;
    padding: .5rem;
    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 .set {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 .2rem;
    display: grid;
}

#roofDetail .r1 .inner .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)
}

#roofDetail .r1 .inner .set .col .arrow {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin: 0 .3rem;
    position: relative;
    overflow: hidden
}

#roofDetail .r1 .inner .set .col .arrow:after {
    content: "";
    opacity: 0;
    background: linear-gradient(90deg, #ca1b22, #ca1b22);
    transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#roofDetail .r1 .inner .set .col .arrow i {
    z-index: 5;
    position: relative
}

#roofDetail .r1 .inner .set .col .msg {
    width: calc(100% - 1.2rem)
}

#roofDetail .r1 .inner .set .col .msg P {
    color: rgba(35, 38, 38, .6);
    margin-top: .1rem
}

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

#roofDetail .r1 .inner .set .col.nextEl {
    padding-left: .5rem
}

@media screen and (orientation:landscape) {
    #roofDetail .r1 .inner .set .col:hover {
        background-color: #fff;
        box-shadow: 0 30px 70px rgba(35, 38, 38, .15)
    }

    #roofDetail .r1 .inner .set .col:hover .arrow:after {
        opacity: 1
    }
}

#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:nth-child(2) .msg p {
    max-width: 100%;
    text-align: justify;
    margin-bottom: 4px;
    line-height: 1.7
}
.word-bd{
    font-weight: 300;
}
#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, #ca1b22, #ca1b22);
    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 .rqp .inner .mid .r2Sw .swiper-wrapper .swiper-slide .photo {
    height: 5rem;
}

#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, #ca1b22 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, #ca1b22, #ca1b22);
    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: #000;
    line-height: .8;
    position: absolute;
    top: 0;
    right: 0
}

#roofDetail .r2 .inner .mid .r2Sw .swiper-wrapper .swiper-slide .msg h4 small {
    color: #000;
    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, #ca1b22, #ca1b22);
    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: #ca1b22
    }

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

    #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%, #fff 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%, #fff 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, #ca1b22, #ca1b22);
    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: #000;
    font-size: .625vw
}

#roofDetail .r4 .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
    color: #000;
    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: #000;
    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: #ca1b22
}

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

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

#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: #fff;
    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: #fff;
    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, #ca1b22 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, #ca1b22, #ca1b22);
    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: #000;
    line-height: .8;
    position: absolute;
    top: 0;
    right: 0
}

#solartrack .r9 .inner .mid .r9Sw .swiper-wrapper .swiper-slide .msg h4 small {
    color: #000;
    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, #ca1b22, #ca1b22);
    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: #000;
    font-size: .625vw
}

#solartrack .r10 .inner .form .col .inRow .inTxt>input[type=text]::placeholder {
    color: #000;
    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: #000;
    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: #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%)
}

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

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

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

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

#reference .banner .inner .top .tabBox .tab.on {
    background-color: rgba(41, 46, 46, .3);
    transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#reference .banner .inner .top .tabBox .tab.on:after {
    transform: translate(0, 0)
}

#reference .banner .inner .top .tabBox .tab.on>span {
    color: #fff
}

@media screen and (orientation:landscape) {
    #reference .banner .inner .top .tabBox .tab:hover {
        background-color: rgba(41, 46, 46, .3);
        transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
    }

    #reference .banner .inner .top .tabBox .tab:hover:after {
        transform: translate(0, 0)
    }

    #reference .banner .inner .top .tabBox .tab:hover>span {
        color: #fff
    }
}

/* product */

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

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

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

#product .banner .inner .top .tabBox .tab.on {
    background-color: rgba(41, 46, 46, .3);
    transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#product .banner .inner .top .tabBox .tab.on:after {
    transform: translate(0, 0)
}

#product .banner .inner .top .tabBox .tab.on>span {
    color: #fff
}

@media screen and (orientation:landscape) {
    #product .banner .inner .top .tabBox .tab:hover {
        background-color: rgba(41, 46, 46, .3);
        transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
    }

    #product .banner .inner .top .tabBox .tab:hover:after {
        transform: translate(0, 0)
    }

    #product .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: #000;
    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: #ca1b22
}

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

#news .banner .inner .mid .box .msg .note .btnIcon .txt {
    text-align: center;
    z-index: 9;
    margin-right: .15rem;
    line-height: .5rem;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1)
}

#news .banner .inner .mid .box .msg .note .btnIcon .layer-icon {
    z-index: 10;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
    position: relative
}

#news .banner .inner .mid .box .photo {
    height: 3rem;
    width: 100%;
    position: relative;
    overflow: hidden
}

#news .banner .inner .mid .box .photo .pic {
    width: 100%;
    height: 100%;
    transition: all .5s cubic-bezier(.38, 0, 0, 1);
    position: absolute;
    bottom: 0;
    left: 0
}

@media screen and (orientation:landscape) {
    #news .banner .inner .mid .box:hover {
        box-shadow: 0 .7rem .8rem -5px rgba(35, 38, 38, .3)
    }

    #news .banner .inner .mid .box:hover .photo .pic {
        height: 100%
    }
}

#news .banner .btm {
    position: relative
}

#news .banner .btm .pager {
    z-index: 4;
    background-color: #fff;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: .15em;
    padding-right: .2rem;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#news .banner .btm .pager>a {
    color: rgba(35, 38, 38, .5);
    width: .4rem;
    text-align: center;
    line-height: 1;
    transition: all .3s cubic-bezier(.38, 0, 0, 1)
}

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

#news .banner .btm .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #292e2e
}

#news .banner .btm .set {
    z-index: 4;
    background-color: #fff;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    padding-left: .2rem;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#news .banner .btm .set .layer-icon {
    width: .9rem;
    height: .9rem;
    background-color: #f2f2f2;
    border-radius: 50%;
    margin-left: .2rem;
    transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

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

#newDetail .r1 {
    background-color: #f7f7f7;
    padding-top: 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 .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, #ca1b22, #ca1b22);
    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, #ca1b22, #ca1b22);
    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: 40%
}

@media screen and (orientation:landscape) {
    #newDetail .r1 .inner .mid .moreBox .box:hover {
        background-color: #fff;
        box-shadow: 0 30px 70px rgba(35, 38, 38, .15)
    }
}

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

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

#newDetail .r2 .inner h1 {
    text-align: center;
    margin-bottom: .5rem
}

#newDetail .r2 .inner .detail {
    font-size: .72917vw;
    line-height: 1.5
}

#newDetail .r2 .inner .detail h2 {
    margin: .2rem 0
}

#blog .banner {
    padding-bottom: 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: #000;
    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, #ca1b22 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, #ca1b22, #ca1b22);
    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: #000
}

#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: .5rem;
    line-height: 1.2
}
#reference .banner .inner .part{
    display: flex;
    justify-content: center;
    align-items: center;
}
#reference .banner .inner .top {
    z-index: 12;
    grid-template-columns: 1fr;
    -ms-flex-align: start;
    align-items: start;
    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: #ca1b22;
    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 .btox2 .photo{
    height: 6.3rem;
}


#reference .banner .inner .mid .box .photo>.mask {
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    background: linear-gradient(30deg, #ca1b22 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, #ca1b22, #ca1b22);
    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: #000;
    line-height: .8;
    position: absolute;
    top: 0;
    right: 0
}

#reference .banner .inner .mid .box .msg h4 small {
    color: #000;
    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: #000
}

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


/* product */

#product .banner {
    padding-bottom: 1.6rem
}

#product .banner>.bg {
    background-color: #fff;
    position: absolute;
    height: 5.6rem !important;
    overflow: hidden !important
}

#product .banner>.bg .img {
    width: 100%;
    display: block
}

#product .banner>.bg .mask {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 100%);
    position: absolute;
    top: 0;
    left: 0
}

#product .banner .inner {
    padding-top: 4.5rem;
    padding-bottom: .8rem
}

#product .banner .inner h1 {
    margin-bottom: .5rem;
    line-height: 1.2
}
#product .banner .inner .part{
    display: flex;
    justify-content: center;
    align-items: center;
}
#product .banner .inner .top {
    z-index: 12;
    grid-template-columns: 1fr;
    -ms-flex-align: start;
    align-items: start;
    margin-bottom: .6rem;
    display: grid;
    position: relative
}

#product .banner .inner .top .part h3 {
    margin-bottom: .3rem
}

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

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

#product .banner .inner .top .part .tab>a:hover,
#product .banner .inner .top .part .tab>a.on {
    background-color: #ca1b22;
    border-color: transparent
}

#product .banner .inner .mid {
    background-color: #fff;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
    display: grid
}

#product .banner .inner .mid .box .photo {
    height: 5rem;
    background-size: cover;
    border-radius: .2rem;
    margin-bottom: .2rem;
    transition: all .8s cubic-bezier(.38, 0, 0, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.08), 0 0px 4px rgba(0, 0, 0, 0.05);
}



#product .banner .inner .mid .box .photo>.mask {
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    background: linear-gradient(30deg, #ca1b22 5%, rgba(254, 219, 0, 0) 28%);
    transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
    top: auto;
    bottom: -2px;
    left: -2px
}

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

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

#product .banner .inner .mid .box .photo .btnIcon>.mask:after {
    content: "";
    opacity: 0;
    background: linear-gradient(90deg, #ca1b22, #ca1b22);
    transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

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

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

#product .banner .inner .mid .box .msg {
    padding: 0 1.2rem 0 .15rem;
    position: relative
}

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

#product .banner .inner .mid .box .msg h4 {
    text-align: right;
    color: #000;
    line-height: .8;
    position: absolute;
    top: 0;
    right: 0
}

#product .banner .inner .mid .box .msg h4 small {
    color: #000;
    margin-left: -.2em
}

@media screen and (orientation:landscape) {
    #product .banner .inner .mid .box:hover .photo {
        box-shadow: 0 .3rem .6rem -5px rgba(35, 38, 38, .3)
    }

    #product .banner .inner .mid .box:hover .photo:after,
    #product .banner .inner .mid .box:hover .photo>.mask {
        opacity: 1
    }

    #product .banner .inner .mid .box:hover .photo .btnIcon {
        width: 1.2rem;
        opacity: 1
    }

    #product .banner .inner .mid .box:hover .photo .btnIcon .txt {
        opacity: 1;
        transform: translate(-.15rem)
    }

    #product .banner .inner .mid .box:hover .photo .btnIcon .mask:after {
        opacity: 1
    }

    #product .banner .inner .mid .box:hover .photo .btnIcon .layer-icon {
        transform: translate(.2rem)
    }
}

#product .banner .btm {
    position: relative
}

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

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

#product .banner .btm .pager>a.on {
    color: #000
}

#product .banner .btm .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #292e2e
}

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

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

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




#resource .banner {
    background-color: #fff
}

#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%, #fff 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: #000;
    background-color: transparent;
    border: none
}

#resource .banner .inner .til .searchBox .subSearch {
    width: .8rem;
    height: .8rem;
    background-color: #ca1b22;
    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: #ca1b22
}

#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: #ca1b22;
    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, #ca1b22, #ca1b22);
    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, #ca1b22, #ca1b22);
    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: #ca1b22;
        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, #ca1b22, #ca1b22);
    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: #ca1b22
    }
}

#contact .banner {
    background-color: #efefef
}

#contact .banner>.bg {
    background-color: #efefef;
    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: #000;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    top: .15rem;
    left: .15rem
}

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

#contact .banner .inner .mid .left .box .list .icon .dot.gray {
    background-color: #a5a5a5;
    border-color: #a5a5a5
}

#contact .banner .inner .mid .left .box .list .icon .dot.clear {
    background-color: transparent;
    border-color: #101010
}

#contact .banner .inner .mid .left .box .list .icon>img {
    width: 42%;
    height: 30%;
    object-fit: contain
}

#contact .banner .inner .mid .left .box .list>em {
    line-height: .9
}

#contact .banner .inner .mid .left .box .list>small {
    height: 3em;
    line-height: 5em;
    font-size: inherit;
    color: inherit;
    font-family: inherit
}

#contact .banner .inner .mid .right {
    height: 6.3rem;
    position: relative
}

#contact .banner .inner .mid .right .map {
    height: 6.3rem;
    position: absolute;
    top: 0;
    left: -1.5rem
}

#contact .r1 {
    background-color: #efefef;
    padding-top: .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: #000;
    font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text]::placeholder {
    color: #000;
    font-size: .625vw
}

#contact .r1 .inner .group .tabBox .form .inRow .inTxt>input[type=text]:focus {
    background-color: #fff;
    border-color: #ca1b22
}

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

#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: #fff;
    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: #000;
    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 #ca1b22;
    border-left: 1px solid #ca1b22;
    border-right: 1px solid #ca1b22;
    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 .dotFn .txt{
    font-size: .18rem;
}
#contact .dotFn{
    padding-bottom: 0;
}
#contact .r1 .inner .top .tab.on .dotFn:before{
    opacity: 0;
}
#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: #ca1b22;
    --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: #ca1b22;
    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: #ca1b22
    }
}

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

.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 #ca1b22;
    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, #ca1b22, #ca1b22);
    -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-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, #ca1b22, #ca1b22);
    -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: #fff;
    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: #ca1b22
}

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-prev:hover .iconfont {
    color: #000
}

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

.solarInner .simple_r3 .inner .mid .swiper .swiper-button-next:hover .iconfont {
    color: #000
}

.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: #fff;
    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: #fff;
    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: #fff;
    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: #fff;
    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, #ca1b22 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, #ca1b22, #ca1b22);
    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: #000;
    line-height: .8;
    position: absolute;
    top: 0;
    right: 0
}

.solarInner .rowReference .inner .mid .referenceSw .swiper-wrapper .swiper-slide .msg h4 small {
    color: #000;
    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-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, #ca1b22, #ca1b22);
    -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 {
    padding-top: 4.5rem;
    padding-bottom: .8rem
}

#about .banner .inner h1 {
    margin-bottom: .5rem;
    line-height: 1.2
}
#about .banner .inner .part{
    display: flex;
    justify-content: center;
    align-items: center;
}
#about .banner .inner .top {
    z-index: 12;
    grid-template-columns: 1fr;
    -ms-flex-align: start;
    align-items: start;
    margin-bottom: .6rem;
    display: grid;
    position: relative
}

#about .banner .inner .top .part h3 {
    margin-bottom: .3rem
}

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

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

#about .banner .inner .top .part .tab>a:hover,
#about .banner .inner .top .part .tab>a.on {
    background-color: #ca1b22;
    border-color: transparent
}
#about .banner>.bg .mask {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 100%);
    position: absolute;
    top: 0;
    left: 0
}
#about .banner>.bg .img {
    width: 100%;
    display: block;
}

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

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

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

#about .banner .inner .top .tabBox .tab.on {
    background-color: rgba(41, 46, 46, .3);
    transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
}

#about .banner .inner .top .tabBox .tab.on:after {
    transform: translate(0, 0)
}

#about .banner .inner .top .tabBox .tab.on>span {
    color: #fff
}
/* #app #about .row:nth-child(1) .bg{
    height: auto;
} */

@media screen and (orientation:landscape) {
    #about .banner .inner .top .tabBox .tab:hover {
        background-color: rgba(41, 46, 46, .3);
        transition: background-color .8s cubic-bezier(.38, 0, 0, 1) .3s
    }

    #about .banner .inner .top .tabBox .tab:hover:after {
        transform: translate(0, 0)
    }

    #about .banner .inner .top .tabBox .tab:hover>span {
        color: #fff
    }
}
#about .r1 {
    background-color: #fff;
    padding: 1.4rem 0 2.2rem;
    overflow: hidden
}

#about .r1 .bg .sign {
    height: 16rem;
    position: absolute;
    bottom: -5rem;
    left: -48%
}

#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(1fr);
    gap: .4rem;
    display: grid
}

#about .r1 .inner .part .left {
    grid-template-rows: repeat(2, 2.6rem);
    grid-template-columns: repeat(2, 1fr);
    gap: .2rem;
    display: grid
}

#about .r1 .inner .part .left .chunk {
    -webkit-backdrop-filter: blur(.3rem);
    -webkit-backdrop-filter: blur(.3rem);
    backdrop-filter: blur(.3rem);
    background-color: rgba(255, 255, 255, .8);
    border-radius: .16rem;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: .4rem .4rem .4rem .5rem;
    display: -ms-flexbox;
    display: flex
}

#about .r1 .inner .part .left .chunk .img {
    max-height: .5rem;
    display: block
}

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

#about .r1 .inner .part .left .chunk .col h4 {
    text-align: center
}

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

#about .r1 .inner .part .left .chunk .col p {
    color: rgba(35, 38, 38, .5);
    text-align: center
}

#about .r1 .inner .part .right {
    position: relative
}

#about .r1 .inner .part .right .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .16rem;
    overflow: hidden
}

#about .r1 .inner .part .right .player {
    width: 1rem;
    height: 1rem;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

#about .r1 .inner .part .right .player .iconfont {
    transition: transform .5s cubic-bezier(.38, 0, 0, 1)
}

@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 {
    opacity: 0;
    transition: opacity .5s cubic-bezier(.38, 0, 0, 1);
    position: absolute;
    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(4, 1fr);
    gap: .2rem;
    display: grid
}

#about .r2 .group .box>.set .tab {
    cursor: pointer;
    text-align: center;
    height: 1rem;
    background-color: #fff;
    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: #ca1b22;
    background-color: #1b1f1f;
    font-weight: 600;
    box-shadow: 0 3.125vw 4.6875vw rgba(35, 38, 38, .3)
}

#about .r2 .group .mapBox {
    background-color: #f2f2f2;
    grid-auto-flow: column;
    -ms-flex-pack: start;
    justify-content: start;
    -ms-flex-align: center;
    align-items: center;
    display: grid
}

#about .r2 .group .mapBox .left {
    z-index: 10;
    position: relative
}

#about .r2 .group .mapBox .left .top {
    margin-bottom: .8rem
}

#about .r2 .group .mapBox .left .mid {
    grid-auto-flow: row;
    gap: .2rem 0;
    display: grid
}

#about .r2 .group .mapBox .left .mid .list {
    height: 1rem;
    width: 3.6rem;
    background-color: #fff;
    border-radius: .16rem
}

#about .r2 .group .mapBox .left .mid .list .mr {
    margin-right: .1rem
}

#about .r2 .group .mapBox .left .mid .list .gray {
    color: gray
}

#about .r2 .group .mapBox .left .mid .list .icon {
    width: 1.05rem;
    height: 100%;
    position: relative
}

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

#about .r2 .group .mapBox .left .mid .list .icon .dot.mc {
    background-color: #ca1b22;
    border-color: #ca1b22
}

#about .r2 .group .mapBox .left .mid .list .icon .dot.gray {
    background-color: #a5a5a5;
    border-color: #a5a5a5
}

#about .r2 .group .mapBox .left .mid .list .icon .dot.clear {
    background-color: transparent;
    border-color: #101010
}

#about .r2 .group .mapBox .left .mid .list .icon>img {
    width: 42%;
    height: 30%;
    object-fit: contain
}

#about .r2 .group .mapBox .left .mid .list>em {
    line-height: .9
}

#about .r2 .group .mapBox .left .mid .list>small {
    height: 3em;
    line-height: 5em;
    font-size: inherit;
    color: inherit;
    font-family: inherit
}

#about .r2 .group .mapBox .right {
    pointer-events: none;
    width: 100%;
    height: 100%;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0
}

#about .r2 .group .mapBox .right .map {
    width: 85%;
    display: block
}

#about .r3 {
    height: 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.6
}

#about .r4 {
    background-color: #fff;
    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(2, 1fr);
        gap: 0 .24rem
    }
}

#about .r4 .inner .mid .part {
    background-color: #fff;
    border-radius: .2rem;
    padding-bottom: .6rem;
    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: cover;
    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, #ca1b22 5%, rgba(254, 219, 0, 0) 28%);
    transition: opacity .8s cubic-bezier(.38, 0, 0, 1);
    top: auto;
    bottom: -2px;
    left: -2px
}

#about .r5 .inner .group .box .msg {
    height: 100%;
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#about .r5 .inner .group .box .msg h3 {
    text-align: center;
    margin-bottom: .2rem;
    transition: transform .8s cubic-bezier(.38, 0, 0, 1), color .8s cubic-bezier(.38, 0, 0, 1), font-weight .8s cubic-bezier(.38, 0, 0, 1);
    transform: translateY(.2rem)
}

#about .r5 .inner .group .box .msg .items {
    width: 100%;
    height: .2rem;
    opacity: 0;
    padding: 0 .4rem;
    transition: transform .8s cubic-bezier(.38, 0, 0, 1), opacity .8s cubic-bezier(.38, 0, 0, 1);
    transform: translateY(.15rem)
}

#about .r5 .inner .group .box .msg .items>li {
    text-align: center
}

@media screen and (orientation:landscape) {
    #about .r5 .inner .group .box:hover .pic {
        transform: scale(1.05)
    }

    #about .r5 .inner .group .box:hover .pic>.mask {
        opacity: 1
    }

    #about .r5 .inner .group .box:hover .msg h3 {
        color: #ca1b22;
        font-weight: 600;
        transform: none
    }

    #about .r5 .inner .group .box:hover .msg .items {
        opacity: 1;
        transform: none
    }
}

#about .r6 {
    background-color: #fff;
    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, #ca1b22, #ca1b22);
    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: #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
}

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

#about .r6 .inner .btm .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #292e2e
}

#about .r6 .inner .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
}

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

#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: #000;
    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, #ca1b22, #ca1b22);
    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: #000
}

#searchResult .banner .btm .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed rgba(41, 46, 46, .6)
}

#searchResult .banner .btm .set {
    z-index: 4;
    background-color: #ededed;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    padding-left: .2rem;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#searchResult .banner .btm .set .layer-icon {
    width: .9rem;
    height: .9rem;
    background-color: #fff;
    border-radius: 50%;
    margin-left: .2rem;
    transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

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

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

#groundSolution .banner>.bg .pro {
    width: 76%;
    height: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 7%;
    left: 14%
}

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

#groundSolution .banner .inner {
    height: 12rem;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 2rem 0 1.2rem
}

#groundSolution .banner .inner .topic h1 {
    line-height: .9
}

#groundSolution .banner .inner .topic p {
    text-align: center
}

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

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

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

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

#groundSolution .r2 {
    background-color: #fff;
    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
}

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

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

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
    text-align: center;
    opacity: 0;
    width: 100%;
    z-index: 9;
    line-height: .5rem;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 0
}

#groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
    height: .5rem;
    z-index: 10;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
    position: relative
}

@media screen and (orientation:landscape) {
    #groundSolution .r2 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
        background-color: #1b1f1f;
        box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
    }

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

    #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%, #fff 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%, #fff 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: #fff;
    padding-top: 1rem;
    padding-bottom: 1.7rem
}

#groundSolution .r4 .inner {
    margin-bottom: 1.5rem
}

#groundSolution .r4 .inner .mid {
    z-index: 4;
    position: relative
}

#groundSolution .r4 .inner .mid>p {
    width: 48%;
    padding-bottom: .8rem;
    line-height: 1.33
}

#groundSolution .r4 .inner .mid .imgBox {
    position: relative
}

#groundSolution .r4 .inner .mid .imgBox .img {
    height: 7.8rem;
    display: block
}

#groundSolution .r4 .inner .mid .imgBox .years {
    position: absolute;
    bottom: 27%;
    right: -8%
}

#groundSolution .r4 .inner .mid .imgBox .years>em {
    letter-spacing: -.2em;
    text-indent: -.92em;
    font-size: 4.6rem;
    line-height: .8;
    display: inline-block
}

#groundSolution .r4 .inner .mid .imgBox .years sub {
    vertical-align: baseline
}

#groundSolution .r4 .inner .btm {
    z-index: 2;
    margin-top: -1.2rem;
    position: relative
}

#groundSolution .r4 .inner .btm .note {
    margin-bottom: .6rem
}

#groundSolution .r4 .inner .btm .note .txt {
    padding-right: .2rem
}

#groundSolution .r4 .inner .btm .note .line {
    height: 1px;
    background-color: rgba(26, 26, 26, .3);
    -ms-flex: 1;
    flex: 1
}

#groundSolution .r4 .inner .btm .logoSw {
    width: 100%;
    grid-auto-flow: column;
    padding: .2rem 0;
    display: grid
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper {
    grid-auto-flow: column;
    display: grid
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide {
    padding-right: 1rem
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo {
    height: .88rem
}

#groundSolution .r4 .inner .btm .logoSw .swiper-wrapper .swiper-slide .photo>img {
    max-height: .88rem;
    opacity: .2;
    display: block
}

#groundSolution .r4 .part .top {
    margin-bottom: .9rem
}

#groundSolution .r4 .part .mid {
    width: 100%
}

#groundSolution .r4 .part .mid .box {
    width: 100%;
    height: 6.8rem;
    background-color: #fff;
    border-radius: .3rem;
    margin-bottom: .6rem;
    overflow: hidden
}

#groundSolution .r4 .part .mid .box .left {
    width: 50%;
    height: 100%;
    z-index: 10;
    position: relative
}

#groundSolution .r4 .part .mid .box .left .pic {
    opacity: .6;
    background-position: 15%
}

#groundSolution .r4 .part .mid .box .left .layer-play {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    z-index: 5;
    background-color: rgba(28, 31, 31, .6);
    border-radius: 50%;
    -ms-flex-direction: column;
    flex-direction: column;
    transition: background-color .5s cubic-bezier(.38, 0, 0, 1)
}

#groundSolution .r4 .part .mid .box .left .layer-play p {
    margin-top: .1rem
}

#groundSolution .r4 .part .mid .box .left .layer-play:hover {
    background-color: #000
}

#groundSolution .r4 .part .mid .box .right {
    width: 50%;
    height: 100%;
    z-index: 11;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0 1rem 0 3%;
    position: relative
}

#groundSolution .r4 .part .mid .box .right>.mask {
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 26%);
    position: absolute;
    top: 0;
    left: -2rem
}

#groundSolution .r4 .part .mid .box .right>.sign {
    z-index: 5;
    height: .96rem;
    margin-bottom: .3rem;
    position: relative
}

#groundSolution .r4 .part .mid .box .right h3 {
    z-index: 5;
    position: relative
}

#groundSolution .r4 .part .mid .box .right p {
    z-index: 5;
    margin-bottom: .5rem;
    position: relative
}

#groundSolution .r4 .part .mid .box .right .items {
    z-index: 5;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative
}

#groundSolution .r4 .part .mid .box .right .items>li {
    opacity: 0;
    transform-origin: 0;
    transition: opacity 1s cubic-bezier(.38, 0, 0, 1), transform 1s cubic-bezier(.38, 0, 0, 1), color .3s cubic-bezier(.38, 0, 0, 1);
    overflow: hidden;
    transform: translate(60%)
}

#groundSolution .r4 .part .mid .box .right .items>li>img {
    height: .52rem;
    margin: 0 auto .2rem;
    display: block
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon {
    height: 100%;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-right: .05rem;
    padding: 0 .25rem 0 .3rem;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow: hidden
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon>i {
    line-height: .52rem
}

#groundSolution .r4 .part .mid .box .right .items>li.layer-icon .lines {
    width: 4.7rem;
    display: block;
    position: absolute;
    bottom: .5em;
    left: .05rem
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(1) {
    transition-delay: 50ms
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(2) {
    transition-delay: .1s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(3) {
    transition-delay: .15s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(4) {
    transition-delay: .2s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(5) {
    transition-delay: .25s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(6) {
    transition-delay: .3s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(7) {
    transition-delay: .35s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(8) {
    transition-delay: .4s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(9) {
    transition-delay: .45s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(10) {
    transition-delay: .5s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(11) {
    transition-delay: .55s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(12) {
    transition-delay: .6s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(13) {
    transition-delay: .65s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(14) {
    transition-delay: .7s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(15) {
    transition-delay: .75s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(16) {
    transition-delay: .8s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(17) {
    transition-delay: .85s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(18) {
    transition-delay: .9s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(19) {
    transition-delay: .95s
}

#groundSolution .r4 .part .mid .box .right .items>li:nth-child(20) {
    transition-delay: 1s
}

#groundSolution .r4 .part .mid .box .right .items.go>li {
    opacity: 1;
    transform: translate(0)
}

#groundSolution .r4 .part .mid .box:first-of-type .right {
    padding-bottom: 6%
}

#groundSolution .r7 {
    padding: 1.2rem 0 1.5rem;
    overflow: hidden
}

#groundSolution .r7 .bg .pic:after {
    content: "";
    background-color: rgba(0, 0, 0, .5)
}

#groundSolution .r7 .inner h2 {
    line-height: 1
}

#groundSolution .r7 .inner .col {
    width: 50%;
    margin-top: 1.8rem;
    margin-left: 50%
}

#groundSolution .r7 .inner .col>img {
    height: .72rem;
    margin-bottom: .5rem;
    display: block
}

#devploper .banner {
    width: 100%;
    overflow: hidden
}

#devploper .banner .inner {
    height: 8.6rem;
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

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

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

#devploper .r1 {
    width: 100%;
    background-color: #fff;
    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: #fff;
    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: #fff;
    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, #ca1b22, #ca1b22);
    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: #ca1b22
    }

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

    #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%, #fff 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%, #fff 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: #fff;
    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: #fff;
    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: #000
}

#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: #fff;
    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, #ca1b22, #ca1b22);
    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: #ca1b22
    }

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

    #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%, #fff 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%, #fff 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
}

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

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

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

#epc .r1 .inner {
    grid-template-columns: 7.5rem calc(100% - 7.2rem);
    gap: .4rem;
    margin-bottom: .4rem;
    display: 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: 5.7rem;
    margin: 0 auto;
    position: absolute;
    top: .2rem;
    right: 0
}

#epc .r2 {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

#epc .r2 .inner {
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    -ms-flex-align: center;
    align-items: center;
    gap: 0 1.5rem;
    padding-bottom: 1rem;
    display: grid
}

#epc .r2 .inner .left .topic {
    margin-bottom: .5rem
}

#epc .r2 .inner .right .items {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 .25rem;
    display: grid
}

#epc .r2 .inner .right .items>li {
    -webkit-backdrop-filter: blur(.2rem);
    -webkit-backdrop-filter: blur(.2rem);
    backdrop-filter: blur(.2rem);
    background-color: rgba(0, 0, 0, .5);
    border-radius: .18rem;
    padding: .6rem .2rem .4rem
}

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

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

#epc .r3 {
    width: 100%;
    background-color: #fff;
    padding-top: 1.6rem;
    padding-bottom: 2rem;
    overflow: hidden
}

#epc .r3 .inner .top {
    -ms-flex-align: start;
    align-items: flex-start
}

#epc .r3 .inner .top>p {
    width: 50%
}

#epc .r3 .inner .items {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 .2rem;
    margin-top: 1rem;
    display: grid
}

#epc .r3 .inner .items>li {
    background-color: #fff;
    border-radius: .2rem;
    overflow: hidden
}

#epc .r3 .inner .items>li .img {
    height: 2.4rem;
    width: 100%;
    object-fit: cover
}

#epc .r3 .inner .items>li .msg {
    height: 1rem;
    padding: 0 .4rem
}

#epc .r3 .inner .items>li .msg .icon {
    height: .4rem
}

#epc .r4 {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

#epc .r4 .inner {
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    -ms-flex-align: center;
    align-items: center;
    gap: 0 .7rem;
    padding-top: 15%;
    display: grid
}

#epc .r4 .inner .left .topic {
    margin-bottom: .5rem
}

#epc .r4 .inner .right .items {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 .25rem;
    display: grid
}

#epc .r4 .inner .right .items>li {
    -webkit-backdrop-filter: blur(.2rem);
    -webkit-backdrop-filter: blur(.2rem);
    backdrop-filter: blur(.2rem);
    background-color: rgba(0, 0, 0, .5);
    border-radius: .18rem;
    padding: .6rem .2rem .4rem
}

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

#epc .r4 .inner .right .items>li h3 {
    text-align: center
}

#epc .rowMap {
    width: 100%;
    background-color: #fff;
    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: #fff;
    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, #ca1b22, #ca1b22);
    transition: opacity .5s cubic-bezier(.38, 0, 0, 1)
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .txt {
    text-align: center;
    opacity: 0;
    width: 100%;
    z-index: 9;
    line-height: .5rem;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 0
}

#epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon .layer-icon {
    height: .5rem;
    z-index: 10;
    transition: opacity .6s cubic-bezier(.38, 0, 0, 1), transform .6s cubic-bezier(.38, 0, 0, 1);
    position: relative
}

@media screen and (orientation:landscape) {
    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover {
        background-color: #1b1f1f;
        box-shadow: 0 60px 90px rgba(35, 38, 38, .3)
    }

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

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover>img {
        transform: scale(1.05)
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon {
        width: 1.2rem
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .txt {
        opacity: 1;
        transform: translate(-.15rem)
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .mask:after {
        opacity: 1
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide:hover .btnIcon .layer-icon {
        transform: translate(.2rem)
    }
}

@media screen and (orientation:portrait) {
    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide .btnIcon {
        opacity: 0
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active,
    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
        background-color: #1b1f1f;
        box-shadow: 0 .2rem .5rem rgba(35, 38, 38, .3)
    }

    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-active h3,
    #epc .r7 .inner .mid .swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active h3 {
        color: #ca1b22
    }

    #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%, #fff 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%, #fff 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%)
    }
}

.kelpw {
width: calc(100% - 1.2rem);
margin: 0px auto;
padding-top: .2rem;
}

.keswip {
width: 100%;
}

.keswip .swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}

.keswip .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
box-sizing: border-box;
}

.keswip .swiper-slide {
display: block;
transform-origin: 100% 50%;
border-radius: 20px;
}
.keswip .swiper-slide .photo{
padding-bottom: 125%;
width: 100%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: .2rem;
overflow: hidden;
cursor: pointer;
}
.keswip .swiper-slide .pic{
-webkit-transition: -webkit-transform 1s cubic-bezier(.43, .195, .02, 1);
transition: -webkit-transform 1s cubic-bezier(.43, .195, .02, 1);
transition: transform 1s cubic-bezier(.43, .195, .02, 1);
transition: transform 1s cubic-bezier(.43, .195, .02, 1), 
-webkit-transform 1s cubic-bezier(.43, .195, .02, 1);
}
.keswip .swiper-slide:hover .photo .pic {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.btm2{
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: .5rem;
    position: relative;
}
.jje1{
    padding-bottom: 1.2rem;
}
.jje2{
    width: calc(100% - 1.2rem);
    margin: 0px auto;
}
.jje2 img{
    width: 100%;
    object-fit: cover;
    border-radius: .2rem;
}

/* 当屏幕宽度小于900px时 */
@media screen and (max-width: 900px) {
    #app header.down{
        background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
        backdrop-filter: blur(10px); /* 关键：背景模糊 */
        -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
        border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框增强效果 */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 阴影增强立体感 */
    }
    #app header.down .wc{
        color: #fff;
    }
}
.header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
}

.subtitle h1 {
    font-size: .1rem;
    color: #4a6fa5;
    margin-bottom: 15px;
    font-weight: 700;
}
.subtitle {
    font-size: .2rem;
    color: #666;
    margin-bottom: 30px;
}

.open-btn {
    background-color: #4a6fa5;
    color: white;
    border: none;
    padding: 16px 36px;
    font-size: .2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(74, 111, 165, 0.3);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.open-btn:hover {
    background-color: #3a5a8c;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(74, 111, 165, 0.4);
}

.open-btn:active {
    transform: translateY(0);
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: white;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s ease;
    overflow: hidden;
}

.modal-overlay.active .modal {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    background: linear-gradient(90deg, #4a6fa5 0%, #6a93d2 100%);
    color: white;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: .2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: .2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-body {
    padding: 30px;
}

.form-group {
    margin-bottom: 5px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: .16rem;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e6ef;
    border-radius: 12px;
    font-size: .16rem;
    transition: all 0.3s ease;
    background-color: #f9fafc;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #6a93d2;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(106, 147, 210, 0.2);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
}

.char-count {
    width: 100%;
    text-align: right;
    font-size: 0.13rem;
    color: #888;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.modal-footer {
    padding: 20px 30px 30px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn {
    padding: 14px 32px;
    border-radius: 12px;
    font-size: .13rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-cancel {
    background-color: #f0f3f9;
    color: #666;
}

.btn-cancel:hover {
    background-color: #e0e6ef;
}

.btn-submit {
    background-color: #4a6fa5;
    color: white;
    box-shadow: 0 4px 12px rgba(74, 111, 165, 0.3);
}

.btn-submit:hover {
    background-color: #3a5a8c;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 111, 165, 0.4);
}

.btn-submit:disabled {
    background-color: #a8c2e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 成功消息样式 */
.success-message {
    background-color: #e8f5e9;
    border-left: 5px solid #4caf50;
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
    display: none;
    align-items: center;
    gap: 15px;
}

.success-message.active {
    display: flex;
    animation: fadeIn 0.5s ease;
}

.success-icon {
    color: #4caf50;
    font-size: .2rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal {
        width: 95%;
    }
    
    .modal-header {
        padding: 20px;
    }
    
    .modal-title {
        font-size: 1.5rem;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 15px 20px 20px;
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    h1 {
        font-size: 2.2rem;
    }
}

/* 功能说明区域 */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 50px;
    max-width: 1000px;
}

.feature-card {
    background-color: white;
    border-radius: 16px;
    padding: 25px;
    width: 300px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: .2rem;
    color: #4a6fa5;
    margin-bottom: 15px;
}

.feature-title {
    font-size: .2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #4a6fa5;
}

.feature-desc {
    color: #666;
    line-height: 1.5;
}

/* sousuo */


.row_nav_box {
    z-index: 5;
    position: relative;
    margin-bottom: .6rem;
}


#product .row_nav_box .swiper_sel_case .sel_o_box .sel_right .swiper .swiper-slide{
    float: left;
    margin-left: .2rem;
    border: 1px solid rgba(41, 46, 46, .3);
    border-radius: 2rem;
}
@media screen and (orientation:landscape) {
    
}