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

ul,
ol {
    list-style: none;
}

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

@font-face {
    font-family: 'PangMenZhengDao';
    src: url('../font/font236.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

body {
    font-size: 1.5rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", 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;
}

.nav {
    width: 100%;
    background: #FFF;
    position: relative;
    z-index: 99999;
}

.nav .container {
    width: 100%;
    height: 100%;
    padding: 2rem 21rem 2.1rem 9.1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 300;
    background: #FFF;
    overflow: hidden;
}

.nav .logo {
    width: 16.8rem;
    height: 5.1rem;
    display: block;
}

.nav .logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.nav .nav-list li {
    margin-right: 4.8rem;
}

.nav .nav-list li:last-child {
    margin-right: 0px;
}

.nav .nav-list li .nav-link {
    font-size: 2rem;
    font-weight: 600;
    color: #777;
    position: relative;
}

.nav .nav-list li .nav-link::after {
    content: '';
    display: block;
    width: 0%;
    height: 0.2rem;
    background: #333;
    transition: all 0.3s ease;
    position: absolute ;
    bottom: -1rem ;
}

.nav .nav-list li:hover .nav-link::after , .nav .nav-list li.active .nav-link::after {
    width: 100% ;
}

.nav .nav-list li .nav-link:hover {
    color: #333;
}

.banner-Home {
    width: 100%;
    padding: 0px 2rem;
    box-sizing: border-box;
    background: #FFF;
}

.banner-Home .swiper {
    width: 100%;
    border-radius: 2rem;
    border: 0.1rem solid #0000000f;
}

.banner-Home .swiper .swiper-slide {
    width: 100%;
}

.banner-Home .swiper .swiper-slide img {
    width: 100%;
    display: block;
}

.banner-Home .swiper-pagination {
    bottom: 9rem;
}

.banner-Home .swiper-pagination .swiper-pagination-bullet {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #FFF;
    opacity: 1;
    margin: 0px 2rem;
}

.banner-Home .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 0.3;
}

.About {
    width: 100%;
    margin: 8rem 0px;
}

.About .container {
    max-width: 120rem;
    width: 80%;
    margin: 0 auto;
}

.About .logo {
    width: 33.5rem;
    height: 10.4rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 3rem;
}

.About h2 {
    color: #2E2E2E;
    font-size: 5.5rem;
    font-weight: 400;
    text-align: center;
}

.About .text {
    margin-top: 4rem;
    width: 100%;
    margin-bottom: 2rem;
    color: #111111;
    font-size: 1.8rem;
    line-height: 1.8em;
    /* text-indent: 2em ; */
    font-weight: 400;
    text-indent: 2em;
}

.About .text p {
    color: #111111;
    font-size: 1.8rem;
    line-height: 1.8em;
    /* text-indent: 2em ; */
    font-weight: 400;
}

.About .icon-list {
    width: 100%;
    margin: 4rem 0px ;
}

.About .icon-list img {
    width: 80%;
    display: block;
    margin: 0 auto;
}

.Case {
    margin: 8rem 0px 12rem 0px;
    width: 100%;
}

.Case .list-but {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.Case .list-but a {
    width: 20.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #000000;
    border-radius: 2rem;
    font-size: 2.4rem;
    color: #000000;
}

.Case .list-but a:hover {
    background: #3B3B3B;
    color: #FFF;
}

.Case .container {
    max-width: 136rem;
    width: 80%;
    margin: 0 auto;
}

.Case .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 7rem;
    justify-content: space-between;
    gap: 1.5rem 0px;
}

.Case .out .box {
    width: 49.5%;
    height: 39.2rem;
    overflow: hidden;
    border-radius: 2rem;
    position: relative;
}

.Case .out .box .img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.Case .out .box .text {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 6rem 5rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1rem);
    transform: scale(0.8);
    opacity: 0;
    /* transition: 0.5s ease; */
    border-radius: 2rem;
}

.Case .out .box .text h3 {
    color: #FFF;
    font-size: 2.6rem;
    margin-bottom: 2rem;
}

