.banner_i {
    position: relative;
    /*height: 100vh*/
    height:auto;
}

.banner_i .BannerShow_b1 img {
    /*height: 100vh;*/
     height:auto;
    -o-object-fit: cover;
    object-fit: cover
}

.banner_i .video {
    position: absolute;
    opacity: 0;
    inset: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.banner_i .video.play {
    opacity: 1
}

.banner_i .video video {
    background: #000;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.banner_i .video .tis___ {
    position: absolute;
    bottom: 7%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: .7
}

.banner_i .video .tis___ span {
    font-size: 1rem;
    color: #fff;
    background: rgba(0, 0, 0, .5333333333);
    border-radius: 2px;
    padding: .2rem .5rem;
    letter-spacing: 0
}

.banner_i .text {
    position: absolute;
    cursor: default;
    inset: 0;
    z-index: 15
}

.banner_i .text .DEFS {
    padding: 15% 0 0 0;
    height: 100%;
    box-sizing: border-box
}

.banner_i .text .DEFS .t0 {
    font-size: 3.1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0 1rem
}

.banner_i .text .DEFS .t1 {
    font-size: 1.5rem;
    color: #fff;
    letter-spacing: 0px;
    font-family: "roboto"
}

.banner_i .text .DEFS .play a {
    display: flex;
    flex-direction: row;
    gap: .3rem;
    align-items: center
}

.banner_i .text .DEFS .play a i {
    display: inline-flex;
    width: 3.5rem;
    min-width: 40px;
    aspect-ratio: 1/1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M10,15.464V8.536L16,12L10,15.464z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center
}

.banner_i .text .DEFS .play a span {
    color: #fefefe;
    font-size: 1.2rem
}

.banner_i .text .DEFS .var {
    width: 70%;
    position: absolute;
    left: 0;
    bottom: 24%
}

.banner_i .text .DEFS .var ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.3rem 2rem
}

.banner_i .text .DEFS .var ul li {
    display: flex;
    align-items: center;
    gap: 0 .8rem
}

.banner_i .text .DEFS .var ul li .icon img {
    height: 2.8rem;
    aspect-ratio: 1/1;
    -o-object-fit: contain;
    object-fit: contain
}

.banner_i .text .DEFS .var ul li span {
    color: #fff;
    font-size: 1.15rem
}

.banner_i .text.playing .play {
    opacity: 0
}

.banner_i .text.playing .var {
    left: 15%;
    bottom: 5%
}

.banner_i .text.playing .var ul {
    justify-content: center;
    flex-direction: row;
    gap: 0 4vw
}

.D0 {
    padding: 5vw 0 0 0;
    background: #f9fbfa
}

.D0 .box .list {
    display: flex;
    gap: 1.2vw;
    height: 90vh
}

.D0 .box .list li {
    flex: .1;
    transition-property: all;
    transition-duration: 0.8s;
    transition-timing-function: ease;
    cursor: pointer;
    position: relative
}

.D0 .box .list li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5647058824)
}

.D0 .box .list li .mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5019607843);
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D0 .box .list li .text {
    transition-delay: .3s;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    position: absolute;
    inset: 0;
    padding: 9% 12%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    box-sizing: border-box;
    opacity: 0;
    width: 40vw
}

.D0 .box .list li .text .t0 {
    font-size: 2.7rem;
    color: #fff
}

.D0 .box .list li .text .t1 {
    margin: 1rem 0 0 0;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .8666666667);
    line-height: 1.7
}

