* {
    margin: 0px;
    padding: 0px;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

@font-face {
    font-family: bebasneue;
    src: url(../font/BebasNeue-Bold.otf) format("opentype");
    font-alias: BebasNeue;
    font-display: swap
}

@font-face {
    font-family: Sarabun;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/Sarabun-Regular.woff2) format('woff2');
}

@font-face {
    font-family: Sarabun;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../font/Sarabun-Medium.woff2) format('woff2');
}

@font-face {
    font-family: Sarabun;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../font/Sarabun-SemiBold.woff2) format('woff2');
}

@font-face {
    font-family: Sarabun;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../font/Sarabun-Bold.woff2) format('woff2');
}

input,
textarea,
select,
button {
    outline: none;
    border: none;
}

html {
    transition: font-size 0.3s ease;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 10px;
}

:root {
    --font-size-14: 1.4rem;
    --color-primary: #e60012;
}

body {
    font-size: 1.5rem;
    font-family: Sarabun, Helvetica, Arial, Lucida, sans-serif;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.container {
    width: 95%;
    margin: 0 auto;
    height: 100%;
}

.container_pages {
    width: 94%;
    max-width: 168rem;
    margin: 0 auto;
    height: 100%;
}

#header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

.Top_Bar {
    width: 100%;
    height: 4rem;
    background: #FFF;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.Top_Bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Top_Bar .slogan {
    line-height: 1.5;
    font-size: var(--font-size-14);
    color: rgba(0, 0, 0, 1);
    text-align: left;
}

.Top_Bar .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.Top_Bar .list .item {
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

.Top_Bar .list .item svg {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    fill: var(--color-primary);
    margin-right: 0.4rem;
}

.Top_Bar .list .item .txt {
    display: flex;
    align-items: center;
}

.Top_Bar .list .txt span {
    font-size: var(--font-size-14);
    color: rgba(0, 0, 0, 1);
}

.Top_Bar .list .txt a {
    font-size: var(--font-size-14);
    color: var(--color-primary);
    font-weight: bold;
}

.Top_Bar .list .language {
    position: relative;
    cursor: pointer;
    z-index: 10;
    display: none !important;
}

.Top_Bar .list .language .title {
    display: flex;
    align-items: center;
}

.Top_Bar .list .language .title .txt {
    display: flex;
    align-items: center;
}

.Top_Bar .list .language .title .txt svg {
    width: 1.4rem;
    height: 1.5rem;
    fill: var(--color-primary);
}

.Top_Bar .list .language .title .img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 0.4rem;
}

.Top_Bar .list .language .title .img img {
    width: 100%;
    height: 100%;
    display: block;
}

.Top_Bar .list .language .title .txt span {
    font-size: var(--font-size-14);
    color: rgba(0, 0, 0, 1);
    display: block;
    margin-right: 0.4rem;
}

.Top_Bar .list .language .language_box {
    position: absolute;
    padding-top: 1.5rem;
    display: none;
}

.Top_Bar .list .language:hover .language_box {
    display: block;
}

.Top_Bar .list .language .language_list {
    background: #FFF;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    position: relative;
}

.Top_Bar .list .language .language_list::before {
    content: '';
    position: absolute;
    top: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    border: 0.7rem solid transparent;
    border-bottom: 0.7rem solid rgba(255, 255, 255, 1);
    transition: all .5s ease 0s;
}

.Top_Bar .list .language .language_item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}

.Top_Bar .list .language .language_item:last-child {
    border: none;
}

.Top_Bar .list .language .language_item img {
    display: block;
    width: 2.2rem;
    height: 1.45rem;
    margin-right: 0.5rem;
}

.Top_Bar .list .language .language_item span {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.4rem;
}

.Top_Bar .list .language .language_item:hover span {
    color: var(--color-primary);
}

.nav {
    width: 100%;
    height: 9rem;
    transition: 0.5s;
    position: relative;
    border-bottom: 0.1rem solid rgba(255, 255, 255,0.5) ;
    /*box-shadow: 0px 1.1rem 1rem 0.1rem #0000001a;*/
}

.Detail_body_banner .nav {
    border-bottom: 0.1rem solid rgba(0, 0, 0,0.2) ;
}