.Case .out .box .text p {
    font-size: 1.7rem;
    color: #FFF;
    line-height: 1.8em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.Case .out .box .text .More {
    color: #FFF;
    font-size: 1.6rem;
    display: block;
    margin-top: 4rem;
}

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

.Case .out .box:hover .text {
    transform: scale(1);
    opacity: 1;
}

.public-title {
    width: 100%;
}

.public-title h2 {
    color: #000000;
    font-size: 7.2rem;
    font-family: 'PangMenZhengDao';
    font-weight: 400;
    line-height: 1;
}

.public-title span {
    color: #000000;
    font-size: 3.6rem;
    font-family: 'PangMenZhengDao';
    font-weight: 400;
    line-height: 1;
}

.WORKS {
    width: 100%;
    margin: 12rem 0px;
}

.WORKS .container {
    max-width: 136rem;
    width: 80%;
    margin: 0 auto;
}

.WORKS .out {
    width: 100%;
    height: 59.7rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 7rem;
}

.WORKS .out .left {
    width: 26.8rem;
    padding-right: 5%;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 2rem;
    box-sizing: border-box;
}

.WORKS .out .left .swiper {
    width: 100%;
    height: 50rem;
}

.WORKS .out .left .swiper .swiper-slide {
    height: auto;
    padding-bottom: 1.8rem;
    margin-bottom: 3rem;
    border-bottom: 0.1rem solid #E4E4E4;
}



.WORKS .out .left .swiper .swiper-slide h3 {
    font-weight: 400;
    color: #000000;
    font-size: 4.8rem;
    line-height: 1;
    font-family: 'PangMenZhengDao';
    margin-bottom: 0.6rem;
    opacity: 0.3;
    cursor: pointer;
}

.WORKS .out .left .swiper .swiper-slide span {
    font-size: 1.8rem;
    color: #000000;
    font-weight: 400;
    line-height: 1;
    display: block;
    font-family: 'PangMenZhengDao';
    opacity: 0.3;
    cursor: pointer;
}

.WORKS .out .left .swiper .swiper-slide-thumb-active h3,
.WORKS .out .left .swiper .swiper-slide-thumb-active span {
    opacity: 1;
}

.WORKS .out .left .swiper .swiper-slide.active h3,
.WORKS .out .left .swiper .swiper-slide.active span {
    opacity: 1;
}

.WORKS .out .right {
    width: calc(100% - 26.8rem);
    height: 100%;
}

.WORKS .out .right .swiper {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

.WORKS .out .right .swiper-slide {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
}

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

.WORKS .out .left .swiper .swiper-slide:last-child {
    margin-bottom: 0px;
}

.WORKS .out .left .Moer {
    color: #000000;
    font-size: 2.4rem;
    font-family: 'PangMenZhengDao';
    font-weight: 400;
    line-height: 1;
}

.Partner-enterprises {
    width: 100%;
    margin: 12rem 0px;
}

.Partner-enterprises .container {
    max-width: 136rem;
    width: 80%;
    margin: 0 auto;
}


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

.Partner-enterprises .out .list_box {
    width: 100%;
    display: block;
    
    border-radius: 2rem;
    
}

.Partner-enterprises .out .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5rem 6.8%;
    display: none;
}

.Partner-enterprises .out .list .item {
    width: 11%;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Partner-enterprises .out .list .item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.Contact {
    width: 100%;
    margin-top: 12rem;
    margin-bottom: 10.5rem;
}

.Contact h2 {
    text-align: center;
    color: #434343;
    font-size: 4.8rem;
}

.Contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20.7rem;
    height: 7rem;
    font-size: 2.5rem;
    color: #000;
    border: 0.1rem solid #000;
    border-radius: 3.5rem;
    margin: 0 auto;
    margin-top: 7rem;
}

.Contact a img {
    height: 1.5rem;
    display: block;
    margin-left: 1rem;
}

.Contact a:hover {
    background: #3B3B3B;
    color: #FFF;
}

.Contact a .icon {
    margin-left: 1rem;
}

.Contact a .icon::after {
    font-family: swiper-icons;
    content: 'next';
    font-size: 2rem;
    color: #000;
    font-weight: 600;
}

.Contact a:hover .icon::after {
    color: #FFF;
}

#footer {
    width: 100%;
    background: #000;
    padding: 6rem 0px 0px 0px;
}

#footer .container {
    width: 90%;
    max-width: 160rem;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer .box {
    width: 58%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer .left {
    width: 61.625%;
}

#footer .left h2 {
    color: #FFFFFF;
    font-size: 4.8rem;
    font-weight: 500;
    font-family: 'PangMenZhengDao';
    line-height: 1;
    margin-bottom: 5rem;
}

#footer .left ul {
    width: 100%;
}

#footer .left ul li {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

#footer .left ul li img {
    width: 3.3rem;
    height: 3.3rem;
    display: block;
    margin-right: 2.4rem;
    flex: none;
    object-fit: contain;
}

#footer .left ul li span {
    color: #FFFFFF;
    font-size: 2.4rem;
}

#footer .content {
    width: 25%;
    text-align: center;
}

#footer .content .logo {
    width: 100%;
    display: block;
    margin-bottom: 4rem;
}

#footer .content .logo img {
    width: 100%;
    display: block;
}

#footer .content .WeChat {
    width: 100%;
}

#footer .content .img {
    width: 15rem;
    height: 15rem;
    background: #FFF;
    margin: 0 auto;
    margin-bottom: 2rem;
}

#footer .content .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

#footer .content span {
    color: #FFF;
    font-size: 1.4rem;
    text-align: center;
}

#footer .right {
    width: 16%;
}

#footer .right span {
    color: #FFF;
    font-size: 1.4rem;
    margin-bottom: 3rem;
    display: block;
    width: 100%;
    text-align: right;
    font-weight: 600;
}

#footer .right .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    gap: 1rem;
}

#footer .right .list a {
    width: 7.2rem;
    height: 7.2rem;
    display: block;
}

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

.About_banner {
    width: 100%;
    padding: 12rem 0px 10rem 0px;
    box-sizing: border-box;
    background: #FFF;
}

.About_banner .container {
    width: 80%;
    max-width: 160rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.About_banner .container .img {
    width: 35.1rem;
}

.About_banner .container .img img {
    width: 100%;
    display: block;
}


.About_banner .container .text h2 {
    color: #000000;
    font-size: 17rem;
    line-height: 1;
    font-weight: 500;
    font-family: 'PangMenZhengDao';
}

.About_banner .container .text span {
    color: #000000;
    font-family: 'PangMenZhengDao';
    font-size: 8rem;
    line-height: 1;
}

.Button-group {
    width: 100%;
    margin: 10rem 0px 6rem 0px;
}

.Button-group .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 2rem;
}