.D0 .box .list li .ttt {
    position: absolute;
    inset: 0;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.D0 .box .list li .ttt span {
    font-size: 2rem;
    letter-spacing: .4rem;
    color: #fff
}

.D0 .box .list li.open {
    flex: 1
}

.D0 .box .list li.open .mask {
    opacity: .5
}

.D0 .box .list li.open .text {
    opacity: 1
}

.D0 .box .list li.open .ttt {
    opacity: 0
}

.D1 {
    background: #c8c9cc url(../images/product_c_bgi0.jpg) no-repeat center;
    background-size: cover;
    min-height: 50vw;
    background-position: center 9vw;
    padding: 0 0 1vw 0
}

.D1>.box .hhh {
    padding: 5vw 0 0 0;
    text-align: center
}

.D1>.box .hhh .zh {
    font-size: 3.2rem
}

.D1>.box .hhh .en {
    font-size: 1.5rem;
    color: #999;
    line-height: 1
}

.D1>.box .hhh .ms {
    width: 80%;
    margin: 1.4rem auto 0 auto;
    color: #666;
    font-size: 1.3rem;
    line-height: 1.6
}

.D1>.box .panoramic {
    cursor: grab;
    padding: 4vw 0 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    position: relative
}

@media(max-width: 1680px) {
    .D1>.box .panoramic {
        padding: 2vw 0 0 0
    }
}

.D1>.box .panoramic .vr360 {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 1000px;
    width: 55%;
    margin: 0 auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.D1>.box .panoramic .vr360 canvas {
    aspect-ratio: 8/5;
    max-width: 1000px;
    cursor: default;
    width: 100%;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden
}

.D1>.box .panoramic .vr360 .pion {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: default
}

.D1>.box .panoramic .vr360 .pion>div {
    display: none
}

.D1>.box .panoramic .vr360 .pion .a {
    position: absolute;
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 100rem;
    background: linear-gradient(90deg, #1bdec1 0%, #0c78d6 100%);
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D1>.box .panoramic .vr360 .pion .a .tis {
    transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: ease;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 2.4vw 2.3vw;
    border-radius: 10px;
    background: rgba(255, 255, 255, .6666666667);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1254901961)
}

.D1>.box .panoramic .vr360 .pion .a .tis .t0 {
    font-size: 1.4rem;
    font-weight: bold
}

.D1>.box .panoramic .vr360 .pion .a .tis .t1 {
    margin: .5rem 0;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.5
}

.D1>.box .panoramic .vr360 .pion .a .tis .t2 a:hover {
    color: #0078dd
}

.D1>.box .panoramic .vr360 .pion .a:hover {
    z-index: 100
}

.D1>.box .panoramic .vr360 .pion .a:hover .tis {
    opacity: 1;
    visibility: inherit
}

.D1>.box .panoramic .vr360 .pion .a:hover::before {
    opacity: 0;
    transform: scale(2)
}

.D1>.box .panoramic .vr360 .pion .a::after {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='%23000000'%3E%3Cpath d='M 12 3 C 11.398438 3 11 3.398438 11 4 L 11 11 L 4 11 C 3.398438 11 3 11.398438 3 12 L 3 14 C 3 14.601563 3.398438 15 4 15 L 11 15 L 11 22 C 11 22.601563 11.398438 23 12 23 L 14 23 C 14.601563 23 15 22.601563 15 22 L 15 15 L 22 15 C 22.601563 15 23 14.601563 23 14 L 23 12 C 23 11.398438 22.601563 11 22 11 L 15 11 L 15 4 C 15 3.398438 14.601563 3 14 3 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center;
    background-size: auto 50%;
    inset: 0
}

.D1>.box .panoramic .vr360 .pion .a::before {
    content: "";
    background: rgba(255, 255, 255, .2509803922);
    position: absolute;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    inset: -0.35rem;
    border-radius: 100rem
}

.D1>.box .panoramic .v42 .a.aaa_0 .tis {
    transform: translateX(-105%);
    left: initial
}

.D1>.box .panoramic .v42 .a.aaa_1 .tis {
    transform: translateX(-105%) translateY(-50%)
}

.D1>.box .panoramic .v42 .a.aaa_2 .tis {
    transform: translateX(15%) translateY(-50%)
}

.D1>.box .panoramic .v42 .a.aaa_3 .tis {
    transform: translateX(-105%) translateY(-50%)
}

.D1>.box .panoramic .v42 .a.aaa_4 .tis {
    transform: translateX(15%) translateY(-50%)
}

.D1>.box .panoramic .v36 .a.aaa_0 .tis {
    transform: translateX(15%) translateY(-50%);
    left: initial
}

.D1>.box .panoramic .v36 .a.aaa_1 .tis {
    transform: translateX(-105%) translateY(-90%)
}

.D1>.box .panoramic .v36 .a.aaa_2 .tis {
    transform: translateX(15%) translateY(-50%)
}

.D1>.box .panoramic .v36 .a.aaa_3 .tis {
    transform: translateX(-105%) translateY(-90%)
}

.D1>.box .panoramic .v36 .a.aaa_4 .tis {
    transform: translateX(15%) translateY(-50%)
}

.D1>.box .panoramic .v36 .a.aaa_5 .tis {
    transform: translateX(10%) translateY(-90%)
}

.D1>.box .panoramic .v36 .a.aaa_6 .tis {
    transform: translateX(-105%) translateY(-90%)
}

.D1>.box .panoramic .v36 .a.aaa_7 .tis {
    transform: translateX(15%) translateY(-90%)
}

.D1>.box .panoramic .bz {
    position: absolute;
    left: 80%;
    width: auto;
    bottom: 10%;
    display: flex;
    gap: 1rem 0;
    flex-direction: column
}

.D1>.box .panoramic .bz .li0 {
    display: flex;
    align-items: center;
    gap: 0 .4rem
}

.D1>.box .panoramic .bz .li0 .icon {
    width: 5vw;
    max-width: 4rem;
    aspect-ratio: 1/1
}

.D1>.box .panoramic .bz .li0 .icon img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    box-shadow: 0 0 20px rgba(0, 120, 221, .2);
    border-radius: 100px
}

.D1>.box .panoramic .bz .li0 span {
    display: inline-flex;
    white-space: nowrap;
    font-size: 1.1rem;
    color: #555
}

.D1>.box .panoramic .bz .li1 {
    display: flex;
    align-items: center;
    gap: 0 .4rem
}

.D1>.box .panoramic .bz .li1 .icon {
    width: 5vw;
    max-width: 4rem;
    aspect-ratio: 1/1
}

.D1>.box .panoramic .bz .li1 .icon img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 100px
}

.D1>.box .panoramic .bz .li1 span {
    display: inline-flex;
    white-space: nowrap;
    font-size: 1.1rem;
    color: #555
}

.D1>.box .point {
    margin: 3rem auto 3rem auto
}

.D1>.box .point ul {
    display: flex;
    justify-content: center;
    gap: 0 2vw
}

.D1>.box .point ul li {
    width: 12.5%;
    padding: 2rem 0 1rem 0;
    position: relative;
    cursor: pointer
}

.D1>.box .point ul li:hover::after {
    opacity: 1
}

.D1>.box .point ul li:hover .pos {
    transform: translateY(-110%);
    opacity: 1;
    visibility: initial
}

.D1>.box .point ul li:hover .name {
    color: #fff
}

.D1>.box .point ul li:hover .icon>img {
    opacity: 0
}

.D1>.box .point ul li:hover .icon .hover {
    opacity: 1
}

.D1>.box .point ul li::after {
    content: "";
    position: absolute;
    display: inline-flex;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #1bdec1 0%, #0c78d6 100%);
    opacity: 0;
    border-radius: .4rem;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D1>.box .point ul li.selected .name {
    color: #fff
}

.D1>.box .point ul li.selected::after {
    opacity: 1
}

.D1>.box .point ul li .icon {
    text-align: center;
    position: relative;
    z-index: 10
}

.D1>.box .point ul li .icon img {
    max-width: 3.5vw;
    width: 4rem;
    aspect-ratio: 1/1;
    -o-object-fit: contain;
    object-fit: contain;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D1>.box .point ul li .icon .hover {
    position: absolute;
    width: 100%;
    text-align: center;
    inset: 0;
    opacity: 0;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D1>.box .point ul li .name {
    position: relative;
    z-index: 10;
    margin: .8rem 0 0 0;
    line-height: 1.4;
    text-align: center;
    color: #444;
    font-size: 1.1rem;
    padding: 0 10%;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D1>.box .point ul li .pos {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    visibility: hidden;
    opacity: 0;
    left: -10%;
    width: 120%;
    top: 0;
    padding: 2rem;
    background: rgba(255, 255, 255, .6666666667);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(-100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, .062745098);
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.D1>.box .point ul li .pos .t0 {
    font-size: 1.4rem;
    color: #333;
    font-weight: bold
}

.D1>.box .point ul li .pos .t1 {
    font-size: 1rem;
    line-height: 1.7;
    color: #666
}

.D1>.box .point ul li .pos .t2 {
    color: #777
}

.D1>.box .point ul li .pos .t2 a:hover {
    color: #0078dd
}

.D1>.box .point.v36 ul li .pos {
    left: -30%;
    width: 160%
}

.D1.v36 {
    background-position: center 4vw
}

.D1.v36 .box .panoramic .vr360 {
    width: 70%;
    max-width: 1200px;
    aspect-ratio: initial
}

.D1.v36 .box .panoramic .vr360 canvas {
    max-width: 1200px;
    aspect-ratio: initial
}

.D2 {
    padding: 6vw 0 7vw 0;
    background: #f2f2f2
}

.D2>.box .hhh {
    text-align: center
}

.D2>.box .hhh .zh {
    font-size: 3.4rem;
    line-height: 1
}

.D2>.box .hhh .en {
    font-size: 1.5rem;
    color: #999
}

.D2>.box .card {
    margin: 3rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3vw;
    grid-row-gap: 3vw
}

.D2>.box .card li .text {
    background: linear-gradient(90deg, #1bdec1 0%, #0c78d6 100%);
    position: relative
}

.D2>.box .card li .text b {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: .2;
    font-family: "roboto";
    color: #fff;
    font-size: 3rem;
    width: 100%;
    text-align: center
}

.D2>.box .card li .text span {
    display: block;
    line-height: 2;
    position: relative;
    z-index: 2;
    text-align: center;
    inset: 0;
    width: 100%;
    padding: .7vw 0;
    font-size: 1.2rem;
    color: #fff
}

.D2>.box .card li .fm {
    width: 100%
}

.D2>.box .card li .fm img {
    width: 100%
}

.D3 {
    padding: 6vw 0 7vw 0
}

.D3>.box .hhh {
    text-align: center
}

.D3>.box .hhh .zh {
    font-size: 3.4rem;
    line-height: 1
}

.D3>.box .hhh .en {
    font-size: 1.5rem;
    color: #999
}

.D3>.box .b {
    margin: 3rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch
}

.D3>.box .b .l {
    width: 15%;
    min-width: 200px
}

.D3>.box .b .l .conl {
    display: flex;
    flex-direction: column;
    gap: 1.3vw
}

.D3>.box .b .l .conl li {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer
}

.D3>.box .b .l .conl li:hover {
    opacity: .7
}

.D3>.box .b .l .conl li.selected span::after {
    opacity: 1
}

.D3>.box .b .l .conl li.selected span::before {
    opacity: 1;
    transform: scale(1)
}

.D3>.box .b .l .conl li.selected span b {
    background-image: linear-gradient(to bottom, #1bdec1, #0c78d6)
}

.D3>.box .b .l .conl li.selected p {
    color: #0078dd
}

.D3>.box .b .l .conl li span {
    width: 4.5rem;
    max-width: 7vw;
    aspect-ratio: 1/1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #999;
    border-radius: 100rem;
    box-sizing: border-box
}

.D3>.box .b .l .conl li span::after {
    content: "";
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: 4;
    box-sizing: border-box;
    border-radius: 100rem;
    background: #fff
}

.D3>.box .b .l .conl li span::before {
    content: "";
    transform: scale(0);
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    inset: -2px;
    border-radius: 100rem;
    z-index: 2;
    background: linear-gradient(90deg, #1bdec1 0%, #0c78d6 100%)
}

.D3>.box .b .l .conl li span b {
    position: relative;
    z-index: 5;
    font-weight: 400;
    background-image: linear-gradient(to bottom, #999, #999);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, 0);
    font-size: 1.5rem;
    font-family: "roboto"
}

.D3>.box .b .l .conl li p {
    color: #666;
    font-size: 1.2rem
}

.D3>.box .b .r {
    width: 80%;
    display: flex;
    position: relative
}

.D3>.box .b .r .swiper {
    width: 100%;
    display: flex
}

.D3>.box .b .r .swiper-slide {
    position: relative;
    display: flex
}

.D3>.box .b .r .swiper-slide .booo {
    border: 12px solid rgba(0, 0, 0, .062745098);
    box-sizing: border-box;
    padding: 4rem;
    width: 75%
}

.D3>.box .b .r .swiper-slide .booo .t0 {
    font-size: 2.8rem
}

.D3>.box .b .r .swiper-slide .booo .line {
    margin: 1rem 0;
    width: 5rem;
    height: 3px;
    background: #ccc
}

.D3>.box .b .r .swiper-slide .booo .ms {
    line-height: 1.8;
    font-size: 1.2rem;
    width: 80%
}

.D3>.box .b .r .swiper-slide .fpic {
    position: absolute;
    width: 35%;
    right: 0;
    top: 10vh
}

.D3>.box .b .r .swiper-slide .fpic img {
    width: 100%;
    height: auto
}

.D3>.box .b .r .swiper-page {
    display: flex;
    justify-content: flex-end;
    gap: 0rem;
    position: absolute;
    right: 0;
    bottom: 0
}

.D3>.box .b .r .swiper-page>span {
    position: relative;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0)
}

.D3>.box .b .r .swiper-page>span::before {
    content: "";
    width: 9px;
    height: 9px;
    background: #aaa;
    border-radius: 100px
}

.D3>.box .b .r .swiper-page .swiper-pagination-bullet-active {
    border: 1px solid #0078dd
}

.D3>.box .b .r .swiper-page .swiper-pagination-bullet-active::before {
    background: linear-gradient(90deg, #1bdec1 0%, #0c78d6 100%)
}

.D4 {
    padding: 7vw 0;
    background: #f2f2f2
}

.D4>.box .t {
    margin: 0 0 3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: self-end
}

.D4>.box .t .hhh .zh {
    font-size: 3.1rem;
    line-height: 1
}

.D4>.box .t .hhh .en {
    font-size: 1.5rem;
    color: #999
}

.D4>.box .t .more a {
    display: inline-flex;
    border: 2px solid #444;
    padding: 1rem 3rem;
    font-weight: bold;
    border-radius: 100px
}

.D4>.box .t .more a:hover {
    background: #444;
    color: #fff
}

.D4>.box .t .conl {
    margin: 0 2rem 0 auto;
    display: flex;
    gap: 1rem
}

@media(max-width: 990px) {
    .D4>.box .t .conl {
        gap: 1vw
    }
}

.D4>.box .t .conl a:nth-of-type(1) {
    transform: rotate(180deg)
}

.D4>.box .t .conl a {
    width: 3.5vw;
    min-width: 36px;
    aspect-ratio: 1/1;
    position: relative;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D4>.box .t .conl a.swiper-button-disabled::after {
    opacity: 1
}

.D4>.box .t .conl a.swiper-button-disabled::before {
    opacity: 0
}

.D4>.box .t .conl a.swiper-button-disabled span {
    opacity: 0
}

.D4>.box .t .conl a.swiper-button-disabled i {
    opacity: 1
}

.D4>.box .t .conl a span {
    position: absolute;
    z-index: 10;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3ClinearGradient id='myLinearGradient1' x2='100%25' y2='100%25' x1='0%25' y1='100%25' spreadMethod='pad'%3E%3Cstop offset='0%25' stop-color='%231bdec1' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%230c78d6' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cpath d='M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z' style='fill:url(%23myLinearGradient1);' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 45%;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D4>.box .t .conl a i {
    opacity: 0;
    position: absolute;
    z-index: 10;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3Cpath d='M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z' fill='%23333' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 45%;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D4>.box .t .conl a::after {
    content: "";
    opacity: 0;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    position: absolute;
    z-index: 3;
    border-radius: 100px;
    inset: 0px;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 100px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #f2f2f2, #f2f2f2), linear-gradient(90deg, #333, #333)
}

.D4>.box .t .conl a::before {
    content: "";
    opacity: 1;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    position: absolute;
    z-index: 1;
    border-radius: 100px;
    inset: 0px;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 100px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #f2f2f2, #f2f2f2), linear-gradient(90deg, #1bdec1, #0c78d6)
}

.D4>.box .t .conl a:hover::after {
    opacity: 1
}

.D4>.box .t .conl a:hover::before {
    opacity: 0
}

.D4>.box .t .conl a:hover span {
    opacity: 0
}

.D4>.box .t .conl a:hover i {
    opacity: 1
}

.D4>.box .b .swiper-slide {
    box-sizing: border-box;
    margin: 0 0 5px 0
}

.D4>.box .b .swiper-slide a {
    box-sizing: border-box;
    display: block;
    background: #fff;
    position: relative;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease
}

.D4>.box .b .swiper-slide a:hover {
    scale: .98
}

.D4>.box .b .swiper-slide a .fm {
    width: 80%;
    padding: 10% 10% 2% 10%
}

.D4>.box .b .swiper-slide a .fm img {
    width: 100%;
    aspect-ratio: 1/1;
    -o-object-fit: contain;
    object-fit: contain
}

.D4>.box .b .swiper-slide a .name {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    padding: 0 0 2rem 0
}

.en .D1>.box .hhh .zh {
    font-size: 2.4rem
}

.en .D3>.box .hhh .zh {
    font-size: 2.4rem
}