.nav.avtive {
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(0.8rem);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo {
    height: 7rem;
    display: block;
}

.nav .logo img {
    height: 100%;
    display: block;
    width: auto;
}

.nav .logo .logo_img2 {
    display: block;
}

.nav .logo .logo_img {
    display: none;
}

.nav .right {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav .right ul {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 3rem;
    box-sizing: border-box;
}

.nav .right ul::after {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0.1rem;
    height: 2.6rem;
    display: block;
    background: rgba(0, 0, 0, 0.15);
}

.nav .right ul li {
    height: 100%;
}

.nav .right ul li .nav_title {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.nav .right ul li .nav_title::after {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 0%;
    height: 0.3rem;
    background: var(--color-primary);
    transition: 0.6s ease;
}

.nav .right ul li .nav_title span {
    color: #fff;
    font-size: 1.7rem;
    position: relative;
    padding: 0px 2.5rem;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    transition: 0.4s ease;
}

.nav .right ul li .nav_title span::after {
    content: attr(data-title);
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(100%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 90px;
    font-size: 1.7rem;
    font-weight: normal;
    color: var(--color-primary);
    transition: 0.4s ease;
}

.nav .right ul li:hover .nav_title::after {
    width: 100%;
}

.nav .right ul li:hover .nav_title span {
    transform: translateY(-100%);
}

.nav .right .Search_Form {
    display: flex;
    align-items: center;
    padding-left: 2rem;
}

.nav .right .Search_Form .Search {
    width: 4.8rem;
    height: 4.8rem;
    display: block;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav .right .Search_Form .Search svg {
    width: 3.2rem;
    height: 3.2rem;
    display: block;
    fill: var(--color-primary);
}

.nav .right .Search_Form .Form {
    cursor: pointer;
    width: 14.3rem;
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 2.1rem;
}

.nav .right .Search_Form .Form .icon {
    width: 2.4rem;
    height: 2.4rem;
    background: #da000f;
    border-radius: 50%;
}

.nav .right .Search_Form .Form .icon svg {
    width: 100%;
    height: 100%;
    fill: #FFF;
    display: block;
}

.nav .right .Search_Form .Form .txt {
    color: rgb(255, 255, 255);
    font-size: 1.6rem;
    margin-left: 1rem;
}


.banner_swiper {
    width: 100%;
    height: 100vh;
}

.banner_swiper .row_box {
    width: 100%;
    height: 100%;
}

.banner_swiper .row_box img,
.banner_swiper .row_box video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.banner_swiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner_swiper .swiper-slide .ceng {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.banner_swiper .swiper-slide .text {
    width: 94%;
    max-width: 168rem;
    position: absolute;
    text-align: left;
    left: 50%;
    top: 50%;
    z-index: 9;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4;
}

.banner_swiper .swiper-slide .text h2 {
    padding: 0px 0px;
    width: 100%;
    max-width: 84rem;
    color: var(--color-primary);
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: bold;
    font-weight: 700;
    margin-bottom: 1rem;
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 50%, 0);
    cursor: pointer;
    text-transform: Uppercase;
    transition: transform 1.5s ease 0.5s, opacity 1.5s ease 0.5s;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}


.banner_swiper .swiper-slide .text h3 {
    font-size: 4.8rem;
    line-height: 1.2;
    padding: 0px 0px;
    padding-top: 0px;
    color: #fff;
    font-weight: bold;
    font-weight: bold;
    letter-spacing: 0px;
    text-indent: 0px;
    width: 100%;
    margin: 0px 0px;
    max-width: 84rem;
    opacity: 0;
    text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
    transition: transform 1.5s ease 1s, opacity 1.5s ease 1s;
    transform: translate3d(0, -50%, 0);
}

.banner_swiper .swiper-slide .text i {
    width: 0%;
    max-width: 0rem;
    height: 0.1rem;
    background: #FFF;
    margin: 1.5rem 0px;
    transition: 0.5s ease;
    display: block;
}

.banner_swiper .swiper-slide .text p {
    font-size: 1.7rem;
    line-height: 1.5;
    width: 100%;
    margin: 0px 0px;
    max-width: 84rem;
    font-weight: normal;
    font-weight: 200;
    padding: 0px 0px;
    color: #fff;
    letter-spacing: 0px;
    text-indent: 0px;
    opacity: 0;
    margin-top: 0px;
    transition: transform 1s ease 2s, opacity 1s ease 2s;
    transform: translate3d(0, 60%, 0);
    white-space: pre-line;
}

.banner_swiper .swiper-slide-active .text h2 {
    transition: transform 1.5s ease 0.5s, opacity 1.5s ease 0.5s;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.banner_swiper .swiper-slide-active .text h3 {
    opacity: 1;
    transition: transform 1.5s ease 1s, opacity 1.5s ease 1s;
    transform: translate3d(0, 0, 0);
}

.banner_swiper .swiper-slide-active .text i {
    width: 100%;
    max-width: 84rem;
}

.banner_swiper .swiper-slide-active .text p {
    opacity: 1;
    transition: transform 1s ease 2s, opacity 1s ease 2s;
    transform: translate3d(0, 0, 0);
}

.banner_swiper .button_list {
    position: relative;
    width: 100%;
    z-index: 10;
}

.banner_swiper .button_list .down {
    position: absolute;
    left: 6rem;
    bottom: 6rem;
}

.banner_swiper .button_list .down span {
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    display: block;
    font-family: arial;
    writing-mode: tb;
    line-height: 2rem;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
}

.banner_swiper .button_list .down i {
    display: block;
    width: 2rem;
    height: 3rem;
    position: relative;
    border-radius: 1.2rem;
    border: 0.2rem solid var(--color-primary);
}

.banner_swiper .button_list .down i::before {
    content: "";
    display: block;
    width: 0.2rem;
    height: 0.6rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    top: 0.3rem;
    background: rgb(255, 255, 255);
    border-radius: 0.2rem;
    animation: 2s linear 0s infinite normal none running scrollmouse;

}

@keyframes scrollmouse {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    to {
        transform: translate(-50%, 1rem);
        opacity: 0;
    }
}

.banner_swiper .button_list .swiper-pagination {
    max-width: 14.8rem;
    bottom: 6rem;
    left: 50%;
    width: 94%;
    text-align: center;
    font-size: 0px;
    transform: translateX(-50%);
}

.banner_swiper .button_list .swiper-pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    opacity: 1;
    position: relative;
    background: rgba(255, 255, 255, 0);
    margin: 0px 0.6rem;
    border-radius: 10rem;
    transition: 0.5s;
    cursor: pointer;
}

.banner_swiper .button_list .swiper-pagination .swiper-pagination-bullet::after {
    content: "";
    display: inline-block;
    clear: both;
    width: 1rem;
    height: 1rem;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10rem;
}

.banner_swiper .button_list .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 4.8rem;
    background: var(--color-primary);
}

.banner_swiper .button_list .swiper-pagination .swiper-pagination-bullet-active::after {
    animation: 5s ease-in-out 0.2s 1 normal forwards running pagination;
    background: rgba(255, 255, 255, 0.4);
}

.banner_swiper .button_list .swiper-button-prev,
.banner_swiper .button_list .swiper-button-next {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem dashed #FFF;
    border-radius: 50%;
    margin-top: 0px;
    top: auto;
    bottom: 6rem;
}

.banner_swiper .button_list .swiper-button-prev::after,
.banner_swiper .button_list .swiper-button-next::after {
    color: #FFF;
    font-size: 2rem;
}

.banner_swiper .button_list .swiper-button-prev {
    left: auto;
    right: 13rem;
}

.banner_swiper .button_list .swiper-button-next {
    right: 6rem;
    left: auto;
}

.banner_swiper .button_list .swiper-button-prev:hover,
.banner_swiper .button_list .swiper-button-next:hover {
    background: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
}

@keyframes pagination {
    0% {
        width: 10px;
    }

    100% {
        width: 4.8rem;
    }
}

.About {
    padding: 8% 0px;
    width: 100%;
    background: url(../images/About.jpg) no-repeat;
    overflow: hidden;
    position: relative;
}

.About::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.About .container {
    width: 90%;
    position: relative;
    z-index: 3;
}

.About .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.About .out .left {
    width: 55%;
    padding-right: 8rem;
    box-sizing: border-box;
}

.About .out .left h2 {
    text-align: left;
    line-height: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: normal;
    font-size: 10rem;
    color: rgba(0, 0, 0, 0.1);
    font-family: "bebasneue";
}

.About .out .left span {
    text-align: left;
    line-height: 1.5;
    margin-top: -1rem;
    margin-bottom: 0px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.2rem;
    color: var(--color-primary);
}

.About .out .left h3 {
    text-align: left;
    line-height: 1.2;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.2rem;
    color: rgba(0, 0, 0, 1);
}

.About .out .left .xian {
    display: flex;
    align-items: center;
    margin: 1.5rem 0px;
}

.About .out .left .xian i {
    width: 3.8rem;
    height: 0.3rem;
    display: block;
    background: #a3000a;
}

.About .out .left .xian i:nth-child(1) {
    background: var(--color-primary);
}

.About .out .left .txt {
    margin-top: 2rem;
    width: 100%;
}

.About .out .left .txt p {
    color: rgba(0, 0, 0, 0.9);
    line-height: 1.8;
    font-size: 1.6rem;
}

.About .out .left .number {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 4rem;
}

.About .out .left .number .box {
    width: 33.33%;
    padding: 0px 1rem 0.5rem 2.5rem;
    box-sizing: border-box;
    border-left: 0.1rem solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    position: relative;
}

.About .out .left .number .box .tit {
    display: flex;
    align-items: flex-start;
}

.About .out .left .number .box .tit span {
    margin: 0px;
    font-weight: bold;
    margin-left: 0.5rem;
    font-size: 2.2rem;
    line-height: 1;
}

.About .out .left .number .box b {
    font-size: 6.4rem;
    padding-left: 0px;
    line-height: 1;
    font-family: "bebasneue";
    color: var(--color-primary);
}

.About .out .left .number .box::after {
    position: absolute;
    left: -0.15rem;
    top: 1rem;
    width: 0.3rem;
    height: 5rem;
    content: '';
    background: var(--color-primary);
}

.About .out .left .number .box p {
    text-align: left;
    line-height: 1.5;
    font-weight: normal;
    color: rgba(0, 0, 0, 1);
    margin-top: 0px;
    font-size: 1.6rem;
}

.Moer_public {
    padding: 0.8rem 4.5rem;
    font-size: 1.5rem;
    line-height: 2;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
    text-align: center;
    background: var(--color-primary);
    border-radius: 10rem;
    transition: 0.5s ease;
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
}

.Moer_public:hover {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
    background: #a3000a;
}

.Moer_public::before {
    content: "";
    position: absolute;
    display: block;
    transition: all .6s;
    width: 100%;
    height: 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    padding-top: 100%;
    transform: translateX(-50%) translateY(-50%);
}

.Moer_public:hover::before {
    animation: style1 .75s;
    z-index: 1;
}




.About .out .right {
    width: 45%;
    position: relative;
}

.About .out .right::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -45%;
    right: -45%;
    content: '';
    background: var(--color-primary);
    opacity: 0.25;
    z-index: 1;
}

.About .out .right img {
    width: 100%;
    border-radius: 0px 0px 0px 14rem;
    position: relative;
    z-index: 3;
}

.PRODUCT_SERIES {
    width: 100%;
    background: url(../images/Prod.jpg) no-repeat;
}

.PRODUCT_SERIES .container {
    padding: 8% 0px;
    position: relative;
    max-width: 168rem;
    margin: 0 auto;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container {
    width: 100%;
       height: auto;
           padding-bottom: 6rem;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .img {
    width: 50%;
    height: 44rem;
    padding-right: 6.7rem;
    box-sizing: border-box;
    padding-bottom: 5rem;
    box-sizing: border-box;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text {
    width: 50%;
    padding-left: 6.7rem;
}


.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title {
    width: 100%;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title h2 {
    text-align: left;
    line-height: 1;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10rem;
    font-family: "bebasneue";
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title span {
    text-align: left;
    line-height: 1.5;
    margin-top: 0px;
    font-weight: normal;
    color: var(--color-primary);
    font-size: 2.2rem;
    margin-bottom: 0px;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt {
    width: 100%;
    padding: 3.8rem 0px 7.7rem 0px;
    box-sizing: border-box;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt h3 {
    color: #FFF;
    font-size: 4.2rem;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt i {
    width: 7.6rem;
    height: 0.3rem;
    background: var(--color-primary);
    display: block;
    margin: 1.5rem 0px;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt p {
    color: #FFF;
    font-size: 1.6rem;
    line-height: 1.7em;
    
      display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4 ;    /* 限制显示行数 */
  overflow: hidden;
    
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt .but_list {
    display: flex;
    gap: 0px 1rem;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt .but_list .Moer_public:nth-child(2) {
    background: #FFF;
    color: #333;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination {
    width: 50%;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0px;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: block;
    border-radius: 4.6rem;
    transition: 0.5s ease;
    opacity: 1;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination .swiper-pagination-bullet-active {
    width: 4.8rem;
    background: var(--color-primary);
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev,
.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
    width: 6.8rem;
    height: 6.8rem;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    top: auto;
    margin-top: 0px;
    bottom: 0px;
    left: 50%;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev::after,
.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next::after {
    font-size: 1.8rem;
    color: var(--color-primary);
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev {
    left: 52%;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
    left: 57%;
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev:hover,
.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next:hover {
    background: var(--color-primary);
}

.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev:hover::after,
.PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next:hover::after {
    color: #FFF;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List {
    position: absolute;
    left: 50%;
    width: 100%;
    bottom: 0px;
    z-index: 10;
    transform: translateY(50%) translateX(-50%);
    padding: 1rem;
    box-sizing: border-box;
    max-width: 170rem;
    width: 100%;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide {
    width: 22.284rem;
    height: 16.3rem;
    margin-right: 2rem;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide:last-child {
    margin-right: 0px;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide a {
    width: 100%;
    display: block;
    height: 100%;
    background: #FFF;
    padding-left: 1rem;
    padding-top: 2rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    max-width: none;
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide a img {
    /*width: 10rem;*/
    height: 7.5rem;
    margin: 0 auto;
    display: block;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide a p {
    font-size: 1.4rem;
    color: #333;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 1rem;
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide:hover a,
.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide-thumb-active a {
    background: var(--color-primary);
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide:hover a img,
.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide-thumb-active a img {
    filter: brightness(0) invert(1);
}

.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide:hover a p,
.PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide-thumb-active a p {
    color: #FFF;
    font-weight: bold;
}

.Home_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.Home_title .tit {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.Home_title .tit b {
    line-height: 1.5;
    font-weight: normal;
    font-size: 2.4rem;
    color: var(--color-primary);
    line-height: 1;
}

.Home_title .tit i {
    width: 4.8rem;
    height: 0.2rem;
    background: rgba(0, 0, 0, 0.3);
    display: block;
    margin-left: 0.3rem;
}

.Home_title .left h2 {
    text-align: left;
    line-height: 1.5;
    font-weight: bold;
    font-size: 3.4rem;
    color: rgb(0, 0, 0);
}

.Home_title .Moer {
    width: 14rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.4rem;
    border: 0.2rem solid rgba(0, 0, 0, 0.15);
    border-radius: 2rem;
    transition: 0.4s ease;
}

.Home_title .Moer svg {
    width: 3rem;
    height: 3rem;
    fill: var(--color-primary);
    transition-delay: 0.1s;
    transition: 0.5s ease;
}

.Home_title .Moer:hover {
    width: 17rem;
    color: #FFF;
    background: var(--color-primary);
    border: 0.2rem solid var(--color-primary);
}

.Home_title .Moer:hover svg {
    transform: rotate(45deg);
    fill: #FFF;
}

.Our_Services {
    padding: 6% 0px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4%;
    overflow: hidden;

}

.Our_Services .container {
    max-width: 158rem;
}

.Our_Services .Our_swiper {
    overflow: visible;
    width: 100%;
    margin-top: 5rem;
    padding-bottom: 3%;
}

.Our_Services .Our_swiper .swiper-slide {
    width: 79rem;
    transform: scale(0.85);
    transition: 0.5s ease;
}

.Our_Services .Our_swiper .swiper-slide .img {
    width: 100%;
    height: 39.5rem;
    display: block;
    overflow: hidden;
    border-radius: 2rem;
}

.Our_Services .Our_swiper .swiper-slide .img img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.Our_Services .Our_swiper .swiper-slide .text {
    width: calc(100% - 6rem);
    margin: 0 auto;
    padding: 4rem 3rem;
    box-sizing: border-box;
    border-radius: 1rem;
    background: #FFF;
    background-color: rgba(255, 255, 255, 0.8);
    margin-top: -3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.8rem);
    transition: all .5s ease 0s;
    transform: scale(0);
    opacity: 0;
    overflow: hidden;
    transition: 0.5s ease;
}

.Our_Services .Our_swiper .swiper-slide .text h3 {
    color: #000;
    font-size: 2.6rem;
    line-height: 1.3;
    text-align: center;
}

.Our_Services .Our_swiper .swiper-slide .text i {
    width: 4.8rem;
    height: 0.2rem;
    display: block;
    background: var(--color-primary);
    margin: 1.5rem auto;
}

.Our_Services .Our_swiper .swiper-slide .text p {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

.Our_Services .Our_swiper .swiper-slide-active {
    transform: scale(1);
}

.Our_Services .Our_swiper .swiper-slide-active .text {
    transform: scale(1);
    opacity: 1;
    margin-top: -5rem;
}

.Our_Services .Our_swiper .swiper-slide:hover .text {
    transform: translateY(-3rem);
    box-shadow: 0px 0px 1rem 0.1rem #e600135d;
}

.Our_Services .Our_swiper .swiper-slide:hover .img img {
    transform: scale(1.1);
}

.Our_Services .Our_swiper .swiper-pagination {
    bottom: -1rem;
}

.Our_Services .Our_swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 4.6rem;
    opacity: 1;
    background: #B2B2B2;
    transition: 0.5s ease;
}

.Our_Services .Our_swiper .swiper-pagination-bullet-active {
    width: 4.8rem;
    background: var(--color-primary);
}

.Our_Services .Our_swiper .swiper-button-prev,
.Our_Services .Our_swiper .swiper-button-next {
    width: 6.8rem;
    height: 6.8rem;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    top: 35%;
}

.Our_Services .Our_swiper .swiper-button-prev::after,
.Our_Services .Our_swiper .swiper-button-next::after {
    color: #FFF;
    font-size: 2.2rem;
}

.Our_Services .Our_swiper .swiper-button-prev:hover,
.Our_Services .Our_swiper .swiper-button-next:hover {
    opacity: 1;
}

.Blog {
    width: 100%;
    background: #E1F1FD;
}

.Blog .container {
    width: 90%;
    padding: 6% 0px;
    box-sizing: border-box;
}

.Blog .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 4rem;
}

.Blog .out .Blog_swiper {
    width: 66.5%;
    height: 52.4rem;
    border-radius: 2rem;
}

.Blog .out .Blog_swiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.Blog .out .Blog_swiper .swiper-slide .img {
    width: 100%;
    height: 100%;
    display: block;
}

.Blog .out .Blog_swiper .swiper-slide .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.Blog .out .Blog_swiper .swiper-slide .text {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(0.0deg, rgba(0, 0, 0, 0.9) 0.0, rgba(0, 0, 0, 0) 100.0%);
    padding: 6rem 2.5rem 2rem 2.5rem;
    box-sizing: border-box;
    width: 100% ;
}

.Blog .out .Blog_swiper .swiper-slide .text h3 {
    color: #FFF;
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85%;
    margin-bottom: 0.5rem;
}

.Blog .out .Blog_swiper .swiper-slide .text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.4rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 85%;
}

.Blog .out .Blog_swiper .swiper-slide .tiem {
    position: absolute;
    top: 0px;
    left: 2.5rem;
}

.Blog .out .Blog_swiper .swiper-slide .tiem .date {
    border-radius: 0px 0px 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    box-sizing: border-box;
    background: #FFF;
    z-index: 2;
    position: relative;
}

.Blog .out .Blog_swiper .swiper-slide .tiem b {
    font-family: "bebasneue";
    font-size: 4.8rem;
    color: var(--color-primary);
}

.Blog .out .Blog_swiper .swiper-slide .tiem span {
    font-size: 1.4rem;
    color: #000;
    font-weight: bold;
    padding-top: 0.5rem;
    border-top: 0.1rem dashed #00000023;
}

.Blog .out .Blog_swiper .swiper-slide .tiem::after {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    content: "";
    background: var(--color-primary);
    z-index: 0;
    transform: translateY(0.5rem);
    border-radius: 0px 0px 1rem 1rem;
}

.Blog .out .Blog_swiper .swiper-button-prev,
.Blog .out .Blog_swiper .swiper-button-next {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 10%);
    opacity: 1;
}

.Blog .out .Blog_swiper .swiper-button-prev::after,
.Blog .out .Blog_swiper .swiper-button-next::after {
    color: #FFF;
    font-size: 2.2rem;
}

.Blog .out .Blog_swiper .swiper-button-prev:hover,
.Blog .out .Blog_swiper .swiper-button-next:hover {
    background: var(--color-primary);
}

.Blog .out .Blog_swiper .swiper-pagination {
    width: auto;
    display: flex;
    align-items: center;
    left: auto;
    right: 2rem;
    bottom: 2.5rem;
}

.Blog .out .Blog_swiper .swiper-pagination .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background: #FFF;
    border-radius: 50%;
    opacity: 1;
}

.Blog .out .Blog_swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

.Blog .out .right {
    width: 33.5%;
    height: 52.4rem;
    padding-left: 6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Blog .out .right .box {
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    height: 24.7rem;
    position: relative;
}

.Blog .out .right .box .img {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.Blog .out .right .box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.Blog .out .right .box .text {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 4rem 2.5rem 2rem 2.5rem;
    box-sizing: border-box;
    background-image: linear-gradient(0.0deg, rgba(0, 0, 0, 0.9) 0.0, rgba(0, 0, 0, 0) 100.0%);
    z-index: 1;
}

.Blog .out .right .box .text i {
    width: 0%;
    height: 0.2rem;
    background: #FFF;
    display: block;
    margin-bottom: 2rem;
    transition: 0.5s ease;
}

.Blog .out .right .box .text h3 {
    color: #FFF;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.Blog .out .right .box:hover .text i {
    width: 100%;
}

.Blog .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    margin-top: 3%;
}

.Blog .list .item {
    width: 32%;
    background: #FFF;
    border-radius: 1rem;
}

.Blog .list .item a {
    padding: 3rem 1rem;
    display: flex;
    align-items: center;
}

.Blog .list .item .tiem {
    width: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.Blog .list .item .tiem b {
    color: var(--color-primary);
    font-size: 4.8rem;
    font-family: "bebasneue";
    font-weight: 500;
}

.Blog .list .item .tiem span {
    font-family: "bebasneue";
    font-size: 1.4rem;
    color: #333;
    font-weight: bold;
}

.Blog .list .item .txt {
    width: 82%;
    padding: 0px 2rem;
    box-sizing: border-box;
    border-left: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.Blog .list .item h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: #000;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.Blog .list .item p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.4rem;
    line-height: 1.5;
}

.Blog .list .item:hover {
    background: var(--color-primary);
}

.Blog .list .item:hover .tiem b,
.Blog .list .item:hover .tiem span,
.Blog .list .item:hover h3,
.Blog .list .item:hover p {
    color: #FFF;
}

.Blog .list .item:hover .txt {
    border-left: 0.1rem solid #FFF;
}

#footer {
    width: 100%;
    background: #222222;
    padding: 5.7rem 0px;
    box-sizing: border-box;
}

#footer .container {
    width: 94%;
}

#footer .out {
    padding: 3rem 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#footer .out .left {
    width: 70%;
    padding-right: 4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 2rem 0px ;
}

#footer .out .left .tit {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
    text-transform: uppercase;
}

#footer .out .left .list {
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 24.7rem;
    gap: 0px 3rem;
    margin-top: 2rem;
}

#footer .out .left .list a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.4rem;
    text-transform: capitalize;
    line-height: 2em;
}

#footer .out .left .list a:hover {
    color: #FFF;
}

#footer .out .right {
    width: 30%;
    padding-left: 4rem;
    border-left: 0.1rem solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}

#footer .out .right .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer .out .right .box .text {
    width: calc(100% - 16.5rem);
}

#footer .out .right .box .text h2 {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

#footer .out .right .box .text .list {
    width: 100%;
}

#footer .out .right .box .text .list .item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

#footer .out .right .box .text .list .item:last-child {
    margin-bottom: 0px;
}

#footer .out .right .box .text .list .item .icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: #393939;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer .out .right .box .text .list .item .icon svg {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    fill: #FFF;
}

#footer .out .right .box .text .list .item .txt {
    width: calc(100% - 3.6rem);
    padding-left: 1rem;
    box-sizing: border-box;
}

#footer .out .right .box .text .list .item .txt span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    display: block;
    margin-bottom: 0.3rem;
}

#footer .out .right .box .text .list .item .txt a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
}

#footer .out .right .box .text .list .item:nth-child(1) .icon {
    background: var(--color-primary);
}

#footer .out .right .box .text .list .item:nth-child(1) a b {
    color: var(--color-primary);
    font-size: 1.8rem;
}

#footer .out .right .box .text .list .item:nth-child(1) a b:hover {
    color: #FFF;
}

#footer .out .right .box .erweima {
    width: 16.5rem;
    padding-left: 2rem;
    box-sizing: border-box;
}

#footer .out .right .box .erweima img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
}

#footer .out .right .box .erweima span {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.4rem;
    display: block;
}

#footer .out .right .list_Contact {
    width: 100%;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 0px 1rem;
}

#footer .out .right .list_Contact a {
    width: 2.8rem;
    height: 2.8rem;
    display: block;
}