.Button-group a {
    width: 20.8rem;
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 2.4rem;
    border: 0.1rem solid #000000;
    border-radius: 2.1rem;
}

.Button-group a:hover,
.Button-group a.active {
    background: #3B3B3B;
    color: #FFF;
}

.About_company {
    width: 100%;
}

.About_company .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

.About_company .box {
    width: 100%;
    margin-bottom: 10rem;
}

.About_company .box .img {
    width: 100%;
    /* height: 74.6rem; */
    border-radius: 2rem;
    overflow: hidden;
    margin-bottom: 8.5rem;
}

.About_company .box .img img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    display: block;
}

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

.About_company .box .text .tit {
    width: 36rem;
}

.About_company .box .text .tit h3 {
    color: #000000;
    font-size: 15rem;
    line-height: 0.8em;
    font-weight: 500;
    font-family: 'PangMenZhengDao';
    margin-bottom: 1rem;
}

.About_company .box .text .tit span {
    color: #000000;
    font-size: 3rem;
    line-height: 1;
    font-family: 'PangMenZhengDao';
}

.About_company .box .text .txt {
    width: calc(97% - 36rem);
}

.About_company .box .text .txt h3 {
    color: #2e2e2e;
    font-size: 5.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.About_company .box .text .txt p {
    color: #111111;
    font-size: 1.8rem;
    line-height: 1.8em;

    
}

.About_company .box .text .txt .content {
    padding-left: 3%;
    box-sizing: border-box;
    width: 100%;
}

.About_company .box:nth-child(2n) .text {
    flex-direction: row-reverse;
}

.About_company .box:nth-child(2n) .text .txt h3 {
    transform: translateX(-3%);
}

.About_company .box:nth-child(2n) .text .txt .content {
    padding-left: 0px;
}

.About_company .box:nth-child(2n) .text .tit {
    text-align: right;
}

.services_pages {
    width: 100%;
}

.services_pages .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

.services_pages .box {
    width: 100%;
    margin-bottom: 10rem;
}

.services_pages .box .Cover-image {
    width: 100%;
    overflow: hidden;
    border-radius: 2rem;
}

.services_pages .box .Cover-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.services_pages .box .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8rem;
}

.services_pages .box .out .left {
    width: 24%;
    border-right: 0.1rem solid #c7c7c7;
    box-sizing: border-box;
    /* padding-right: 7rem; */
    display: flex;
    justify-content: left;
}

.services_pages .box:nth-child(2n) .out .left {
    justify-content: right ;
}

.services_pages .box .out .left .tit {
    margin-bottom: 5rem;
}

.services_pages .box .out .left .tit h3 {
    color: #000000;
    font-size: 10rem;
    line-height: 0.8em;
    font-weight: 500;
    font-family: 'PangMenZhengDao';
    margin-bottom: 2rem;
    letter-spacing: -1rem;
}

.services_pages .box .out .left .tit span {
    color: #000000;
    font-size: 2.4rem;
    line-height: 1;
    font-family: 'PangMenZhengDao';
    font-weight: 400;
}

.services_pages .box .out .left .list {
    width: 100%;
}

.services_pages .box:nth-child(2n) .out .left .list {
    text-align: left ;
}

.services_pages .box .out .left .list h3 {
    color: #2e2e2e;
    font-size: 3.6rem;
    margin-bottom: 2.3rem;
    font-weight: 500;
}

.services_pages .box .out .left .list .item {
    color: #2e2e2e;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.services_pages .box .out .right {
    width: calc(76% - 6.7rem);

}

.services_pages .box .out .right .text {
    width: 100%;
}

.services_pages .box .out .right .text h3 {
    color: #2e2e2e;
    font-size: 5.5rem;
    font-weight: 500;
    transform: translateX(-3%);
}

.services_pages .box .out .right .text .txt {
    width: 100%;
    margin-bottom: 5rem;
    margin-top: 2rem;
}

.services_pages .box .out .right .text .txt p {
    color: #111111;
    font-size: 1.8rem;
    line-height: 1.8em;
}

.services_pages .box .out .right .list_box {
    width: 100%;
}

.services_pages .box .out .right .list_box h3 {
    color: #2e2e2e;
    font-size: 3.6rem;
    font-weight: 500;
}

