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;
}
a:focus {
    outline: none;
}

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 "思源黑体","Helvetica Neue", Helvetica, Arial, sans-serif;;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

.containers {
    width: 1660px;
    margin: 0 auto;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.icon {
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
}
.headers {
    width: 100%;
    display: flex;
    padding: 0 0;
    position: fixed;
    left: 0;
    top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    z-index: 999;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.headers:hover,.headers.active {
    background-color: rgba(255, 255, 255, 1);
}

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

.headers .header .logo {
    display: flex;
}
.headers .header .logo-link {
    display: flex;
}
.headers .header .header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
}
.headers .header .header-menu nav {
    display: flex;
}
.headers .header .header-menu nav .main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.headers .header .header-menu nav .main-nav .nav-item {
    display: flex;
    position: relative;
    height: 92px;
}

.headers .header .header-menu nav .main-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    padding: 10px 25px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.headers:hover .header .header-menu nav .main-nav .nav-item .nav-link,.headers.active .header .header-menu nav .main-nav .nav-item .nav-link {
    color: #000;
}
.headers .header .header-menu nav .main-nav .nav-item .nav-link.is-active {
    color: #fff;
    /*font-weight: bold;*/
    cursor: default;
    pointer-events: none;
}
.headers:hover .header .header-menu nav .main-nav .nav-item .nav-link.is-active,.headers.active .header .header-menu nav .main-nav .nav-item .nav-link.is-active,.headers .header .header-menu nav .main-nav .nav-item .nav-link:hover {
    color: #00a0e9;
}
.headers .header .header-menu nav .main-nav .nav-item .sub-menu {
    position: absolute;
    left: -20px;
    top: calc(100% - 1px);
    background: #fff;
    width: calc(100% + 40px);
    display: flex;
    flex-flow: column;
    padding: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    height: 0;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}
/*.headers .header .header-menu nav .main-nav .nav-item:hover .sub-menu {*/
/*    height: 100%;*/
/*    overflow-x: auto;*/
/*}*/
.headers .header .header-menu nav .main-nav .nav-item .sub-menu li {
   display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.headers .header .header-menu nav .main-nav .nav-item .sub-menu li a {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #555;
}
.headers .header .header-menu nav .main-nav .nav-item .sub-menu li:last-of-type a {
    border: none;
}
.headers .header .header-menu nav .main-nav .nav-item .sub-menu li a:hover {
    color: #fff;
    background: #00a0e9;
}

.headers .header .header-menu .contact-block {
    display: flex;
}
.headers .header .header-menu .contact-block .phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.headers .header .header-menu .contact-block .phone-link i {
    background-position: 0 0;
    width: 24px;
    height: 26px;
}
.headers:hover .header .header-menu .contact-block .phone-link i,.headers.active .header .header-menu .contact-block .phone-link i {
    background-position: -24px 0;
}
.headers .header .header-menu .contact-block .phone-link span {
    font-size: 22px;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.headers:hover .header .header-menu .contact-block .phone-link span,.headers.active .header .header-menu .contact-block .phone-link span {
    color: #00a0e9;
}

.banners {
    width: 100%;
}

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

.banners .banner .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
.banners .banner .swiper-wrapper .swiper-slide .image {
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

.banners .banner .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text {
    position: absolute;
    top: 30%;
    left: calc((100% - 1660px) / 2);
    display: flex;
    flex-flow: column;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text .p-h1 {
    font-size: 54px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all ease 1.6s .6s;
    transition: all ease 1.6s .6s;
}
.banners .banner .swiper-wrapper .swiper-slide.swiper-slide-active .banner-text .p-h1 {
    transform: translateY(0);
    opacity: 1;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text .p-h2 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all ease 1.6s .6s;
    transition: all ease 1.6s .6s;
}
.banners .banner .swiper-wrapper .swiper-slide.swiper-slide-active .banner-text .p-h2 {
    transform: translateY(0);
    opacity: 1;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text .banner-link {
    display: flex;
    margin-top: 60px;
    gap: 20px;
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all ease 1.6s .6s;
    transition: all ease 1.6s .6s;
}
.banners .banner .swiper-wrapper .swiper-slide.swiper-slide-active .banner-text .banner-link {
    transform: translateY(0);
    opacity: 1;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text .banner-link a {
    border: 1px solid #fff;
    font-size: 18px;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
}
.banners .banner .swiper-wrapper .swiper-slide .banner-text .banner-link a:hover {
    background: #00a0e9;
    border-color: #00a0e9;
}

.banners .banner .swiper-pagination-banner {
    position: absolute;
    z-index: 9;
    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: 30px;
    height: 4px;
    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: #00a0e9;
}

.section-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.section-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    letter-spacing: 2px;
    width: 100%;
    color: #000;
    text-align: center;
}
.section-header span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: lighter;
    width: 100%;
    color: #ccc;
    text-align: center;
}
.section-header p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 30px;
    width: 100%;
    color: #000;
    text-align: center;
}



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

.love {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.love .love-card {
    display: flex;
    width: 100%;
    gap: 30px;
}
.love .love-card .love-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 90px) / 4);
    border-radius: 15px;
}
.love .love-card .love-item .image-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5.4;
    overflow: hidden;
    border-radius: 15px;
}
.love .love-card .love-item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.love .love-card .love-item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.love .love-card .love-item .box {
    position: relative;
    z-index: 1;
    padding: 100px 20px 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 40px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.love .love-card .love-item:hover .box {
    background: rgba(0,0,0,0.4);
}
.love .love-card .love-item .box i {
    width: 150px;
    height: 150px;
}

.love .love-card .love-item .box i.i-1 {
    background-position: 0 -40px;
}
.love .love-card .love-item .box i.i-2 {
    background-position: -150px -40px;
}
.love .love-card .love-item .box i.i-3 {
    background-position: -300px -40px;
}
.love .love-card .love-item .box i.i-4 {
    background-position: -450px -40px;
}
.love .love-card .love-item .box h3 {
    width: 100%;
    font-size: 24px;
    color: #fff;
    text-align: center;
}
.love .love-card .love-item .box p {
    position: absolute;
    left: 0;
    bottom: -100%;
    background: #00a0e9;
    color: #fff;
    line-height: 28px;
    font-size: 16px;
    padding: 25px 15px;
    border-radius: 0 0 15px 15px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.love .love-card .love-item:hover .box p {
    bottom: 0;
}


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

.product {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.product nav {
    display: flex;
    width: 100%;
}
.product .cate-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
.product .cate-item li {
    display: flex;
}
.product .cate-item li button  {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    font-size: 16px;
    color: #000;
    background: #fff;
    border-radius: 30px;
    border: none;
}
.product .cate-item li button[aria-selected="true"] {
    background: #00a0e9;
    color: #fff;
}

.product .pro-card {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}
.product .pro-card.active {
    display: flex;
}

.pro-item {
    display: flex;
    flex-direction: column;
    width: calc((100% - 90px) / 4);
    background-color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.pro-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pro-item .image-link {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pro-item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.pro-item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.pro-item h2 {
    display: flex;
    width: 100%;
}
 .pro-item h2 a {
    font-size: 18px;
    color: #000;
    margin: 15px 0 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    /*text-align: center;*/
    padding: 0 20px;
}
.pro-item:hover h2 a {
    color: #00a0e9;
}
.pro-item h3 {
    display: flex;
    width: 100%;
}
 .pro-item h3 a {
    font-size: 18px;
    color: #000;
    margin: 15px 0 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    /*text-align: center;*/
    padding: 0 20px;
}
.pro-item:hover h3 a {
    color: #00a0e9;
}
.pro-item dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 10px;
}
.pro-item dl dt {
    font-weight: normal;
    color: #999;
    width: 90px;
    position: relative;
    text-align: right;
    border-bottom: 1px solid #eee;
    padding: 10px 30px 10px 0;
}
.pro-item dl dt:before {
    content: '-';
    position: absolute;
    right: 11px;
}
.pro-item dl dd {
    color: #000;
    display: inline-block;
    /* align-items: center; */
    /* justify-content: flex-start; */
    gap: 10px;
    width: calc(100% - 90px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.pro-item dl dd ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.pro-item dl dd ul li {
    max-width: calc((100% - 90px - 20px) / 3);
    display: flex;
}
.pro-item dl dd ul li a {
    font-size: 15px;
    color: #000;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.pro-item dl dd ul li a:hover {
    color: #00a0e9;
}
.pro-item .pro-btn {
    margin:10px 10px;
    width: calc(100% - 20px);
    font-size: 16px;
    color: #999;
    background: #F5F5F5;
    padding: 15px 0;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.pro-item:hover .pro-btn {
    background: #00a0e9;
    color: #fff;
}
.product .more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}
.product .more-btn a {
    border: 1px solid #00a0e9;
    color: #000;
    font-size: 18px;
    border-radius: 40px;
    padding: 18px 50px;
}
.product .more-btn a:hover {
    background: #00a0e9;
    color: #fff;
}


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

.solution {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.solution .solution-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}
.solution .solution-card .solution-cate {
    width: 300px;
    max-height: 630px;
    overflow-x: hidden;
    overflow-y: auto ;
}
.solution .solution-card .solution-cate::-webkit-scrollbar {
    width: 3px;
}
.solution .solution-card .solution-cate::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.solution .solution-card .solution-cate::-webkit-scrollbar-thumb {
    background: #00a0e9;
}

.solution .solution-card .solution-cate::-webkit-scrollbar-thumb:hover {
    background: #00a0e9;
}

.solution .solution-card .solution-cate ul {
    display: flex;
    flex-flow: column;
    border: 1px solid #eee;
    width: calc(100% - 10px);
    margin-right: 10px;
}
.solution .solution-card .solution-cate ul li {
    display: flex;
    width: 100%;
}
.solution .solution-card .solution-cate ul li button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    font-size: 18px;
    height: 90px;
    color: #000;
    border: none;
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0 0 0 45px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] {
    background: #00a0e9;
    color: #fff;
}
.solution .solution-card .solution-cate ul li:last-of-type button {
    border-bottom:none;
}
.solution .solution-card .solution-cate ul li button i {
    width: 40px;
    height: 40px;
}
.solution .solution-card .solution-cate ul li button i.i-1 {
    background-position: 0 -200px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-1 {
    background-position: -40px -200px;
}
.solution .solution-card .solution-cate ul li button i.i-2 {
    background-position: 0 -240px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-2 {
    background-position: -40px -240px;
}
.solution .solution-card .solution-cate ul li button i.i-3 {
    background-position: 0 -280px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-3 {
    background-position: -40px -280px;
}
.solution .solution-card .solution-cate ul li button i.i-4 {
    background-position: 0 -320px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-4 {
    background-position: -40px -320px;
}
.solution .solution-card .solution-cate ul li button i.i-5 {
    background-position: 0 -360px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-5 {
    background-position: -40px -360px;
}
.solution .solution-card .solution-cate ul li button i.i-6 {
    background-position: 0 -400px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-6 {
    background-position: -40px -400px;
}
.solution .solution-card .solution-cate ul li button i.i-7 {
    background-position: 0 -440px;
}
.solution .solution-card .solution-cate ul li button[aria-selected="true"] i.i-7 {
    background-position: -40px -440px;
}
.solution .solution-card .solution-list {
    display: none;
    flex-wrap: wrap;
    width: calc(100% - 330px);
    gap: 40px;
}
.solution .solution-card .solution-list.active {
    display: flex;
}
.solution .solution-card .solution-list .item {
    display: flex;
    flex-flow: column;
    width: calc((100% - 80px) / 3);
}
.solution .solution-card .solution-list .item .image-link {
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.solution .solution-card .solution-list .item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.solution .solution-card .solution-list .item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.solution .solution-card .solution-list .item h3 {
    display: flex;
    width: 100%;
}
.solution .solution-card .solution-list .item h3 a {
    font-size: 18px;
    color: #000;
    margin: 20px 0 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    text-align: center;
    padding: 0 10px;
}
.solution .solution-card .solution-list .item:hover h3 a {
    color: #00a0e9;
}


.section-ad {
    display: flex;
    flex-direction: column;
    background-image: url(../image/ad-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0;
    width: 100%;
}
.ad {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ad .ad-text {
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.ad .ad-text h2 {
    font-size: 34px;
    font-weight: bold;
    color: #fff;
}
.ad .ad-text p {
    font-size: 18px;
    color: #fff;
}
.ad address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.ad address .contact-list {
    display: flex;
    flex-flow: column;
    position: relative;
    padding-left: 92px;
}
.ad address .contact-list:before {
    content: '';
    width: 82px;
    height: 82px;
    left: 0;
    top: 0;
    background-image: url(../image/icon.png);
    background-repeat: no-repeat;
    background-position: -110px -200px;
    position: absolute;
}
.ad address .contact-list dt {
    font-size: 24px;
    color: #fff;
    font-weight: normal;
    margin-top: 10px;
}
.ad address .contact-list dd a {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}
.ad address .contact-wx {
    display: flex;
    position: relative;

}
.ad address .contact-wx dt {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: #fff;
    font-weight: normal;
}
.ad address .contact-wx dd {
    width: 160px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    margin-bottom: 30px;
}
.ad address .contact-wx dd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-guide {
    padding: 80px 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}
.guide {
    display: flex;
    flex-flow: column;
    width: 100%;
}
.guide-card {
    padding: 80px 0 100px;
    margin-top: 50px;
    width: 100%;
    display: flex;
    background-image: url("../image/guide-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box {
    display: flex;
    flex-flow: column;
    gap: 80px;
}
.guide-card .box nav {
    display: flex;
    width: 100%;
}
.guide-card .box nav .cate-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
.guide-card .box nav .cate-item li {
    display: flex;
}
.guide-card .box nav .cate-item li button  {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    font-size: 16px;
    color: #fff;
    background: none;
    border: 1px solid rgba(255,255,255,0.5);
}
.guide-card .box nav .cate-item li button[aria-selected="true"] {
    background: #00a0e9;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.9);
}
.guide-card .box .guide-box {
    display: none;
    align-items: flex-end;
    width: 100%;
    gap: 30px;
}
.guide-card .box .guide-box.active {
    display: flex;
}
.guide-card .box .guide-box .guide-item {
    width: calc((100% - 120px) / 5);
    position: relative;
}
.guide-card .box .guide-box .guide-item .image-link {
    width: 100%;
    display: inline-block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.guide-card .box .guide-box .guide-item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box .guide-box .guide-item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.guide-card .box .guide-box .guide-item h3 {
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
.guide-card .box .guide-box .guide-item h3 a {
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 10px;
    color: #fff;
    font-size:16px;
    font-weight: normal;
    background: rgba(0,160,233,.8);
}
.guide-card .box .guide-box .guide-item:hover h3 a {
    background: rgba(0,160,233,1);
}

.guide-card .box .guide-box .guide-item .more-link {
    background: rgba(0,160,233,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    gap: 20px;
    color: #fff;
    font-size: 20px;
    padding: 30px 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box .guide-box .guide-item:hover .more-link {
    background: rgba(0,160,233,1);
}
.guide-card .box .guide-box .guide-item .more-link i {
    background-position: -220px -200px;
    width: 92px;
    height: 92px;
}
.guide-card .box .guide-step {
    display: flex;
    width: 100%;
    gap: 30px;
    margin-top: 60px;
}
.guide-card .box .guide-step li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 30px;
    background: #E0E0E2;
    position: relative;
    width: calc((100% - 120px) / 5);
    padding: 100px 0 50px;
    cursor: pointer;
    border: 2px solid #E0E0E2;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box .guide-step li:hover {
    border: 2px solid #00a0e9;
}
.guide-card .box .guide-step li .circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #00a0e9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc((100% - 130px) / 2);
    top: -60px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box .guide-step li:hover .circle {
    /*top: -70px;*/
    animation: bounce 1s ease-in-out infinite;
}
.guide-card .box .guide-step li .circle i {
    width: 60px;
    height: 60px;

}
.guide-card .box .guide-step li .circle i.i-1 {
    background-position: -100px -300px;
}
.guide-card .box .guide-step li .circle i.i-2 {
    background-position: -160px -300px;
}
.guide-card .box .guide-step li .circle i.i-3 {
    background-position: -220px -300px;
}
.guide-card .box .guide-step li .circle i.i-4 {
    background-position: -280px -300px;
}
.guide-card .box .guide-step li .circle i.i-5 {
    background-position: -340px -300px;
}
.guide-card .box .guide-step li strong {
    font-size: 20px;
    color: #000;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.guide-card .box .guide-step li:hover strong {
    color: #00a0e9;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }        /* 起点和终点归位 */
    50%      { transform: translateY(-15px); }    /* 中间跳到最高点 */
}
.guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.guide-btn li {
    width: 50%;
    display: flex;
}

.guide-btn li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    font-size: 22px;
    color: #fff;
}
.guide-btn li:first-of-type a {
    background: #01B26A;
}
.guide-btn li:last-of-type a {
    background: #00a0e9;
}
.guide-btn li a i {
    width: 48px;
    height: 50px;
}
.guide-btn li a .start-guide {
    background-position: -330px -200px;
}
.guide-btn li a .zl-guide {
    background-position: -390px -200px;
}

.section-work {
    padding: 80px 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    background-color: #F0F0F0;
}
.work {
    display: flex;
    flex-flow: column;
    gap: 50px;
}
.work .work-card {
    display: flex;
    flex-flow: column;
    width: 100%;
    position: relative;
    padding-bottom: 60px;
}
.work-card .work-swiper {
    width: 100%;
    overflow: hidden;
}

.work-card .work-swiper .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    padding: 10px 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.work-card .work-swiper .swiper-wrapper .swiper-slide:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.work-card .work-swiper .swiper-wrapper .swiper-slide .image-link {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    object-fit: cover;
}

.work-card .work-swiper .swiper-wrapper .swiper-slide .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.work-card .work-swiper .swiper-wrapper .swiper-slide:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.work-card .work-swiper .swiper-wrapper .swiper-slide h3 {
    display: flex;
    width: 100%;
}
.work-card .work-swiper .swiper-wrapper .swiper-slide h3 a {
    width: 100%;
    color: #000;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding: 15px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.work-card .work-swiper .swiper-wrapper .swiper-slide:hover h3 a {
    color: #00a0e9;
}

.work-card .swiper-pagination-work {
    position: absolute;
    z-index: 9;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    bottom: 0;
}

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

.work-card .swiper-pagination-work .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #00a0e9;
}


.section-testimonial {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("../image/testimonial-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial {
    display: flex;
}
.testimonial-swiper {
    width: 100%;
    overflow: hidden;
}
.testimonial-swiper .swiper-slide {
    width: 60%;
    display: flex;
    flex-flow: column;
    /*position: relative;*/
    padding: 60px 60px;
    background: #fff;
    border-radius: 20px;
    gap: 30px;
}
.testimonial-swiper .swiper-slide.swiper-slide-active {
    border-bottom: 5px solid #00a0e9;
}
.testimonial-swiper .swiper-slide.swiper-slide-prev,.testimonial-swiper .swiper-slide.swiper-slide-next {
    opacity: 0.7 !important;
}
.testimonial-swiper .swiper-slide .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 30px;
}
.testimonial-swiper .swiper-slide .info h3 {
    width: 120px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.testimonial-swiper .swiper-slide .info h3 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.testimonial-swiper .swiper-slide .testimonial-meta {
    width: calc(100% - 150px);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd strong {
    font-size: 24px;
    color: #000;
    position: relative;
    padding-right: 10px;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd strong:before {
    position: absolute;
    content: '';
    right: 0;
    top: 4px;
    width: 1px;
    height: 20px;
    background: #000;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd.zw {
    font-size: 24px;
    color: #000;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd.company {
    font-size: 18px;
    width: 100%;
    color: #000;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd.product-tag {
    position: absolute;
    right: 0;
    top: 15px;
}
.testimonial-swiper .swiper-slide .testimonial-meta dd.product-tag a {
    font-size: 16px;
    color: #fff;
    padding: 15px 30px;
    background: #00a0e9;
    border-radius: 30px;
    font-weight: normal;
}
.testimonial-swiper .swiper-slide .testimonial-quote {
    position: relative;
    padding: 41px 70px;
    width: 100%;
}
.testimonial-swiper .swiper-slide .testimonial-quote:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 44px;
    height: 41px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -100px -380px;
}
.testimonial-swiper .swiper-slide .testimonial-quote:after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 44px;
    height: 41px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -144px -380px;
}
.testimonial-swiper .swiper-slide .testimonial-quote p {
    font-size: 18px;
    color: #555;
    line-height: 32px;
}

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

.news {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.news-card {
    display: flex;
    width: 100%;
    position: relative;
    padding-bottom: 80px;
}

.news-card .news-swiper {
    width: 100%;
    overflow: hidden;
    padding:1px 1px;
}

.news-card .news-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 40px 40px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-card .news-swiper .swiper-slide:hover {
    border: 1px solid #00a0e9;
    background: #00a0e9;
}
.news-card .news-swiper .swiper-slide h3 {
    display: flex;
    width: 100%;
}
.news-card .news-swiper .swiper-slide h3 a {
    width: 100%;
    color: #000;
    font-size: 22px;
    font-weight: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-card .news-swiper .swiper-slide:hover h3 a {
    color: #fff;
}
.news-card .news-swiper .swiper-slide .item-summary {
    width: 100%;
    color: #777;
    font-size: 16px;
    line-height: 28px;
    max-height: 84px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-card .news-swiper .swiper-slide:hover .item-summary {
    color: #fff;
}
.news-card .news-swiper .swiper-slide time {
    margin-top: 15px;
    color: #000;
    font-size: 18px;
    padding-left: 30px;
    position: relative;
    line-height: 22px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-card .news-swiper .swiper-slide:hover time {
    color: #fff;
}
.news-card .news-swiper .swiper-slide time:before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 20px;
    height: 22px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -200px -380px;
}
.news-card .news-swiper .swiper-slide:hover time:before {
    background-position: -220px -380px;
}
.news-card .next-news {
    position: absolute;
    right: calc(50% - 45px);
    left: unset;
    bottom: 0;
    top: unset;
    border: 1px solid #CCC;
    width: 40px;
    height: 40px;
    background: #fff;
}
.news-card .prev-news {
    position: absolute;
    right: unset;
    left: calc(50% - 45px);
    bottom: 0;
    top: unset;
    border: 1px solid #CCC;
    background: #fff;
    width: 40px;
    height: 40px;
}
.news-card .next-news:after,.news-card .prev-news:after {
    font-size: 16px;
    color: #888;
    font-weight: bold;
}
.news-card .prev-news:hover,.news-card .next-news:hover {
    border: 1px solid #00a0e9;
    color: #00a0e9;
}
.news-card .next-news:hover:after,.news-card .prev-news:hover:after {
    color: #00a0e9;
}
.news .more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.news .more-btn a {
    border: 1px solid #00a0e9;
    color: #000;
    font-size: 18px;
    border-radius: 40px;
    padding: 18px 50px;
}
.news .more-btn a:hover {
    background: #00a0e9;
    color: #fff;
}
.section-im {
    padding: 80px 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    background-image: url("../image/message-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.im {
    display: flex;
}
.im .im-box {
    width: 50%;
    margin-left: 50%;
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.im .im-box h2 {
    font-size: 36px;
    color: #000;
}
.im .im-box .tip {
    font-size: 15px;
    color: #000;
    line-height: 28px;
}
.im .im-box .tip a {
    font-size: 15px;
    color: #000;
}
.im .im-box form {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.im .im-box form .form-group {
    width: calc(50% - 8px);
}
.im .im-box form .form-group.with {
    width: 100%;
}
.im .im-box form .form-group input {
    border:1px solid #BACFEA;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: rgba(255,255,255,0.7);
}
.im .im-box form .form-group textarea {
    border:1px solid #BACFEA;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    line-height: 24px;
    background: rgba(255,255,255,0.7);
}
.im .im-box form .form-group.captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}
.im .im-box form .form-group.captcha input {
    width: 60%;
}
.im .im-box form .form-group.captcha img {
    height: 40px;
}
.im .im-box form button {
    width: 50%;
    border-radius: 30px;
    background: #00a0e9;
    color: #fff;
    font-size: 18px;
    letter-spacing: 5px;
    border: 1px solid #00a0e9;
    padding: 8px 0;
}


.section-footer {
    display: flex;
    background: #1B1B1B;
    width: 100%;
}

.footer {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
}
.footer .footer-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;

}
.footer .footer-hd p {
    border: 1px solid #fff;
    cursor: pointer;
}
.footer .footer-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 100px;
}
.footer .footer-box address {
    width: 40%;
    display: flex;
}
.footer .footer-box address dl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    border-right:1px solid rgba(255,255,255,0.1);
}
.footer .footer-box address dl dt.tel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    font-weight: lighter;
}
.footer .footer-box address dl dt.tel i {
    width: 19px;
    height: 19px;
    background-position: -250px -380px;
}
.footer .footer-box address dl dd.tel-dd {
    width: 100%;
    font-size: 30px;
    font-weight: normal;
    color: #fff;
}
.footer .footer-box address dl dt.email {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    font-weight: lighter;
}
.footer .footer-box address dl dt.email i {
    width: 18px;
    height: 13px;
    background-position: -280px -380px;
}
.footer .footer-box address dl dd.email-dd {
    width: calc(100% - 110px);
    font-size: 18px;
    font-weight: normal;
    color: rgba(255,255,255,0.8);
}
.footer .footer-box address dl dt.address {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    font-weight: lighter;
}
.footer .footer-box address dl dt.address i {
    width: 21px;
    height: 21px;
    background-position: -310px -380px;
}
.footer .footer-box address dl dd.address-dd {
    width: calc(100% - 90px);
    font-size: 18px;
    font-weight: normal;
    color: rgba(255,255,255,0.8);
}
.footer .footer-box address dl dd.qrcode-dd {
    width: 120px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 10px;
}
.footer .footer-box address dl dd.qrcode-dd.ml30{
    margin-left: 30px;
}
.footer .footer-box address dl dd.qrcode-dd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer .footer-box .footer-menu {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(60% - 100px);
}
.footer .footer-box .footer-menu dl {
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.footer .footer-box .footer-menu dl dt {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: normal;
}
.footer .footer-box .footer-menu dl dd {
    display: flex;
}
.footer .footer-box .footer-menu dl dd a {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}
.footer .footer-box .footer-menu dl dd a:hover {
    color: #00a0e9;
}

.footer .footer-copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 20px;
}
.footer .footer-copyright p {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}
.footer .footer-copyright a {
    color: rgba(255,255,255,0.5);
}
.footer .footer-copyright a:hover {
    color: #00a0e9;
}
.footer .footer-copyright .u-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

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

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

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

#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;
}
.section-page-banner {
    display: flex;
    width: 100%;
}
.page-banner {
    display: flex;
    flex-flow: column;
    width: 100%;
    position: relative;
}

.page-banner .image {
    width: auto;
    max-width: 100%;
}
.page-banner .page-banner-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 40px;
}
.page-banner .page-banner-nav h1,.page-banner .page-banner-nav dt {
    font-size: 40px;
    color: #fff;
    font-weight: bold;
}
.page-banner .page-banner-nav p,.page-banner .page-banner-nav dd {
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    width: 100%;
    text-align: center;
}
.page-banner .breadcrumbs {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    padding: 15px 0;
}
.page-banner .breadcrumbs ol {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.page-banner .breadcrumbs ol li {
    display: flex;
    padding-right: 20px;
    position: relative;
}
.page-banner .breadcrumbs ol li:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 9px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -90px 0;
    right: 8px;
    top: 4px;
    color: #fff;
}
.page-banner .breadcrumbs ol li:last-of-type {
    padding-right: 0;
}
.page-banner .breadcrumbs ol li:last-of-type:before {
    display: none;
}
.page-banner .breadcrumbs ol li a {
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 240px;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.page-banner .breadcrumbs ol li a i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -60px 0;
    margin-right: 5px;
    margin-bottom: 1px;;
}

.section-page-nav-list {
    padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.page-nav-list {
    display: flex;
}
.page-nav-list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.page-nav-list ul li {
    display: flex;
}
.page-nav-list ul li a {
    font-size: 16px;
    color: #000;
    background: #fff;
    border-radius: 30px;
    padding: 12px 25px;
}
.page-nav-list ul li a:hover, .page-nav-list ul li a[aria-current="page"] {
    background: #00a0e9;
    color: #fff;
}
.section-page-search {
    padding: 15px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.page-search {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-search form {
    border: 1px solid #B7CDE5;
    border-radius: 40px;
    width: 40%;
    display: flex;
}
.page-search form .search-input {
    width: calc(100% - 50px);
    height: 40px;
    padding: 0 20px;
    border: none;
    outline: none;
    border-radius: 40px;
}
.page-search form .search-btn {
    width: 50px;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 40px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-search form .search-btn i {
    width: 24px;
    height: 23px;
    background-position: -120px 0;
}
.section-selection-nav {
    padding: 50px 0;
    display: flex;
    width: 100%;
    background: #F6F6F6;
}
.selection-nav {
    display: flex;
    flex-flow: column;
    gap: 20px;
}
.selection-nav dl {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}
.selection-nav dl dt {
    font-size: 18px;
    color: #000;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #EEEEEE;
    border-radius: 30px;
    padding: 10px 20px;
    flex-shrink: 0;
}
.selection-nav dl dt i {
    width: 20px;
    height: 20px;;
}
.selection-nav dl dt i.icon-1 {
    background-position: -200px 0;
}
.selection-nav dl dt i.icon-2 {
    background-position: -230px 0;
}
.selection-nav dl dt i.icon-3 {
    background-position: -260px 0;
}
.selection-nav dl dd {
    display: flex;
    width: 100%;
}
.selection-nav dl dd ul {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.selection-nav dl dd ul li {
    display: flex;
}
.selection-nav dl dd ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    border:1px solid #ddd;
    border-radius: 30px;
    padding: 8px 25px;
    color: #333;
}
.selection-nav dl dd ul li a i {
    width: 14px;
    height: 12px;
    background-position: -160px 0;
    margin-top: -2px;
}
.selection-nav dl dd ul li:first-of-type a {
    border: 1px solid #000;
    color: #000;
}
.selection-nav dl dd ul li:hover a,.selection-nav dl dd ul li.active a {
    color: #fff;
    background: #00a0e9;
}
.selection-nav dl dd ul li:first-of-type:hover a {
    border: 1px solid #000;
    color: #000;
    background: none;
}
.section-selection-guide {
    padding: 0 0 50px;
    background: #f6f6f6;
}
.selection-guide {
    display: flex;
    flex-flow: column;
    gap: 40px;
}
.selection-guide .lists {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}
.selection-guide .lists .item {
    width: calc(50% - 20px);
    background-color: #fff;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.selection-guide .lists .item:hover {
    background-color: #00a0e9;
}
.selection-guide .lists .item .image-link {
    width: 40%;
    grid-column: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.selection-guide .lists .item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.selection-guide .lists .item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.selection-guide .lists .item .item-box {
    display: flex;
    align-items: flex-end;
    flex-flow: column;
    gap: 20px;
    width: calc(60% - 20px);
}
.selection-guide .lists .item .item-box h2 {
    width: 100%;
    display: flex;
    margin-top: 10px;
}
.selection-guide .lists .item .item-box h2 a {
    font-size: 20px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.selection-guide .lists .item:hover .item-box h2 a {
    color: #fff;
}
.selection-guide .lists .item .item-box p {
    font-size: 16px;
    line-height: 28px;
    max-height: 84px;
    color: #666;
    width: 100%;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.selection-guide .lists .item:hover .item-box p {
    color: #fff;
}
.selection-guide .lists .item .item-box .item-btn {
   background: #00a0e9;
   color: #fff;
   border-radius: 20px;
   padding: 10px 30px;
   font-size: 16px; 
   -webkit-transition: all .3s;
    transition: all .3s;
}
.selection-guide .lists .item:hover .item-box .item-btn {
   background: #fff;
   color: #333;
}
.section-page-pro-list {
    display: flex;
    width: 100%;
    padding: 60px 0;
}
.page-pro-list {
    display: flex;
    flex-flow: column;
    gap: 40px;
}
.pro-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}
.app-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}
.app-list .item  {
    display: flex;
    flex-direction: column;
    width: calc((100% - 90px) / 4);
    gap: 20px;
    background-color: #fff;
}

.app-list .item .image-link {
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.app-list .item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.app-list .item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.app-list .item h2 {
    display: flex;
    width: 100%;
}
 .app-list .item h2 a {
    font-size: 18px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    text-align: center;
    padding: 0 20px;
}
.app-list .item:hover h2 a {
    color: #00a0e9;
}


.section-page-pro-detail {
    padding: 40px 0;
    display: flex;
    flex-flow: column;
    gap: 40px;
    background: #f6f6f6;
}
.page-pro-detail {
    padding: 60px 50px;
    display: flex;
    flex-flow: column;
    gap: 40px;
    background: #fff;
}
.main-wrap {
    display: flex;
    gap: 90px;
    width: 100%;
}
.main-wrap .image-box {
    display: flex;
    flex-flow: column;
    gap: 20px;
    width: 40%;
}
.main-wrap .image-box figure {
    width: 100%;
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.main-wrap .image-box figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-wrap .image-box nav {
    display: flex;
    width: 100%;
}
.main-wrap .image-box nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 15px;
}
.main-wrap .image-box nav ul li {
    width: calc((100% - 60px) / 5);
    display: flex;
}
.main-wrap .image-box nav ul li figure {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
}
.main-wrap .image-box nav ul li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.main-wrap .info-box {
    width: calc(60% - 90px);
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.main-wrap .info-box h1 {
    font-size: 26px;
    color: #000;
    line-height: 36px;
    border-bottom: 1px solid #eee;
    margin-top: 30px;
    padding-bottom: 15px;
}
.main-wrap .info-box .intro {
    border: 1px solid #C1E5FB;
    background: #EFF8FF;
    border-radius: 10px;
    padding: 20px 20px;
    font-size: 16px;
    color: #555;
    line-height: 30px;
}
.main-wrap .info-box table {
    width: 100%;
    font-size: 14px;
}
.main-wrap .info-box table caption {
    font-size: 18px;
    color: #00a0e9;
    font-weight: bold;
    margin-bottom: 15px;
}
.main-wrap .info-box table thead {
    background: #00a0e9;
    color: #fff;
    border: 1px solid #00a0e9;
}

.main-wrap .info-box table td,.main-wrap .info-box table th {
    padding: 15px 10px;
}
.main-wrap .info-box table tbody {
    border: 1px solid #00a0e9;
}
.main-wrap .info-box table tbody tr {
    border-bottom: 1px solid #00a0e9;
}
.main-wrap .info-box table tbody tr:last-of-type {
    border-bottom: none;
}
.main-wrap .info-box table tbody tr td:first-of-type {
    border-right: 1px solid #00a0e9;
}
.main-wrap .info-box address {
    display: flex;
    width: 100%;
    border-top:1px solid #eee;
    padding-top: 30px;
}
.main-wrap .info-box address dl {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}
.main-wrap .info-box address dl dt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 24px;
    color: #000;
    gap: 10px;
    font-weight: normal;
}
.main-wrap .info-box address dl dt i {
    width: 40px;
    height: 40px;
    background-position: -100px -430px;
}
.main-wrap .info-box address dl dd {
    display: flex;
}
.main-wrap .info-box address dl dd a {
    font-size: 28px;
    color: #f00;
    position: relative;

}
.main-wrap .info-box address dl dd:first-of-type a {
    padding-right: 20px;
}
.main-wrap .info-box address dl dd:first-of-type a:before {
    position: absolute;
    content: '/';
    font-size: 24px;
    right: 0;
    top: 3px;
    color: #f00;
}
.main-wrap .info-box .info-btn {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 50px;
}
.main-wrap .info-box .info-btn li {
    display: flex;
}
.main-wrap .info-box .info-btn a {
    font-size: 20px;
    color: #fff;
    padding: 15px 50px;
    border-radius: 5px;
    background: #00a0e9;
}
.main-wrap .info-box .info-btn a:hover {
    background: #0291D2;
}
.main-wrap .info-box .info-btn li.btn-message a {
    background: #01B26A;
}
.main-wrap .info-box .info-btn li.btn-message a:hover {
    background: #02995C;
}

.detail-box {
    display: flex;
    flex-flow: column;
    gap: 30px;
    width: 100%;
}
.detail-box .detail-box-title {
    background: #f6f6f6;
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.detail-box .detail-box-title h2 {
    background: #fff;
    color: #000;
    border: 1px solid #eee;
    border-top: 4px solid #00a0e9;
    padding: 12px 25px;
    font-size: 22px;
}
.detail-box h3 {
    color: #00a0e9;
    width: 100%;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 3px solid #00a0e9;
}
.detail-box .params {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #eee;
}
.detail-box .params dt {
    width: 10%;
    font-size: 16px;
    padding: 15px 15px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.detail-box .params dd {
    width: 40%;
    font-size: 16px;
    padding: 15px 15px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detail-box .params dd.nb {
    border-right: none;
}
.detail-box .params dd a {
    color: #000;
}
.detail-box .params dd a:hover {
    color: #00a0e9;
}

.detail-box .performance {
    display: flex;
    flex-flow: column;
    width: 100%;
    gap: 20px;
}
.detail-box .performance p {
    font-size: 16px;
    color: #555;
    line-height: 30px;
}
.detail-box .performance p.p {
    font-size: 18px;
    color: #000;
    width: 100%;
}
.detail-box .performance .image {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.detail-box .performance .image figure {
    width: 100%;
     overflow: hidden;
}
.detail-box .performance .image.x2 figure {
    width: calc((100% - 20px) / 2);
}
.detail-box .performance .image.x3 figure {
    width: calc((100% - 40px) / 3);
}
.detail-box .performance .image.x4 figure {
    width: calc((100% - 60px) / 4);
}
.detail-box .performance .image figure img {
    width: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.detail-box .performance .image figure:hover img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

.detail-box .performance .dl {
    display: grid;
    grid-template-columns: auto 1fr;  /* dt 自适应，dd 占满剩余 = dt + dd = 100% */
    column-gap: 15px;
    row-gap: 15px;
    align-items: baseline;            /* 文字基线对齐，视觉更整齐 */
}
.detail-box .performance .dl dt {
    /* flex-shrink: 0; */
    font-size: 18px;
    color: #000;
}
.detail-box .performance .dl dd {
    /* flex: 1; */
    /* width: 100%; */
    font-size: 16px;
    color: #000;
    line-height: 28px;
}
.detail-box .performance .dl dd a {
    background: #00a0e9;
    color: #ffff;
    padding: 5px 10px;
    border-radius: 5px;
}
.detail-box .performance .dl dd a:hover {
    background: #0A8BC4;
}
.detail-box .performance .dl dd a.tel {
    background: none;
    color: #f00;
    padding: 0;
    border-radius: 0;
}
.detail-box .performance .dl dd a.tel-p {
    padding-right: 30px;
    position: relative;
}
.detail-box .performance .dl dd a.tel-p:before {
    content: '/';
    font-size: 18px;
    color: #f00;
    position: absolute;
    right: 12px;
    top: -4px;
}
.detail-box .performance .dl dd a.tel:hover {
     background: none;
 }

.detail-box .performance h4 {
    font-size: 18px;
    color: #000;
    width: 100%;
}
.detail-box .performance .ol {
    display: flex;
    flex-flow: column;
    width: 100%;
    gap: 15px;
}
.detail-box .performance .ol li {
    width: 100%;
    font-size: 16px;
    padding-left: 42px;
    position: relative;
    line-height: 28px;
}
.detail-box .performance .ol li:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    left: 20px;
    top: 9px;
    position: absolute;
}

.detail-box .performance .ul {
    display: flex;
    flex-flow: column;
    width: 100%;
    gap: 15px;
}
.detail-box .performance .ul li {
    width: 100%;
    font-size: 16px;
    line-height: 28px;
}

.performance .apps-list {
    display: flex;
    flex-flow: column;
    gap: 30px;
    width: 100%;
    margin-top: 20px;
}
.performance .apps-list article {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: #EFF8FF;
}
.performance .apps-list article .image {
    width: 350px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.performance .apps-list article .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.performance .apps-list article:hover .image img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.performance .apps-list article dl {
    padding: 30px 30px;
    display: flex;
    flex-flow: column;
    gap: 15px;
    width: calc(100% - 380px);
}
.performance .apps-list article dl dt {
    display: flex;
    width: 100%;
}
.performance .apps-list article dl dt a {
    color: #000;
    font-size: 18px;
}
.performance .apps-list article dl:hover dt a {
    color: #00a0e9;
}
.performance .apps-list article dl dd {
    width: 100%;
    font-size: 16px;
    color: #000;
    line-height: 28px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.detail-box .f-p {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #00a0e9;
    margin-top: 30px;
}
.detail-box .note {
    border: 1px solid #C1E5FB;
    background: #EFF8FF;
    border-radius: 10px;
    padding: 20px 20px;
    display: flex;
    flex-flow: column;
    gap: 15px;
}
.detail-box .note p {
    font-size: 16px;
    color: #111;
    line-height: 28px;
}
.detail-box .note .p1 {
    font-size: 20px;
    color: #555;
}

.section-page-message {
    display: flex;
    padding-top: 80px;
}
.page-message {
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 100%;
}
.page-message h3 {
    text-align: center;
    font-size: 32px;
    color: #000;
}
.page-message p {
    text-align: center;
    font-size: 18px;
    color: #555;
    line-height: 28px;
}
.page-message form {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.page-message form .form-group {
    width: calc(50% - 8px);
}
.page-message form .form-group.with {
    width: 100%;
}
.page-message form .form-group input {
    border:1px solid #F0F0F0;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #F0F0F0;
}
.page-message form .form-group textarea {
    border:1px solid #F0F0F0;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    line-height: 24px;
    background: #F0F0F0;
}
.page-message form .form-group.captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.page-message form .form-group.captcha input {
    width: 30%;
}
.page-message form button {
    width: 30%;
    border-radius: 30px;
    background: #00a0e9;
    color: #fff;
    font-size: 18px;
    letter-spacing: 5px;
    border: 1px solid #00a0e9;
    padding: 8px 0;
}
.section-page-related {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
}
.page-related {
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 100%;
}
.page-related h3 {
    text-align: center;
    font-size: 32px;
    color: #000;
}
.page-related p {
    text-align: center;
    font-size: 18px;
    color: #555;
    line-height: 28px;
}

.related-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
    margin-top: 40px;
}

.related-list .related-item {
    display: flex;
    flex-direction: column;
    width: calc((100% - 90px) / 4);
    background-color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.related-list .related-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.page-pro-list .pro-list .pro-item .image-link {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.related-item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.related-item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.related-item h4 {
    display: flex;
    width: 100%;
}
.related-item h4 a {
    font-size: 18px;
    color: #000;
    margin: 15px 0 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
}
.related-item:hover h4 a {
    color: #00a0e9;
}

.section-page-news-list {
    display: flex;
    width: 100%;
    padding: 60px 0;
    background-color: #f6f6f6;
}
.page-news-list {
    display: flex;
    flex-flow: column;
    gap: 40px;
}
.news-list {
    display: flex;
    flex-flow: column;
    width: 100%;
    gap: 30px;
}
.news-list .news-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-color: #fff;
    padding: 20px 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-list .news-item:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.news-list .news-item .image-link {
    width: 400px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.news-list .news-item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-list .news-item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.news-list .news-item .info-box {
  display: flex;
  width: calc(100% - 400px);
  flex-flow: column;    
  padding: 30px 50px; 
  gap: 20px;         
}
.news-list .news-item .info-box h2 {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;                 
}
.news-list .news-item .info-box h2 a {
    font-size: 22px;
    line-height: 1.4;
    color: #000;   
}
.news-list .news-item:hover .info-box h2 a {
  text-decoration: underline;
  color: #00a0e9;
}
.news-list .news-item .info-box p {
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    max-height: 60px;
    color: #8a8a8a;                    
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-list .news-item .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 0 30px 0 0;
}
.news-list .news-item .date .day {
    font-size: 52px;
    font-weight: bold;
    color: #666;   
    -webkit-transition: all .3s;
    transition: all .3s;  
}
.news-list .news-item .date .ym {
    font-size: 18px;
    color: #666;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-list .news-item:hover .date .day,.news-list .news-item:hover .date .ym {
    color: #00a0e9;
}
.news-list .news-item .download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 15px 30px 0 0;
}
.news-list .news-item .download i {
    width: 65px;
    height: 65px;
    background-position: 0 -490px;
}
.news-list .news-item .download span {
    color: #000;
    font-size: 16px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.news-list .news-item:hover .download span {
    color: #00a0e9;
}


.section-page-work-detail {
    padding: 40px 0;
    display: flex;
    flex-flow: column;
    gap: 40px;
    background: #f6f6f6;
}
.page-work-detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.main-work-wrap {
    padding: 40px 30px;
    background-color: #fff;
    width: 73%;
    display: flex;
    flex-flow: column;
}
.main-work-wrap header {
    display: flex;
    align-items: center;
    flex-flow: column;
    width: 100%;
    gap: 40px;
}
.main-work-wrap header  h1 {
    font-size: 32px;
    color: #000;
    line-height: 1.4;
}
.main-work-wrap header .meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    width: 100%;
    padding: 20px 0;
}
.main-work-wrap header .meta span {
    font-size: 12px;
    color: #555;
}
.main-work-wrap header .meta ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.main-work-wrap header .meta ul li {
    display: flex;
}
.main-work-wrap header .meta ul li a {  
    display: flex;
}
.main-work-wrap section {
    display: flex;
    flex-flow: column;
    gap: 15px;
    margin-top: 40px;
}
.main-work-wrap section h2 {
    color: #00a0e9;
    width: 100%;
    display: flex;
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 3px solid #00a0e9;
}
.main-work-wrap section h2.n-h2 {
    color: #000;
    padding-left: 0;
    border-left: none;
}
.main-work-wrap section h2.q-h2 {
    position: relative;
    color: #000;
    padding-left: 0;
    padding-left: 15px;
    border-bottom: 1px solid #D1EDFB;
    padding-bottom: 10px;
    border-left: none;
}
.main-work-wrap section h2.q-h2::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 0;
    width: 4px;
    height: 22px;
    background-color: #00a0e9;
    transform: translateY(-50%);
}
.main-work-wrap section .q-dl {
    display: flex;
    flex-flow: column;
    border: 1px solid #D1EDFB;
    border-radius: 5px;
    padding: 20px 20px;
}
.main-work-wrap section .q-dl dt {
    width: 100%;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}
.main-work-wrap section .q-dl dd {
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}
.main-work-wrap section p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}
.main-work-wrap section p.p-t {
    font-size: 20px;
    margin-top: 15px;
}
.main-work-wrap section ul {
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.main-work-wrap section ul li {
    font-size: 18px;
    line-height: 1.4;
    color: #333;
    position: relative;
    padding-left: 20px;
}
.main-work-wrap section ul li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #00a0e9;
    border-radius: 50%;
}
.main-work-wrap section .image {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.main-work-wrap section .image figure {
    width: 100%;
    overflow: hidden;
}
.main-work-wrap section .image.x2 figure {
    width: calc((100% - 20px) / 2);
}
.main-work-wrap section .image.x3 figure {
    width: calc((100% - 40px) / 3);
}
.main-work-wrap section .image.x4 figure {
    width: calc((100% - 60px) / 4);
}
.main-work-wrap section .image figure img {
    width: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.main-work-wrap section .image figure:hover img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.main-work-wrap section table {
    width: 100%;
    font-size: 16px;
}
.main-work-wrap section table caption {
    font-size: 18px;
    color: #00a0e9;
    font-weight: bold;
    margin-bottom: 15px;
}
.main-work-wrap section table thead {
    background: #00a0e9;
    color: #fff;
    border: 1px solid #00a0e9;
}

.main-work-wrap section table td,.main-work-wrap section table th {
    padding: 15px 10px;
    border-right: 1px solid #00a0e9;
}
.main-work-wrap section table tbody {
    border: 1px solid #00a0e9;
}
.main-work-wrap section table tbody tr {        
    border-bottom: 1px solid #00a0e9;
}
.main-work-wrap section table tbody tr:last-of-type {
    border-bottom: none;
}
.main-work-wrap section table tbody tr td:last-of-type {
    border-right: none;
}
.main-work-wrap .user-comment {
    width: 100%;
    display: flex;
    flex-flow: column;
    padding: 40px 40px;
    background: #fff;
    border-radius: 20px;
    gap: 30px;
    border: 1px solid #D9EEFF;
    background: #F8FBFF;
}


.main-work-wrap .user-comment .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 20px;
}
.main-work-wrap .user-comment .info h3 {
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.main-work-wrap .user-comment .info h3 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.main-work-wrap .user-comment .testimonial-meta {
    width: calc(100% - 120px);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.main-work-wrap .user-comment .testimonial-meta dd strong {
    font-size: 24px;
    color: #000;
    position: relative;
    padding-right: 10px;
}
.main-work-wrap .user-comment .testimonial-meta dd strong:before {
    position: absolute;
    content: '';
    right: 0;
    top: 4px;
    width: 1px;
    height: 20px;
    background: #000;
}
.main-work-wrap .user-comment .testimonial-meta dd.zw {
    font-size: 24px;
    color: #000;
}
.main-work-wrap .user-comment .testimonial-meta dd.company {
    font-size: 18px;
    width: 100%;
    color: #000;
}
.main-work-wrap .user-comment .testimonial-meta dd.product-tag {
    position: absolute;
    right: 0;
    top: 15px;
}
.main-work-wrap .user-comment .testimonial-meta dd.product-tag a {
    font-size: 16px;
    color: #fff;
    padding: 15px 30px;
    background: #00a0e9;
    border-radius: 30px;
    font-weight: normal;
}
.main-work-wrap .user-comment .testimonial-quote {
    position: relative;
    padding: 30px 50px;
    width: 100%;
}
.main-work-wrap .user-comment .testimonial-quote:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 44px;
    height: 41px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -100px -380px;
    scale: 0.6;
}
.main-work-wrap .user-comment .testimonial-quote:after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 44px;
    height: 41px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -144px -380px;
    scale: 0.6;
}
.main-work-wrap .user-comment .testimonial-quote p {
    font-size: 18px;
    color: #555;
    line-height: 32px;
}
.main-work-wrap .scene {
    display: flex;
    flex-flow: column;
    gap: 20px;
    padding: 20px 20px;
    border: 1px solid #D1EDFB;
}
.main-work-wrap .scene .scene-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
.main-work-wrap .scene .scene-info figure {
    width: 36%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.main-work-wrap .scene .scene-info figure img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.main-work-wrap .scene .scene-info:hover figure img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.main-work-wrap .scene .scene-info .scene-box {
    width: calc(64% - 20px);
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.main-work-wrap .scene .scene-info .scene-box h3 {
    font-size: 24px;
    color: #000;
    border-bottom: 1px dashed #D1EDFB;
    padding-bottom: 10px;
}
.main-work-wrap .scene .scene-info .scene-box p.p1 {
    font-size: 20px;
    color: #000;
    position: relative;
    padding-left: 15px;
}
.main-work-wrap .scene .scene-info .scene-box p.p1::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 14px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -100px 0;
}
.main-work-wrap .scene-dl {
    display: flex;
    flex-flow: column;
    gap: 15px;
    width: 100%;
}
.main-work-wrap .scene-dl dt {
    font-size: 20px;
    color: #000;
    position: relative;
    padding-left: 20px;
}
.main-work-wrap .scene-dl dt::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 14px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -100px 0;
}
.main-work-wrap .scene-dl dd {
    font-size: 18px;
    color: #000;
    position: relative;
    padding-left: 20px;
}
.main-work-wrap .scene-dl dd::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #007CB6;
}
.main-work-wrap p.p-s {
    font-size: 20px;
    color: #000;
    position: relative;
    padding-left: 20px;
}
.main-work-wrap p.p-s::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 14px;
    background-image: url("../image/icon.png");
    background-repeat: no-repeat;
    background-position: -100px 0;
}
.main-work-wrap .scene-ul {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: unset;
    gap: 20px;
    width: 100%;
}
.main-work-wrap .scene-ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 10px;
    background: #EFF8FF;
    border: 1px solid #E7F6FD;
    width: calc((100% - 40px) / 3);
    padding: 20px 10px;
}
.main-work-wrap .scene-ul li::before {
    display: none;
}
.main-work-wrap .scene-ul li data {
    font-size: 24px;
    color: #007CB6;
    font-weight: bold;
}
.main-work-wrap .scene-ul li span {
    font-size: 18px;
    color: #333;
}
.main-work-wrap .tips {
    border: 1px solid #C0E6FB;
    background-color: #EFF8FF;
    padding: 20px 20px;
}

.main-work-wrap aside {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: 30px 20px;
    border-radius: 10px;
    border: 1px solid #D9EEFF;
    background: #F8FBFF;
    margin-top: 20px;
}
.main-work-wrap aside  p {
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
}
.main-work-wrap aside  p a {
    color: #00a0e9;
}
.main-work-wrap footer {
    display: flex;
    width: 100%;
    margin-top: 40px;
}
.main-work-wrap footer .tags {
    display: flex;
    gap: 10px;
    font-size: 16px;;
}
.main-work-wrap footer .tags span {
    color: #333;
}
.main-work-wrap footer .tags a {
    color: #333;
}
.main-work-wrap footer .tags a:hover {
    color: #00a0e9;
}
.main-work-wrap .footer-page-nav {
    display: flex;
    flex-flow: column;
    gap: 20px;
    width: 100%;
    border-top: 1px solid #eee;
    margin-top: 10px;
    position: relative;
    padding-top: 40px;
    font-size: 16px;
}
.main-work-wrap .footer-page-nav .prev-next {
    width: calc(100% - 160px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #333;
}
.main-work-wrap .footer-page-nav .prev-next:hover {
    color: #00a0e9;
}
.main-work-wrap .footer-page-nav .back {
    position: absolute;
    right: 0;
    top: 40px;
    font-size: 16px;
    padding: 15px 0;
    width: 150px;
    text-align: center;
    color: #fff;
    background-color: #00a0e9;
    border-radius: 10px;
    border: none;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.main-work-wrap .footer-page-nav .back:hover {
    background-color: #0489C6;
}
.recommend-sidebar {
   padding: 40px 30px;
    background-color: #fff;
    width: calc(27% - 40px); 
    display: flex;
    flex-flow: column;
    gap: 40px;
    flex-shrink: 0;
    position: sticky;    
    top: 90px;
}
.recommend-sidebar .recommend-box {
    display: flex;
    flex-flow: column;
    gap: 20px;
}
.recommend-sidebar .recommend-box h3 {
    font-size: 22px;
    color: #000;
    background-color: #00a0e9;
    color: #fff;
    padding: 12px 25px;
    font-weight: normal;
    border-radius: 5px;;
}
.recommend-sidebar .recommend-box .rec-list {
   display: flex;
   flex-flow: column;
   gap: 15px;
   width: 100%;
}
.recommend-sidebar .recommend-box .rec-list li {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.recommend-sidebar .recommend-box .rec-list li a {
    width: 100%;
    font-size: 15px;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 20px;
    position: relative;
}
.recommend-sidebar .recommend-box .rec-list li a:hover {
    color: #00a0e9;
}
.recommend-sidebar .recommend-box .rec-list li a::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #666;
    border-radius: 50%;
    margin-right: 5px;
}
.recommend-sidebar .recommend-box .rec-list li a:hover::before {
    background-color: #00a0e9;
}
.recommend-sidebar .recommend-box .rec-list li:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.recommend-sidebar .rec-contact {
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    gap: 15px;
    width: 100%;
    background-color: #00a0e9;
    padding: 20px 20px;
    border-radius: 5px;;
}
.recommend-sidebar .rec-contact p {
    font-size: 18px;
    color: #fff;
    line-height: 1.8;
}
.recommend-sidebar .rec-contact button {
    padding: 0;
    background-color: #fff;
    color: #000;
    border-radius: 5px;
    border: none;
    display: flex;    
}
.recommend-sidebar .rec-contact button a {
    padding: 15px 30px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    border-radius: 5px;
}
.recommend-sidebar .rec-contact button a:hover {
    color: #fff;
    background-color: #0489C6;
}

.section-technical-support {
    padding: 60px 0;
    background-color: #F6F6F6;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.technical-support {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.technical-support h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: #333;
}
.document-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}
.document-list .item {
    display: flex;
    flex-flow: column;
    gap: 20px;
    width: calc((100% - 90px) / 4);
    padding: 20px 20px;
    background-color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.document-list .item:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.document-list .item .image-link {
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.document-list .item .image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.document-list .item:hover .image-link img {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.document-list .item h3 {
    display: flex;
    width: 100%;
}
.document-list .item h3 a {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}
.document-list .item:hover h3 a {
    color: #00a0e9;
}
.document-list .item p {
    font-size: 16px;
    line-height: 1.6;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
.document-list .item .down-btn {
    font-size: 16px;
    color: #fff;
    background-color: #00a0e9;
    border-radius: 5px;
    width: 100%;
    padding: 12px 0;
    text-align: center;
}
.document-list .item .down-btn:hover {
    background-color: #0489C6;
}
.technical-support .more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.technical-support .more-btn a {
    border: 1px solid #00a0e9;
    color: #000;
    font-size: 18px;
    border-radius: 40px;
    padding: 15px 50px;
}
.technical-support .more-btn a:hover {
    background: #00a0e9;
    color: #fff;
}
.questoon-list {
    display: flex;
    flex-flow: column;
    gap: 30px;
    width: 100%;
}
.questoon-list .item {
    background-color: #fff;
    padding: 30px 30px;
    display: flex;
    flex-flow: column;
    gap: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.questoon-list .item:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.questoon-list .item h3 {
    display: flex;
    width: 100%;
}
.questoon-list .item h3 a {
    font-size: 20px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.questoon-list .item:hover h3 a {
    color: #00a0e9;
}
.questoon-list .item p {
    font-size: 16px;
    line-height: 1.6;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
.support-box {
    padding: 100px 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: url(../image/message.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.support-box h2 {
    font-size: 32px;
    font-weight: bold;
    color: #fff ;
}
.support-box p {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
}
.support-box a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 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: #BD2B15;
}

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

.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: #BD2B15;
    position: relative;
}

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

.strength .item .t .u {
    font-size: 16px;
    color: #BD2B15;
    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: #BD2B15;
}

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

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

.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: #BD2B15;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.history .swiper-button-next:after, .history .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
    color: #BD2B15;
    -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: #BD2B15;
}

.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: #BD2B15;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s
}
.cons .con .page-menus .nav .list .cate i {
    width: 12px;
    height: 12px;
    background-position: -120px 0;
}


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

.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: #BD2B15;
    border-bottom: 1px dashed #BD2B15;
    color: #fff;
}
.cons .con .page-menus .nav .list .children:last-of-type:hover,.cons .con .page-menus .nav .list .children:last-of-type.active {
    background: #BD2B15;
    border-bottom: none;
    color: #fff;
}

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

.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: #BD2B15;
    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: center;
    border: 1px solid #eee;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    width: 100%;
    padding: 15px 0;
}

.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: 16px;
    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: #BD2B15;
    color: #fff;
    border: 1px solid #BD2B15;
}

.cons .works .works-cate .shows {
    width: 70px;
    color: #BD2B15;
    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: #BD2B15;
}

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

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

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

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

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

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

.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: #BD2B15;
    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 {
    margin-top: 20px;
    line-height: 28px;
    margin-bottom: 40px;
    width: 100%;
}

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

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

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

.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 #BD2B15;
    padding: 10px 10px;
}

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

.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: #BD2B15;
    color: #fff;
    border: 1px solid #BD2B15;
}

.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 #BD2B15;
    border-radius: 5px;
}

.cons .con .details .contact-box .lbox .box .name {
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #BD2B15;
    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,.pagination li span {
    background: #fff;
    border: 1px solid #ccc;
    color: #000;
    font-size: 14px;
    padding: 6px 12px;
    margin: 0 5px;
    border-radius: 3px;
}

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

.pagination li a:hover {
    color: #00a0e9;
    background: #fff;
    border: 1px solid #00a0e9;
}

.pagination li.active span {
    color: #fff;
    background: #00a0e9;
    border: 1px solid #00a0e9;
}

/* ----- 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;
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: -139px 0;
    width: 139px;
    height: 26px;
    -webkit-transition: all 0s;
    transition: all 0s;
}
.m-head-box.bg .m-logo a {
    background-position: -139px 0;
}


.m-head-box .m-head-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

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

.section-page-about {
    display: flex;
    width: 100%;
    padding: 80px 0;
}
.section-page-about .page-about {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 40px;
}
.section-page-about .page-about h2 {
    font-size: 28px;
    color: #000;
    text-align: center;
}
.section-page-about .page-about h2.mt {
    margin-top: 80px;
}
.section-page-about .page-about .abt-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    width: 100%;
}
.section-page-about .page-about .abt-intro .intro {
   font-size: 18px;
   color: #333;
   line-height: 30px;
   width: 45%;
}
.section-page-about .page-about .abt-intro .image {
    display: flex;
}
.section-page-about .page-about .abt-intro .image img {
    width: 100%;
}
.section-page-about .page-about .abt-list {
    display: flex;
    width: 100%;
}
.section-page-about .page-about .abt-list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.section-page-about .page-about .abt-list ul li {
    width: calc(100% / 3);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 30px;
    padding: 150px 100px;
    cursor: pointer;
}
.section-page-about .page-about .abt-list ul li:first-of-type {
    background-image: url('../image/ab-1.jpg');
}
.section-page-about .page-about .abt-list ul li:nth-of-type(2) {
    background-image: url('../image/ab-2.jpg');
}
.section-page-about .page-about .abt-list ul li:nth-of-type(3) {
    background-image: url('../image/ab-3.jpg');
}
.section-page-about .page-about .abt-list ul li:hover {
    background-image:none;
    background-color: #00a0e9;
}
.section-page-about .page-about .abt-list ul li i {
    width: 156px;
    height: 156px;
}
.section-page-about .page-about .abt-list ul li i.i-1 {
    background-position: 0 -580px;
}
.section-page-about .page-about .abt-list ul li i.i-2 {
    background-position: -170px -580px;
}
.section-page-about .page-about .abt-list ul li i.i-3 {
    background-position: -340px -580px;
}
.section-page-about .page-about .abt-list ul li h3 {
    font-size: 30px;
    color: #fff;
}
.section-page-about .page-about .abt-list ul li p {
    font-size: 18px;
    color: #fff;
    height: 64px;
    line-height: 32px;
    text-align: center;
    width: 100%;
}
.section-page-about .page-about .contact-ul {
    display: flex;
    width: 100%;
}
.section-page-about .page-about .contact-ul ul {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    width: 100%;
}
.section-page-about .page-about .contact-ul ul li {
    width: calc((100% - 120px) / 3);
    padding: 30px 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}
.section-page-about .page-about .contact-ul ul li .icon-box {
    width: 120px;
    height: 100px;
    background-color: #00a0e9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.section-page-about .page-about .contact-ul ul li .icon-box i {
    width: 48px;
    height: 48px;
}
.section-page-about .page-about .contact-ul ul li .icon-box i.i-tel {
    background-position: -180px -430px;
}
.section-page-about .page-about .contact-ul ul li .icon-box i.i-email {
    background-position: -228px -430px;
}
.section-page-about .page-about .contact-ul ul li .icon-box i.i-address {
    background-position: -276px -430px;
}
.section-page-about .page-about .contact-ul ul li .icon-box i.i-siteweb {
    background-position: -324px -430px;
}
.section-page-about .page-about .contact-ul ul li p {
    font-size: 16px;
    color: #666;
    line-height: 30px;
    width: 100%;
}
.section-page-about .page-about .contact-ul ul li p span {
    color: #000;
    font-size: 20px;;
}