#footer .out .right .list_Contact a img {
    width: 100%;
    height: 100%;
    display: block;
}

.Copyright {
    width: 100%;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Copyright .box {
    display: flex;
    align-items: center;
    gap: 0px 2rem;
}

.Copyright p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.4rem;
}

.Copyright a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.4rem;
}

.Copyright a:hover {
    color: #FFF;
}

.banner {
    width: 100%;
    height: 48rem;
    margin-top: 4rem;
    position: relative;
}

.banner .img {
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.banner .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner .container_pages {
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.banner .text {
    position: absolute;
    left: 0px;
    bottom: 25%;
    padding-left: 2rem;
    box-sizing: border-box;
    border-left: 0.1rem solid #FFF;
}

.banner .text h2 {
    font-size: 4.8rem;
    color: #FFF;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

.banner .text span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.4;
}

.banner::after {
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.35);
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: 1;
}

.breadcrumb_list {
    width: 100%;
    height: 10rem;
    transform: translateY(-5rem);
    position: relative;
    z-index: 10;
}

.breadcrumb_list .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 2rem;
    box-sizing: border-box;
    background: #FFF;
    height: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.breadcrumb_list .out .but_list {
    display: flex;
    align-items: center;
    height: 100%;
}

.breadcrumb_list .out .but_list a {
    padding: 1rem 4.5rem;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.8rem;
    position: relative;
    transition: 0.5s ease;
    text-align: center ;
}

.breadcrumb_list .out .but_list a:hover {
    color: var(--color-primary);
}

.breadcrumb_list .out .but_list a::after {
    bottom: 0px;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 0.2rem;
    background: var(--color-primary);
    display: block;
    position: absolute;
    bottom: 0px;
    transition: 0.5s ease;
}

.breadcrumb_list .out .but_list a::before {
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 0.1rem;
    height: 2rem;
    background: #0000002d;
    content: '';
    position: absolute;
}

.breadcrumb_list .out .but_list a:hover::after {
    width: 100%;
}

.breadcrumb_list .out .but_list a:last-child::before {
    display: none;
}

.breadcrumb_list .out .but_list a.active {
    background: var(--color-primary);
    color: #FFF;
}

.breadcrumb_list .out .but_list a.active::after {
    background: rgb(0 0 0 / 30%);
    width: 100%;
}

.breadcrumb_list .out .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap ;
}

.breadcrumb_list .out .breadcrumb a {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 1.4rem;
}

.breadcrumb_list .out .breadcrumb a::after {
    content: ' > ';
    color: #6c757d;
    font-size: 1.4rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.breadcrumb_list .out .breadcrumb a svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--color-primary);
    margin-right: 0.5rem;
}

.breadcrumb_list .out .breadcrumb a:last-child {
    color: #212521;
}

.breadcrumb_list .out .breadcrumb a:last-child::after {
    display: none;
}

.Button_Group {
    width: 100%;
    margin-bottom: 3rem;
}

.Button_Group .out {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2%;
}

.Button_Group .out a {
    width: 18.4%;
    height: 5.4rem;
    padding: 0.05rem 0.15rem;
    box-sizing: border-box;
    text-align: center;
    line-height: 5.4rem;
    color: #000;
    font-size: 1.7rem;
    border: solid 0.1rem rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem 0px 1.5rem 0px;
    transition: 0.5s ease;
    white-space: nowrap;       /* 禁止换行 */
    overflow: hidden;          /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;   /* 超出部分显示省略号 */
    padding: 0px 1rem ;
}

.Button_Group .out a:hover {
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
    border-radius: 0px 1.5rem 0px 1.5rem;
}

.product_pages {
    padding: 5.7rem 0px 9rem 0px;
    width: 100%;
}

.product_pages .xian {
    width: 7.5rem;
    height: 0.3rem;
    background: var(--color-primary);
    display: block;
    margin: 1.5rem 0px;
}

.product_pages .out {
    margin-top: 4.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 2%;
}

.product_pages .out .box {
    width: 23.37%;
    border: 0.1rem solid #F5F5F5;
    transition: 0.5s ease;
    box-sizing: border-box ;
}

.product_pages .out .box a {
    display: block;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
    box-sizing: border-box;
}

.product_pages .out .box .tit {
    width: 100%;
}

.product_pages .out .box .tit h2 {
    color: rgba(50, 50, 50, 1);
    font-size: 2.2rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    font-weight: 400;
}

.product_pages .out .box .tit i {
    width: 20%;
    display: block;
    margin: 1.5rem 0px;
    height: 0.3rem;
    background: var(--color-primary);
    transition: 0.5s ease;
}

.product_pages .out .box:hover .tit i {
    width: 100%;
}

.product_pages .out .box .img {
    width: 100%;
    height: 25.8rem;
    overflow: hidden;
    padding-bottom: 1rem;
}

.product_pages .out .box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    transition: 0.5s ease;
}

.product_pages .out .box:hover .img img {
    transform: scale(1.1);
}

.product_pages .out .box .text {
    width: 100%;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 0.1rem solid #E5E5E5;
}

.product_pages .out .box .text span {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.4rem;
    line-height: 2;
    display: block;
    
      display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* 限制显示行数 */
  overflow: hidden;
    
}

.product_pages .out .box .text .Moer {
    padding: 0.8rem 1.5rem;
    box-sizing: border-box;
    border: 0.1rem solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-top: 2rem;
    position: relative;
    transition: 0.5s ease;
}

.product_pages .out .box .text .Moer svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--color-primary);
    margin-left: 0.6rem;
    transform: translateY(0.2rem);
}

.product_pages .out .box .text .Moer::before {
    content: "";
    position: absolute;
    display: block;
    transition: all .6s;
    width: 100%;
    height: 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    padding-top: 100%;
    transform: translateX(-50%) translateY(-50%);
}

.product_pages .out .box .text .Moer:hover {
    background: var(--color-primary);
    color: #FFF;
}

.product_pages .out .box .text .Moer:hover svg {
    fill: #FFF;
}

.product_pages .out .box .text .Moer:hover:before {
    animation: style1 .75s;
    z-index: 1;
}

@keyframes style1 {
    0% {
        background: rgba(0, 0, 0, .25);
        transform: translateX(-50%) translateY(-50%) scale(0)
    }

    to {
        background: 0 0;
        transform: translateX(-50%) translateY(-50%) scale(1)
    }
}

.product_pages .out .box:hover {
    box-shadow: 0px 0px 1rem 0.1rem rgba(0, 0, 0, 0.15);
}

.blog_pages {
    width: 100%;
    padding: 9.5rem 0px;
    box-sizing: border-box;
}

.blog_pages .box {
    width: 100%;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}

.blog_pages .box a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog_pages .box .left {
    width: calc(100% - 36rem);
    display: flex;
    align-items: center
}

.blog_pages .box .left .tiem {
    width: 12.6rem;
    height: 100%;
    background: #F2F2F2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 23.8rem;
    transition: 0.4s ease;
    position: relative;
}

.blog_pages .box .left .tiem::after {
    content: '';
    position: absolute;
    border-top: 1.5rem solid transparent;
    border-bottom: 1.5rem solid transparent;
    border-left: 1.5rem solid rgba(0, 0, 0, 0.05);
    right: -4.5rem;
    top: 50%;
    right: -1.5rem;
    z-index: 3;
    transition: all 0.5s ease;
    opacity: 1;
    transition: 0.4s ease;
}

.blog_pages .box .left .tiem b {
    font-size: 5.4rem;
    color: var(--color-primary);
    font-family: Arial;
    font-weight: bold;
    transition: 0.4s ease;
}

.blog_pages .box .left .tiem span {
    color: #212529;
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    text-align: center;
    transition: 0.4s ease;
}

.blog_pages .box:hover .left .tiem b,
.blog_pages .box:hover .left .tiem span {
    color: #FFF;
}

.blog_pages .box:hover .left .tiem {
    background: var(--color-primary);
}

.blog_pages .box:hover .left .tiem::after {
    border-left: 1.5rem solid var(--color-primary);
}


.blog_pages .box .left .text {
    padding-left: 3rem;
    box-sizing: border-box;
    width: calc(100% - 12.6rem);
    display: flex;
    align-items: center;
}

.blog_pages .box .left .text i {
    width: 6rem;
    height: 0.1rem;
    background: rgba(0, 0, 0, 0.3);
    display: block;
    flex: none;
    transition: 0.6s ease;
}

.blog_pages .box:hover .left .text i {
    width: 9rem;
}

.blog_pages .box .left .text .txt {
    width: 100%;
    padding: 0px 3rem;
    box-sizing: border-box;
}

.blog_pages .box .left .text .txt h2 {
    color: #000;
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1rem;
}

.blog_pages .box .left .text .txt p {
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.4rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

.blog_pages .box .left .text .txt .Moer {
    margin-top: 2rem;
    width: 12.3rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #FFF;
    font-weight: 400;
    border-radius: 0.4rem;
}

.blog_pages .box .left .text .txt .Moer:hover {
    background: #A3000A;
}

.blog_pages .box .right {
    width: 36rem;
    height: 23.8rem;
    overflow: hidden;
    border-radius: 1rem;
}

.blog_pages .box .right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: 0.5s ease;
}

.blog_pages .box:hover .right img {
    transform: scale(1.1);
}

.Blog_img_pages,
.Blog_video_pages {
    width: 100%;
    padding: 6rem 0px 9rem 0px;
}

.public_title {
    width: 100%;
}

.public_title h2 {
    font-size: 3.6rem;
    color: #000;
    line-height: 1.1;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
}

.public_title i {
    width: 9rem;
    height: 0.2rem;
    background: var(--color-primary);
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
}

.public_title p {
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: center;
    max-width: 96rem;
    margin: 0 auto;
    margin-top: 2rem;
}

.Blog_img_pages .out,
.Blog_video_pages .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 4rem;
    gap: 3rem 2%;
}

.Blog_img_pages .out .box,
.Blog_video_pages .out .box {
    width: 23.37%;
    cursor: pointer;
}

.Blog_video_pages .out .box {
    width: 32%;
    cursor: pointer;
}

.Blog_img_pages .out .box .img,
.Blog_video_pages .out .box .img {
    width: 100%;
    height: 26.2rem;
    overflow: hidden;
    border-radius: 1rem 1rem 0px 0px;
    position: relative;
}