.services_pages .box .out .right .list_box .list {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.services_pages .box .out .right .list_box .list .item {
    width: 48%;
}

.services_pages .box .out .right .list_box .list .item .img {
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
    height: 25.2rem;
    /*background: #000;*/
    margin-bottom: 1rem;
}

.services_pages .box .out .right .list_box .list .item .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.services_pages .box .out .right .list_box .list .item .item_txt {
    width: 100%;
}

.services_pages .box .out .right .list_box .list .item .item_txt h4 {
    color: #2e2e2e;
    font-size: 3rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2rem;
}

.services_pages .box .out .right .list_box .list .item .item_txt p {
    color: #111111;
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
    padding: 0px 3rem;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.services_pages .box:nth-child(2n) .out {
    flex-direction: row-reverse;
}

.services_pages .box:nth-child(2n) .out .left {
    border-right: none;
    border-left: 0.1rem solid #c7c7c7;
    padding-right: 0px;
    text-align: right;
}

.Cases-pages {
    width: 100%;
    margin: 8rem 0px 10rem 0px;
}

.Cases-pages .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

.Cases-pages .out {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.Cases-pages .out:nth-child(2n) {
    flex-direction: row-reverse;
}

.Cases-pages .out:last-child {
    margin-bottom: 0px;
}

.Cases-pages .out .left {
    width: 49.5%;
}

.Cases-pages .out .right {
    width: 49.5%;
}

.Cases-pages .out .left {
    height: 76.9rem;
}

.Cases-pages .out .right {
    height: 76.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Cases-pages .out .box {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    display: block;
}

.Cases-pages .out .right .box {
    height: 48.6%;
}

.Cases-pages .out .box .img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}

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

.Cases-pages .out .box:hover .img img {
    transform: scale(1.1);
}

.Cases-pages .out .box .text {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10% 10%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1rem);
    transform: scale(0.7);
    /* transition: 0.5s ease-in-out; */
    opacity: 0;
    border-radius: 2rem;
}

.Cases-pages .out .box .text h3 {
    color: #FFF;
    font-size: 3rem;
    margin-bottom: 2rem;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

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

.Cases-pages .out .box .text .More {
    display: block;
    margin-top: 5rem;
    color: #FFF;
    font-size: 1.8rem;
    display: block;
}

.Cases-pages .out .box:hover .text {
    transform: scale(1);
    opacity: 1;
}

.Cases-pages .Moer {
    width: 100%;
    text-align: center;
    margin-top: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Cases-pages .Moer span {
    font-size: 4.2rem;
    color: #333;
    font-weight: 500;
    margin-right: 1.3rem;
    display: block;
}

.Cases-pages .Moer .icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Cases-pages .Moer .icon img {
    width: 100%;
    height: 100%;
    transform: scale(0.5);
    display: block;
}

.Contact-pages {
    width: 100%;
}

.Contact-pages .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

.Contact-pages .out {
    background: url(../images/21.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    border-radius: 2rem;
}

.Contact-pages .out form {
    width: 100%;
    background: #FFF;
    border-radius: 2rem;
    padding: 4rem 7rem 3rem 4.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.Contact-pages .out form .but_box {
    width: 18.5rem;
    height: 18.5rem;
    border-radius: 2rem;
    overflow: hidden;
    background: #000;
    color: #FFF;
    font-family: 'PangMenZhengDao';
    font-size: 7.2rem;
    cursor: pointer;
    margin-top: 13rem;
}

.Contact-pages .out form .list_box {
    width: calc(100% - 18.5rem);
    padding-right: 10rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 0px 1.6rem;
}

.Contact-pages .out form .list_box .box {
    width: 100%;
    margin-bottom: 4rem;
}

.Contact-pages .out form .list_box .box:last-child {
    margin-bottom: 0px;
}

.Contact-pages .out form .list_box .box span {
    color: #000000;
    font-size: 3rem;
    margin-bottom: 2rem;
    display: block;
}

.Contact-pages .out form .list_box .box input {
    width: 100%;
    height: 8.2rem;
    border-radius: 1rem;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 4.8rem;
    color: #c0c0c0;
    padding: 0px 3rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Contact-pages .out form .list_box .box textarea {
    width: 100%;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 4.8rem;
    color: #c0c0c0;
    padding: 2rem 3rem;
    height: 20rem;
    border-radius: 1rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Contact-pages .out form .list_box .box input::placeholder,
.Contact-pages .out form .list_box .box textarea::placeholder {
    font-size: 4.8rem;
    color: #c0c0c0;
}

.Contact-pages .out form .list_box .box:nth-child(1),
.Contact-pages .out form .list_box .box:nth-child(2) {
    width: 32.3rem;
}

.Contact-pages .out form .list_box .Verification-code {
    width: 100%;
    display: flex;
    align-items: center;
    height: 8.2rem;
}

.Contact-pages .out form .list_box .Verification-code input {
    width: 60%;
    height: 100%;
    border-radius: 1rem;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 4.8rem;
    color: #c0c0c0;
    padding: 0px 3rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Contact-pages .out form .list_box .Verification-code input::placeholder {
    font-size: 4.8rem;
    color: #c0c0c0;
}

.Contact-pages .out form .list_box .Verification-code .code {
    width: 20%;
    height: 100%;
    margin-left: 2rem;
}

.Contact-pages .out form .list_box .Verification-code .code img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.Contact-pages .out .line {
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../images/20.png) no-repeat center;
    background-size: 100% 100%;
    width: 66.3rem;
    height: 16.5rem;
    display: flex;
    align-items: center;
    justify-content: right;
    font-family: 'PangMenZhengDao';
    font-size: 6rem;
    color: #FFF;
    padding-right: 3rem;
    box-sizing: border-box;
}

.Find_Us {
    width: 100%;
    margin: 7rem 0px 9rem 0px;
}

.Find_Us .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

.Find_Us .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.Find_Us .out .box {
    width: 50%;
}

.Find_Us .out .box .tit {
    width: max-content;
}

.Find_Us .out .box .tit h2 {
    color: #000000;
    font-size: 10rem;
    line-height: 1;
    font-family: 'PangMenZhengDao';
    margin-bottom: 1rem;
    font-weight: 500;
}

.Find_Us .out .box .tit span {
    color: #000000;
    font-size: 3rem;
    line-height: 1;
    font-family: 'PangMenZhengDao';
}

.Find_Us .out .box .text {
    margin-top: 2.4rem;
}

.Find_Us .out .box .text p {
    color: #393939;
    font-size: 2.4rem;
}

.Find_Us .out .box .text img {
    display: block;
    margin-top: 3rem;
    width: 53.1rem;
}

.Find_Us .out .box:nth-child(2) .tit {
    text-align: left;
    margin: 0 auto;
}

.Find_Us .out .box .list {
    max-width: 46.1rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 auto;
    margin-top: 8rem;
}

.Find_Us .out .box .list a {
    width: 14.5rem;
    height: 14.5rem;
    display: block;
}

.Find_Us .out .box .list a img {
    display: block;
    width: 100%;
    height: 100%;
}

.dibu_img {
    width: 100%;
    margin: 10rem 0px;
}

.dibu_img .container {
    width: 80%;
    max-width: 136rem;
    margin: 0 auto;
}

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

.cases_Details {
    width: 100%;
    margin: 8rem 0px 10rem 0px;
}

.cases_Details .container {
    width: 80%;
    max-width: 142rem;
    margin: 0 auto;
}

.cases_Details .Moer {
    display: flex;
    align-items: center;
}

.cases_Details .Moer img {
    height: 2.5rem;
    display: block;
    margin-right: 1.5rem;
}

.cases_Details .Moer span {
    color: #2e2e2e;
    font-size: 3.6rem;
}

.cases_Details .tit {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.cases_Details .tit h2 {
    color: #000000;
    font-size: 11rem;
    font-family: 'PangMenZhengDao';
    font-weight: 400;

}

.cases_Details .out {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.cases_Details .out .left {
    width: 32.8rem;
    border-right: 0.1rem solid #c7c7c7;
    box-sizing: border-box;
    padding-right: 2.9rem;
    box-sizing: border-box;
}

.cases_Details .out .left h3 {
    font-family: 'PangMenZhengDao';
    color: #000;
    font-size: 3rem;
    font-weight: 500;
}

.cases_Details .out .left .list {
    margin-top: 4rem;
}

.cases_Details .out .left .list .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.8rem;
    border-bottom: 0.1rem solid #c7c7c7;
    margin-bottom: 2.3rem;
}

.cases_Details .out .left .list .item:last-child {
    margin-bottom: 0px;
}

.cases_Details .out .left .list .item span {
    color: #2e2e2e;
    font-size: 3rem;
    font-weight: 400;
}

.cases_Details .out .left .list .item p {
    color: #2e2e2e;
    font-size: 1.6rem;
}

.cases_Details .out .right {
    width: calc(100% - 32.8rem);
    padding-left: 4.8rem;
    box-sizing: border-box;
}

.cases_Details .out .right h3 {
    color: #2e2e2e;
    font-size: 5rem;
    margin-bottom: 3rem;
    transform: translateX(-3%);
    font-weight: 500;
}

.cases_Details .out .right .txt {
    width: 100%;
}

.cases_Details .out .right .txt p {
    color: #111111;
    font-size: 1.8rem;
    line-height: 1.8em;
    
    text-indent: 2em;
}

.cases_Details .content_out {
    width: 100%;
    margin-top: 10rem;
}

.cases_Details .content_out img {
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 3rem;
}

.cases_Details .content_out p {
    color: #2E2E2E;
    font-size: 1.8rem;
    line-height: 1.8em;
}


/* 手机版导航 */
.menu-toggle {
    display: none;
    width: 60px;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
}

.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: #333;
    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: #333;
    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: #333;
    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%;
    background: #333;
    padding: 4rem 4rem 4rem 4rem;
    box-sizing: border-box;
    /* transform: translateX(100%); */
    position: absolute;
    z-index: 200;
    top: 9rem;
    left: 0px;
    display: none;
}

.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: 48%;
    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: #00B2E3;
    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: #00B2E3;
    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;
}

.Filing-number {
    width: 100%;
    padding: 2rem 0px;
    margin-top: 7rem;
}

.Filing-number .container {
    max-width: 160rem;
    width: 80%;
    padding: 0px 8.5rem;
    box-sizing: border-box;
}

.Filing-number .container .out {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 1.5rem;
    flex-wrap: wrap;
}

.Filing-number .container .out a {
    color: #FFF;
    font-size: 1.5rem;
        margin-left: 1rem;
}

.support {
    margin-left: 1rem;
    display: block;
}

.Online_Message {
    width: 100% ;
    background: #ECECEC ;
}

.Online_Message .container {
    width: 84% ;
    max-width: 160rem ;
    margin: 0 auto ;
}

.Online_Message .out {
    width: 100% ;
    display: flex ;
    flex-wrap: wrap ;
    justify-content: space-between ;
}

.Online_Message .out .left {
    width: 62% ;
    padding: 7rem 7rem 6.8rem 0px ;
    box-sizing: border-box ;
}

.Online_Message .out .left  h2 {
    font-family: 'PangMenZhengDao';
    font-size: 6rem;
    color: #161616 ;
    font-weight: 500 ;
}

.Online_Message .out .left form {
    margin-top: 6rem ;
}

.Online_Message .out .left form .but_box {
    font-family: 'PangMenZhengDao';
    font-weight: 400 ;
    margin-left: auto ;
    display: block ;
    padding: 1rem 3rem ;
    box-sizing: border-box ;
    background:  #000000 ;
    border-radius: 1rem ;
    color: #FFF ;
    font-size: 3.6rem ;
    cursor: pointer;
    margin-top: 4rem ;
}

.Online_Message .out .left form .list_box {
    width: 100% ;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 0px 1.6rem;
    padding-right: 10rem ;
    box-sizing: border-box ;
}

.Online_Message .out .left form .list_box .box {
    width: 100%;
    margin-bottom: 3rem;
}

.Online_Message .out .left form .list_box .box:last-child {
    margin-bottom: 0px;
}

.Online_Message .out .left form .list_box .box span {
    color: #000000;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.Online_Message .out .left form .list_box .box input {
    width: 100%;
    height: 5rem;
    border-radius: 1rem;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 1.8rem;
    color: #c0c0c0;
    padding: 0px 3rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Online_Message .out .left form .list_box .box textarea {
    width: 100%;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 1.8rem;
    color: #c0c0c0;
    padding: 2rem 3rem;
    height: 15rem;
    border-radius: 1rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Online_Message .out .left form .list_box .box input::placeholder,
.Online_Message .out .left form .list_box .box textarea::placeholder {
    font-size: 1.8rem;
    color: #c0c0c0;
}

.Online_Message .out .left form .list_box .box:nth-child(1),
.Online_Message .out .left form .list_box .box:nth-child(2) {
    width: 26.3rem;
}

.Online_Message .out .left form .list_box .Verification-code {
    width: 100%;
    display: flex;
    align-items: center;
    height: 5rem;
}

.Online_Message .out .left form .list_box .Verification-code input {
    width: 60%;
    height: 100%;
    border-radius: 1rem;
    border: 0.1rem solid #c0c0c0;
    box-sizing: border-box;
    font-size: 1.8rem;
    color: #c0c0c0;
    padding: 0px 3rem;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.Online_Message .out .left form .list_box .Verification-code input::placeholder {
    font-size: 1.8rem;
    color: #c0c0c0;
}

.Online_Message .out .left form .list_box .Verification-code .code {
    width: 20%;
    height: 100%;
    margin-left: 2rem;
}

.Online_Message .out .left form .list_box .Verification-code .code img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.Online_Message .out .right {
    width:38% ;
}

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





@media (max-width:1600px) {
    .nav .container {
        padding: 2rem 5rem 2.1rem 5rem;
    }

    .banner-Home .swiper-pagination {
        bottom: 6rem;
    }

    .WORKS .out .left {
        width: 20%;
    }

    .WORKS .out .right {
        width: 80%;
    }



    #footer .right {
        width: 21%;
    }

    #footer .left {
        width: 70%;
    }


    .About_banner {
        padding: 8rem 0px 0px 0px;
    }

    .About_banner .container .text h2 {
        font-size: 15rem;
    }


}


@media (max-width:1440px) {


    .Case .out .box {
        height: 37rem;
    }

    .Case .out .box .text p {
        -webkit-line-clamp: 4;
    }



    .services_pages .box .out .left .tit h3 {
        font-size: 10rem;
    }

    .Cases-pages .out .right,
    .Cases-pages .out .left {
        height: 70rem;
    }

    .Contact-pages .out form .list_box .box:nth-child(1),
    .Contact-pages .out form .list_box .box:nth-child(2) {
        width: 40%;
    }

    .Contact-pages .out .line {
        width: 40%;
    }

    .Contact-pages .out .line {
        font-size: 4rem;
        height: 14rem;
    }

    .Contact-pages .out form .list_box .box input,
    .Contact-pages .out form .list_box .Verification-code input {
        font-size: 2rem;
        height: 6rem;
        border-radius: 1rem;
    }

    .Contact-pages .out form .list_box .box textarea {
        font-size: 2rem;
        border-radius: 1rem;
    }

    .Contact-pages .out form .list_box .box input::placeholder,
    .Contact-pages .out form .list_box .box textarea::placeholder,
    .Contact-pages .out form .list_box .Verification-code input::placeholder {
        font-size: 2rem;
    }

    .Contact-pages .out form .list_box .Verification-code .code {
        width: 35%;
    }

    .Contact-pages .out form .list_box .box:nth-child(4) {
        margin-bottom: 2rem;
    }

    .Contact-pages .out form .but_box {
        width: 15rem;
        height: 15rem;
        font-size: 4rem;
    }

    .Contact-pages .out form .list_box {
        width: calc(100% - 15rem);
    }


    .Find_Us .out .box .tit h2 {
        font-size: 6rem;
    }


    .cases_Details .tit h2 {
        font-size: 10rem;
    }

    .cases_Details .out .right h3 {
        font-size: 4.5rem;
    }

    .WORKS .out .left {
        width: 23%;
    }

    .WORKS .out .right {
        width: 77%;
    }
    

}

@media (max-width:1199px) {
    .WORKS .out .right {
        width: 100%;
    }

    .WORKS .out {
        height: auto;
    }

    .WORKS .out .left {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        padding-right: 0px;
        margin-bottom: 5rem;
        flex-wrap: wrap;
    }

    .WORKS .out .left .swiper {
        height: auto;
        width: 100%;
        margin: 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 3rem 0px;
    }

    .WORKS .out .left .swiper .swiper-slide {
        width: auto;
        margin-right: 3rem;
        margin-bottom: 0px;
        width: 48%;
        margin-right: 0px;
    }

    .WORKS .out .left .swiper .swiper-slide:last-child {
        margin-right: 0px;
    }

    .WORKS .out .left .Moer {
        margin-top: 5rem;
    }

    #footer .container {
        flex-wrap: wrap;
    }

    #footer .box {
        width: 100%;
    }

    #footer .right {
        width: 100%;
    }

    #footer .right span {
        text-align: left;
    }

    #footer .right .list {
        justify-content: left;
    }

    .About_banner .container .img {
        width: 33%;
    }

    .About_banner .container .text h2 {
        font-size: 13rem;
    }

    .About_banner .container .text span {
        font-size: 6rem;
    }

    .About_company .box .text .txt h3 {
        font-size: 4rem;
    }

    .About_company .box .text .tit h3 {
        font-size: 12rem;
    }

    .About_company .box .text .tit {
        width: 30rem;
    }

    .About_company .box .text .txt {
        width: calc(97% - 30rem);
    }

    .services_pages .box .out .right .text h3 {
        font-size: 4rem;
    }

    .services_pages .box .out .left .tit h3 {
        font-size: 9rem;
    }

    .Contact-pages .out .line {
        font-size: 3.6rem;
        height: 9rem;
    }


    .Case .out .box {
        height: 31rem;
    }

    .services_pages .box .out .left {
        width: 26% ;
    }

}

@media (max-width:1440px) {
    .services_pages .box .out .left .tit h3 {
        font-size: 10rem;
    }
}

@media (max-width:1199px) {
    .WORKS .out .left .swiper .swiper-slide h3 {
        font-size: 4rem;
    }

    .Case .out .box {
        height: 36rem;
    }

}

@media (max-width:992px) {

    .nav .nav-list {
        display: none;
    }

    .banner-Home .swiper-pagination .swiper-pagination-bullet {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0px 0.6rem;
    }

    .banner-Home .swiper-pagination {
        bottom: 4rem;
    }

    .About h2 {
        font-size: 4.2rem;
    }

    .Case .list-but a {
        font-size: 2rem;
    }

    .Case .out .box {
        height: 23rem;
    }

    .Case .out .box .text p {
        display: none;
    }

    .public-title h2 {
        font-size: 6rem;
    }

    .public-title span {
        font-size: 3rem;
    }

    .WORKS .out {
        margin-top: 4rem;
    }

    .WORKS .out .left .swiper .swiper-slide h3 {
        font-size: 3.4rem;
    }

    #footer .left ul li span {
        font-size: 2rem;
    }

    .About_company .box .text {
        flex-wrap: wrap;
    }

    .About_company .box .text .tit {
        width: 100%;
    }

    .About_company .box .text .tit h3 {
        font-size: 8rem;
    }

    .About_company .box .text .txt {
        width: 100%;
        margin-top: 4rem;
    }

    .About_banner .container .img {
        display: none;
    }

    .About_banner .container .text {
        width: 100%;
        text-align: center;
    }

    .About_banner .container .text h2 {
        text-align: center;
    }

    .About_banner .container .text span {
        text-align: center;
    }

    .services_pages .box .out {
        flex-wrap: wrap;
    }

    .services_pages .box .out .left {
        width: 100%;
        border: none !important;
    }

    .services_pages .box .out .left .list {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .services_pages .box .out .left .list h3 {
        width: 100%;
        margin-bottom: 1rem;
        text-align: left;
    }

    .services_pages .box .out .left .list .item {
        margin-bottom: 0px;
    }

    .services_pages .box .out .right {
        width: 100%;
        margin-top: 5rem;
    }

    .services_pages .box .out .left .tit {
        margin-bottom: 4rem;
    }

    .Cases-pages .out .right,
    .Cases-pages .out .left {
        height: 55rem;
    }


    .Contact-pages .out .line {
        width: 56%;
    }

    .Contact-pages .out form .list_box .box:nth-child(1),
    .Contact-pages .out form .list_box .box:nth-child(2) {
        width: 100%;
    }

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

    .Find_Us .out .box {
        width: 100%;
    }

    .Find_Us .out .box:nth-child(2) {
        margin-top: 5rem;
    }

    .Find_Us .out .box .list {
        display: flex;
        max-width: 100%;
        margin-top: 4rem;
    }

    .Find_Us .out .box:nth-child(2) .tit {
        text-align: left;
        margin: 0px;
    }

    .Find_Us .out .box .list a {
        width: 10rem;
        height: 10rem;
    }

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

    .cases_Details .out .left {
        width: 100%;
        border-right: none;
    }

    .cases_Details .out .right {
        width: 100%;
        padding-left: 0px;
        margin-top: 4rem;
    }

    .cases_Details .out .right h3 {
        font-size: 4rem;
    }

    .cases_Details .tit h2 {
        font-size: 8rem;
    }

    .cases_Details .Moer span {
        font-size: 2.6rem;
    }

    .menu-toggle {
        display: flex;
    }

    #footer .container {
        flex-wrap: wrap;
    }

    #footer .right {
        width: 100%;
        margin-top: 4rem;
    }

    #footer .right span {
        text-align: left;
    }

    #footer .right .list {
        justify-content: left;
    }

    #footer .box {
        width: 100%;
    }


    .services_pages .box:nth-child(2n) .out .left .list  h3{
        text-align: right ;
    }

    .services_pages .box:nth-child(2n) .out .left .list {
        justify-content: right ;
    }

    .Online_Message .out .right {
        display: none ;
    }

    .Online_Message .out .left {
        width: 100% ;
        padding: 6rem 0px ;
    }

}


