html {
    font-size: 12px;
    overflow-x: hidden;
}

html, body {
    position: relative;
    /*height: 100%;*/

}

a {
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none !important;
}

a:hover {
    text-decoration: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}

em {
    font-style: normal;
}

ol, ul {
    list-style: none
}

li {
    display: list-item
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

body, button, input, select, textarea {
    font: 14px/1 "HarmonyOS Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

.containers {
    width: 1400px;
    margin: 0 auto;
}

.top-headers {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-header p {
    font-size: 14px;
    color: #000;
}

.top-header a {
    color: #000;
    font-size: 12px;
}

.top-header a:hover {
    color: #01847E;
}

.headers {
    width: 100%;
    display: flex;
    padding: 20px 0;
}

.headers .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headers .header .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.headers .header .logo .image {
    height: 50px;
}

.headers .header .logo .image img {
    height: 50px;
}

.headers .header .logo .line {
    width: 1px;
    height: 40px;
    background: #000;
    margin-top: 5px;
}

.headers .header .logo .text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}

.headers .header .logo .text .p1 {
    font-size: 22px;
    letter-spacing: 2px;
    color: #000;
    font-weight: bold;
}

.headers .header .logo .text .p2 {
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.headers .header .logo .text .p2 em {
    width: 1px;
    height: 10px;
    background: #000;
}

.headers .header .tel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.headers .header .tel img {
    width: 36px;
}

.headers .header .tel-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.headers .header .tel-box p {
    font-size: 17px;
    color: #333;
}

.headers .header .tel-box p.number {
    font-size: 22px;
    font-weight: bold;
    color: #333;
}

.navs {
    width: 100%;
    background-image: url("../image/nav-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 9;
}

.navs .nav {
    display: flex;
}

.navs .nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navs .nav ul li {
    width: calc(100% / 7);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.navs .nav ul li .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #fff;
    position: relative;
}

.navs .nav ul li:hover .nav-item {
    font-weight: bold;
}

.navs .nav ul li .nav-item:after {
    position: absolute;
    left: calc(50% - 6px);
    bottom: -10px;
    opacity: 0;
    content: '';
    width: 12px;
    height: 8px;
    background-image: url("../image/nav-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.navs .nav ul li.active .nav-item:after, .navs .nav ul li:hover .nav-item:after {
    bottom: 2px;
    opacity: 1;
}

.navs .nav ul li .nav-item:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.navs .nav ul li:last-of-type .nav-item:before {
    display: none;
}

.navs .nav ul li .children {
    position: absolute;
    left: 10%;
    top: 50px;
    width: 80%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0s;
    transition: all 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.navs .nav ul li:hover .children {
    height: auto !important;
    opacity: 1;
    padding: 10px 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 1060;

}

.navs .nav ul li .children dd {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #fff;
}

.navs .nav ul li .children dd:last-of-type {
    border-bottom: none;
}

.navs .nav ul li .children dd a {
    width: 100%;
    height: 36px;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    background: #939596;
}

.navs .nav ul li .children dd a:hover {
    background: #007773;
}

.headers .header .navs .nav-box .children .cbx a:last-of-type {
    border-bottom: none;
}

.banners {
    width: 100%;
}

.banners .banner {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.banners .banner .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

}

.banners .banner .swiper-wrapper .swiper-slide a {
    height: 735px;
    overflow: hidden;
    width: 100%;
}

.banners .banner .swiper-wrapper .swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banners .banner .swiper-pagination-banner {
    position: absolute;
    z-index: 999;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    bottom: 30px;
}

.banners .banner .swiper-pagination-banner .swiper-pagination-bullet {
    display: inline-block;
    margin: 0 3px;
    outline: none;
    width: 50px;
    height: 3px;
    border-radius: 3px;
    background: #E5E5E5;
    opacity: 1;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.banners .banner .swiper-pagination-banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #01847E;
}

.section-search-box {
    width: 100%;
    background: #fff;
}

.search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.search-box .kw {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.search-box .kw .hot-icon {
    width: 20px;
}

.search-box .kw .lab {
    font-size: 16px;
    color: #000;
    font-weight: bold;
}

.search-box .kw a {
    font-size: 14px;
    color: #555;
    padding-right: 10px;
    position: relative;
}

.search-box .kw a:before {
    content: '';
    position: absolute;
    right: 0;
    top: 1px;
    width: 1px;
    height: calc(100% - 2px);
    background: #999;
}

.search-box .kw a:last-of-type:before {
    display: none;
}

.search-box .kw a:hover {
    color: #01847E;
}

.search-box .se-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.search-box .se-form .se-input {
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding: 3px 10px;
    outline: unset;
    background: none;
    font-size: 14px;
    color: #333;
    border: 1px solid #01847E;
    border-right: none;
}

.search-box .se-form .se-input::placeholder {
    color: #999;
}

.search-box .se-form .se-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: unset;
    border: unset;
    background: #01847E;
}


.G-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.G-title .GT-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: bold;
    letter-spacing: 4px;
    width: 100%;
    color: #01847E;
    text-align: center;
}

.G-title .G-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #555;
}
.G-title .G-tip em {
    position: relative;
    padding-right:10px;
}
.G-title .G-tip em:before {
    position: absolute;
    right: 2px;
    top: -5px;
    content: '+';
    font-weight: bold;
    font-size: 14px;
}

.icon {
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
}

.section-love {
    padding: 100px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background-image: url("../image/love-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.love {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.love .items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.love .items .item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(50% - 10px);
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px 50px;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active {
    border: 1px solid #01847E;
    background: #fff;
}

.love .items .item .bg {
    position: absolute;
    height: 50px;
    width: 100%;
    background-image: none;
    left: 0;
    top: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .bg {
    background-image: url("../image/love-line.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.love .items .item .box {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.love .items .item .box h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 32px;
    color: #7A7B7C;
    font-weight: bold;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .box h3 {
    color: #01847E;
}

.love .items .item .box h3 i {
    width: 42px;
    height: 42px;
}

.love .items .item .box h3 i.icon-1 {
    background-position: 0 0;
}

.love .items .item.active .box h3 i.icon-1 {
    background-position: -42px 0;
}

.love .items .item .box h3 i.icon-2 {
    background-position: -84px 0;
}

.love .items .item.active .box h3 i.icon-2 {
    background-position: -126px 0;
}

.love .items .item .box h3 i.icon-3 {
    background-position: -168px 0;
}

.love .items .item.active .box h3 i.icon-3 {
    background-position: -210px 0;
}

.love .items .item .box h3 i.icon-4 {
    background-position: -252px 0;
}

.love .items .item.active .box h3 i.icon-4 {
    background-position: -294px 0;
}

.love .items .item .box ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.love .items .item .box ul li {
    font-size: 17px;
    color: #888;
    padding-left: 12px;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .box ul li {
    color: #000;
}

.love .items .item .box ul li:before {
    content: 'next';
    position: absolute;
    left: 0;
    font-size: 12px;
    top: 2px;
    color: #999;
    font-family: swiper-icons;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .box ul li:before {
    color: #000;
}

.love .items .item .box a {
    width: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 20px;
    border: 1px solid #01847E;
    color: #000;
    font-size: 16px;
    padding: 10px 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .box a {
    background: #01847E;
    color: #fff;
}

.love .items .item .box a i {
    width: 0;
    height: 9px;
    background-position: 0 -50px;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item.active .box a i {
    width: 16px;
}

.love .items .item .image {
    width: 265px;
    height: 265px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.love .items .item .image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.love .items .item .image img.image-in {
    display: none;
}

.love .items .item .image img.image-out {
    display: block;
}

.love .items .item.active .image img.image-in {
    display: block;
}

.love .items .item.active .image img.image-out {
    display: none;

}

.section-product {
    padding: 100px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background-image: url("../image/product-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.product {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.product .box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.product .box .hd .tags {
    background: #fff;
    border-radius: 30px;
    height: 50px;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product .box .hd .tags p {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    color: #000;
    font-size: 16px;
    border-radius: 30px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.product .box .hd .tags p.active {
    background: #01847E;
    color: #fff;
}

.product .box .hd a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    color: #01847E;
    position: relative;
}

.product .box .hd a:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: #01847E;
}

.product .box .hd a i {
    width: 16px;
    height: 9px;
    background-position: -16px -50px;
}

.product .box ul {
    display: none;
    flex-wrap: wrap;
    gap: 25px;
}

.product .box ul.active {
    display: flex;
}

.product .box ul li {
    display: flex;
    flex-direction: column;
    width: calc((100% - 75px) / 4);
    background-color: #fff;
    border-radius: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.product .box ul li:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgb(0, 0, 0, 0.2);
}

.product .box ul li .image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product .box ul li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product .box ul li .t {
    display: flex;
    width: 100%;
}

.product .box ul li .t h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 20px 10px;
}

.product .box ul li .t h3 em {
    max-width: calc(100% - 21px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #000;
    font-size: 16px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.product .box ul li:hover .t h3 em {
    color: #01847E;
}

.product .box ul li .t h3 i {
    width: 0;
    overflow: hidden;
    height: 9px;
    background-position: -16px -50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.product .box ul li:hover .t h3 i {
    width: 16px;
}

.section-ad {
    padding: 50px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.section-ad.ad-bg-1 {
    background-image: url("../image/ad1-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-ad.ad-bg-2 {
    background-image: url("../image/ad2-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ad {
    display: flex;
    flex-direction: column;
}

.ad .box-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ad .box-info .p1 {
    font-size: 22px;
    color: #fff;
    letter-spacing: 1px;
}

.ad .box-info .p2 {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
}

.ad .box-info .zx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    font-size: 18px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    gap: 5px;
    padding: 10px 0;
    margin-top: 20px;
}

.ad .box-info .zx i {
    width: 16px;
    height: 9px;
    background-position: 0 -50px;
}

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

.ad2 .box {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ad2 .box p {
    font-size: 32px;
    color: #fff;
    letter-spacing: 2px;
    font-weight: bold;
}

.ad2 .box a {
    width: 144px;
    padding: 10px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
}

.ad2 .box a i {
    width: 16px;
    height: 9px;
    background-position: 0 -50px;
}

.ad2 .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.ad2 .info .qr {
    width: 124px;
    aspect-ratio: 1 / 1;
}

.ad2 .info .tel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-size: 28px;
    color: #fff;
    font-weight: bold;
}

.ad2 .info .tel i {
    width: 29px;
    height: 29px;
    background-position: -350px 0;
    margin-top: 3px;
}


.section-work {
    padding: 100px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background-image: url("../image/work-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.work {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 50px;
}

.work .work-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.work .work-box .image-item {
    width: 630px;
    display: flex;
}

.work .work-box .image-item .image {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: none;
}

.work .work-box .image-item .image.active {
    display: block;
}

.work .work-box .image-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work .work-box .items {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: calc(100% - 650px);
}

.work .work-box .items ul {
    display: flex;
    flex-direction: column;
    gap: 70px;
    border-left: 3px solid #eee;
}

.work .work-box .items ul li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    padding-left: 40px;
    position: relative;
}

.work .work-box .items ul li:before {
    position: absolute;
    content: '';
    left: -3px;
    top: 0;
    width: 3px;
    height: 0;
    background: #01847E;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.work .work-box .items ul li.active:before {
    height: 100%;
}

.work .work-box .items ul li h3 {
    font-size: 26px;
    color: #707171;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.work .work-box .items ul li.active h3 {
    color: #01847E;
}

.work .work-box .items ul li p {
    font-size: 18px;
    color: #000;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.work .work-box .items ul li.active p {
    opacity: 1;
}

.work .work-box .items .more {
    width: 144px;
    padding: 10px 0;
    border-radius: 30px;
    margin-left: 43px;
    background: #01847E;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.work .work-box .items .more i {
    width: 0;
    overflow: hidden;
    height: 9px;
    background-position: 0 -50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.work .work-box .items .more:hover i {
    width: 16px;
}

.section-service {
    padding: 100px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.service {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.service .items {
    display: flex;
    width: 100%;
}

.service .items ul {
    display: flex;
    gap: 45px;
    width: 100%;
}

.service .items ul li {
    width: calc((100% - 90px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.service .items ul li .bg-l {
    position: absolute;
    left: -258px;
    top: 0;
    width: 258px;
    height: 100%;
    background-image: url("../image/work-yy-left-active.png");
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 0;
}

.service .items ul li .bg-b {
    position: absolute;
    right: 0;
    bottom: -63px;
    width: 100%;
    height: 63px;
    background-image: url("../image/work-yy-active.png");
    background-position: right top;
    background-repeat: no-repeat;
}

.service .items ul li .bx {
    width: 100%;
    padding: 80px 30px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: #fff;
    gap: 30px;
    border-radius: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.service .items ul li.active .bx {
    background: linear-gradient(to bottom, #B9DDDB, #0A8781);
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3);
}

.service .items ul li i {
    width: 175px;
    height: 175px;
}

.service .items ul li i.icon-1 {
    background-position: 0 -80px;
}

.service .items ul li.active i.icon-1 {
    background-position: -175px -80px;
}

.service .items ul li i.icon-2 {
    background-position: -350px -80px;
}

.service .items ul li.active i.icon-2 {
    background-position: -525px -80px;
}

.service .items ul li i.icon-3 {
    background-position: -700px -80px;
}

.service .items ul li.active i.icon-3 {
    background-position: -875px -80px;
}

.service .items ul li h3 {
    font-size: 28px;
    color: #01847E;
    margin-top: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.service .items ul li.active h3 {
    color: #fff;
}

.service .items ul li p {
    font-size: 18px;
    color: #999;
    line-height: 30px;
    width: 100%;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.service .items ul li.active p {
    color: #fff;
}

.section-advantage {
    padding: 100px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.advantage {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.advantage .items {
    display: flex;
    width: 100%;
    gap: 25px;
}

.advantage .items .items-menu {
    display: flex;
    flex-direction: column;
    width: 132px;
    background: #F6F8FA;
    border-radius: 10px;
}

.advantage .items .items-menu li {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    font-size: 26px;
    color: #000;
    line-height: 36px;
    letter-spacing: 2px;
    text-align: center;
    /* font-weight: bold; */
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 10px;
    cursor: pointer;
}

.advantage .items .items-menu li.active {
    background: #01847E;
    font-weight: bold;
    color: #fff;
    box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.2), inset 3px 3px 6px rgba(255, 255, 255, 0.4);;

}

.advantage .items .items-list {
    display: flex;
    width: calc(100% - 25px - 132px);
}

.advantage .items .items-list li {
    width: 100%;
    display: none;
    background: #F6F8FA;
}

.advantage .items .items-list li.active {
    display: flex;
}

.advantage .items .items-list li .bx {
    width: calc(100% - 750px);
    display: flex;
    flex-direction: column;
    gap: 90px;
    padding: 90px 40px 0;
}

.advantage .items .items-list li .bx h3 {
    font-size: 28px;
    letter-spacing: 2px;
    color: #000;
    position: relative;
}

.advantage .items .items-list li .bx h3:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 3px;
    background: #01847E;
    left: 0;
    bottom: -20px;
}

.advantage .items .items-list li .bx .text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 20px;
    color: #000;
}
.advantage .items .items-list li .bx .text .p {
    line-height: 1.4;
}

.advantage .items .items-list li .bx .more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    gap: 5px;
    font-size: 16px;
    color: #fff;
    border-radius: 30px;
    background: #01847E;
    padding: 10px 0;
}

.advantage .items .items-list li .bx .more i {
    width: 0;
    overflow: hidden;
    height: 9px;
    background-position: 0 -50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.advantage .items .items-list li .bx .more:hover i {
    width: 16px;
}

.advantage .items .items-list li .image {
    width: 750px;
    height: 520px;
    overflow: hidden;
}

.advantage .items .items-list li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-solution {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("../image/solution-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.solution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 50px;
}

.solution .items {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.solution .items .ul-menu {
    display: flex;
    flex-wrap: wrap;
    width: 380px;
    background: #fff;
}

.solution .items .ul-menu li {
    width: 50%;
    border: 1px solid #ddd;
    border-bottom: none;
    display: flex;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.solution .items .ul-menu li.active {
    background-image: url("../image/solution-li-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.solution .items .ul-menu li:nth-child(2n) {
    border-left: none;
}

.solution .items .ul-menu li:nth-last-child(1), .solution .items .ul-menu li:nth-last-child(2) {
    border-bottom: 1px solid #ddd;
}

.solution .items .ul-menu li a {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 10px;
}

.solution .items .ul-menu li a i {
    width: 40px;
    height: 40px;
}

.solution .items .ul-menu li a i.icon-1 {
    background-position: 0 -260px;
}

.solution .items .ul-menu li.active a i.icon-1 {
    background-position: -40px -260px;
}

.solution .items .ul-menu li a i.icon-2 {
    background-position: -80px -260px;
}

.solution .items .ul-menu li.active a i.icon-2 {
    background-position: -120px -260px;
}

.solution .items .ul-menu li a i.icon-3 {
    background-position: -160px -260px;
}

.solution .items .ul-menu li.active a i.icon-3 {
    background-position: -200px -260px;
}

.solution .items .ul-menu li a i.icon-4 {
    background-position: -240px -260px;
}

.solution .items .ul-menu li.active a i.icon-4 {
    background-position: -280px -260px;
}

.solution .items .ul-menu li a i.icon-5 {
    background-position: -320px -260px;
}

.solution .items .ul-menu li.active a i.icon-5 {
    background-position: -360px -260px;
}

.solution .items .ul-menu li a i.icon-6 {
    background-position: -400px -260px;
}

.solution .items .ul-menu li.active a i.icon-6 {
    background-position: -440px -260px;
}

.solution .items .ul-menu li a i.icon-7 {
    background-position: -480px -260px;
}

.solution .items .ul-menu li.active a i.icon-7 {
    background-position: -520px -260px;
}

.solution .items .ul-menu li a i.icon-8 {
    background-position: -560px -260px;
}

.solution .items .ul-menu li.active a i.icon-8 {
    background-position: -600px -260px;
}

.solution .items .ul-menu li a i.icon-9 {
    background-position: -640px -260px;
}

.solution .items .ul-menu li.active a i.icon-9 {
    background-position: -680px -260px;
}

.solution .items .ul-menu li a i.icon-10 {
    background-position: -720px -260px;
}

.solution .items .ul-menu li.active a i.icon-10 {
    background-position: -760px -260px;
}

.solution .items .ul-menu li a h3 {
    font-size: 16px;
    color: #000;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.solution .items .ul-menu li.active a h3 {
    color: #fff;
}

.solution .items .ul-image {
    width: 745px;
    height: 550px;
    display: flex;
}

.solution .items .ul-image li {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}

.solution .items .ul-image li.active {
    display: flex;
}

.solution .items .ul-image li .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution .items .ul-image li .info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solution .items .ul-image li .info .text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 60px);
    padding: 15px 10px;
}

.solution .items .ul-image li .info .text .t {
    font-size: 20px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.solution .items .ul-image li .info .text p {
    font-size: 14px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.solution .items .ul-image li .info .more {
    width: 60px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #01847E;
}

.solution .items .ul-image li .info .more i {
    width: 25px;
    height: 14px;
    background-position: -32px -50px;
}

.solution .items .dl-message {
    width: calc(100% - 380px - 40px - 745px);
    height: 550px;
    display: flex;
    flex-direction: column;
    box-shadow: -1px -3px 5px 0 rgba(0, 0, 0, 0.1);
    gap: 20px;
    background-image: url("../image/message-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.solution .items .dl-message dt {
    color: #fff;
    font-size: 26px;
    padding: 15px 0;
    width: 100%;
    font-weight: bold;
    text-align: center;
    background: #01847E;
}

.solution .items .dl-message dd {
    padding: 0 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution .items .dl-message dd .inp {
    border: none;
    height: 40px;
    line-height: 40px;
    padding: 10px 10px;
    outline: none;
    font-size: 16px;
    background: #F6F7F8;
}

.solution .items .dl-message dd .inp::placeholder {
    color: #999;
}

.solution .items .dl-message dd .tex {
    width: 100%;
    height: 100px;
    line-height: 20px;
    padding: 10px 10px;
    outline: none;
    font-size: 15px;
    resize: none;
    border: none;
    background: #F6F7F8;
}

.solution .items .dl-message dd .tex::placeholder {
    color: #999;
}

.solution .items .dl-message dd button {
    width: 144px;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    background: #01847E;
    border-radius: 30px;
    border: none;
    outline: none;
    margin-top: 10px;
}

.solution .items .dl-message dd .mes-logo {
    max-width: 100%;
    margin-top: 20px;
}

.section-abouts {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("../image/about-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.abouts {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
}

.abouts.relative {
    position: relative;
}

.abouts .box {
    width: calc(50% - 80px);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    height: 660px;
}

.abouts .box h2 {
    font-size: 44px;
    font-weight: bold;
    margin-top: 60px;
    color: #01847E;
}

.abouts .box .p1 {
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    color: #01847E;
}

.abouts .box .intro {
    width: 100%;
    max-height: 160px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 40px;
    color: #000;
    line-height: 32px;
    font-size: 18px;
    position: relative;
}

.abouts .box .intro a {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 18px;
    color: #01847E;
}

.abouts .box ul {
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.abouts .box ul:before {
    content: '';
    height: 25px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -25px;
    background-image: url("../image/about-n-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.abouts .box ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 40px 50px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.abouts .box ul li.active {
    background: #01847E;
}

.abouts .box ul li:before {
    content: '';
    position: absolute;
    left: -1px;
    top: 40px;
    height: calc(100% - 80px);
    width: 1px;
    background: #ddd;
    z-index: 1;
}

.abouts .box ul li:after {
    content: '';
    position: absolute;
    left: -1px;
    top: 40px;
    height: calc((100% - 80px) / 2);
    width: 1px;
    background: #01847E;
    z-index: 2;
}

.abouts .box ul li.active:after, .abouts .box ul li.active + li:after {
    display: none;
}

.abouts .box ul li.active:before, .abouts .box ul li.active + li:before {
    display: none;
}

.abouts .box ul li:first-of-type:after {
    display: none;
}

.abouts .box ul li:first-of-type:before {
    display: none;
}

.abouts .box ul li .hd {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
}

.abouts .box ul li .hd .n {
    font-size: 44px;
    font-weight: bold;
    color: #01847E;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.abouts .box ul li.active .hd .n {
    color: #fff;
}

.abouts .box ul li .hd .n:before {
    content: '+';
    position: absolute;
    right: -10px;
    top: -6px;
    font-size: 18px;
    color: #01847E;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.abouts .box ul li.active .hd .n:before {
    color: #fff;
}

.abouts .box ul li .hd .u {
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.abouts .box ul li.active .hd .u {
    color: #fff;
}

.abouts .box ul li .t {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #000;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.abouts .box ul li.active .t {
    color: #fff;
}

.abouts .image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50vw;
    height: 660px;
}

.abouts .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-cert {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.cert {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

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

.cert .cert-title h2 {
    font-size: 44px;
    font-weight: bold;
    letter-spacing: 4px;
    width: 100%;
    color: #01847E;
    position: relative;
    z-index: 1;
}

.cert .cert-title h2:before {
    position: absolute;
    content: '';
    left: 0;
    top: -13px;
    width: 407px;
    height: 46px;
    background-image: url(../image/cert-h2-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.cert .cert-title ul {
    display: flex;
    gap: 10px;
}

.cert .cert-title ul li {
    display: flex;
}

.cert .cert-title ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    padding: 10px 20px;
    border-radius: 30px;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cert .cert-title ul li.active a {
    background: #01847E;
    color: #fff;
}

.cert .cert-title ul li a i {
    width: 0;
    overflow: hidden;
    height: 9px;
    background-position: 0 -50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cert .cert-title ul li.active a i {
    width: 16px;
    margin-left: 5px;
}

.cert .items {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cert .items .item {
    display: flex;
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
}

.cert .items .item.active {
    height: auto !important;
    overflow: unset !important;
}

.cert .items .item .cert-swiper {
    width: 100%;
    overflow: hidden;
}

.cert .items .item .cert-swiper .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;

}

.cert .items .item .cert-swiper .swiper-wrapper .swiper-slide .image {
    width: 100%;
    aspect-ratio: 1 / 1.5;
    overflow: hidden;
    object-fit: cover;
    /*border: 1px solid #DEE2EB;*/
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.cert .items .item .cert-swiper .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cert .items .item .cert-swiper .swiper-wrapper .swiper-slide p {
    font-size: 18px;
    color: #000;
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cert .items .item .swiper-button-next {
    right: calc(50% - 45px);
    left: unset;
    top: calc(100% + 50px);
    bottom: unset;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #DEE2EB;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cert .items .item .swiper-button-prev {
    left: calc(50% - 45px);
    right: unset;
    top: calc(100% + 50px);
    bottom: unset;
    width: 40px;
    height: 40px;
    border: 1px solid #DEE2EB;
    background: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cert .items .item .swiper-button-prev:hover, .cert .items .item .swiper-button-next:hover {
    background: #01847E;
}

.cert .items .item .swiper-button-next:after, .cert .items .item .swiper-button-prev:after {
    font-size: 16px;
    color: #DEE2EB;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cert .items .item .swiper-button-next:hover:after, .cert .items .item .swiper-button-prev:hover:after {
    color: #fff;
}

.section-cooperation {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cooperation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 50px;
}

.cooperation .items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    background: #F6F8FA;
    padding: 50px 0;
}

.cooperation .items .swiper {
    height: 80px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cooperation .items .swiper .swiper-wrapper {
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

.cooperation .items .swiper .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.cooperation .items .swiper .swiper-wrapper .swiper-slide .image {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.section-news {
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    background-image: url(../image/news-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.news {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.news .box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.news .box .left-box {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.news .box .left-box .cate-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: #333;
}

.news .box .left-box .cate-box li {
    width: calc(100% / 3);
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.news .box .left-box .cate-box li.active {
    background: #01847E;
}

.news .box .left-box .cate-box li i {
    width: 35px;
    height: 35px;
}

.news .box .left-box .cate-box li i.icon-1 {
    background-position: -390px 0;
}

.news .box .left-box .cate-box li i.icon-2 {
    background-position: -425px 0;
}

.news .box .left-box .cate-box li i.icon-3 {
    background-position: -460px 0;
}

.news .box .left-box .cate-box li h3 {
    font-size: 20px;
    color: #fff;
}

.news .box .left-box .cate-box li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    height: calc(100% - 30px);
    width: 1px;
    background: rgba(255, 255, 255, 0.7);
}

.news .box .left-box .cate-box li.active:before, .news .box .left-box .cate-box li.active + li:before {
    display: none;
}

.news .box .left-box .cate-box li:first-of-type:before {
    display: none;
}

.news .box .left-box .list-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 20px;
    background: #F3F4F6;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.news .box .left-box .list-box .list {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.news .box .left-box .list-box .list.active {
    display: flex;
}

.news .box .left-box .list-box .list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
}

.news .box .left-box .list-box .list li .image {
    width: 28%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.news .box .left-box .list-box .list li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.news .box .left-box .list-box .list li:hover .image img {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

.news .box .left-box .list-box .list li .info {
    width: 72%;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.news .box .left-box .list-box .list li .info .t {
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding-bottom: 15px;
}

.news .box .left-box .list-box .list li .info .t h4 {
    width: 100%;
    font-size: 20px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding: 0 10px;
}

.news .box .left-box .list-box .list li:hover .info .t h4 {
    color: #01847E;
}

.news .box .left-box .list-box .list li .info .intro {
    font-size: 16px;
    color: #555;
    width: 100%;
    line-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 56px;
    padding: 0 10px;
}

.news .box .left-box .list-box .list li .info .time {
    font-size: 16px;
    color: #555;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.news .box .left-box .list-box .list li .info .time i {
    width: 20px;
    height: 20px;
    background-position: -510px 0;
}

.news .box .right-box {
    display: flex;
    flex-direction: column;
    width: calc(30% - 20px);
}

.news .box .right-box .t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #333;
    padding: 15px 15px;
}

.news .box .right-box .t h3 {
    font-size: 20px;
    color: #fff;
    height: 35px;
    line-height: 35px;
}

.news .box .right-box .t a {
    color: #fff;
    font-size: 20px;
}

.news .box .right-box .t a:hover {
    color: #01847E;
}

.news .box .right-box .list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.news .box .right-box .list li {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    width: 100%;
}

.news .box .right-box .list li .q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.news .box .right-box .list li .q em {
    width: 35px;
    height: 35px;
    background: #8C8C8C;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news .box .right-box .list li .q h4 {
    width: calc(100% - 45px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    color: #000;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.news .box .right-box .list li:hover .q h4 {
    color: #01847E;
}

.news .box .right-box .list li .a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.news .box .right-box .list li .a em {
    width: 35px;
    height: 35px;
    background: #01847E;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news .box .right-box .list li .a p {
    width: calc(100% - 45px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    color: #777;
}

.section-footer {
    display: flex;
    flex-direction: column;
    background-image: url(../image/footer-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    width: 100%;
}

.footer {
    padding: 40px 0 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer .f-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}
.footer .f-logo img {
    max-height:70px;
}

.footer .f-logo p {
    font-size: 22px;
    color: #fff;
    padding-left: 10px;
    border-left: 1px solid #fff;
    height: 40px;
    line-height: 40px;
}

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

.footer .f-box .f-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer .f-box .f-contact p {
    color: #fff;
    font-size: 18px;
    font-family: "HarmonyOS Sans SC Light";
}

.footer .f-box .f-qrcode {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.footer .f-box .f-qrcode .qr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer .f-box .f-qrcode .qr img {
    width: 124px;
    aspect-ratio: 1 / 1;
}

.footer .f-box .f-qrcode .qr p {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #fff;
}

.footer .links {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 15px;
}

.footer .links p {
    font-size: 16px;
    color: #fff;
}

.footer .links a {
    font-size: 14px;
    color: #fff;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.6);
}

.footer .links a:hover {
    color: #01847E;
}

.footer .links a:last-of-type {
    border-right: none;
}

.section-copyright {
    padding: 10px 0;
    background: #21252C;
}

.copyright {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.copyright .cov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #fff;
}

.copyright .cov a {
    color: #fff;
}

.copyright .cov a:hover {
    color: #01847E;
}

.copyright .cov p {
    margin-right: 40px;
}

.copyright .cov p:last-of-type {
    margin-right: 0;
}

#toolbar {
    position: fixed;
    z-index: 99999999;
    right: 0;
    top: 25%;
}

#toolbar li,#toolbar a.tool-message {
    margin-bottom: 3px;
    font-size: 0;
    width: 57px;
    height: 57px;
    right: 0;
    position: relative;
}

#toolbar li.tool-logo {
    width: 50px;
    height: auto !important;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

#toolbar li.tool-logo img {
    width: 100%;
}

#toolbar li.tool-message,#toolbar a.tool-message {
    width: 50px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background: #01847E;
    border-radius: 10px;
    cursor: pointer;
}

#toolbar li.tool-message img,#toolbar a.tool-message img {
    width: 24px;
    /*height: 27px;*/
    margin-bottom: 2px;
}

#toolbar li.tool-message .span,#toolbar a.tool-message .span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: inherit;
    color: #fff;
    letter-spacing: 1px;
    line-height: 20px;
    /*padding-left: 5px;*/

}

#toolbar li.wx {
    border: 2px solid #01847E;
    border-radius: 10px 10px 0 0;
    width: 50px;
    height: 90px;
    background: #fff;
}

#toolbar li.wx.wx-1 {
    margin-top: 5px;
    border-bottom: none;
}

#toolbar li.wx.wx-2 {
    margin-top: -5px;
    border-radius: 0 0 10px 10px;
    border-top: none;
    position: relative;
}

#toolbar li.wx.wx-2 .line {
    width: 20px;
    height: 2px;
    background: #eee;
    left: 15px;
    top: 3px;
    position: absolute;
}

#toolbar li.wx a {
    width: 50px;
    height: 90px;
}

#toolbar li.wx a .span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 50px;
    height: 90px;
}

#toolbar li.wx a .span img {
    width: 24px;
    margin-bottom: 5px;
    /*margin-right: 2px;*/
    /*height: 28px;*/
}

#toolbar li.wx a em {
    font-size: 14px;
    color: #444;
    letter-spacing: 1px;
    padding-left: 0;
    line-height: 16px;
    font-weight: inherit;
}


#toolbar li .wz {
    position: absolute;
    width: 00px;
    height: 50px;
    line-height: 50px;
    right: 100%;
    top: 25px;
    font-size: 20px;
    color: #333;
    background: #fff;
    box-shadow: 0 0 10px #888;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    text-align: center;
}

#toolbar li.wx-2:hover .wz {
    width: 180px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#toolbar li .ewm-box {
    position: absolute;
    z-index: 1;
    padding: 0 5px;
    width: 90px;
    height: 90px;
    right: 100%;
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s;
    transition: all .7s;
}

#toolbar li.ewm .ewm-box p {
    margin-bottom: 0;
}

#toolbar li.wx-1 .ewm-box img {
    width: 90px;
    height: 90px;
}

#toolbar li.ewm .ewm-box:after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 20px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: 5px;
    cursor: pointer;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #01847E;
    border-right: none;
}

#toolbar li.ewm:hover .icon {
    background-position: -57px -180px;
}

#toolbar li.wx-1:hover .ewm-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#toolbar li.backtop {
    cursor: pointer;
    border: 2px solid #01847E;
    border-radius: 10px;
    width: 50px;
    height: 90px;
    background: #fff;
    margin-top: 5px;
}

#toolbar li.backtop.no-back {
    display: none;
}

#toolbar li.backtop .iconfont {
    color: #fff;
    background-color: #01847E;
}

#toolbar li:hover a {
    width: 200px;
}

#toolbar li:hover .icon-font {
    background-color: #01847E;
}

#toolbar li:hover .icon-font:after {
    left: 15px;
}

#toolbar li:hover .icon-qq:after {
    background-position: -30px -150px;
}

#toolbar li:hover .icon-phone:after {
    background-position: -30px -90px;
}

#toolbar li:hover .icon-ewm:after {
    background-position: -30px -30px;
}

#toolbar li:hover .icon-message:after {
    background-position: -30px -120px;
}

#toolbar li:hover .icon-wangwang:after {
    background-position: -30px 0;
}

#toolbar li:hover .icon-top:after {
    background-position: -30px -60px;
}

.modal-header-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header-message::before, .modal-header-message::after {
    display: none;
}

.modal-dialog-message {
    width: 540px;
}

.form-message .form-group label {
    margin-bottom: 10px;
}

.form-message .form-group .code-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form-message .form-group .code {
    width: 200px;
    margin-right: 10px;
}

.form-message .form-group .codeimg {
    height: 30px;
}

.form-message .message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0 10px;
}

.page-banners .page-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    width: 100%;
    position: relative;
}

.page-banners .page-banner .image {
    width: auto;
    max-width: 100%;
}

.section-page-abouts {
    padding: 100px 0 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.page-abouts {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.page-abouts .box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.page-abouts .box .intro {
    width: calc(50% - 10px);
    height: 460px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #111;
    line-height: 36px;
    font-size: 16px;
    padding-right: 10px;
}

/* 改变整个滚动条的宽度 */
.page-abouts .box .intro::-webkit-scrollbar {
    width: 3px;
}

/* 改变滚动条轨道的颜色 */
.page-abouts .box .intro::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* 改变滚动条滑块的颜色 */
.page-abouts .box .intro::-webkit-scrollbar-thumb {
    background: #01847E;
}

/* 当滑块被激活（用户正在拖动它）时的颜色 */
.page-abouts .box .intro::-webkit-scrollbar-thumb:hover {
    background: #01847E;
}

.page-abouts .box .image {
    width: calc(50% - 10px);
    height: 460px;
    overflow: hidden;
}

.page-abouts .box .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-strength {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    background: #F6F8FA;
    padding: 40px 0;
}

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

.strength .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 10px;
}

.strength .item .t {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
}

.strength .item .t .num {
    font-size: 44px;
    font-weight: bold;
    color: #01847E;
    position: relative;
}

.strength .item .t .num:before {
    content: '+';
    position: absolute;
    right: -10px;
    top: -6px;
    font-size: 18px;
    color: #01847E;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.strength .item .t .u {
    font-size: 16px;
    color: #01847E;
    margin-bottom: 4px;
}

.strength .item .n {
    font-size: 18px;
    color: #000;
}

.strength .line {
    width: 1px;
    height: 60px;
    background: #D6D6D6;
    position: relative;
}

.section-idea {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.idea {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.idea .items {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.idea .items li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 10px;
    width: calc(100% / 3);
    aspect-ratio: 5 / 6;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.idea .items li.active {
    background: #01847E;
}

.idea .items li .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.idea .items li .i {
    margin-bottom: 30px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.idea .items li.active .i {
    transform: rotateY(360deg);
}

.idea .items li p {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}

.section-history {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url(../image/history-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.history {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.history .items {
    display: flex;
    position: relative;
    width: 100%;
}

.history .items .swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.history .items .swiper .swiper-wrapper .swiper-slide {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.history .items .swiper .swiper-wrapper .swiper-slide .t {
    font-size: 32px;
    letter-spacing: 2px;
    font-weight: bold;
    width: 100%;
    color: #01847E;
    padding-bottom: 35px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.history .items .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev .t {
    position: absolute;
    right: -60%;
    color: #848688;
}

.history .items .swiper .swiper-wrapper .swiper-slide.swiper-slide-next .t {
    position: absolute;
    left: -60%;
    color: #848688;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box .image {
    width: 480px;
    height: 300px;
    border: 2px solid #01847E;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box .inro {
    width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box .inro .p1 {
    font-size: 30px;
    font-weight: bold;
    color: #01847E;
}

.history .items .swiper .swiper-wrapper .swiper-slide .box .inro .p2 {
    font-size: 18px;
    color: #000;
    line-height: 36px;
}

.history .swiper-button-next {
    right: 0;
    left: unset;
    top: 62px;
    width: 50px;
    height: 50px;
    bottom: unset;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.history .swiper-button-prev {
    left: 0;
    right: unset;
    top: 62px;
    width: 50px;
    height: 50px;
    bottom: unset;
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    border-radius: 50%;
}

.history .swiper-button-next:hover, .history .swiper-button-prev:hover {
    background: #01847E;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.history .swiper-button-next:after, .history .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
    color: #01847E;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.history .swiper-button-next:hover:after, .history .swiper-button-prev:hover:after {
    color: #fff;
}

.cons {
    margin: 60px 0;
}

.cons .con {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.cons .con .page-menus {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 300px;
}

.cons .con .page-menus .nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    background: #fff;
    margin-bottom: 20px;
}

.cons .con .page-menus .nav .nav-title {
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    background: #01847E;
}

.cons .con .page-menus .nav .list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: calc(100% - 30px);
    border: 1px solid #eee;
    margin: 15px 15px 0;
}

.cons .con .page-menus .nav .list:last-of-type {
    margin-bottom: 15px;
}

.cons .con .page-menus .nav .list .cate {
    padding: 15px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F4F4F4;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    -webkit-transition: all .3s;
    transition: all .3s
}

.cons .con .page-menus .nav .list .children {
    padding: 15px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
    font-size: 15px;
    color: #000;
    -webkit-transition: all 0s;
    transition: all 0s;
}

.cons .con .page-menus .nav .list .children em {
    font-weight: bold;
    color: #ddd;
}

.cons .con .page-menus .nav .list .children:last-of-type {
    border-bottom: none;
}

.cons .con .page-menus .nav .list .children:hover,.cons .con .page-menus .nav .list .children.active {
    background: #01847E;
    border-bottom: 1px dashed #01847E;
    color: #fff;
}
.cons .con .page-menus .nav .list .children:last-of-type:hover,.cons .con .page-menus .nav .list .children:last-of-type.active {
    border-bottom: none;
}

.cons .con .page-menus .nav .list .children:hover em,.cons .con .page-menus .nav .list .children.active em {
    color: #fff;
}

.cons .con .page-menus .boxs {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    margin-bottom: 20px;
}

.cons .con .page-menus .boxs .title {
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    background: #01847E;
}

.cons .con .page-menus .boxs .pros {
    border: 1px solid #ddd;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    padding: 0 20px;
}

.cons .con .page-menus .boxs .pros a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    background: #eee;
    margin: 15px 0;
}

.cons .con .page-menus .boxs .pros a .image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cons .con .page-menus .boxs .pros a .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cons .con .page-menus .boxs .pros a .name {
    padding: 15px 10px;
    font-size: 14px;
    text-align: center;
    color: #000;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .page-menus .boxs .pros a:hover .name {
    background: #01847E;
    color: #fff;
}

.cons .con .page-menus .boxs .contact {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 15px 15px;
    border: 1px solid #ddd;
}

.cons .con .page-menus .boxs .contact .li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #eee;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    width: 100%;
    padding: 15px 20px;
}

.cons .con .page-menus .boxs .contact .li:last-of-type {
    border-top: none;
}

.cons .con .page-menus .boxs .contact .li img {
    margin-right: 10px;
}

.cons .con .page-menus .boxs .contact .qr {
    margin-top: 20px;
    width: 100%;
}

.cons .con .details {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: calc(100% - 340px);
}

.cons .con .details .s-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    border: 1px solid #ddd;
}

.cons .con .details .s-content .sm-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #000;
    font-weight: bold;
    padding: 30px 20px;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.cons .con .details .s-content .sm-tag {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #777;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
}

.cons .con .details .s-content .sm-tag .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}

.cons .con .details .s-content .sm-tag .item img {
    margin-right: 5px;
}

.cons .con .details .s-content .cp-body {
    padding: 0 20px;
}

.cons .works {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cons .works .t {
    font-size: 36px;
    width: 100%;
    text-align: center;
    color: #000;
    font-weight: bold;
}

.cons .works .works-cate {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.cons .works .works-cate ul {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 80px);
    gap: 15px;
    height: 36px;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .works .works-cate ul.at {
    height: unset;
}

.cons .works .works-cate ul li {
    display: flex;
    border-radius: 30px;
}

.cons .works .works-cate ul li a {
    border-radius: 30px;
    padding: 0 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    border: 1px solid #eee;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .works .works-cate ul li.active a {
    background: #01847E;
    color: #fff;
    border: 1px solid #01847E;
}

.cons .works .works-cate .shows {
    width: 70px;
    color: #01847E;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 9px;
}

.cons .works .works-cate .shows i {
    width: 12px;
    height: 6px;
    background-position: -540px -6px;
}

.cons .works .works-cate .shows.down i {
    background-position: -540px 0;
}

.cons .works .items {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.cons .works .items li {
    width: calc((100% - 60px) / 3);
    display: flex;
    flex-direction: column;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .works .items li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.cons .works .items li .image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cons .works .items li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cons .works .items li .t h3 {
    width: 100%;
    padding: 20px 10px;
    font-size: 18px;
    color: #000;
    background: #F7F8FA;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .works .items li:hover .t h3 {
    color: #01847E;
}

.cons .solutions {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cons .solutions .t {
    font-size: 36px;
    width: 100%;
    text-align: center;
    color: #000;
    font-weight: bold;
}

.cons .solutions .lists {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.cons .solutions .lists li {
    width: calc((100% - 60px) / 3);
    display: flex;
    flex-direction: column;
    -webkit-transition: all .3s;
    transition: all .3s;
    background: #F7F8FA;
    gap: 20px;
}

.cons .solutions .lists li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.cons .solutions .lists li .image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cons .solutions .lists li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cons .solutions .lists li .name h3 {
    width: 100%;
    padding: 0 20px;
    font-size: 18px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .solutions .lists li:hover .name h3 {
    color: #01847E;
}

.cons .solutions .lists li .intro {
    width: 100%;
    padding: 0 20px;
    line-height: 28px;
    height: 84px;
    font-size: 15px;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cons .solutions .lists li .more {
    width: 100%;
    padding: 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    color: #000;
    gap: 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .solutions .lists li .more {
    color: #01847E;
}

.cons .solutions .lists li .more i {
    width: 16px;
    height: 9px;
    background-position: -60px -50px;
}

.cons .solutions .lists li:hover .more i {
    background-position: -16px -50px;
}

.smen {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px solid #ddd;
    border-top: none;
}

.border {
    border-top: 1px solid #ddd !important;
}

.smen .red_x {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    letter-spacing: 2px;
}

.smen .red_x i {
    width: 21px;
    height: 21px;
    background-image: url("../image/icon-menu.png");
    background-repeat: no-repeat;
    margin-right: 10px;
}

.smen a {
    color: #666;
    font-size: 16px;
}

.smen a:hover {
    color: #01847E;
}

.cons .con .details .pro-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px 20px;
    gap: 20px;
}

.cons .con .details .pro-list li {
    width: calc((100% - 40px) / 3);
    display: flex;
    flex-direction: column;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .pro-list li:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    /*transform: translateY(-2px);*/
}

.cons .con .details .pro-list li .image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #F7F8FA;
    overflow: hidden;
}

.cons .con .details .pro-list li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .pro-list li:hover .image img {
    /*-webkit-transform: scale(1.02);*/
    /*transform: scale(1.02);*/
}

.cons .con .details .pro-list li .name {
    height: 50px;
    width: 100%;
    padding: 0 15px;
    background: #F7F8FA;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .pro-list li:hover .name {
    background: #01847E;
}

.cons .con .details .pro-list li .name .text {
    max-width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    color: #000;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .pro-list li:hover .name .text {
    max-width: calc(100% - 21px);
    color: #fff;
}

.cons .con .details .pro-list li .name i {
    width: 0;
    height: 9px;
    background-position: 0 -50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .pro-list li:hover .name i {
    width: 16px;
    margin-left: 5px;
}

.cons .con .details .gl-new-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px 20px;
    gap: 15px 30px;
}

.cons .con .details .gl-new-list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: calc(50% - 15px);
}

.cons .con .details .gl-new-list li a {
    width: calc(100% - 110px);
    display: flex;
}

.cons .con .details .gl-new-list li a h3 {
    font-size: 15px;
    color: #555;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.cons .con .details .gl-new-list li:hover a h3 {
    color: #01847E;
}

.cons .con .details .gl-new-list li .time {
    text-align: right;
    width: 90px;
    font-size: 15px;
    color: #999;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.cons .con .details .gl-new-list li:hover .time {
    color: #01847E;
}

.cons .con .details .pro-detail {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    border: 1px solid #ddd;
    padding: 50px 50px;
}

.cons .con .details .pro-detail .boxs {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.cons .con .details .pro-detail .boxs .photos {
    width: 400px;
    position: relative;
    display: inline-block;
    float: left;
}

.cons .con .details .pro-detail .boxs .photos .photos-box {
    overflow: hidden;
    position: relative;
    width: 400px;
    height: 400px;
}

.cons .con .details .pro-detail .boxs .photos .photos-box .images-cover {
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.cons .con .details .pro-detail .boxs .photos .photos-box .images-cover img {
    padding: 1px;
    display: inline-block;
    float: left;
    /*border: 1px solid #cfcfcf;*/
    box-sizing: border-box;
    position: absolute;
}

.cons .con .details .pro-detail .boxs .photos .photos-box .move-view {
    width: 100px;
    height: 100px;
    position: absolute;
    background-image: url('../image/move-box.png');
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly {
    height: 92px;
    overflow: hidden;
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -40px;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn span {
    line-height: 75px;
    height: 75px;
    width: 20px;
    background: #eee;
    color: #333;
    display: block;
    z-index: 9998;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 3px;
    transition: background ease .3s;
    -webkit-transition: background ease .3s;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn .magnifier-btn-left {
    float: left;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-btn .magnifier-btn-right {
    float: right;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line {
    position: relative;
    overflow: hidden;
    height: 92px;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul {
    overflow: hidden;
    margin: 0 auto;
    display: block;
    font-size: 0;
    width: 10000%;
    position: absolute;
    left: 0;
    z-index: 997;
}

.animation03 {
    transition: all .3s ease-in .1s;
    -webkit-transition: all .3s ease-in .1s;
}

.clearfix:after, .clearfix:before {
    display: table;
    line-height: 0;
    content: "";
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul li {
    list-style: none;
    cursor: pointer;
    float: left;
    width: 84px;
    height: 84px;
}

.cons .con .details .pro-detail .boxs .photos .magnifier-assembly .magnifier-line ul li img {
    padding: 1px;
    display: inline-block;
    float: left;
    box-sizing: border-box;
}

.small-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    width: 78px;
    padding: 1px;
    margin: 5px;
    overflow: hidden;
    text-align: center;
}

.small-img img {
    width: 100%;
    height: 100%;
}

.active {
    transition: .3s;
}

.magnifier-view {
    width: 100%;
    height: 100%;
    position: absolute;
    right: -105%;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    display: none;
    overflow: hidden;
}

.magnifier-view img {
    display: block;
}

.pro_tinfo_r {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: calc(100% - 430px);
}

.pro_tinfo_r .tit {
    color: #000;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pro_tinfo_r .intro {
    color: #000;
    font-size: 14px;
    line-height: 28px;
    max-height: 224px;
    overflow: hidden;
}

.cpdh {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 30px;
}

.cpdh span,.cpdh a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000;
    background: #eaeaea;
    font-weight: bold;
    padding: 8px 15px;
}

.cpdh span img,.cpdh a img {
    margin-right: 5px;
}

.cpdh a.message {
    background: #01847E;
    color: #fff;
}

.diysr {
    color: #000;
    font-size: 20px;
    padding: 15px 15px;
    background: #eaeaea;
    font-weight: bold;
    width: 100%;
    margin-top: 40px;
}

.diysr i {
    font-size: 14px;
    font-family: arial;
    font-weight: 400;
    text-transform: uppercase;
    font-style: normal;
    padding-left: 5px;
}

.cp-body {
    line-height: 28px;
    width: 100%;
    border: 1px solid #ddd;
    padding: 20px 20px;
    border-top: none;
}

.cp-body img {
    max-width: 100%;
}

.cons .con .details .news-detail {
    width: 100%;
}

.cons .con .details .d-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #222;
    margin-top: 30px;
}

.cons .con .details .d-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: #888;
    font-size: 14px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
}

.cons .con .details .d-tag span {
    margin-right: 20px;
}

.cons .con .details .detail {
    margin: 40px 0;
    line-height: 36px;
    font-size: 16px;
    width: 100%;
    overflow-x: hidden;
}

.cons .con .details .detail img {
    max-width: 100%;
}

.cons .con .details .news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border: 1px solid #ddd;
    padding: 20px 20px;
    border-top: none;
}

.cons .con .details .news-list li {
    display: flex;
    gap: 20px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEE;
}

.cons .con .details .news-list li .image {
    width: 280px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.cons .con .details .news-list li .image img {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .news-list li:hover .image img {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

.cons .con .details .news-list li .info {
    width: calc(100% - 300px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cons .con .details .news-list li .info h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    font-size: 20px;
    width: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .news-list li:hover .info h3 {
    color: #01847E;
}

.cons .con .details .news-list li .info .tag {
    font-size: 15px;
    width: 100%;
    line-height: 26px;
    height: 78px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #888;
}

.cons .con .details .news-list li .info .time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

}

.cons .con .details .news-list li .info .time .t {
    color: #666666;
    font-size: 15px;
}

.cons .con .details .news-list li .info .time .g {
    color: #666666;
    font-size: 14px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cons .con .details .news-list li:hover .info .time .g {
    color: #01847E;
}

.pgx {
    border-top: 1px solid #ddd;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 20px;
}

.pgx span {
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pgx span a {
    width: calc(100% - 80px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    color: #000;
}

.pgx span a:hover {
    color: #01847E;
}

.comment-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px 20px
}

.comment-list .item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.comment-list .item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.comment-list .item .nick_name {
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #888;
    margin-bottom: 15px;
}

.comment-list .item .nick_name span {
    margin-right: 40px;
}

.comment-list .item .intro {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #333;
    line-height: 24px;
}

.comment-list .item .reply {
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    color: #333;
    margin-top: 20px;
    border: 1px dashed #01847E;
    padding: 10px 10px;
}

.comment-list .item .reply .n {
    width: 100px;
    line-height: 24px;
    color: #01847E;
}

.comment-list .item .reply .c {
    width: calc(100% - 100px);
    line-height: 24px;
}

.comment-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px 20px
}

.comment-box form {
    width: 100%;
}

.comment-box .control {
    border: 1px dashed #333;
    padding: 10px 10px;
    border-radius: 5px;
    outline: none;
    width: 100%;
}

.comment-box .comment-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.comment-box .comment-code .codes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.comment-box .comment-code .codes .code {
    width: 150px;
    padding: 5px 10px;
    border: 1px dashed #333;
    outline: none;
    margin-right: 20px;
}

.comment-box .comment-code .codes .codeimg {
    height: 30px;
    cursor: pointer;
}

.comment-box .comment-code .p {
    font-size: 12px;
    color: #888;
    height: 30px;
    line-height: 30px;
}

.comment-box .comment-btn {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

.comment-box .comment-btn button {
    font-size: 16px;
    padding: 8px 30px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    cursor: pointer;
}

.comment-box .comment-btn button:first-of-type {
    margin-right: 20px;
}

.comment-box .comment-btn button.submit {
    background: #01847E;
    color: #fff;
    border: 1px solid #01847E;
}

.cons .con .details .contact-box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    border: 1px solid #ddd;
    padding: 30px 20px 20px;
    border-top: none;
}

.cons .con .details .contact-box .lbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.cons .con .details .contact-box .lbox .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: calc((100% - 60px) / 4);
    border: 1px solid #01847E;
    border-radius: 5px;
}

.cons .con .details .contact-box .lbox .box .name {
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #01847E;
    text-align: center;
    padding: 15px 0;
}

.cons .con .details .contact-box .lbox .box .infos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    padding: 40px 0;
    gap: 5px;
}

.cons .con .details .contact-box .lbox .box .infos img {
    margin-bottom: 25px;
}

.cons .con .details .contact-box .lbox .box .infos p {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333;
}

/* ----- page ----- */
.pagebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
}

.pagebar:hover {
    box-shadow: unset !important;
    transform: unset !important;
}

.pagebar .pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.pagination a {
    background: #fff;
    border: 1px solid #ccc;
    color: #000;
    font-size: 14px;
    padding: 8px 12px;
    margin: 0 5px;
    border-radius: 3px;
}

.pagination span {
    color: #000;
    font-size: 14px;
    padding: 6px 2px;
    margin: 0 5px;
    border-radius: 3px;
}

.pagination a:hover {
    color: #01847E;
    border: 1px solid #01847E;
}

.pagination a.page-num-current {
    color: #fff;
    background: #01847E;
    border: 1px solid #01847E;
}

/* ----- page ----- */

.m-head {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.m-head-box {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 1rem;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.m-head-box.bg {
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.m-head-box .m-logo a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.m-head-box .m-logo a img {
    max-height: 3rem;
}

.m-head-box .m-head-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.m-navbtn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 7px;
}

.m-navbtn span, .m-navbtn:after, .m-navbtn:before {
    display: block;
    height: 2px;
    width: 100%;
    background: #1a0c07;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.m-navbtn:after, .m-navbtn:before {
    content: '';
    -webkit-transform-origin: 0;
    transform-origin: 0;
}
.m-navbtn.clicked span {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
}
.m-navbtn.clicked:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.m-navbtn.clicked:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.m-head-act .search {
    display: flex;
    align-items: center;
    justify-content: center;
}
.m-head-act .search a img {
    width: 1.5rem;
}
.m-search-box {
    position: fixed;
    left: 0;
    top: -4rem;
    background: #fff;
    height: 4rem;
    width: 100%;
    padding: 0 2rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.m-search-box.active {
    top: 0;
}
.m-search-box form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.m-search-box  .search-input {
    width: calc(100% - 3rem);
    color: #555;
    padding: 0.5rem 0;
    outline: none;
    border: none;
    font-size: 0.9rem;
}
.m-search-box .close {
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.m-search-box .close img {
    width: 1rem;
    height: 1rem;
}
.m-menu {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    height: 100vh;
    background: #1c1c1c;
    padding: 0 5%;
}

.m-menu .m-menu-box {
    height: 100vh;
    overflow: auto;
    padding-bottom: 80px;
}

.m-nav > li {
    border-bottom: 1px solid #2b2b2b;
    position: relative;
}

.m-nav > li > a {
    display: block;
    line-height: 50px;
    font-size: 16px;
    color: #ffffff;
}

.m-nav .m-menu-jt {
    position: absolute;
    width: 20%;
    height: 50px;
    line-height: 50px;
    right: 0;
    top: 0;
    text-align: center;
    z-index: 9;
}

.m-nav .m-menu-jt .icon-font {
    display: block;
    width: 100%;
    height: 100%;
}

.m-nav .m-menu-jt .icon-font:after {
    background-position: -30px -240px;
}

.m-nav .m-menu-jt.clicked .icon-font:after {
    background-position: -30px -270px;
}

.m-nav .m-sub-menu {
    background: #161616;
    display: none;
}

.m-nav .m-sub-menu > li {
    border-top: 1px dashed #2b2b2b;
}

.m-nav .m-sub-menu > li > a {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 40px;
    text-indent: 2em;
}
@media (max-width: 1400px) {
    .containers {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }
    .banners .banner .swiper-wrapper .swiper-slide a {
        height: 480px;
    }
    .section-strength {
        padding: 40px 30px;
    }
}
@media (max-width: 1300px) {
    .banners .banner .swiper-wrapper .swiper-slide a {
        height: 440px;
    }
}

@media (max-width: 1200px) {
    .banners .banner .swiper-wrapper .swiper-slide a {
        height: 400px;
    }
}

@media (max-width: 1100px) {
    .banners .banner .swiper-wrapper .swiper-slide a {
        height: 360px;
    }
    .service .items ul {
        gap: 20px;
    }
    .service .items ul li h3 {
        font-size: 24px;
    }
    .service .items ul li p {
        font-size: 16px;
    }
    .advantage .items .items-list li .bx {
        width: calc(100% - 400px);
    }
    .advantage .items .items-list li .image {
        width: 400px;
    }
    .solution .items .ul-image {
        width: calc(100% - 380px - 20px);
    }
    .solution .items .dl-message {
        display: none;

    }
    .ad2 .box p {
        font-size: 24px;
    }
    .abouts .box h2 {
        font-size:36px;
    }
    .abouts .box .intro a {
        background: #fff;
    }
    .cons .con .details .pro-detail {
        padding: 10px 10px;
    }
    .cons .con .details .pro-detail .boxs .photos {
        width: 360px !important;
    }
    .cons .con .details .pro-detail .boxs .photos .photos-box {
        width: 360px !important;
        height: 360px !important;
    }
    .pro_tinfo_r {
        width: calc(100% - 380px);
    }
    .cpdh span,.cpdh a {
        font-size: 16px;
        padding: 8px 10px;
    }
    .cons .con .details .contact-box .lbox .box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
    }
}

@media (max-width: 992px) {
    body {
        padding-bottom: 5rem;
    }
    .banners .banner .swiper-wrapper .swiper-slide a {
        height: 56vh;
    }

    .banners .banner .swiper-pagination-banner {
        bottom: 1rem;
    }

    .G-title {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    .G-title .GT-name {
        font-size: 1.4rem;
        letter-spacing: 0;
        text-align: center;
    }

    .containers {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .section-love {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #fff;
    }

    .love {
        gap: 1.5rem;
    }

    .love .m-items-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        border-radius: 3rem;
        background: #333333;
    }

    .love .m-items-nav li {
        width: 25%;
        color: #fff;
        font-size: 0.9rem;
        padding: 0.8rem 0;
        text-align: center;
    }

    .love .m-items-nav li.active {
        background: #01847E;

    }

    .love .m-items-nav li:first-of-type {
        border-radius: 3rem 0 0 3rem;
    }

    .love .m-items-nav li:last-of-type {
        border-radius: 0 3rem 3rem 0;
    }

    .love .items .item {
        display: none;
        align-items: center;
        justify-content: space-between;
        flex-flow: unset;
        width: 100%;
        background: #F6F8FA;
        border: none;
        border-radius: 0;
        margin-bottom: 10px;
        padding: 2rem 1.5rem;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .love .items .item.active {
        border: none;
        display: flex;
        background: #F6F8FA;
    }

    .love .items .item .box {
        gap: 1rem;
    }

    .love .items .item .box h3 {
        display: none;
    }

    .love .items .item .box ul {
        gap: 1rem;
    }

    .love .items .item .box ul li {
        font-size: 1rem;
        color: #000;
        padding-left: 28px;
    }

    .love .items .item .box ul li:before {
        content: '';
        width: 23px;
        height: 23px;
        position: absolute;
        left: 0;
        top: -3px;
        color: #000;
        background-image: url("../image/icon.png");
        background-position: -560px 0;
        background-repeat: no-repeat;
    }

    .love .items .item.active .box ul li:before {
        color: #000;
    }

    .love .items .item .box a {
        margin-top: 1rem;
    }

    .love .items .item .image {
        width: 8rem;
        height: 8rem;
    }

    .love .items .item .box a {
        width: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 2rem;
        border: 1px solid #01847E;
        color: #01847E;
        font-size: 1rem;
        padding: 10px 0;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .section-product {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #fff;
    }

    .product {
        gap: 1.5rem;
    }
    .product .box {
        display: none;
    }
    .product .box ul {
        display: flex;
        gap: 1rem;
    }

    .product .box ul li {
        width: calc((100% - 1rem) / 2);
        border: 1px solid #ddd;
        border-radius: 0;
    }

    .product .box ul li:hover {
        transform: unset;
        box-shadow: unset;
    }

    .product .box ul li .t h3 {
        gap: 0;
        padding: 1rem 0.5rem
    }

    .product .box ul li .t h3 em {
        max-width: 100%;
        font-size: 0.9rem;
    }

    .product .box ul li:hover .t h3 em {
        color: #01847E;
    }

    .product .box ul li .t h3 i {
        display: none;
    }

    .product .box ul li:hover .t h3 i {
        width: 16px;
    }

    .product .box .mores {
        width: 100%;
        text-align: center;
    }

    .product .box .mores a {
        padding: 0 2rem;
        height: 2.4rem;
        line-height: 2.4rem;
        font-size: 1rem;
        color: #fff;
        border-radius: 2rem;
        background: #01847E;
        display: inline-block;
        margin-top: 1.5rem;
    }

    .section-ad {
        padding: 0 0;
    }

    .section-ad .m-ad {
        width: 100%;
        display: flex;
    }

    .section-ad .m-ad img {
        width: 100%;
    }

    .section-work {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #fff;
    }

    .work {
        gap: 1.5rem;
    }

    .work .work-box {
        display: none;
    }

    .work .m-work-box {
        display: flex;
        flex-flow: column;
        width: 100%;
    }

    .work .m-work-box ul {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        border-radius: 3rem;
        background: #333333;
    }

    .work .m-work-box ul li {
        width: calc(100% / 3);
        color: #fff;
        font-size: 0.9rem;
        padding: 0.8rem 0;
        text-align: center;
    }

    .work .m-work-box ul li.active {
        background: #01847E;

    }

    .work .m-work-box ul li:first-of-type {
        border-radius: 3rem 0 0 3rem;
    }

    .work .m-work-box ul li:last-of-type {
        border-radius: 0 3rem 3rem 0;
    }

    .work .m-work-box dl {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 1.5rem;
    }

    .work .m-work-box dl dd {
        background: #F6F8FA;
        display: none;
        flex-direction: column;
    }

    .work .m-work-box dl dd.active {
        display: flex;
    }

    .work .m-work-box dl dd .box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        padding: 2rem 1rem;
        gap: 1rem;
    }

    .work .m-work-box dl dd .box .p1 {
        font-size: 1.3rem;
        font-weight: bold;
        color: #01847E;
    }

    .work .m-work-box dl dd .box .p2 {
        font-size: 1rem;
        color: #000;
        line-height: 1.8rem;
        width: 100%;
        text-align: center;
    }

    .work .m-work-box dl dd .box img {
        width: 100%;
    }

    .work .m-work-box .mores {
        width: 100%;
        text-align: center;
    }

    .work .m-work-box .mores a {
        padding: 0 2rem;
        height: 2.4rem;
        line-height: 2.4rem;
        font-size: 1rem;
        color: #fff;
        border-radius: 2rem;
        background: #01847E;
        display: inline-block;
        margin-top: 1.5rem;
    }

    .section-service {
        padding: 2rem 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

    .service {
        gap: 1.5rem;
    }

    .service .items {
        display: flex;
        width: 100%;
    }

    .service .items ul {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .service .items ul li {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: unset;
        position: relative;
        box-shadow: unset;
        border-radius: 0;
        background-color: #F6F8FA;
        padding: 1rem 1rem;
    }

    .service .items ul li .m-image {
        width: 4rem;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .service .items ul li .bg-l {
        display: none;
    }

    .service .items ul li .bg-b {
        display: none;
    }

    .service .items ul li .bx {
        width: calc(100% - 4.5rem);
        padding: 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        position: relative;
        z-index: 1;
        background: none;
        gap: 0.5rem;
        border-radius: 0;
    }

    .service .items ul li.active .bx {
        background: unset;
        box-shadow: unset;
    }

    .service .items ul li i {
        display: none;
    }

    .service .items ul li h3 {
        font-size: 1.3rem;
        color: #01847E;
        margin-top: 0;
    }

    .service .items ul li.active h3 {
        color: #01847E;
    }

    .service .items ul li p {
        font-size: 0.9rem;
        color: #000;
        line-height: 1.2;
        width: 100%;
        text-align: left;
    }

    .service .items ul li.active p {
        color: #000;
    }

    .section-advantage {
        padding: 2rem 1rem;

    }

    .advantage {
        gap: 1.5rem;
    }

    .advantage .items {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .advantage .items .items-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: unset;
        width: 100%;
        border-radius: 3rem;
        background: #333333;
    }

    .advantage .items .items-menu li {
        width: calc(100% / 4);
        aspect-ratio: unset;
        overflow: hidden;
        font-size: 0.9rem;
        padding: 0.8rem 0;
        color: #fff;
        line-height: unset;
        letter-spacing: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: all .3s;
        transition: all .3s;
        border-radius: 0;
        cursor: pointer;
    }

    .advantage .items .items-menu li.active {
        background: #01847E;
        font-weight: unset;
        box-shadow: unset;
    }

    .advantage .items .items-menu li:first-of-type {
        border-radius: 3rem 0 0 3rem;
    }

    .advantage .items .items-menu li:last-of-type {
        border-radius: 0 3rem 3rem 0;
    }

    .advantage .items .items-list {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .advantage .items .items-list li {
        width: 100%;
        display: none;
        background: #F6F8FA;
    }

    .advantage .items .items-list li.active {
        display: flex;
        flex-direction: column;
    }

    .advantage .items .items-list li .bx {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1rem;
    }

    .advantage .items .items-list li .bx h3 {
        font-size: 1.3rem;
        letter-spacing: 0;
        color: #01847E;
        position: relative;
        width: 100%;
        text-align: center;
    }

    .advantage .items .items-list li .bx h3:before {
        display: none;
    }

    .advantage .items .items-list li .bx .text {
        display: flex;
        flex-direction: unset;
        align-items: center;
        justify-content: center;
        gap: 0;
        font-size: 1.1rem;
        color: #000;
    }

    .advantage .items .items-list li .bx .text .p {
        line-height: 1.4;
        width: 100%;
        text-align: center;
    }

    .advantage .items .items-list li .image {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .advantage .items .items-list li .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .advantage .items .m-more {
        width: 100%;
        text-align: center;
    }

    .advantage .items .m-more a {
        font-size: 1rem;
        color: #fff;
        background-color: #01847E;
        border-radius: 3rem;
        padding: 0.5rem 2rem;
        display: inline-block;
    }

    .section-solution {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #fff;
    }

    .solution {
        gap: 1.5rem;
    }

    .solution .items {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
        gap: 1rem;
    }

    .solution .items .ul-menu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.5rem;
    }

    .solution .items .ul-menu li {
        width: calc((100% - 1rem) / 3);
        border: none;
        background-color: #333;
        border-radius: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .solution .items .ul-menu li.active {
        background-image: unset;
        background-color: #01847E;
    }

    .solution .items .ul-menu li:nth-last-child(1), .solution .items .ul-menu li:nth-last-child(2) {
        border-bottom: none;
    }

    .solution .items .ul-menu li a {
        width: 100%;
        height: auto;
        flex-flow: unset;
        gap: 0;
        padding: 0.6rem 0;
        border-radius: 2rem;
    }

    .solution .items .ul-menu li a i {
        display: none;
    }

    .solution .items .ul-menu li a h3 {
        font-size: 0.9rem;
        color: #fff;
    }

    .solution .items .ul-image {
        width: 100%;
        height: auto;
        display: flex;
        background-color: #F6F8FA;
    }

    .solution .items .ul-image li {
        flex-flow: column;
    }

    .solution .items .ul-image li .image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .solution .items .ul-image li .info {
        position: unset;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        padding-bottom: 2rem;
    }

    .solution .items .ul-image li .info .text {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding: 1.5rem 1rem;
    }

    .solution .items .ul-image li .info .text .t {
        font-size: 1.2rem;
        color: #000;
        width: 100%;
    }

    .solution .items .ul-image li .info .text p {
        font-size: 0.9rem;
        color: #333;
        text-overflow: unset;
        overflow: hidden;
        white-space: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;

    }

    .solution .items .ul-image li .info .more {
        width: auto;
        height: auto;
        font-size: 1rem;
        padding: 0.6rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #01847E;
        color: #fff;
        border-radius: 2rem;
    }

    .solution .items .ul-image li .info .more i {
        display: none;
    }

    .solution .items .dl-message {
        display: none;
    }

    .section-abouts {
        padding: 2rem 1rem;
        width: 100%;
        background-image: unset;
        background-color: #fff;
    }

    .abouts {
        gap: 0;
    }

    .abouts .box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 1;
        height: auto;
    }

    .abouts .box h2 {
        font-size: 1.4rem;
        font-weight: bold;
        margin-top: 0;
        color: #01847E;
        width: 100%;
        text-align: center;
    }

    .abouts .image {
        position: unset;
        width: 100%;
        height: auto;
        margin-top: 1.5rem;
    }

    .abouts .image img {
        width: 100%;
    }

    .abouts .box .p1 {
        font-size: 1.1rem;
        font-weight: bold;
        margin-top: 2rem;
        color: #01847E;
        width: 100%;
        text-align: left;
    }

    .abouts .box .intro {
        width: 100%;
        max-height: 6.4rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 1rem;
        color: #000;
        line-height: 1.6rem;
        font-size: 0.9rem;
        position: relative;
    }

    .abouts .box .about-more {
        font-size: 0.9rem;
        padding: 0.6rem 2rem;
        background-color: #01847E;
        color: #fff;
        border-radius: 2rem;
        margin-top: 2rem;
    }

    .abouts .box ul {
        position: unset;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #F6F8FA;
        width: 100%;
        margin-top: 1.5rem;
    }

    .abouts .box ul:before {
        display: none;
    }

    .abouts .box ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 2rem 1rem;
        position: relative;
        cursor: pointer;
    }

    .abouts .box ul li.active {
        background: none;
    }

    .abouts .box ul li:before {
        content: '';
        position: absolute;
        left: -1px;
        top: 2rem;
        height: calc(100% - 4rem);
        width: 1px;
        background: #ddd;
        z-index: 1;
    }

    .abouts .box ul li:after {
        content: '';
        position: absolute;
        left: -1px;
        top: 2rem;
        height: calc((100% - 4rem) / 2);
        width: 1px;
        background: #01847E;
        z-index: 2;
    }

    .abouts .box ul li.active:after, .abouts .box ul li.active + li:after {
        display: block;
    }

    .abouts .box ul li.active:before, .abouts .box ul li.active + li:before {
        display: block;
    }

    .abouts .box ul li:first-of-type:after {
        display: none;
    }

    .abouts .box ul li:first-of-type:before {
        display: none;
    }

    .abouts .box ul li .hd {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 3px;
    }

    .abouts .box ul li .hd .n {
        font-size: 1.1rem;
        font-weight: bold;
        color: #01847E;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .abouts .box ul li.active .hd .n {
        color: #01847E;
    }

    .abouts .box ul li .hd .n:before {
        content: '+';
        position: absolute;
        right: -10px;
        top: -6px;
        font-size: 0.7rem;
        color: #01847E;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .abouts .box ul li.active .hd .n:before {
        color: #01847E;
    }

    .abouts .box ul li .hd .u {
        font-size: 0.7rem;
        color: #000;
        margin-bottom: 0;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .abouts .box ul li.active .hd .u {
        color: #000;
    }

    .abouts .box ul li .t {
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        color: #000;
        white-space: nowrap;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .abouts .box ul li.active .t {
        color: #000;
    }

    .section-cert {
        padding: 2rem 1rem 7rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .cert {
        gap: 1.5rem;
    }

    .cert .cert-title {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

    .cert .cert-title h2 {
        font-size: 1.4rem;
        letter-spacing: 0;
        width: 100%;
        text-align: center;
    }

    .cert .cert-title h2:before {
        display: none;
    }

    .cert .cert-title ul {
        display: none;
    }

    .section-news {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #F6F8FA;
    }

    .news {
        gap: 1.5rem;
    }

    .news .box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

    .news .box .left-box {
        width: 100%;
    }

    .news .box .left-box .cate-box {
        border-radius: 3rem;
    }

    .news .box .left-box .cate-box li {
        width: calc(100% / 3);
        padding: 0.8rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .news .box .left-box .cate-box li:first-of-type {
        border-radius: 3rem 0 0 3rem;
    }

    .news .box .left-box .cate-box li:last-of-type {
        border-radius: 0 3rem 3rem 0;
    }

    .news .box .left-box .cate-box li.active {
        background: #01847E;
    }

    .news .box .left-box .cate-box li i {
        display: none;
    }

    .news .box .left-box .cate-box li h3 {
        font-size: 1rem;
        color: #fff;
    }

    .news .box .left-box .cate-box li:before {
        display: none;
    }

    .news .box .left-box .list-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        background: none;
        box-shadow: unset;
        margin-top: 1.5rem;
    }

    .news .box .left-box .list-box .list {
        gap: 1rem;
    }

    .news .box .left-box .list-box .list li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 1rem;
        background: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
    }

    .news .box .left-box .list-box .list li .image {
        width: 30%;
    }

    .news .box .left-box .list-box .list li .info {
        width: calc(70% - 1rem);
        padding: 0;
        gap: 0.5rem;
        display: flex;
        flex-direction: column;
    }

    .news .box .left-box .list-box .list li .info .t {
        border-bottom: none;
        width: 100%;
        padding-bottom: 0;
    }

    .news .box .left-box .list-box .list li .info .t h4 {
        width: 100%;
        font-size: 1rem;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        -webkit-transition: all .3s;
        transition: all .3s;
        padding: 0;
    }

    .news .box .left-box .list-box .list li .info .intro {
        font-size: 0.9rem;
        color: #555;
        width: 100%;
        line-height: 1.4rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 1.4rem;
        padding: 0;
    }

    .news .box .left-box .list-box .list li .info .time {
        font-size: 0.9rem;
        color: #555;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .news .box .left-box .list-box .list li .info .time i {
        width: 16px;
        height: 16px;
        background-position: -600px 0;
    }

    .news .box .news-more {
        width: 100%;
        text-align: center;
    }

    .news .box .news-more a {
        font-size: 0.9rem;
        padding: 0.6rem 2rem;
        background-color: #01847E;
        color: #fff;
        border-radius: 2rem;
        margin-top: 1rem;
        display: inline-block;
    }

    #toolbar {
        display: none;
    }

    .section-footer {
        display: flex;
        flex-direction: column;
        background-image: unset;
        background-color: #1A1A1A;
    }

    .footer {
        padding: 2rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        position: relative;
    }

    .footer .f-logo {
        gap: 0.5rem;
    }

    .footer .f-logo img {
        max-width: 8rem;
    }

    .footer .f-logo p {
        font-size: 1rem;
        color: #fff;
        padding-left: 0.5rem;
        border-left: 1px solid #fff;
        height: 1.6rem;
        line-height: 1.6rem;
    }

    .footer .m-top {
        position: absolute;
        right: 1rem;
        top: 2.6rem;
        width: 1.6rem;
    }

    .footer .f-box .f-contact {
        gap: 1rem;
    }
    .footer .f-box .f-qrcode {
        display: none;
    }

    .footer .f-box .f-contact p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .footer .links {
        display: none;
    }

    .section-copyright {
        padding: 1rem 0.5rem;
        background: #21252C;
    }

    .copyright .cov {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        width: 100%;
        color: #fff;
    }
    .copyright .cov:last-of-type {
        display: none;
    }

    .copyright .cov p {
        line-height: 1.4;
        text-align: center;
    }

    .fnav {
        position: fixed;
        bottom: 0;
        min-width: 320px;
        /*max-width: 640px;*/
        width: 100%;
        height: 5rem;
        background: #1A1A1A;
        z-index: 99999;
        border-top: 1px solid #6B6B6B;
    }
    .fnav ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .fnav ul li {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fnav ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        gap: 0.5rem;
        height: 5rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.3rem;
    }


    .fnav ul li img {
        width: 1.6rem;
    }
    .fnav ul li:nth-child(3) {
        background: #01847E;
    }
    .page-banners .page-banner {
        margin-top: 4rem;
    }
    .section-page-abouts {
        padding: 2rem 1rem;
    }
    .page-abouts {
        gap: 1.5rem;
    }
    .page-abouts .box {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
        gap: 1rem;
    }
    .page-abouts .box .intro {
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: unset;
        color: #111;
        line-height: 1.4;
        font-size: 1rem;
        padding-right: 0;
    }
    .page-abouts .box .image {
        width: 100%;
        height: auto;
    }
    .section-strength {
        padding: 2rem 1rem;
    }

    .strength .item {
        gap: 10px;
    }

    .strength .item .t {
        gap: 3px;
    }

    .strength .item .t .num {
        font-size: 1rem;
    }

    .strength .item .t .num:before {
        font-size: 0.7rem;
    }

    .strength .item .t .u {
        font-size: 0.7rem;
        margin-bottom: 0;
    }

    .strength .item .n {
        font-size: 0.9rem;
    }

    .strength .line {
        height: 2.4rem;
    }
    .section-idea {
        padding: 2rem 1rem;
    }
    .idea {
        gap: 1.5rem;
    }

    .idea .items {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
        gap: 1rem;
    }

    .idea .items li {
        gap: 1rem;
        width: 100%;
        aspect-ratio: unset;
        padding: 3rem 1rem;
    }

    .idea .items li.active {
        background: none;
    }

    .idea .items li .i {
        margin-bottom: 1rem;
    }

    .idea .items li p {
        font-size: 1.4rem;
    }

    .section-history {
        padding: 2rem 1rem;
        background-image: unset;
        background-color: #F6F8FA;
    }

    .history {
        gap: 1.5rem;
    }

    .history .items {
        display: flex;
        position: relative;
        width: 100%;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide {
        gap: 2rem;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .t {
        font-size: 1.3rem;
        letter-spacing: 0;
        padding-bottom: 1rem;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev .t {
        right: -70%;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide.swiper-slide-next .t {
        left: -70%;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        gap: 1rem;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box .image {
        width: 100%;
        height: auto;
        border: none;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box .inro {
        width: 100%;
        gap: 1rem;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box .inro .p1 {
        font-size: 1.2rem;
    }

    .history .items .swiper .swiper-wrapper .swiper-slide .box .inro .p2 {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .history .swiper-button-next {
        right: -0.5rem;
        top: 2.3rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .history .swiper-button-prev {
        left: -0.5rem;
        top: 2.3rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .history .swiper-button-next:after, .history .swiper-button-prev:after {
        font-size: 1.1rem;
    }
    .section-cooperation {
        padding: 2rem 1rem;
    }
    .cooperation {
        gap: 1.5rem;
    }

    .cooperation .items {
        gap: 1rem;
        padding: 1rem 0;
    }

    .cooperation .items .swiper {
        height: 4rem;
    }

    .cooperation .items .swiper .swiper-wrapper .swiper-slide .image {
        height: 4rem;
    }
    .cons {
        margin: 2rem 1rem;
    }
    .cons .con {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
        gap: 1rem;
    }
    .cons .con .page-menus {
        width: 100%;
    }
    .cons .con .page-menus .nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: unset;
        border: none;
        background: #fff;
        margin-bottom: 0;
        gap: 1rem;
    }
    .cons .con .page-menus .nav:before {
        display: none;
    }
    .cons .con .page-menus .nav .nav-title {
        /*margin-left: -1rem;*/
    }
    .cons .con .page-menus .nav .list {
        display: flex;
        align-items: unset;
        justify-content: unset;
        flex-flow: unset;
        flex-wrap: wrap;
        gap: 0.3rem;
        width: auto;
        border: none;
        margin: 0;
    }
    .cons .con .page-menus .nav .list:last-of-type {
        margin-bottom: 0;
    }
    .cons .con .page-menus .nav .list .children {
        padding: 0.6rem 0.8rem;
        width: auto;
        border-radius: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F4F4F4;
        font-size: 0.9rem;
        font-weight: normal;
        color: #000;
    }
    .cons .con .page-menus .nav .list .children em {
        display: none;
    }
    .cons .con .page-menus .nav .list .cate {
        padding: 0.6rem 0.8rem;
        width: auto;
        border-radius: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F4F4F4;
        font-size: 0.9rem;
        font-weight: normal;
        color: #000;
    }

    .cons .con .details {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
        width: 100%;
    }
    .smen {
        height: 3rem;
        line-height: 3rem;
        padding: 0 1rem;
        border: none;
    }
    .border {
        border-top: none !important;
    }
    .smen .red_x {
        font-size: 1.1rem;
        letter-spacing: 0;
    }
    .smen a {
        font-size: 0.9rem;
    }
    .cons .con .details .pro-list {
        padding: 1rem 0;
        gap: 1rem;
        border: none;
    }
    .cons .con .details .pro-list li {
        width: calc((100% - 1rem) / 2);
    }
    .cons .con .details .pro-list li .name {
        height: 3rem;
        padding: 0 1rem;
    }
    .cons .con .details .pro-list li .name .text {
        font-size: 1rem;
    }
    .cons .con .details .gl-new-list {
        width: 100%;
        border: none;
        padding: 1rem 0;
        gap: 1rem;
    }
    .cons .con .details .gl-new-list li {
        gap: 1rem;
        width: 100%;
    }
    .cons .con .details .pro-detail {
        border: none;
        padding: 1rem 0;
    }
    .cons .con .details .pro-detail .boxs {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column;
    }
    .cons .con .details .pro-detail .boxs .photos {
        width: 100% !important;
    }
    .cons .con .details .pro-detail .boxs .photos .photos-box {
        width: 100% !important;
        aspect-ratio: 1 / 1;
        height: unset !important;
        overflow: hidden;
    }
    .cons .con .details .pro-detail .boxs .photos .photos-box .images-cover {
        object-fit: cover;
    }
    .pro_tinfo_r {
        width: 100%;
    }
    .pro_tinfo_r .tit {
        color: #000;
        padding-bottom: 1rem;
        font-size: 1.1rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    .pro_tinfo_r .intro {
        font-size: 0.9rem;
        line-height: 1.5;
        max-height: unset;
    }
    .cpdh {
        margin-top: 1rem;
    }
    .cpdh span,.cpdh a {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
    .diysr {
        font-size: 1.1rem;
        padding: 0.8rem 1rem;
        margin-top: 2rem;
    }
    .diysr i {
        display: none;
    }
    .cons .works {
        gap: 1.5rem;
    }
    .cons .works .t {
        font-size: 1.4rem;
    }
    .cons .works .works-cate {
        gap: 0;
    }
    .cons .works .works-cate ul {
        width: 100%;
        gap: 1rem;
        height: auto !important;
    }
    .cons .works .works-cate ul li a {
        border-radius: 30px;
        padding: 0 1rem;
        height: 2rem;
        font-size: 1rem;
    }
    .cons .works .works-cate .shows {
        display: none;
    }
    .cons .works .items {
        gap: 1rem;
    }
    .cons .works .items li {
        width: calc((100% - 1rem) / 2);
    }
    .cons .works .items li .t h3 {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    .cons .con .details .s-content {
        border: none;
    }
    .cons .con .details .s-content .sm-title {
        font-size: 1.1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #eee;
        width: 100%;
    }
    .cons .con .details .s-content .sm-tag {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #eee;
    }
    .cons .con .details .s-content .cp-body {
        padding: 0;
    }
    .cp-body {
        padding: 1rem 0;
        border: none;
    }
    .pgx {
        border-top: 1px solid #eee;
        font-size: 0.9rem;
        gap: 1rem;
        padding: 1rem 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-flow: column;
    }
    .pgx span {
        width: 100%;
    }
    .cons .con .details .contact-box {
        width: 100%;
        border: none;
        padding: 1rem 0;
    }
    .cons .con .details .contact-box .lbox {
        gap: 1rem;
    }
    .cons .con .details .contact-box .lbox .box {
        width: 100%;
    }
    .cons .con .details .contact-box .lbox .box .name {
        font-size: 1.1rem;
        padding: 0.8rem 0;
    }
    .cons .con .details .contact-box .lbox .box .infos {
        padding: 2rem 0;
        gap: 5px;
    }
    .cons .con .details .contact-box .lbox .box .infos p {
        font-size: 1rem;
    }
    .cons .con .details .news-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        border: none;
        padding: 1rem 0;
    }
    .cons .con .details .news-list li {
        display: flex;
        gap: 1rem;
        width: 100%;
        padding-bottom: 1rem;
        border-bottom: 1px solid #EEE;
    }
    .cons .con .details .news-list li .image {
        width: 8rem;
    }
    .cons .con .details .news-list li .info {
        width: calc(100% - 9rem);
        gap: 0.5rem;
    }
    .cons .con .details .news-list li .info h3 {
        font-size: 1rem;
    }
    .cons .con .details .news-list li .info .tag {
        font-size: 0.8rem;
        line-height: 1.4rem;
        height: 2.8rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cons .con .details .news-list li .info .time .t {
        font-size: 0.9rem;
    }
    .cons .con .details .news-list li .info .time .g {
        font-size: 0.9rem;
    }
    .cons .solutions {
        gap: 1.5rem;
    }
    .cons .solutions .t {
        font-size: 1.4rem;
    }
    .cons .solutions .lists {
        gap: 1rem;
    }
    .cons .solutions .lists li {
        width: calc((100% - 1rem) / 2);
        gap: 1rem;
    }
    .cons .solutions .lists li .name h3 {
        padding: 0 0.5rem;
        font-size: 1rem;
    }
    .cons .solutions .lists li .intro {
        padding: 0 0.5rem;
        line-height: 1.4rem;
        height: 2.8rem;
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
    }
    .cons .solutions .lists li .more {
        padding: 0 0.5rem 1rem;
        font-size: 1rem;
        gap: 0.5rem;
    }
    .modal-dialog-message {
        width: calc(100% - 20px);
        margin-top: 5rem;
    }
}