.Blog_video_pages .out .box .img {
    height: 30.3rem;
}

.Blog_img_pages .out .box .img img,
.Blog_video_pages .out .box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: 0.5s ease;
}

.Blog_img_pages .out .box .tit,
.Blog_video_pages .out .box .tit {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    background: #F5F5F5;
    border-radius: 0px 0px 1rem 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: 1.6rem;
    transition: 0.4s ease;
}

.Blog_img_pages .out .box:hover .img img,
.Blog_video_pages .out .box:hover .img img {
    transform: scale(1.1);
}

.Blog_img_pages .out .box:hover .tit,
.Blog_video_pages .out .box:hover .tit {
    background: var(--color-primary);
    color: #FFF;
}

.Blog_video_pages .out .box .img .playIco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.8rem;
    height: 6.8rem;
    z-index: 3;
}

.Blog_video_pages .out .box .img .playIco svg {
    width: 100%;
    height: 100%;
    display: block;
}

.Blog_video_pages .out .box:hover .img .playIco svg {
    animation: gWelCnta 1.5s ease-in-out;
}

.Blog_video_pages .out .box .img::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    content: '';
    opacity: 0;
}

.Blog_video_pages .out .box:hover .img::after {
    opacity: 1;
}


@keyframes gWelCnta {
    0% {
        transform: rotate(0);
    }

    70% {
        transform: rotate(360deg);
    }

    80% {
        transform: rotate(350deg);
    }

    95% {
        transform: rotate(370deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


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

.Video_Player .out {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #00000044;
}

.Video_Player .out .video {
    width: 95%;
    max-width: 96rem;
    height: auto;
    max-height: 54rem;
    display: block;
    overflow: hidden;
}

.Video_Player .out .video video {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    object-fit: cover;
}


.Video_Player .out .CLOSE {
    width: 15rem;
    height: 4.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    background: #FFF;
    font-size: 1.5rem;
    border-radius: 2.5rem;
    margin-top: 2rem;
    cursor: pointer;
}

.Video_Player .out .CLOSE:hover {
    background: var(--color-primary);
    color: #FFF;
}

.SALES_SERVICE {
    width: 100%;
    padding: 6rem 0px 9rem 0px;
}

.SALES_SERVICE .title {
    width: 100%;
    margin-bottom: 5rem;
}

.SALES_SERVICE .title h2 {
    color: #000;
    font-size: 3.6rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.SALES_SERVICE .title i {
    width: 7.6rem;
    height: 0.2rem;
    background: var(--color-primary);
    display: block;
}

.SALES_SERVICE .out {
    width: 100%;
    height: 50rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.SALES_SERVICE .out .left {
    width: 28%;
    height: 100%;
    border: 0.1rem solid #e5e5e5;
    overflow: auto;
}

/* 整个滚动条 */
.SALES_SERVICE .out .left::-webkit-scrollbar {
    width: 0.4rem;
}

/* 滚动条轨道 */
.SALES_SERVICE .out .left::-webkit-scrollbar-track {
    background: #E6E6E6;
    /* 轨道的颜色 */
}

/* 滚动条滑块 */
.SALES_SERVICE .out .left::-webkit-scrollbar-thumb {
    background: #C1C1C1;
    /* 滑块的颜色 */
    border-radius: 0px;
    /* 滑块的圆角 */
}

/* 滑块在鼠标悬停时的颜色 */
.SALES_SERVICE .out .left::-webkit-scrollbar-thumb:hover {
    background: #C1C1C1;
}

.SALES_SERVICE .out .left .box {
    border-bottom: 0.1rem solid #e5e5e5;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    cursor: pointer;
}

.SALES_SERVICE .out .left .box .tit {
    display: flex;
    margin-bottom: 1rem;
}

.SALES_SERVICE .out .left .box .tit svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
    fill: var(--color-primary);
}

.SALES_SERVICE .out .left .box h3 {
    color: #212529;
    font-size: 1.8rem;
    width: 100%;
    box-sizing: border-box;
    text-transform: capitalize;
}

.SALES_SERVICE .out .left .box .txt {
    width: calc(100% - 2.2rem);
    padding-left: 1rem;
}

.SALES_SERVICE .out .left .box .txt .item {
    width: 100%;
    display: flex;
    margin: 0.5rem 0px;
}

.SALES_SERVICE .out .left .box .txt .item span,
.SALES_SERVICE .out .left .box .txt .item a {
    color: #212529;
    font-size: 1.4rem;
}

.SALES_SERVICE .out .left .box .txt .item a {
    display: block;
}

.SALES_SERVICE .out .right {
    width: 70%;
    position: relative;
}

.SALES_SERVICE .out .right .box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

.SALES_SERVICE .out .right .box:nth-child(1) {
    display: block;
}

.SALES_SERVICE .out .right .box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.SALES_SERVICE .out .right .box iframe {
    width: 100% ;
    height: 100% ;
}

.About_public_title {
    width: 100%;
}

.About_public_title h2 {
    text-align: left;
    color: rgba(0, 0, 0, 0.15);
    font-weight: normal;
    font-size: 6.8rem;
    font-family: "bebasneue";
}

.About_public_title h2::first-letter {
    font-size: 9.6rem;
    color: var(--color-primary);
    line-height: 1;
}

.About_public_title h3 {
    text-align: left;
    max-width: none;
    color: rgba(0, 0, 0, 1);
    font-weight: normal;
    line-height: 1.2;
    font-size: 3.6rem;
}

.About_public_title .txt {
    margin-top: 1rem;
}

.About_public_title p {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.4rem;
    line-height: 1.7;
}

.About_public_title i {
    width: 8rem;
    height: 0.3rem;
    display: block;
    margin: 1.5rem 0px;
    background: var(--color-primary);
}

.Service_Introduction {
    width: 100%;
    padding: 5rem 0px 8rem 0px;
}

.Service_Introduction .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center ;
}

.Service_Introduction .out .left {
    width: 47%;
}

.Service_Introduction .out .left .txt {
    width: 100%;
}

.Service_Introduction .out .left .txt p {
    color: #000;
    font-size: 1.6rem;
    line-height: 1.7;
    margin: 0.5rem 0px;
}

.Service_Introduction .out .left .but_box {
    width: 100%;
    display: flex;
    margin-top: 3rem;
}

.Service_Introduction .out .left .but_box .box {
    display: flex;
    align-items: center;
    width: 50%;
}

.Service_Introduction .out .left .but_box .box .icon {
    width: 4.8rem;
    height: 4.8rem;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.Service_Introduction .out .left .but_box .box .icon svg {
    width: 2.4rem;
    display: block;
    height: auto;
    fill: #FFF;
}

.Service_Introduction .out .left .but_box .box span {
    display: block;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.4rem;
}

.Service_Introduction .out .left .but_box .box a {
    display: block;
    color: var(--color-primary);
    font-size: 2.2rem;
    font-weight: bold;
}

.Service_Introduction .out .left .but_box .box:nth-child(2) a {
    color: rgba(0, 0, 0, 0.6);
    font-size: 2rem;
    font-weight: 500;
}

.Service_Introduction .out .left .but_box .box:nth-child(2) .icon {
    background: #4C4C4C;
}

.Service_Introduction .out .left .but_box .box a:hover {
    color: var(--color-primary);
}

.Service_Introduction .out .right {
    width: 53%;
    padding-left: 6%;
    box-sizing: border-box;
    overflow: hidden;
}

.Service_Introduction .out .right .img {
    width: 100%;
    overflow: hidden;
}

.Service_Introduction .out .right img {
    width: 100%;
    display: block;
    transition: 0.5s ease;
}

.Service_Introduction .out .right img:hover {
    transform: scale(1.1);
}

.Service_Content {
    width: 100%;
    background: #F5F5F5;
    padding: 9rem 0px;
}

.Service_Content .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 2%;
    margin-top: 3rem;
}

.Service_Content .out .box {
    width: 18.25%;
    height: 43.4rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #FFF;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.Service_Content .out .box .img {
    width: 100%;
    height: 18.17rem;
    overflow: hidden;
    z-index: 10;
    position: relative;
}

.Service_Content .out .box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.Service_Content .out .box .text {
    width: 100%;
    padding: 3rem 2rem;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    position: relative;
}

.Service_Content .out .box .text h3 {
    font-size: 2.2rem;
    color: #000;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 400;
}

.Service_Content .out .box .text i {
    width: 3rem;
    height: 0.2rem;
    background: var(--color-primary);
    display: block;
    margin: 1.5rem auto;
    transition: 0.5s ease;

}

.Service_Content .out .box .text p {
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
}

.Service_Content .out .box::before {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 20rem;
    height: 20rem;
    opacity: 0.1;
    transform: translate(50%, 50%);
    background: var(--color-primary);
    transition: 0.8s;
    border-radius: 10000px;
    z-index: 3;
}

.Service_Content .out .box::after {
    content: "";
    position: absolute;
    right: 60px;
    bottom: -10px;
    width: 140px;
    height: 140px;
    opacity: 0.1;
    transform: translate(50%, 50%);
    background: var(--color-primary);
    transition: 0.8s;
    border-radius: 10000px;
    z-index: 3;
}

.Service_Content .out .box:hover::before {
    width: 2000px;
    height: 2000px;
    opacity: 1;
}

.Service_Content .out .box:hover .text h3 {
    color: #FFF;
}

.Service_Content .out .box:hover .text i {
    width: 100%;
    background: #FFF;
}

.Service_Content .out .box:hover .text p {
    color: #FFF;
}

.Service_Question {
    width: 100%;
    padding: 9rem 0px;
    background: #FFF;
}

.Service_Question .Question_swiper {
    width: 100%;
    padding: 3rem 5%;
    box-sizing: border-box;
    padding-top: 7rem ;
}

.Service_Question .Question_swiper::after {
    position: absolute;
    bottom: 3.4rem;
    width: 100%;
    height: 0.1rem;
    background-color: rgb(153, 153, 153);
    display: block;
    left: 0px;
    content: '';
}

.Service_Question .Question_swiper .swiper-slide {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.Service_Question .Question_swiper .swiper-slide i {
    background-color: rgb(153, 153, 153);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.Service_Question .Question_swiper .swiper-slide h2 {
    color: rgba(0, 0, 0, 0.6);
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    position: absolute ;
    bottom: 2rem  ;
    width: 100% ;
    text-align: center ;
}

.Service_Question .Question_swiper .swiper-slide-thumb-active h2 {
    color: var(--color-primary);
}

.Service_Question .Question_swiper .swiper-slide-thumb-active i {
    background: var(--color-primary);
}

.Service_Question .Question_swiper .swiper-button-prev,
.Service_Question .Question_swiper .swiper-button-next {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    top: 7rem ;
    opacity: 1;
    pointer-events: auto !important;
}

.Service_Question .Question_swiper .swiper-button-prev::after,
.Service_Question .Question_swiper .swiper-button-next::after {
    color: #FFF;
    font-size: 2rem;

}

.Service_Question .Question_swiper .swiper-button-prev {
    left: 0px;

}

.Service_Question .Question_swiper .swiper-button-next {
    right: 0px;
}

.Service_Question .out {
    padding: 0px 10rem;
    box-sizing: border-box;
    width: 100%;
}

.Service_Question .Question_swiper2 {
    width: 100%;
    margin-top: 3rem;
}

.Service_Question .Question_swiper2 .swiper-slide {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

.Service_Question .Question_swiper2 .swiper-slide .title {
    display: flex;
    align-items: center;
}

.Service_Question .Question_swiper2 .swiper-slide .title svg {
    width: 3rem;
    height: 3rem;
    margin-right: 2rem;
    fill: var(--color-primary);
}

.Service_Question .Question_swiper2 .swiper-slide .title h2 {
    color: var(--color-primary);
    font-size: 2.4rem;
    font-weight: 400;
}

.Service_Question .Question_swiper2 .swiper-slide .list {
    width: 100%;
    padding-left: 1.5rem;
    box-sizing: border-box;
}

.Service_Question .Question_swiper2 .swiper-slide .list .txt {
    width: 100%;
    padding: 2rem 0px 2rem 2rem;
    box-sizing: border-box;
    border-left: 0.1rem solid rgba(0, 0, 0, 0.15);
}

.Service_Question .Question_swiper2 .swiper-slide .list p {
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1rem 0px;
    position: relative;
}

.Service_Question .Question_swiper2 .swiper-slide .list p::before {
    content: "";
    position: absolute;
    left: -2.6rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    background: rgb(255, 255, 255);
    transition: 0.5s;
    border: solid 0.2rem var(--color-primary);
    border-radius: 10rem;
    box-sizing: border-box;
}

.Service_Feedback {
    width: 100%;
    padding: 6rem 0px 9rem 0px;
}

.Service_Feedback .out {
    margin-top: 6rem;
    width: 100%;
}

.Service_Feedback .out form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 0px;
}

.Service_Feedback .out form .box {
    width: 48%;
}

.Service_Feedback .out form .box .tit {
    color: #000;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.Service_Feedback .out form .box .tit b {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}

.Service_Feedback .out form .box input {
    width: 100%;
    height: 4.8rem;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    border: 0.1rem solid rgba(230, 234, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    color: #495057;
    font-size: 1.6rem;
    font-family: inherit;
}

.Service_Feedback .out form .box input::placeholder {
    color: inherit;
    font-size: inherit;
}

.Service_Feedback .out form .box input:focus {
    border: 0.1rem solid var(--color-primary);
    color: var(--color-primary);
}

.Service_Feedback .out form .box .Phone {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.Service_Feedback .out form .box .Phone .Phone_box {
    width: 10rem;
    position: relative;
}

.Service_Feedback .out form .box .Phone>input {
    width: calc(100% - 10rem);
}

.Service_Feedback .out form .box .Phone .Phone_title {
    width: 9rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    border: 0.1rem solid rgba(230, 234, 235, 1);
    cursor: pointer;
}

.Service_Feedback .out form .box .Phone .Phone_title span {
    font-size: 1.4rem;
    color: #495057;
}

.Service_Feedback .out form .box .Phone .Phone_title svg {
    width: 2rem;
    height: 2rem;
    fill: #212529;
}

.Service_Feedback .out form .box .Phone .p_codeList {
    width: 12rem;
    height: 19.2rem;
    overflow: auto;
    position: absolute;
    left: 0px;
    background: #FFF;
    border: 0.1rem solid rgba(230, 234, 235, 1);
    display: none;
}

.Service_Feedback .out form .box .Phone .p_codeList .p_codeItem {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.2rem;
    padding: 0px 1.5rem;
    box-sizing: border-box;
    cursor: pointer;
}

.Service_Feedback .out form .box .Phone .p_codeList .p_codeItem span {
    color: #495057;
    font-size: 1.4rem;
    margin-right: 0.5rem;
}

.Service_Feedback .out form .box .Phone .p_codeList::-webkit-scrollbar {
    width: 0.3rem;
}

/* 滚动条轨道 */
.Service_Feedback .out form .box .Phone .p_codeList::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 滚动条滑块 */
.Service_Feedback .out form .box .Phone .p_codeList::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}

/* 滑块在鼠标悬停时的颜色 */
.Service_Feedback .out form .box .Phone .p_codeList::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.Service_Feedback .out form .Content {
    width: 100%;
}

.Service_Feedback .out form .Content textarea {
    height: 7.7rem;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    font-size: 1.6rem;
    border: 0.1rem solid rgba(230, 234, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    color: #495057;
    width: 100%;
    font-family: inherit;
}

.Service_Feedback .out form .Content textarea::placeholder {
    color: inherit;
    font-size: inherit;
}

.Service_Feedback .out form .Content textarea:focus {
    border: 0.1rem solid var(--color-primary);
    color: var(--color-primary);
}

.Service_Feedback .out form .Submit_Button {
    width: 20.4rem;
    height: 5.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 1.6rem;
    margin: 0 auto;
    background: var(--color-primary);
    border-radius: 2.7rem;
    margin-top: 4rem;
    cursor: pointer;
    transition: 0.5s ease;
    position: relative;
    overflow: hidden;
}

.Service_Feedback .out form .Submit_Button::before {
    content: "";
    position: absolute;
    display: block;
    transition: all .6s;
    width: 100%;
    height: 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    padding-top: 100%;
    transform: translateX(-50%) translateY(-50%);
}

.Service_Feedback .out form .Submit_Button:hover::before {
    animation: style1 .75s;
    z-index: 1;
}

.Service_Feedback .out form .Submit_Button:hover {
    background: #A3000A;
}

.Contact_pages {
    width: 100%;
    padding: 7rem 0px 9rem 0px;
}

.Contact_pages .out {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.Contact_pages .out .left {
    width: 50%;
    padding-right: 4rem;
    box-sizing: border-box;
}

.Contact_pages .out .right {
    width: 50%;
    height: 50rem;
    padding: 1rem;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.Contact_pages .out .right iframe {
    width: 100% ;
    height: 100% ;
}

.Contact_pages .out .right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.Contact_pages .out .left .list {
    width: 100%;
}

.Contact_pages .out .left .list .item {
    display: flex;
    width: 100%;
    padding: 0.7rem 0px;
}

.Contact_pages .out .left .list .item b {
    font-size: 1.6rem;
    color: #000;
    line-height: 1.5;
    display: block;
}

.Contact_pages .out .left .list .item a {
    font-size: 1.6rem;
    color: #000;
    line-height: 1.5;
    display: block;
}

.Contact_Company {
    width: 100%;
    padding: 9rem 0px;
    background: #F5F5F5;
}

.Contact_Company .title {
    width: 100%;
}

.Contact_Company .title h2 {
    color: #000;
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.Contact_Company .title i {
    width: 8rem;
    height: 0.2rem;
    display: block;
    background: var(--color-primary);
}

.Contact_Company .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2%;
    margin-top: 6rem;
}

.Contact_Company .out .box {
    width: 23.5%;
    background: url(../images/contain.jpg) no-repeat center;
    background-size: cover;
    /* height: 18.2rem; */
    padding: 3rem;
    box-sizing: border-box;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
    transition: 0.5s ease;
}

.Contact_Company .out .box h3 {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #000;
    font-weight: 500;
    flex-wrap: wrap ;
}

.Contact_Company .out .box h3 b {
    font-size: 2rem;
    color: #333 ;
    font-weight: 500;
    width: 100% ;
}

.Contact_Company .out .box .list {
    width: 100%;
    margin-top: 2rem;
    padding-left: 1.5rem;
    box-sizing: border-box;
    border-left: 0.1rem solid var(--color-primary);
}

.Contact_Company .out .box .list .item {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.Contact_Company .out .box .list .item .icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6rem;
}

.Contact_Company .out .box .list .item .icon svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: #000;
}

.Contact_Company .out .box .list .item a {
    color: #000;
    font-size: 1.6rem;
}

.Contact_Company .out .box:hover {
    transform: translateY(-1rem);
    box-shadow: 0 0 2rem #e6001365;
}

.Contact_Company .out .box .list .item a:hover {
    color: var(--color-primary);
}


.About_Introduction .out .left p {
    line-height: 2;
    font-size: 1.6rem;
    color: #000;
    margin: 0.8rem 0px;
    font-weight: 500;
}

.About_Shanghai {
    width: 100%;
    padding: 9rem 0px;
    background: #F5F5F5;
}

.About_Shanghai .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.About_Shanghai .out .left {
    width: 47.5%;
    height: 59rem;
    overflow: hidden;
}

.About_Shanghai .out .left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.About_Shanghai .out .right {
    width: 52.5%;
    padding-left: 6%;
}

.About_Shanghai .out .right .box {
    width: 100%;
    margin-bottom: 3rem;
}

.About_Shanghai .out .right .box h2 {
    font-size: 3.2rem;
    color: #000;
    font-weight: 400;
    margin-bottom: 1rem;
}

.About_Shanghai .out .right .box ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 13.2rem;
    padding-left: 3rem;
    box-sizing: border-box;
    list-style: disc;
}

.About_Shanghai .out .right .box:nth-child(2) ul {
    height: auto ;
}

.About_Shanghai .out .right .box ul li {
    padding-left: 0.5rem;
    line-height: 1.8;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 1.5rem;
}

.About_Shanghai .out .right .box ul li::marker {
    content: "●";
    color: var(--color-primary);
    font-size: 1.4rem;
    line-height: 1.5;
}

.About_Img {
    width: 100%;
    padding: 8rem 0px;
    background: #FFF;
}

.About_Img .img {
    width: 100%;
}

.About_Img .img img {
    width: 100%;
    display: block;
}

.Strength_combined {
    width: 100%;
    padding: 6rem 0px 8rem 0px;
}

.Strength_combined .out {
    margin-top: 6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2%;
}

.Strength_combined .out .box {
    width: 23.5%;
    border: 0.2rem solid #F5F5F5;
    border-radius: 1rem;
    overflow: hidden;
    box-sizing: border-box;
    transition: 0.5s ease;
    cursor: pointer;
}

.Strength_combined .out .box .img {
    width: 100%;
    height: 26rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #FFF;
}

.Strength_combined .out .box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: 0.5s ease;
}

.Strength_combined .out .box .tit {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    text-align: center;
    background: #F5F5F5;
    color: #000;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.5s ease;
}

.Strength_combined .out .box:hover .img img {
    transform: scale(1.1);
}

.Strength_combined .out .box:hover .tit {
    background: var(--color-primary);
    color: #FFF;
}

.Strength_combined .out .box:hover {
    border: 0.2rem solid var(--color-primary);
}

.Research_Platform_Construction {
    width: 100%;
    padding: 9rem 0px;
    background: #F5F5F5;
}

.Research_Platform_Construction .title h2 {
    font-size: 3.6rem;
    color: #000;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.Research_Platform_Construction .title i {
    width: 8rem;
    height: 0.2rem;
    display: block;
    background: var(--color-primary);
}

.Research_Platform_Construction .out {
    margin-top: 6rem;
    position: relative;
}

.Research_Platform_Construction .out .box {
    width: 100%;
    display: flex;
    position: relative;
    padding: 3rem 0px;
    overflow: hidden;
}

.Research_Platform_Construction .out .box .left {
    width: 16.8rem;
    padding-right: 3%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.Research_Platform_Construction .out .box .left b {
    line-height: 1;
    font-weight: bold;
    font-size: 6.4rem;
    text-align: center;
    color: var(--color-primary);
    font-family: Arial;
    transition: 0.5s;
    margin-top: 1rem;
}

.Research_Platform_Construction .out .box .right {
    width: calc(100% - 16.8rem);
    padding: 3.5rem;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2rem;
    position: relative;
}

.Research_Platform_Construction .out .box .right h3 {
    font-size: 2.4rem;
    color: var(--color-primary);
    font-weight: 400;
    margin-bottom: 2rem;
}

.Research_Platform_Construction .out .box .right .txt {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #000;
}

.Research_Platform_Construction .out .box .right .txt p,
.Research_Platform_Construction .out .box .right .txt strong {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    margin: 1rem 0px;
}

.Research_Platform_Construction .out .box .right::after {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 3rem;
    transform: translateX(-50%);
    border-width: 0.9rem;
    border-style: solid;
    border-color: transparent rgb(255, 255, 255) transparent transparent;
    border-image: initial;
    border-right: 0.9rem solid rgb(255, 255, 255);
    transition: 0.5s;
}

.Research_Platform_Construction .out::after {
    content: "";
    display: block;
    position: absolute;
    left: 7%;
    top: 0px;
    width: 1px;
    height: 100%;
    border-left: 1px dashed rgb(221, 221, 221);
}

.Research_Platform_Construction .out .box::after {
    content: "";
    display: block;
    position: absolute;
    top: 3rem;
    left: 7%;
    transform: translate(-50%, 0%);
    width: 1.9rem;
    height: 1.9rem;
    background-color: rgb(255, 255, 255);
    z-index: 2;
    border-radius: 100%;
    border: 0.2rem solid var(--color-primary);
    transition: 0.5s;
    margin-top: 3rem;
}

.New_Product_Technology {
    width: 100%;
    padding: 8rem 0px;
    background: #FFF;
}

.New_Product_Technology .title {
    width: 100%;
    margin-bottom: 3rem;
}

.New_Product_Technology .title h2 {
    font-size: 3.6rem;
    color: #000;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.New_Product_Technology .title i {
    width: 8rem;
    height: 0.2rem;
    display: block;
    background: var(--color-primary);
}

.New_Product_Technology p {
    font-size: 1.6rem;
    color: #000;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 2rem;
}

.New_Product_Technology table {
    border: solid 0.1rem #ddd;
    border-collapse: collapse;
}

.New_Product_Technology table td {
    padding: 0.5rem 1rem
}

.New_Product_Technology table th {
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: #eee
}

.Certification_Introduction .out {
    align-items: center;
}

.Certification_Introduction .out ul {
    padding-left: 2.4rem;
    box-sizing: border-box;
    list-style: disc;
    width: 100%;
}

.Certification_Introduction .out ul li::marker {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.Certification_Introduction .out ul li {
    padding: 0.3rem 0.3rem 0px 1rem;
    box-sizing: border-box;
    font-size: 1.6rem;
    color: #000;
    line-height: 1.8;
}

.Detail_body_banner .breadcrumb_list_xq {
    margin-top: 13.2rem;
}

.breadcrumb_list_xq {
    margin-top: 4rem;
    transform: translateY(0px);
    box-shadow: 0px;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    height: 8rem;
}

.breadcrumb_list_xq .out {
    box-shadow: none;
}

.Blog_Detail_Page {
    width: 100%;
    padding: 6rem 0px 9rem 0px;
    background: #FFF;
}

.Blog_Detail_Page .container_pages {
    max-width: 148rem;
}

.Blog_Detail_Page .out {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.Blog_Detail_Page .out .left {
    width: 75%;
}

.Blog_Detail_Page .out .left .title {
    width: 100%;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.Blog_Detail_Page .out .left .title h2 {
    color: rgb(30, 30, 30);
    line-height: 1.4;
    font-size: 3.2rem;
    text-align: center;
    font-weight: 400;
}

.Blog_Detail_Page .out .left .title .but_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.Blog_Detail_Page .out .left .title .but_box .item {
    display: flex;
    align-items: center;
}

.Blog_Detail_Page .out .left .title .but_box .item span {
    font-size: 1.4rem;
    color: #666666;
}

.Blog_Detail_Page .out .left .title .but_box .item p {
    font-size: 1.4rem;
    color: #000;
}

.Blog_Detail_Page .out .left .Abstract {
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: #F7F7F7;
    padding: 2rem;
    box-sizing: border-box;
}

.Blog_Detail_Page .out .left .Abstract p {
    color: #666;
    font-size: 1.4rem;
    line-height: 1.8;
}

.Blog_Detail_Page .out .left .text {
    width: 100%;
    margin-top: 3rem;
}

.Blog_Detail_Page .out .left .text video {
    width: 100%;
    height: auto;
    display: block;
}

.Blog_Detail_Page .out .left .text img {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

.Blog_Detail_Page .out .left .text p {
    color: #212529;
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0.8rem 0px;
}

.Keywords_Detail {
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    background: #F7F7F7;
    display: flex;
    align-items: center;
}

.Keywords_Detail span {
    color: #666666;
    font-size: 1.4rem;
}

.Keywords_Detail .list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.Keywords_Detail .list a {
    padding: 0.5rem;
    box-sizing: border-box;
    color: #666666;
    font-size: 1.2rem;
    border-radius: 0.4rem;
}

.Previous_Next {
    width: 100%;
}

.Previous_Next a {
    font-size: 1.4rem;
    color: #666666;
    display: block;
    margin-top: 2rem;
}

.Previous_Next a:hover {
    color: var(--color-primary);
}

.Blog_Detail_Page .out .right {
    width: 25%;
    padding-left: 5%;
    position: sticky;
    top: 14rem;
}

.Blog_Detail_Page .out .right .title {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.Blog_Detail_Page .out .right .title svg {
    width: 2.6rem;
    height: 2.6rem;
    fill: var(--color-primary);
    margin-right: 0.5rem;
}

.Blog_Detail_Page .out .right .title b {
    font-size: 2.6rem;
    font-weight: 500;
    color: rgba(30, 30, 30, 1);
}

.Blog_Detail_Page .out .right .list {
    width: 100%;
}

.Blog_Detail_Page .out .right .list .item {
    width: 100%;
    background: #F7F7F7;
    padding: 2.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    display: block;
    transition: 0.5s ease;
    margin-bottom: 3rem;
    box-sizing: border-box ;
}

.Blog_Detail_Page .out .right .list .item h2 {
    color: #222222;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.Blog_Detail_Page .out .right .list .item i {
    width: 4rem;
    height: 0.2rem;
    background: var(--color-primary);
    margin: 1.5rem 0px;
    display: block;
    transition: 0.5s ease;
}

.Blog_Detail_Page .out .right .list .item p {
    color: #666;
    font-size: 1.4rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.Blog_Detail_Page .out .right .list .item .tiem {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.Blog_Detail_Page .out .right .list .item .tiem svg {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.5rem;
}

.Blog_Detail_Page .out .right .list .item .tiem span {
    color: #777;
    font-size: 1.4rem;
}


.Blog_Detail_Page .out .right .list .item:hover {
    background: var(--color-primary);
}

.Blog_Detail_Page .out .right .list .item:hover h2,
.Blog_Detail_Page .out .right .list .item:hover p {
    color: #FFF;
}

.Blog_Detail_Page .out .right .list .item:hover i {
    background: #FFF;
    width: 100%;
}

.Blog_Detail_Page .out .right .list .item:hover .tiem svg {
    fill: #FFF;
}

.Blog_Detail_Page .out .right .list .item:hover .tiem span {
    color: #FFF;
}

.Products_Detail {
    width: 100%;
}

.Products_Detail .container_pages {
    max-width: 148rem;
}

.Products_Detail_Introduction {
    width: 100%;
    background: url(../images/Pr_1.jpg) no-repeat center;
    background-size: cover;
    margin-top: 13.2rem ;
}

.Products_breadcrumb_list_xq {
    margin-top: 0px;
}

.Products_breadcrumb_list_xq .out {
    background: none;
}

.Products_Detail_Introduction .out {
    padding-top: 2.8rem;
    padding-bottom: 5%;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

}

.Products_Detail_Introduction .out .left {
    width: 48%;
    height: 54rem;
}

.Products_Detail_Introduction .out .left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.Products_Detail_Introduction .out .right {
    width: 52%;
    padding-left: 6rem;
    box-sizing: border-box;
}

.Products_Detail_Introduction .out .right h2 {
    font-size: 3.6rem;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.Products_Detail_Introduction .out .right h3 {
    font-size: 2.8rem;
    color: #000;
}

.Products_Detail_Introduction .out .right i {
    width: 100%;
    height: 0.1rem;
    display: block;
    margin: 2rem 0px;
    background: #0000004f;
}

.Products_Detail_Introduction .out .right p{
    font-size: 1.6rem;
    color: #000;
    line-height: 1.7 ;
}

.Products_Detail_Introduction .out .right .but_box a {
    display: flex;
    align-items: center;
    padding: 1.2rem 3rem;
    box-sizing: border-box;
    border-radius: 0.4rem;
    background: var(--color-primary);
    color: #FFF;
    position: relative;
    overflow: hidden;
}

.Products_Detail_Introduction .out .right .but_box {
    display: flex;
    align-items: center;
    gap: 0px 3rem;
    margin-top: 4rem;
}

.Products_Detail_Introduction .out .right .but_box a svg {
    width: 2rem;
    height: 2rem;
    margin-right: 0.7rem;
    fill: #FFF;
}

.Products_Detail_Introduction .out .right .but_box a:nth-child(2) {
    background: #A3000A;
}

.Products_Detail_Introduction .out .right .but_box a::before {
    content: "";
    position: absolute;
    display: block;
    transition: all .6s;
    width: 100%;
    height: 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    padding-top: 100%;
    transform: translateX(-50%) translateY(-50%);
}


.Products_Detail_Introduction .out .right .but_box a:hover:before {
    animation: style1 .75s;
    z-index: 1;
}

.Product_Introduction {
    width: 100%;
    padding: 8rem 0px 5rem 0px;
    background: #FFF;
}

.Product_Introduction .out {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 3rem;
}

.Product_Introduction .out .left {
    width: 70%;
}

.Product_Introduction .out .left p {
    color: #000;
    font-size: 1.6rem;
    line-height: 1.8;
    text-wrap-mode: wrap !important; 
}

.Product_Introduction .out .left span {
    text-wrap-mode: wrap !important; 
}

.Product_Introduction .out .right {
    width: 28%;
}

.Product_Introduction .out .right img {
    width: 100%;
    display: block;
}

.Performance_Parameters {
    width: 100%;
    background: url(../images/2f2def99-4182-4c79-9b33-a6f6657e076a.png) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 8rem 0px;
}

.Performance_Parameters::after {
    width: 100%;
    height: 100%;
    background: #FFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    content: '';
    opacity: 0.5;
}

.Performance_Parameters .container_pages {
    position: relative;
    z-index: 10;
}

.Products_xq_title {
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.Products_xq_title h2 {
    font-size: 2.8rem;
    color: #000;
    font-weight: bold;
    position: relative;
    width: max-content;
}

.Products_xq_title h2::after {
    position: absolute;
    bottom: -2rem;
    left: 0px;
    width: 100%;
    background: var(--color-primary);
    height: 0.1rem;
    content: '';
}

.Performance_Parameters .text {
    margin-top: 4rem;
    overflow: auto;
}

.Performance_Parameters .text p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #000;
}

.Performance_Parameters table {
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    border-color: #ccc;
    border: none;
    border-collapse: collapse;
}

.Performance_Parameters table td,
.Performance_Parameters table th {
    padding: 1rem;
    line-height: 1.8;
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 1);
    border: #ddd solid 0.1rem;
    text-align: center
}

.Performance_Parameters table tr:first-child {
    background: #f5f5f5
}

.Performance_Parameters table p {
    font-size: 1.6rem
}

.Related_Products {
    padding: 8% 0px;
    width: 100%;
    background: #FFF;
}

.Related_Products .Products_swiper {
    margin-top: 6rem;
    width: 100%;
    padding-bottom: 7rem;
}

.Related_Products .Products_swiper .swiper-slide {
    width: 19.2%;
    overflow: hidden;
    background: #F5F5F5;
    margin-right: 1%;
    transition: 0.5s ease;
}

.Related_Products .Products_swiper .swiper-slide:last-child {
    margin-right: 0px;
}

.Related_Products .Products_swiper .swiper-slide a {
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
}

.Related_Products .Products_swiper .swiper-slide .img {
    width: 100%;
    height: 28rem;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: #FFF;
}

.Related_Products .Products_swiper .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: 0.5s ease;
}

.Related_Products .Products_swiper .swiper-slide .tit {
    width: 100%;
    padding: 1.5rem 1.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #000;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Related_Products .Products_swiper .swiper-slide:hover .img img {
    transform: scale(1.1);
}

.Related_Products .Products_swiper .swiper-slide:hover {
    background: var(--color-primary);
}

.Related_Products .Products_swiper .swiper-slide:hover .tit {
    color: #FFF;
}

.Related_Products .Products_swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background: #E5E5E5;
    opacity: 1;
}

.Related_Products .Products_swiper .swiper-pagination-bullet-active {
    background: var(--color-primary);
}


.foot_prat {
    width: 100%;
    padding-bottom: 8rem;
}

.Commitment_img {
    width: 100%;
    padding: 8rem 0px;
    background: #F5F5F5;
}

.Commitment_img .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem 0px;
}

.Commitment_img .out .box {
    width: 49%;
    height: 53.9rem;
    overflow: hidden;
    cursor: pointer;
}

.Commitment_img .out .box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: 0.5s ease;
}

.Commitment_img .out .box:hover img {
    transform: scale(1.1);
}

.Search_Form_pages {
    width: 100%;
    padding: 6rem 0px 8rem 0px;
    background: #FFF;
}

.Search_Form_pages form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Search_Form_pages form input {
    max-width: 54rem;
    width: 80%;
    height: 4.6rem;
    padding: 0.7rem 1.6rem;
    box-sizing: border-box;
    color: #666;
    font-size: 1.6rem;
    border: 0.2rem solid var(--color-primary);
    border-radius: 2.3rem 0px 0px 2.3rem;
}

.Search_Form_pages form input::placeholder {
    color: inherit;
    font-size: inherit;
}

.Search_Form_pages form button {
    width: 10rem;
    height: 4.6rem;
    background: var(--color-primary);
    color: #FFF;
    font-size: 1.6rem;
    border-radius: 0px 2.3rem 2.3rem 0px;
    cursor: pointer;
}

.Search_Form_pages .out {
    margin-top: 6rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 1%;
}

.Search_Form_pages .out .box {
    width: 19.2%;
    overflow: hidden;
    background: #F5F5F5;
    transition: 0.5s ease;
}

.Search_Form_pages .out .box a {
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
}

.Search_Form_pages .out .box .img {
    width: 100%;
    height: 28rem;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: #FFF;
}

.Search_Form_pages .out .box .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: 0.5s ease;
}

.Search_Form_pages .out .box .tit {
    width: 100%;
    padding: 1.5rem 1.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #000;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Search_Form_pages .out .box:hover .img img {
    transform: scale(1.1);
}

.Search_Form_pages .out .box:hover {
    background: var(--color-primary);
}

.Search_Form_pages .out .box:hover .tit {
    color: #FFF;
}



.dropdown {
    width: 100%;
    position: absolute;
    left: 0px;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    backdrop-filter: blur(1rem);
    display: none;
}

.dropdown .container {
    display: flex;
    align-items: normal;
}

.dropdown .Marketing {
    width: 26.5%;
    background: var(--color-primary);
    padding: 5rem;
    box-sizing: border-box;
}

.dropdown .Marketing h2 {
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #FFF;
}

.dropdown .Marketing .but_list a {
    width: 16rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 3rem;
    box-sizing: border-box;
    color: #FFF;
    font-size: 1.4rem;
    border: 0.1rem solid #FFF;
    margin-top: 1.5rem;
}

.dropdown .Marketing .but_list a svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 1rem;
    fill: #FFF;
}

.dropdown .Marketing .but_list {
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 0.1rem solid #ffffff7e;
}

.dropdown .Marketing .Sales_Hotline {
    width: 100%;
    padding: 2rem 0px;
    border-bottom: 0.1rem solid #ffffff7e;
}

.dropdown .Marketing .Sales_Hotline span {
    font-size: 1.5rem;
    color: #fFF;
}

.dropdown .Marketing .Sales_Hotline b {
    font-size: 3.2rem;
    color: #FFF;
    display: block;
    font-weight: 500;
}

.dropdown .Marketing .erweima_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown .Marketing .erweima_box .item {
    margin-top: 2rem;
}

.dropdown .Marketing .erweima_box .item span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    display: block;
    line-height: 1.2;
}

.dropdown .Marketing .erweima_box .item a {
    font-size: 2rem;
    color: #FFF;
    display: block;
    font-weight: 500;
}

.dropdown .Marketing .erweima_box .rig {
    width: 10rem;
    height: 10rem;
    overflow: hidden;
    margin-top: 2rem;
}

.dropdown .Marketing .erweima_box .rig img {
    width: 100%;
    height: 100%;
    display: block;
}

.dropdown .left_box {
    width: 73.5%;
    padding: 5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.dropdown .left_box .img {
    width: 30%;
    height: 38.8rem;
    display: block;
    overflow: hidden;
}

.dropdown .left_box .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dropdown .left_box .text_list {
    width: 75%;
    padding: 0px 2rem 0px 5rem;
    box-sizing: border-box;
}

.dropdown .left_box .text_list h2 {
    font-size: 2.8rem;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.dropdown .left_box .text_list p {
    font-size: 1.5rem;
    margin: 0.5rem 0px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

.dropdown .left_box .text_list .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dropdown .left_box .text_list .list .item {
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 6.8rem;
    padding: 1rem 0.5rem;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 1);
    font-size: 1.6rem;
    border-bottom: 0.1rem solid #0000001f;
    position: relative;
}

.dropdown .left_box .text_list .list .item svg {
    fill: var(--color-primary);
    width: 1.2rem;
    height: 1.2rem;
}

.dropdown .left_box .text_list .list .item:hover {
    color: var(--color-primary);
}

.dropdown .left_box .text_list .list .item::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0px;
    height: 0.1rem;
    background: var(--color-primary);
    content: '';
    transition: all 0.3s ease-in-out;
}

.dropdown .left_box .text_list .list .item:hover::after {
    width: 100%;
}

.dropdown_products .left_box .text_list .list {
    justify-content: left;
    gap: 0px 2rem;
}

.dropdown_products .left_box .text_list .list .item {
    width: auto;
}

.dropdown .left_box .text_list .list .item svg {
    margin-left: 0.5rem;
}


.nav .right ul li:hover .dropdown {
    display: block;
}

#header:hover .nav , .Detail_body_banner .nav {
    background: #FFF;
}

#header:hover .nav .right ul li .nav_title span , .nav.avtive .right ul li .nav_title span , .Detail_body_banner .nav .right ul li .nav_title span {
    color: #000 ;
}

.nav.avtive .logo .logo_img2 , #header:hover .nav .logo .logo_img2 , .Detail_body_banner .nav .logo .logo_img2 {
    display: none;
}

.nav.avtive .logo .logo_img , #header:hover .nav .logo .logo_img , .Detail_body_banner .nav .logo .logo_img {
    display: block;
}

.Floating_Form {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .35);
    top: 0px;
    left: 0px;
    z-index: 9999;
    display: none;
}

.Floating_Form .out {
    width: 95%;
    max-width: 128rem;
    margin: 0 auto;
    height: 48rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #FFF;
    display: flex;
    align-items: center;
}

.Floating_Form .out .left {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.Floating_Form .out .left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.Floating_Form .out .right {
    width: 50%;
    padding: 4rem 5rem;
    box-sizing: border-box;
}

.Floating_Form .out .right h2 {
    font-size: 3.2rem;
    color: #000;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-align: center;
}

.Floating_Form .out .right i {
    width: 8rem;
    height: 0.2rem;
    display: block;
    background: var(--color-primary);
    margin: 0 auto;
    margin-bottom: 2rem;
}

.Floating_Form .out .right p {
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
}

.Floating_Form .out .right form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 0px;
    margin-top: 4rem;
}

.Floating_Form .out .right form .box {
    width: 48%;
    height: 4.2rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.Floating_Form .out .right form .box input {
    width: 100%;
    height: 100%;
    padding: 0px 2rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1.4rem;
    color: #212529;
}

.Floating_Form .out .right form .box .hongdian {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.Floating_Form .out .right form .box .hongdian::after {
    content: "*";
    font-size: 1.6rem;
    color: var(--color-primary);
}

.Floating_Form .out .right form .textarea {
    width: 100%;
    height: auto;
}

.Floating_Form .out .right form .textarea textarea {
    height: 7.7rem;
    width: 100%;
    padding: 1rem 2rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1.4rem;
    color: #212529;
}

.Floating_Form .out .right form .textarea .hongdian {
    top: 1rem;
    transform: translateY(0px);
}

.Floating_Form .out .right form button {
    width: 12.6rem;
    height: 4rem;
    margin: 0 auto;
    margin-top: 2rem;
    border-radius: 2rem;
    border: 0.2rem solid var(--color-primary);
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.8);
    background: none;
    cursor: pointer;
}

.Floating_Form .out .Close {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E5E5E5;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

.Floating_Form .out .Close svg {
    width: 2rem;
    height: 2rem;
    fill: #333;
}

.Pagination_out {
    display: flex;
    margin-top: 7rem;
    width: 100%;
    justify-content: center;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    /*margin: 2rem auto;*/
    border-radius: 0.4rem;
}

.pagination>li {
    display: inline;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 2;
    color: #e60012;
    background-color: #eee;
    border-color: #ddd;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    background-color: #e60012;
    border-color: #e60012;
    cursor: default;
}


/* 手机版导航 */
.menu-toggle {
    display: none;
    width: 6rem ;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
    overflow: hidden;
    padding-top: 2rem ;
    box-sizing: border-box ;
}

.cd-nav-trigger {
    width: 100%;
    height: 100%;
    display: block;
    /* background-color: var(--a_hover_color); */
}

.menu-toggle span.hamburger,
.menu-toggle span.hamburger:after,
.menu-toggle span.hamburger:before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 38%;
    margin-left: -12px;
    -webkit-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-delay: 0.15s;
}
.menu-toggle span.hamburger{
    width: 20px !important;
}

.menu-toggle span.hamburger,
.menu-toggle span.hamburger:after,
.menu-toggle span.hamburger:before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 38%;
    margin-left: -12px;
    -webkit-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-delay: 0.15s;
}

.menu-toggle span.hamburger:after {
    margin-top: -7px;
    top: 0;
    transition-delay: 0.27s;
}

.menu-toggle span.hamburger:before {
    margin-top: 7px;
    top: 0;
    transition-delay: 0.2s;
}

.no-touchs .menu-toggle span.hamburger,
.no-touchs .menu-toggle span.hamburger:after,
.no-touchs .menu-toggle span.hamburger:before {
    transition-delay: 0.12s;
    -webkit-transform: translateX(-70px);
    -moz-transform: translateX(-70px);
    -ms-transform: translateX(-70px);
    -o-transform: translateX(-70px);
    transform: translateX(-70px);
}

.no-touchs .menu-toggle span.hamburger,
.no-touchs .menu-toggle span.hamburger:after,
.no-touchs .menu-toggle span.hamburger:before {
    -webkit-transform: translateX(70px);
    -moz-transform: translateX(70px);
    -ms-transform: translateX(70px);
    -o-transform: translateX(70px);
    transform: translateX(70px);
}

.no-touchs .menu-toggle span.hamburger:after {
    transition-delay: 0s;
}

.no-touchs .menu-toggle span.hamburger:before {
    transition-delay: 0.07s;
}

.menu-toggle span.cross:before,
.menu-toggle span.cross:after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    margin-top: -1.5px;
    left: 45%;
    margin-left: -12px;
    -webkit-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -webkit-transform: translateY(-70px) translateX(-70px) rotate(45deg);
    -moz-transform: translateY(-70px) translateX(-70px) rotate(45deg);
    -ms-transform: translateY(-70px) translateX(-70px) rotate(45deg);
    -o-transform: translateY(-70px) translateX(-70px) rotate(45deg);
    transform: translateY(-70px) translateX(-70px) rotate(45deg);
    transition-delay: 0.12s;
}

.menu-toggle span.cross:after {
    transition-delay: 0s;
    -webkit-transform: translateY(70px) translateX(-70px) rotate(-45deg);
    -moz-transform: translateY(70px) translateX(-70px) rotate(-45deg);
    -ms-transform: translateY(70px) translateX(-70px) rotate(-45deg);
    -o-transform: translateY(70px) translateX(-70px) rotate(-45deg);
    transform: translateY(70px) translateX(-70px) rotate(-45deg);
}

.menu-toggle span.cross:after {
    -webkit-transform: translateY(-70px) translateX(70px) rotate(-45deg);
    -moz-transform: translateY(-70px) translateX(70px) rotate(-45deg);
    -ms-transform: translateY(-70px) translateX(70px) rotate(-45deg);
    -o-transform: translateY(-70px) translateX(70px) rotate(-45deg);
    transform: translateY(-70px) translateX(70px) rotate(-45deg);
}

.no-touchs .menu-toggle span.cross:before {
    transition-delay: 0.12s;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.no-touchs .menu-toggle span.cross:after {
    transition-delay: 0.24s;
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -ms-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
}

.Mobile-navigation {
    width: 100% ;
    height: calc(100vh - 14rem) ;
    background: var(--color-primary) ;
    padding: 4rem 4rem 4rem 4rem ;
    box-sizing: border-box ;
    transform: translateX(100%);
    opacity: 0 ;
    visibility: hidden ;
    transition: 0.5s ease ;
    overflow: auto ;
}

.no-touchs .Mobile-navigation {
    transform: translateX(0%);
    opacity: 1 ;
    visibility: visible ;
}

.Mobile-navigation ul {
    width: 100% ;
    margin: 0 auto ;
}

.Mobile-navigation ul li {
    padding: 0px 1rem ;
    box-sizing: border-box ;
    width: 100% ;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.28) ;
}

.Mobile-navigation ul li .tit {
    display: flex ;
    width: 100% ;
    align-items: center ;
    height: 5.8rem ;
}

.Mobile-navigation ul li .tit a {
    height: 100% ;
    width: 100% ;
    line-height: 5.8rem ;
    font-size: 2rem ;
    color: #FFF ;
    font-weight: 400 ;
}

.Mobile-navigation ul li .tit .icon {
    width: 5.8rem ;
    height: 5.8rem ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex: none ;
    cursor: pointer;
}

.Mobile-navigation ul li .tit .icon img {
    width: 3rem ;
    height: 3rem ;
    display: block ;
    transition: 0.5s ease ;
}

.Mobile-navigation ul li .tit .icon.active img {
    transform: rotate(180deg);
}

.Mobile-navigation ul li .box {
    width: 100% ;
    padding: 1rem 1rem 3rem ;
    box-sizing: border-box ;
    display: none ;
    overflow: hidden;
}

.Mobile-navigation ul li .box a {
    width: auto ;
    margin: 0px 1.5rem ;
    float: left ;
    height:4rem ;
    line-height: 4rem ;
    color: #FFF ;
    font-size: 1.8rem ;
    font-weight: 400 ;
    display: flex ;
    align-items: center ;
}

.Mobile-navigation ul li .box a::before {
    width: 0.6rem ;
    height: 0.6rem ;
    display: block ;
    border-radius: 50% ;
    background: #FFF ;
    content: '';
    margin-right: 0.6rem ;
}

.Mobile-navigation .button-list {
    width: 100% ;
    margin-top: 4rem ;
}

.Mobile-navigation .button-list a {
    width: 100% ;
    height: 5rem ;
    border-radius: 1rem ;
    background: #FFF ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    color: #FFF ;
    font-size: 1.8rem ;
    margin-bottom: 2rem ;
    line-height: 1 ;
}

.Mobile-navigation .button-list a:last-child {
    margin-bottom: 0px ;
}

.Verification_code {
    width: 100% ;
    margin-bottom: 3rem ;
}

.Verification_code span {
    color: #000;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
        display: block;
}

.Verification_code .code {
    display: flex ;
    align-items: center ;
}

.Verification_code .code .img {
    height: 4.8rem;
}

.Verification_code .code input {
    width: 100%;
    max-width:50rem ;
    height: 4.8rem;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    border: 0.1rem solid rgba(230, 234, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    color: #495057;
    font-size: 1.6rem;
    font-family: inherit;
}

.Verification_code .code .img img {
    height: 100% ;
}




.Privacy_Policy  {
    padding: 15rem 0px 7rem 0px ;
    width: 100% ;
}

.Privacy_Policy .container {
    max-width: 120rem ;
}

.Privacy_Policy h2 {
    font-size: 3rem ;
    margin-bottom: 1rem ;
    text-transform: uppercase ;
}

.Privacy_Policy p , .Privacy_Policy li {
    font-size: 1.8rem ;
    line-height: 1.7em ;
    color: #666 ;
}



.Privacy_Policy h3 {
    font-size: 2.2rem ;
    margin: 1rem 0px ;
}

.Privacy_Policy strong {
    font-size: inherit ;
    color: #333 ;
    line-height: inherit ;
}







/* 断点 */
@media (min-width: 1921px) and (max-width: 2560px) {
    html {
        font-size: clamp(10px, calc(100vw / 192), 20px);
    }
}

/* 这个不固定：根据设计图最大宽度进行调整 */
@media (max-width: 1920px) {
    html {
        font-size: clamp(5px, calc(100vw / 192), 10px);
    }
}

@media (max-width: 1600px) {
    html {
        font-size: clamp(5px, calc(100vw / 170), 10px);
    }
}

@media (max-width: 1440px) {
    html {
        font-size: clamp(5px, calc(100vw / 144), 10px);
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        left: 58%;
    }

    #footer .out .left {
        flex-wrap: wrap ;
    }
    
    .banner {
        height: 37rem ;
    }

    .Contact_Company .out .box {
        width: 48% ;
    }

    .Search_Form_pages .out .box {
        width: 23.75% ;
    }

    .dropdown .left_box {
        padding: 3rem ;
    }

    .dropdown .Marketing {
        padding: 3rem ;
    }

    .dropdown .container {
        width: 100% ;
    }

}

@media (max-width: 1199px) {
    html {
        font-size: clamp(5px, calc(100vw / 130), 10px);
    }

    .nav .right ul {
        display: none ;
    }

    .banner_swiper {
        height: 71rem  ;
    }

    .banner_swiper .swiper-slide .text h2 {
        font-size: 2.6rem ;
    }

    .banner_swiper .swiper-slide .text h3 {
        font-size: 3.6rem ;
    }

    .banner_swiper .button_list .down {
        left: 3rem ;
    }

    .About .out .left h2 ,
    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title h2 {
        font-size: 8rem ;
    }

    .About .out .left h3 , .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .txt h3 {
        font-size: 3.2rem ;
    }

    .About .out .left .number .box b {
        font-size: 5rem ;
    }

    .About {
        padding: 6% 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .img {
        padding-right: 3.7rem ;
    }

    .PRODUCT_SERIES .container {
        padding: 8% 0px 10% 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        left: 60% ;
    }

    #footer .out .left {
        width: 58% ;
    }

    #footer .out .right {
        width: 42% ;
    }

    .banner {
        height: 33rem ;
    }

    .banner .text h2 {
        font-size: 3.2rem ;
    }

    .banner .text span {
        font-size: 1.8rem ;
    }

    .product_pages .out .box {
        width: 32% ;
    }

    .Service_Content .out .box {
        width: 32% ;
    }

    .Service_Question .out {
        padding: 0px ;
    }

    .Strength_combined .out .box {
        width: 32% ;
    }

    .breadcrumb_list .out {
        flex-wrap: wrap ;
    }

    .Research_Platform_Construction .out .box .left {
        justify-content: left ;
    }

    .Blog_img_pages .out .box, .Blog_video_pages .out .box {
        width: 32% ;
    }

    .menu-toggle {
        display: flex ;
    }

    .nav .right .Search_Form {
        padding-left: 0px ;
        padding-right: 6rem ;
        box-sizing: border-box ;
    }

}

@media (max-width: 992px) {
    html {
        font-size: clamp(5px, calc(100vw / 100), 10px);
    }



    .Top_Bar .slogan {
        display: none ;
    }

    .Top_Bar .list .language {
        position: absolute ;
        right: 3rem ;
    }

    .banner_swiper {
        height: 61rem ;
        margin-top: 13rem  ;
    }

    .banner_swiper .button_list .down {
        display: none ;
    }

    .banner_swiper .button_list .swiper-pagination {
        bottom: 3rem ;
    }

    .banner_swiper .button_list .swiper-button-prev, .banner_swiper .button_list .swiper-button-next {
        bottom: 3rem ;
    }

    .About .out .left {
        width: 100% ;
        padding-right: 0px ;
    }

    .About .out .right::after {
        display: none ;
    }

    .About .out .right {
        display: none ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .img {
        padding-right: 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        left: 63% ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination {
        bottom:3rem ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next{
        bottom: 3rem ;
    }

    .Our_Services {
        padding: 8% 0px 6% 0px ;
    }

    .Home_title .left h2{
        font-size: 2.6rem ;
    }

    .About .out .left h2, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title h2 {
        font-size: 7rem ;
    }

    .Our_Services .Our_swiper .swiper-slide {
        width: 65rem ;
    }

    .Blog .out .right {
        padding-left: 2rem ;
    }

    .Blog .out .Blog_swiper {
        height: 40rem ;
        border-radius: 1rem;
    }

    .Blog .out .right {
        height: 40rem ;
    }

    .Blog .out .right .box {
        height: 19rem ;
    }

    #footer .out .left {
        display: none ;
    }

    #footer .out .right {
        width: 100% ;
        padding-left: 0px ;
        border-left: none ;
    }

    .banner {
        height: 25rem ;
        margin-top: 13rem ;
    }

    .nav .logo .logo_img {
        display: block !important;
    }

    .nav .logo .logo_img2{
    display: none !important;
    }

    .Button_Group .out a {
        width: 32% ;
    }
    
    .breadcrumb_list .out {
        flex-wrap: wrap ;
    }

    .breadcrumb_list .out .breadcrumb {
        width: 100% ;
    }

    .SALES_SERVICE .out {
        width: 100% ;
        height: auto ;
    }

    .SALES_SERVICE .out .left {
        width: 100% ;
        height:50rem ;
    }

    .SALES_SERVICE .out .right {
        margin-top: 4rem ;
        width: 100% ;
        height: 39rem ;
    }

    .Service_Question .Question_swiper .swiper-slide h2 {
        font-size: 1.8rem ;
    }


    .Research_Platform_Construction .out .box .left {
        width: 10rem ;
    }

    .Research_Platform_Construction .out .box .right {
        width: calc(100% - 10rem);
    }

    .blog_pages .container_pages {
        display: flex ;
        flex-wrap: wrap ;
        justify-content: space-between ;
    }
    
    .blog_pages .box a {
        flex-wrap: wrap ;
        flex-direction: column-reverse ;
    }

    .blog_pages .box .left {
        width: 100% ;
        flex-wrap: wrap ;
        margin-top: 3rem ;
    }

    .blog_pages .box .left .tiem {
        width: 100% ;
        height: auto ;
        background: none !important;
        display: flex ;
        align-items: center ;
        flex-direction: row ;
        justify-content: left ;
    }

    .blog_pages .box .left .tiem b {
        font-size: 1.8rem;
        font-weight: bold;
        display: none ;
    }

    .blog_pages .box .left .tiem span {
        color: #212529 !important;
    }

    .blog_pages .box .left .tiem::after {
        display: none ;
    }

    .blog_pages .box .left .text {
        flex-direction: column ;
        padding-left: 0px ;
        width: 100% ;
        align-items: flex-start ;
    }

    .blog_pages .box .left .text  i{
        margin: 1.5rem 0px ;
        background: var(--color-primary);
    }

    .blog_pages .box .left .text .txt {
        padding: 0px ;
    }

    .blog_pages .box .right {
        width: 100% ;
    }

    .blog_pages .box {
        width: 48% ;
    }

    .Blog_video_pages .out {
        justify-content: space-between ;
    }

    .Blog_video_pages .out .box {
        width: 48% ;
    }

    .Contact_pages .out .left {
        width: 100% ;
    }

    .Contact_pages .out .right {
        width: 100% ;
        margin-top: 4rem ;
        height: auto ;
    }

    .Related_Products .Products_swiper .swiper-slide {
        width: 33% ;
    }

    .Commitment_img .out .box {
        height: 26rem ;
    }

    .Search_Form_pages .out .box {
        width: 32.5% ;
    }

}

@media (max-width: 767px) {
    html {
        font-size: clamp(5px, calc(100vw / 85), 10px);
    }

    .banner_swiper {
        
        height: 47rem ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container {
        padding-bottom: 10% ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide {
        /* flex-wrap: wrap ; */
        align-items: center ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container {
        height: auto ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text {
        /* width: 100% ;
        padding: 0px 5% ;
        box-sizing: border-box ; */
    }

    .PRODUCT_SERIES .container {
        padding-bottom: 16% ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination , .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        bottom: 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide {
        width: 32% ;
    }

    .Our_Services {
        padding-top: 12% ;
    }

    .Copyright .box {
        flex-wrap: wrap ;
    }

    .Copyright {
        flex-wrap: wrap ;
        gap: 1rem 0px ;
    }

    .product_pages .out .box {
        width: 48.5% ;
    }
    
    .banner {
        height: 22rem ;
    }

    .breadcrumb_list {
        height: auto ;
        height: 8rem ;
        width: 100% ;
        margin-bottom: 1rem ;
        transform: translateY(0px);
    }

    .breadcrumb_list .out {
        padding: 0px ;
        box-shadow: none ;
    }

    .Service_Introduction .out .left {
        width: 100% ;
    }

    .Service_Introduction .out .right {
        padding-left: 0px ;
        width: 100% ;
        margin-top: 4rem ;
    }

    .breadcrumb_list .out .but_list {
        width: 100% ;
    }

    .breadcrumb_list .out .but_list a {
        flex: 1 ;
        padding: 0.6rem 1rem ;
        box-sizing: border-box ;
    }

    .Service_Feedback .out form .box {
        width: 100% ;
    }

    .About_Shanghai .out {
        flex-wrap: wrap ;
        width: 100% ;
    }

    .About_Shanghai .out .left {
        width: 100% ;
    }

    .About_Shanghai .out .right {
        width: 100% ;
        padding-left: 0px ;
        margin-top: 4rem ;
    }

    .Strength_combined .out .box {
        width: 48.5%  ;
    }

    .Research_Platform_Construction .out .box .left b {
        display: none ;
    }

    .Blog_img_pages .out .box {
        justify-content: space-between ;
    }

    .Blog_img_pages .out .box {
        width: 48% ;
    }

    .Blog_Detail_Page .out {
        flex-wrap: wrap ;
    }

    .Blog_Detail_Page .out .left {
        width: 100% ;
    }

    .Blog_Detail_Page .out .right {
        width: 100% ;
        padding-left: 0px ;
        margin-top: 4rem ;
    }

    .Blog_Detail_Page .out .right .list {
        display: flex ;
        flex-wrap: wrap ;
        justify-content: space-around 
    }

    .Blog_Detail_Page .out .right .list .item{
        width: 48% ;
    }

}

@media (max-width: 575px) {
    html {
        font-size: clamp(5px, calc(100vw / 52), 10px);
    }

    .Top_Bar .list .txt span {
        display: none ;
    }

    .nav .right .Search_Form .Form {
        display: none ;
    }

    .banner_swiper .swiper-slide .text p {
        display: none ;
    }

    .banner_swiper .button_list .swiper-button-prev, .banner_swiper .button_list .swiper-button-next {
        display: none ;
    }

    .banner_swiper {
        height: 32rem ;
    }

    .banner_swiper .swiper-slide .text h3 {
        font-size: 2.4rem ;
    }

    .banner_swiper .swiper-slide .text h2 {
        font-size: 1.8rem ;
    }

    .About .out .right {
        display: block ;
        width: 100% ;
        margin-top: 4rem ;
    }

    .About .out .right img {
        border-radius: 1rem ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide {
        flex-wrap: wrap ;
        padding: 0px 5% ;
        box-sizing: border-box ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .img {
        width: 100% ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text {
        width: 100% ;
        padding-left: 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev{
        left: 0px ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        left: auto;
        right: 0px ;        
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-prev, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-button-next {
        bottom: 3rem ;
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-pagination {
        left: 50% ;
        transform: translateX(-50%);
    }

    .PRODUCT_SERIES .PRODUCT_Swiper_List .swiper-slide {
        height: 14.3rem ;
        width: 49% ;
    }

    .Our_Services {
        padding-top: 20% ;
        padding-bottom: 11% ;
    }

    .Home_title .left h2 {
        font-size: 2rem ;
    }

    .Home_title .Moer {
        flex: none ;
    }

    .Our_Services .Our_swiper .swiper-slide {
        width: 100% ;
    }

    .Our_Services .Our_swiper .swiper-slide .img {
        height: 35rem ;
    }

    .Our_Services .Our_swiper .swiper-slide .text {
        width: 90% ;
    }

    .Blog .out {
        flex-wrap: wrap ;
    }

    .Blog .out .Blog_swiper {
        width: 100% ;
        height: 28rem ;
    }

    .Blog .out .right {
        width: 100% ;
        padding-left: 0px ;
        height: auto ;
    }

    .Blog .out .right .box {
        height: 28rem ;
        width: 100% ;
        margin-top: 3rem ;
    }

    .Blog .list .item {
        width: 100% ;
        margin-top: 3rem ;
    }

    .Blog .list {
        margin-top: 0px ;
    }

    .About .out .left h2, .PRODUCT_SERIES .PRODUCT_Swiper_container .swiper-slide .text .title h2 {
        font-size: 5.5rem ;
    }

    .Button_Group .out a {
        width: 48.55% ;
    }

    .product_pages .out .box {
        width: 100% ;
    }

    .banner {
        height: 20rem  ;
    }

    .banner .text span {
        display: none ;
    }

    .banner .text{
        padding-left: 0px ;
        text-align: center ;
        border-left: none ;
        width: 100% ;
        height: 100% ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        bottom: 0px ;
    }

    .SALES_SERVICE .out .right {
        height: 24rem ;
    }

    .SALES_SERVICE .title h2 {
        font-size: 2.6rem ;
    }

    .breadcrumb_list .out .but_list a {
        text-align: center ;
    }

    .breadcrumb_list .out .breadcrumb {
        margin-top: 2rem ;
    }

    .Service_Content .out .box {
        width: 100% ;
    }

    .Service_Question .Question_swiper .swiper-slide {
        width: 50% ;
    }

    .Service_Question {
        padding: 5rem 0px ;
    }

    .Service_Question .Question_swiper .swiper-button-prev, .Service_Question .Question_swiper .swiper-button-next {
        top: 7.5rem ;
    }

    .breadcrumb_list .out .but_list a {
        font-size: 1.6rem ;
    }

    .About_public_title h2 {
        font-size: 5rem ;
    }

    .About_public_title h2::first-letter {
        font-size: 7rem ;
    }

    .About_Shanghai .out .left {
        height: auto ;
    }

    .About_Shanghai .out .right .box h2 {
        font-size: 2.6rem ;
    }

    .About_Img {
        padding: 5rem 0px ;
    }

    .Research_Platform_Construction .out .box .left {
        width: 15% ;

    }

    .Research_Platform_Construction .out .box .right {
        width: 85% ;
    }

    .blog_pages .box {
        width: 100% ;
    }

    .blog_pages .box .right {
        height: 29rem ;
    }

    .Blog_video_pages .out .box {
        width: 100% ;
    }

    .Contact_Company .out .box {
        width: 100% ;
    }

    .Blog_Detail_Page .out .left .title h2{
        font-size: 2.6rem ;
    }

    .Products_Detail_Introduction .out {
        flex-wrap: wrap ;
    }

    .Products_Detail_Introduction .out .left {
        width: 100% ;
        height: 40rem ;
    }

    .Products_Detail_Introduction .out .right {
        width: 100% ;
        padding-left: 0px ;
        margin-top: 3rem ;
    }

    .Product_Introduction .out .left {
        width: 100% ;
    }

    .Product_Introduction .out .right {
        width: 100% ;
        margin-top: 4rem ;
    }

    .Related_Products .Products_swiper .swiper-slide {
        width: 65% ;
    }

    .Search_Form_pages .out {
        justify-content: space-between ;
    }

    .Search_Form_pages .out .box {
        width: 48% ;
    }

}