@media (max-width:767px) {
    .About .logo {
        height: auto;
        width: 50%;
    }

    .About h2 {
        font-size: 4rem;
    }

    .Case .list-but {
        flex-wrap: wrap;
        justify-content: left;
    }

    .Case .list-but a {
        width: 31%;
    }

    .Case .out .box {
        height: 20rem;
    }


    .public-title h2 {
        font-size: 5rem;
    }

    .Contact h2 {
        font-size: 3.8rem;
    }

    .Contact a {
        width: 60%;
        height: 5rem;
    }

    .Case .list-but {
        gap: 2rem 2%;
    }

    .About_banner .container .text h2 {
        font-size: 9rem;
    }

    .About_banner .container .text span {
        font-size: 4rem;
    }

    .Button-group .container {
        flex-wrap: wrap;
    }

    .Button-group .container {
        gap: 2rem 2%;
    }

    .Button-group a {
        width: 48%;
    }

    .Cases-pages .out .right,
    .Cases-pages .out .left {
        height: 40rem;
    }

    .Contact-pages .out form {
        flex-wrap: wrap;
    }

    .Contact-pages .out form .list_box {
        width: 100%;
        padding-right: 0px;
    }

    .Contact-pages .out form .but_box {
        margin: 0 auto;
        margin-top: 2rem;
    }

    .Contact-pages .out .line {
        width: 74%;
    }

    .Cases-pages .out .box .text p {
        display: none;
    }

}


@media (max-width:575px) {

    .About h2,
    .Contact h2 {
        font-size: 3rem;
    }

    .Case .list-but a {
        width: 48%;
    }

    .Case .out .box {
        width: 100%;
        height: 26rem;
    }

    #footer .box {
        flex-wrap: wrap;
    }

    #footer .left {
        width: 100%;
    }

    #footer .content {
        width: 100%;
        margin: 3rem 0px;
    }

    #footer .content .logo {
        display: none;
    }

    #footer .right .list a {
        width: 6.5rem;
        height: 6.5rem;
    }

    .About_banner .container .text h2 {
        font-size: 7rem;
    }

    .About_banner .container .text span {
        font-size: 3.6rem;
    }

    .About_company .box .text .txt h3 {
        font-size: 3.6rem;
    }

    .services_pages .box .out .right .text h3 {
        font-size: 3rem;
    }

    .services_pages .box .out .left .tit h3 {
        font-size: 7rem;
    }

    .services_pages .box .out .left .list .item {
        font-size: 2rem;
    }

    .services_pages .box .out .right .list_box .list {
        flex-wrap: wrap;
        gap: 4rem 0px;
    }

    .services_pages .box .out .right .list_box .list .item {
        width: 100%;
    }

    .Cases-pages .out .right,
    .Cases-pages .out .left {
        height: 28rem;
    }

    .Contact-pages .out form {
        padding: 8rem 2rem 3rem 2.5rem;
    }

    .Contact-pages .out .line {
        font-size: 2.6rem;
    }

    .Contact-pages .out .line {
        height: 8rem;
    }

    .Contact-pages .out form .list_box .box span {
        font-size: 2.4rem;
    }

    .Contact-pages .out form .list_box .box {
        margin-bottom: 2rem;
    }

    .Contact-pages .out form .list_box .box textarea {
        height: 16rem;
    }

    .Contact-pages .out form .but_box {
        height: 6rem;
        width: 100%;
        font-size: 3rem;
    }

    .Find_Us .out .box .text img {
        width: 100%;
    }

    .cases_Details .tit h2 {
        font-size: 5.5rem;
    }

    .cases_Details .out .left .list .item span {
        font-size: 2.6rem;
    }

    .Cases-pages .Moer span {
        font-size: 3.5rem;
    }

    .Cases-pages .out .left,
    .Cases-pages .out .right .box {
        width: 100%;
        margin-bottom: 3rem;
    }

    .Cases-pages .out .right,
    .Cases-pages .out .left {
        height: auto;
    }

    .Cases-pages .out .right .box,
    .Cases-pages .out .right {
        width: 100%;
    }

    #footer .right {
        margin-top: 0px;
    }

    .Online_Message .out .left form .list_box .box:nth-child(1), .Online_Message .out .left form .list_box .box:nth-child(2) {
        width: 100% ;
    }

    .Online_Message .out .left form .list_box {
        padding-right: 0px ;
    }

    .Online_Message .out .left h2 {
        font-size: 5rem ;
    }

    .Online_Message .out .left form {
        margin-top: 4rem ;
    }

    .Online_Message .out .left form .list_box .box {
        margin-bottom: 2rem ;
    }

    .Online_Message .out .left form .but_box {
        font-size: 2.6rem ;
    }

}


/* 断点 */
@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 / 192), 10px);
    }
}
*/
@media (max-width: 1440px) {
    html {
        font-size: clamp(5px, calc(100vw / 160), 10px);
    }
}

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

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

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

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


}