/* 斜体 */

@font-face {
    font-family: "YSoppo";
    src: url(../font/YSoppo-Bold.ttf);
}

/* =====================================================================公共 */

/*滚动条宽高及背景*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/*轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: fff;
    border-radius: 0px;
}

/*滑块*/
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #0092f6;
}

/*两端按钮*/
::-webkit-scrollbar-button {
    background-color: none;
    height: 0;
}

/*右下角汇合处样式*/
::-webkit-scrollbar-corner {
    background: khaki;
}

/*  */

.inner {
    width: 90%;
    margin: 0 auto;
}

.innerN {
    width: 84%;
    margin: 0 auto;
}

.padd {
    padding: 98px 0;
}

.Tit {
    margin-bottom: 68px;
    position: relative;
    z-index: 2;
}

.Tit b {
    display: inline-block;
    font-size: 68px;
    line-height: 1;
    color: #333;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    padding-bottom: 15px;
}

.Tit span {
    display: inline-block;
    font-size: 52px;
    line-height: 1;
    color: #00a28c;
    font-weight: 400;
    text-transform: capitalize;
    position: relative;
}

/* .Tit span::after{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
} */

.Tit p {
    padding-top: 15px;
    font-size: 20px;
    color: #001012;
}

.Tit.center {
    text-align: center;
}

.Tit.white span {
    color: #fff;
}

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


.Tit p {
    font-size: 18px;
    color: #333;
}

.Tit.white p {
    color: #fff;
}

.More {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 80px;
    overflow: hidden;
}

.More a {
    font-size: 16px;
    color: #00a28c;
    border: 1px solid #00a28c;
    border-radius: 80px;
    padding: 15px 28px;
    position: relative;
    overflow: hidden;
}

.More a::after {
    content: '';
    width: 1px;
    height: 80%;
    border-left: 1px solid #00a28c;
    position: absolute;
    top: 0;
    left: 70%;
    transition: all .48s;
}

.More a::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgb(0 151 177 / 20%);
    border-radius: 0 80px 80px 0;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-70%);
    z-index: -1;
    transition: all .48s;
}

.More a img {
    width: 16px;
    margin-left: 70px;
}

.More:hover a::before {
    transform: translateX(70%);
}

.More:hover a::after {
    height: 0;
}

.More.white a {
    color: #fff;
    border-color: #fff;
}

.More.white a::before {
    background: rgba(255, 255, 255, 0.2);
}

.More.white a::after {
    border-color: #fff;
}

/*  */
/* .More {
    display: inline-block;
    max-width: 300px;
    position: relative;
    cursor: pointer;
}

.More a:hover .img1 {
    display: block;
}

.More a:hover .img2 {
    display: none;
}

.More.white a {
    color: #fff;
    border-color: #fff;
}

.More.white a:hover {
    background: none;
}

.More.white a:hover .img2 {
    display: block;
}

.More.white a:hover .img1 {
    display: none; 
}*/



/* =================================================================================index */

/* 手机导航 */

.headMenu {
    cursor: pointer;
    position: fixed;
    z-index: 99999;
    top: 25px;
    right: 0;
    display: none;
    margin-right: 24px;
}

.headMenu span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 6px 0;
    background: #fff;
    -webkit-transition: all 0.48s ease-in-out;
    -moz-transition: all 0.48s ease-in-out;
    -ms-transition: all 0.48s ease-in-out;
    -o-transition: all 0.48s ease-in-out;
    transition: all 0.48s ease-in-out;
}

.headerMain-bg .headMenu span {
    background: #333;
}

.headerN.header .headMenu span {
    background: #333;
}

.headMenu.active span {
    background: #333;
}

.headMenu.active span.headMenu_span1 {
    transform: rotate(45deg) translate(6px, 7px);
}

.headMenu.active span.headMenu_span2 {
    opacity: 0;
}

.headMenu.active span.headMenu_span3 {
    transform: rotate(-45deg) translate(4px, -6px);
}

.moHead_mlb {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background-color: #fff;
    /* background-image: url(.../images/bg3.jpg); */
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
    z-index: 99990;
    padding: 28px 0;
}

.moHead_mlb .moHead_ico {
    text-align: center;
}

.moHead_mlb .moHead_ico a:last-child {
    display: inline-block;
}

.moHead_mlb ul {
    padding: 68px 0;
}

.moHead_mlb li {
    font-size: 18px;
    line-height: 2;
    /* padding: 14px 28px; */
    border-bottom: 1px solid rgba(27, 47, 95, 0.18);
}

.moHead_mlb a {
    font-size: 18px;
    color: #242b3e;
    letter-spacing: 1px;
}

.moHead_mlb a svg {
    float: right;
    width: 18px;
    height: 32px;
    opacity: 0.8;
    transition: all .48s;
}

.moHead_mlb a svg path {
    fill: #242b3e;
}

.moHead_mlb .moHead_ico a {
    vertical-align: top;
    margin: 0 14px;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(27, 47, 95, 0.23);
}

.moHead_mlb .moHead_ico svg {
    width: 24px;
    height: 24px;
}

.moHead_mlb .moHead_ico svg path {
    fill: #242b3e;
}

.moHead_mlb .moHead_ico img, .moHead_mlb .moHead_ico svg {
    margin-top: 10px;
}

/*  */

.moHead_mlb li.open a svg {
    transform: rotate(90deg);
}

.mlb_zk {
    display: none;
    padding: 10px 0 10px 30px;
}

.mlb_top {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mlb_zk a {
    font-size: 16px !important;
    display: block;
    color: #666;
    font-weight: 300;
    padding: 5px 0;
}

.moHead_mlb li.open .mlb_top {
    background: #00a18c;
    color: #fff;
}

.moHead_mlb li.open a svg path {
    fill: #fff;
}

@media (max-width: 1024px) {
    .headerBox {
        padding: 15px 0;
    }

    .headMenu {
        display: block;
    }

    .hLogo {
        position: relative;
        z-index: 99999;
    }


    .header.white .hLogo .img2 {
        display: block;
    }

    .header.white .hLogo .img1 {
        display: none;
    }
}

@media (max-width: 680px) {
    .moHead_mlb a {
        font-size: 16px;
    }

    .moHead_mlb a svg {
        width: 16px;
        height: 34px;
    }
}




/* 公共 */

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transition: all .48s;
    z-index: 999;
}

.headerBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.hLogo img {
    width: 168px;
}

.hLogo .img2 {
    display: none;
}

/*  */
.hNav ul {
    display: flex;
    align-items: center;
}

.hNav ul li {
    padding: 20px 0;
}

.hNav ul li .nav_a {
    padding: 10px 20px;
    margin: 0 20px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    transition: all .48s;
    opacity: .68;
    position: relative;
}

.hNav ul li a i {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0;
}

/* .hNav ul li.on a {
            background: #0197b1;
            border-radius: 80px;
            font-weight: 500;
        } */

.hNav ul li.on a {
    opacity: 1;
}

.hNav ul li.on a i {
    opacity: 1;
}

/*  */

.hR {
    display: flex;
    align-items: center;
    /* padding-right: 12%; */
}

.hNFl {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
}

.hNFl a {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}

.hNFl img {
    width: 30px;
    margin-right: 10px;
}

.hNFl svg {
    width: 16px;
    height: 16px;
}

.hNFl svg path {
    fill: #fff;
}

/*  */

.hSs {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
}

.hSs svg {
    width: 24px;
    height: 24px;
}

/*  */

.hTel {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
}

.hTel svg {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

.hTel svg path {
    fill: #fff;
}

.hTel a {
    font-size: 16px;
    font-family: "YSoppo";
    color: #fff;
    text-transform: uppercase;
}


/*  */

.hCon {
    width: 12%;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    background: #00a28c;
}

.hCon span {
    font-size: 16px;
    color: #fff;
}

.hCon img {
    width: 16px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

/*  */


.headerMain-bg.header {
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.headerMain-bg.header .img2 {
    display: block;
}

.headerMain-bg.header .img1 {
    display: none;
}

.headerMain-bg.header .hNav ul li a {
    color: #333;
}

.headerMain-bg.header .hNav ul li.on a i {
    color: #333;
    border-color: #333;
}

/* .headerMain-bg.header .hNav ul li.on a {
            color: #fff;
        } */

.headerMain-bg.header .hNFl,
.headerMain-bg.header .hTel,
.headerMain-bg.header .hSs {
    border-color: rgba(0, 0, 0, 0.28);
}

.headerMain-bg.header .hNFl a,
.headerMain-bg.header .hTel a,
.headerMain-bg.header .hSs {
    color: #333;
}

.headerMain-bg.header .hNFl svg path,
.headerMain-bg.header .hTel svg path,
.headerMain-bg.header .hSs svg path {
    fill: #333;
}


.white.header {
    background: #fff;
}

.white.header .img2 {
    display: block;
}

.white.header .img1 {
    display: none;
}

.white.header .hNav ul li a {
    color: #333;
}

.white.header .hNav ul li.on a i {
    color: #333;
    border-color: #333;
}


.white.header .hNFl,
.white.header .hTel,
.white.header .hSs {
    border-color: rgba(0, 0, 0, 0.28);
}

.white.header .hNFl a,
.white.header .hTel a {
    color: #333;
}

.white.header .hNFl svg path,
.white.header .hTel svg path,
.white.header .hSs svg path {
    fill: #333;
}

/*  */

@media (min-width: 1024px) {

    .header:hover {
        background: #fff;
    }

    .header:hover .hLogo .img2 {
        display: block;
    }

    .header:hover .hLogo .img1 {
        display: none;
    }

    .header:hover .hNav ul li .nav_a {
        color: #333;
    }

    .header:hover .hNav ul li a i {
        color: #333;
        border-color: #333;
    }

    .header:hover .hNFl a {
        color: #333;
    }

    .header:hover .hNFl svg path,
    .header:hover .hSs svg path {
        fill: #333;
    }

}

/* 二级导航 */

.nav_zk {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    padding: 75px 105px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: none;
}

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

.navZkL {
    width: 28%;
    border-right: 1px solid #eee;
}

.navZkL span {
    font-size: 36px;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.navZkR {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
}

.navZkR a {
    width: calc(33.33% - 35px);
    padding-bottom: 15px;
    margin: 10px 52px 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    position: relative;
}

.navZkR a::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #00a28c;
    position: absolute;
    right: 0;
    bottom: -1px;
}

.navZkR a small {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #333;
    color: #333;
    margin-right: 5px;
}

.navZkR a:nth-child(3n) {
    margin-right: 0;
}

.navZkR a:hover {
    color: #00a28c;
}

/* ============= */


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

.indBanBox {
    box-shadow: 0px 0px 20px 0 rgb(14 24 150 / 15%);
}

.indBan .swiper-container {
    width: 100%;
    height: 100%;
}

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

.indBanImg::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(21, 34, 61, 18%);
    position: absolute;
    left: 0;
    top: 0;
}

.indBanImg img {
    width: 100%;
    height: 100%;
    transform: scale(1.2) rotate(-5deg);
    object-fit: cover;
    transition: all 8s;
}

.indBanImg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.indBanBText {
    width:65%;
    position: absolute;
    left: 5%;
    top: 45%;
    z-index: 2;
}

.indBanBText span {
    display: block;
    font-size: 60px;
    /* font-weight: 600; */
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 15px;
    transform: translateY(150px);
    opacity: 0;
}

.indBanBText p {
    width: 70%;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 85px;
    transform: translateY(150px);
    opacity: 0;
}

.indBan_but a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: all .48s;
}

.indBan_but a:hover {
    background: #fff;
}

.indBan_but a .img2 {
    display: none;
}

.indBan_but a:hover .img2 {
    display: block;
}

.indBan_but a:hover .img1 {
    display: none;
}

.indBan_but a img {
    width: 16px;
}


.jdt {
    width: 100%;
    height: 3px;
    background: rgb(0 176 206 / 26%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.jdt i {
    width: 0;
    height: 100%;
    background: #00a28c;
    position: absolute;
    left: 0;
    top: 0;
    animation: traR 8s linear infinite;
    animation-play-state: paused;
}

@keyframes traR {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.js_indBan .swiper-slide-active .jdt i {
    animation-play-state: running;
}

.js_indBan .swiper-slide-active .indBanImg img {
    transform: scale(1) rotate(0);
    transition: all 8s;
}

.js_indBan .swiper-slide-active .indBanBText span,
.js_indBan .swiper-slide-active .indBanBText p {
    transform: translateY(0);
    opacity: 1;
    transition: all 2s;
}

/*  */
.js_indBan .swiper-pagination {
    width: auto;
    height: 200px;
    position: absolute;
    left: 5%;
    top: 35%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
}

.js_indBan .swiper-pagination-current {
    font-size: 65px;
    font-weight: 600;
    color: #fff;
}

.js_indBan .swiper-pagination-total {
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
}

.indBanB .swiper-wrapper {
    transition-delay: 1s;
}

.indBanB .swiper-slide-active .indBanBText span {
    color: #fff;
    transition-delay: 2s;
}

.indBanB .swiper-slide-active .indBanBImg img {
    transform: scale(1);
}

/*  */

.js_ChangeBox {
    width: 30%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    border-left: 1px solid #fff;
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 2;
}

.js_Change.swiper-container {
    width: 58%;
}

.js_ChangeImg {
    width: 100%;
    padding-top: 56%;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.js_ChangeBox .next {
    width: 38%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.js_ChangeBox .next img {
    width: 16px;
    margin-left: 10px;
}


/*  */

.indAb {
    /* background: url(../images/banAb.png); */
    background: #f0f5f7;
    background-repeat: no-repeat;
    background-size: cover;
}

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

.indAbImg {
    width: 45%;
    padding-top: 30%;
    border-radius: 20px;
}

.indAbText {
    width: 50%;
}

.indAbText .Tit{
    margin-bottom: 30px;
}

.indAbText .Tit span {
    color: #333;
}

.indAbText .Tit p{
    color: #00a28c;
}

.indAbText p {
    font-size: 18px;
    color: #666;
    line-height: 2;
}

.indAbText .More {
    margin-top: 88px;
}

/*  */

.indAbShuju {
    margin-top: 110px;
    padding: 55px 80px;
    border-top: 1px solid #bed4da;
    border-bottom: 1px solid #bed4da;
    display: flex;
    justify-content: space-between;
}

.indAbShuju_li span {
    display: block;
    font-size: 22px;
    color: #000;
    margin-top: 12px;
}

.indAbShuju_li p {
    font-size: 20px;
}

.indAbShuju_li p b,
.indAbShuju_li p i {
    font-size: 62px;
    font-family: "YSoppo";
    line-height: 1;
    font-weight: 600;
    color: #00a28c;
}

.indAbShuju_li p i {
    font-size: 50px;
}


/* pro */

.indPro {
    position: relative;
    overflow: hidden;
}

.indPro .Tit {
    position: relative;
    z-index: 3;
}

.indProBox {
    width: calc(100% + 120px);
    position: relative;
    display: flex;
    z-index: 2;
}

.indProItem {
    flex: 1;
    background: rgb(0 162 140 / 46%);
    border-radius: 20px;
    position: relative;
    transition: all .48s;
}

.indProItem:nth-child(1) {
    z-index: 1;
}

.indProItem:nth-child(2) {
    z-index: 2;
    transform: translateX(-30px);
}

.indProItem:nth-child(3) {
    z-index: 3;
    transform: translateX(-60px);
}

.indProItem:nth-child(4) {
    z-index: 4;
    transform: translateX(-90px);
}

.indProItem:nth-child(5) {
    z-index: 5;
    transform: translateX(-120px);
}


.indProImg {
    width: 100%;
    height: 56vh;
    border-radius: 20px;
}

.indProText {
    width: 100%;
    height: 100%;
    background: #6f7da4;
    padding: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .48s;
}

.indProText img {
    height: 60px;
    object-fit: contain;
    margin-bottom: 20px;
}

.indProText span {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    display: flex;
    align-items: center;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.indProText span svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.indProText p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin-top: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.indProText dl {
    width: 340px;
    margin-top: 80px;
    opacity: 0;
    pointer-events: none;
    transition: all .48s;
}

.indProText dd {
    padding: 5px 0;
    padding-left: 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.indProText dd::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.indProText i {
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 40px;
    bottom: 40px;
    transition: all .48s;
}

.indProText i img {
    width: 14px;
    height: auto;
    margin-bottom: 0;
    margin-left: 10px;
}

.indProText .More {
    position: absolute;
    left: 40px;
    bottom: 40px;
    opacity: 0;
    transition: all .48s;
}

.indProText .More a::before {
    z-index: 0;
}

.indProText .More a img {
    height: auto;
    margin-bottom: 0;
}

.indProText .num {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    color: transparent;

    font-weight: 600;
    font-size: 152px;
    line-height: 0.8;
    position: absolute;
    right: 30px;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: all .48s;
}

.indProText .Tu svg {
    width: 160px;
    height: 160px;
    opacity: 0.1;
    position: absolute;
    right: -10px;
    top: 45%;
    z-index: 2;
}

/*  */
.indProItem.on {
    flex: 3;
}

.indProItem.on .indProText p {
    width: 85%;
    opacity: 1;
}

.indProItem.on .indProText {
    background: rgba(0, 0, 0, 0.28) !important;
}

.indProItem.on .indProText .More {
    opacity: 1;
}

.indProItem.on .indProText i {
    opacity: 0;
}

.indProItem.on .indProText .num {
    opacity: 1;
    pointer-events: visible;
}

.indProItem.on .indProText span svg {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 80px;
    top: 50px;
}

/* indPro手机 */
.indProM {
    display: none;
    position: relative;
}

.indProM .indProItem {
    width: 100%;
}

.indPro_but {
    display: flex;
    align-items: center;
}

.indPro_but a {
    width: 35px;
    height: 35px;
    border: 1px solid #00a28c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    z-index: 2;
}

.indPro_but a.next {
    right: -2%;
}

.indPro_but a.prev {
    left: -2%;
}

.indPro_but a img {
    width: 16px;
}

/*  */

.indTs {
    background: url(../images/indTs_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.indTsItem {
    border-radius: 20px;
    position: relative;
}

.indTsImg {
    width: 100%;
    padding-top: 136%;
    border-radius: 20px;
    transition: all .68s;
}

.indTsText {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 25px;
    border-radius: 20px;
    z-index: 2;
    transition: all .68s;
}

.indTsText i {
    color: #fff;
}

.indTsText span {
    width: 82%;
    font-size: 21px;
    min-height: 67px;
    color: #fff;
    font-weight: 600;
    display: block;
}

.indTs_more {
    position: absolute;
    right: 30px;
    top: 30px;
}

.indTs_more img {
    width: 20px;
}

/*  */

.indTsChange {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.indTsChange .swiper-pagination {
    width: 85%;
    height: 1px;
    position: initial;
    background: rgb(0 162 140 / 40%);
}

.indTsChange .swiper-pagination-progressbar-fill {
    height: 2px;
    background: #00a28c;
}

.indTsChange .indTs_but {
    width: 10%;
}

.indTs_but {
    display: flex;
}

.indTs_but a {
    width: 50px;
    height: 50px;
    border: 1px solid #00a28c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.indTs_but a img {
    width: 20px;
}

.indTsItem:hover .indTsImg img {
    transform: scale(1.1);
}

/*  */

.indHz {
    position: relative;
    background: url(../images/indHz_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.indHzBox {
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.indHzL {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* .indHz_but {
    display: flex;
    padding-bottom: 20px;
} */

.indHzBut{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.indHzBut {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .8;
}

.indHzBut.prev{
    left: -5%;
}

.indHzBut.next{
    right: -5%;
}

.indHzBut img {
    width: 18px;
}

.indHzR {
    width: 70%;
    position: relative;
}

.js_indHz {
    width: 100%;
    position: relative;
}

.indHz_p {
    color: #333;
    font-size: 18px;
    line-height: 2;
    margin-bottom: 80px;
}


.js_indHz .swiper-slide {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.indHzImg {
    padding-top: 56%;
}

.indHzImg img {
    width: 70%;
    height: 60%;
    left: 15%;
    top: 20%;
    object-fit: contain;
}

/*  */

.indHzBut {
    display: flex;
    align-items: center;
}

.indHzBut a {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    transition: all .48s;
}

.indHzBut a:hover {
    border-color: #0048ff;
    background: #0048ff;
}

.indHzBut a.prev {
    position: relative;
}

.indHzBut a img {
    width: 14px;
}

@media(max-width: 1200px) {
    .indHzBut{
        display: inline-flex;
        position: initial;
        transform: translateY(0);
        margin-bottom: 20px;
    }
}
@media(max-width: 900px) {
    .indHz_p{
        margin-bottom: 30px !important;
    }

    .indHzBut{
        width: 30px;
        height: 30px;
    }
    .indHzBut img {
        width: 14px;
    }
}

/* ==========底部 */

.footer {
    background: #00a28c;
    background-repeat: no-repeat;
    background-size: cover;
}

.footTop {
    padding: 40px 0;
    border-bottom: 1px solid #e8e8e8;
}

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

.footLogo {
    display: block;
    width: 260px;
}

.footLogo img {
    width: 100%;
}

.footNum {
    margin-right: 200px;
    font-size: 24px;
    font-family: "YSoppo";
}

.footNum b {
    font-size: 18px;
    margin-right: 10px;
}

.backTop {
    position: absolute;
    right: 0;
    top: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.backTop img {
    width: 14px;
    opacity: 0.6;
}



.footer .inner {
    position: relative;
}

/*  */

.footBox {
    display: flex;
    justify-content: space-between;
    padding: 60px 0;
}

.footBox ul {
    width: 65%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.28); */
}

.footBox ul li a {
    display: block;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    margin-bottom: 20px;
}

.footBox ul li a span {
    font-size: 18px;
    color: #fff;
    padding-bottom: 25px;
}

.footBox ul li a:hover {
    color: #fff;
}


/*  */

.footL {
    width: 35%;
}

.footL h5 {
    font-size: 36px;
    color: #fff;
    font-weight: 600;
}

.footIcon {
    margin-top: 80px;
}

.footIcon span {
    display: block;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
}

.footIcon a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #00a28c;
    margin-right: 12px;
    vertical-align: bottom;
    transition: all .48s;
}

.footIcon a img {
    width: 20px;
}

.footIcon a:hover {
    background: #00a28c;
}

/*  */

.footBot {
    padding: 30px 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footEwm p {
    display: inline-block;
    margin: 0 10px;
}

.footEwm a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0 8px;
    vertical-align: bottom;
    transition: all .48s;
}

.footEwm span {
    color: #fff;
    display: block;
    text-align: center;
    margin-top: 8px;
}

/*  */

.footBot p,
.footBot p a {
    color: rgba(255, 255, 255, 0.3);
}

.footR_ul {
    padding-left: 20px;
    margin-top: 80px;
}

.footR_li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.footR_li span {
    display: block;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    text-transform: uppercase;
}

.footR_li p {
    color: rgba(255, 255, 255, 0.6);
    /* text-transform: uppercase; */
    font-size: 18px;
    display: flex;
    align-items: center;
}

.footR_li p img {
    width: 24px;
    margin-right: 20px;
}

/* =============================================================================内页公共 */


.headerN .headerBox {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.nav_zk {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.banN {
    width: 100%;
    height: 75vh;
    max-height: 730px;
    position: relative;
    z-index: 99;
}

.banNBox {
    width: 100%;
    height: 100%;
    position: relative;
}

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

.banNImg::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .16);
    position: absolute;
    left: 0;
    top: 0;
}

.banNImg img,
.banNImg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 8s;
}

.banNText {
    white-space: nowrap;
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}


.banNText span {
    color: #fff;
    font-size: 66px;
    /* font-weight: 600; */
    letter-spacing: 5px;
    line-height: 1;

    display: block;
    margin-bottom: 35px;
}

.banNText p {
    color: #49a2ff;
    font-size: 26px;
    letter-spacing: 1px;
    line-height: 1;
    display: block;
}

.banNDw {
    position: absolute;
    left: 5%;
    top: 57%;
    z-index: 2;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.68);
}

.banNDw a {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.68);
    font-size: 20px;
}

.banNDw a.on {
    color: #fff;
}

.banNDw a svg {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.banNDw a svg path {
    fill: rgba(255, 255, 255, 0.68);
}


/*  */

.dwNav {
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: 30px;
    display: flex;
    align-items: center;
}

.dwNav_L a {
    margin-left: 80px;
    display: inline-block;
    color: rgba(0, 0, 0, 0.68);
    color: rgb(0 163 140 / 68%);
    text-align: center;
    font-size: 20px;
    position: relative;
    transition: all .48s;
}

.dwNav_L a:hover {
    font-weight: 600;
    letter-spacing: 1px;
    color: rgb(0 163 140);
}

/* .dwNav_L a::after {
    content: '';
    width: 0;
    height: 3px;
    background: #333;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: all .48s;
} */

.dwNav_L a.on::after {
    width: 60px;
}


.dwNav_L a:hover::after {
    width: 60px;
}

.dwText span {
    color: #333;
    font-size: 66px;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1;

    display: block;
    margin-bottom: 30px;
}

.dwText p {
    color: #333;
    font-size: 26px;
    line-height: 1;
    display: block;
}

.dwNav_r {
    display: flex;
    align-items: center;
    color: rgb(255 255 255 / 40%);
}

.dwNav_r a {
    display: flex;
    align-items: center;
    color: rgb(255 255 255 / 40%);
    font-size: 20px;
    padding-left: 25px;
    margin-left: 25px;
    position: relative;
}

.dwNav_r a::after {
    content: '';
    width: 1px;
    height: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.dwNav_r a.on {
    color: #fff;
}

.dwNav_r a:hover {
    color: #fff;
}

.dwNav_r svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.dwNav_r svg path {
    fill: rgb(255 255 255 / 40%);
}


/* =====================================================================  about */

.abJj {
    width: 100%;
    background: url(../images/abJj_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    padding-bottom: 0 !important;
}


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

.abJjImg {
    width: 48%;
    padding-top: 30%;
    border-radius: 20px;
}

/*  */

.abJjText {
    width: 48%;
    position: relative;
    z-index: 2;
}

.abJjText .Tit {
    margin-bottom: 30px;
}

.abJjText .Tit span {
    color: #333;
}

.abJjText .Tit p {
    color: #00a28c;
}


.abJjText_p {
    color: #666;
    line-height: 2;
    font-size: 18px;
    margin-bottom: 15px;
}


/*  */

.abShuju {
    overflow: hidden;
    margin-top: 50px;
    padding: 80px 0;
    border-top: 1px solid #bed4da;
    display: flex;
    justify-content: space-between;
}

.abShuju_li {
    /* padding: 0 60px; */
    padding-right: 100px;
    position: relative;
}

.abShuju_li:first-child {
    padding-left: 0;
}

.abShuju_li:last-child {
    padding-right: 0;
}

.abShuju_li:last-child::after {
    display: none;
}

.abShuju_li::after {
    content: '';
    width: 1px;
    height: 80%;
    border-left: 1px solid #ddd;
    position: absolute;
    right: 0;
    top: 10%;
}

.abShuju_li span {

    display: block;
    font-size: 20px;
    color: #666;
    margin-top: 12px;
}

.abShuju_li p {
    font-size: 18px;
    padding-right: 100px;
    color: #666;
    position: relative;
}

.abShuju_li p b,
.abShuju_li p i {
    font-size: 62px;
    font-family: "OPPOSans";
    line-height: 1;
    font-weight: 600;
    color: #00a28c;
}

.abShuju_li p i {
    font-size: 50px;
}

.abShuju_li p img {
    width: 28px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/*  */

.abWh {
    position: relative;
}

.abWhImg {
    padding-top: 51%;
    display: none;
}

.abWhImg:first-child {
    display: block;
}


.abWh .Tit {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 108px;
    z-index: 2;
}

/*  */

.abWhBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.abWhItem {
    width: 33.33%;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.abWhItem:last-child {
    border-right: none;
}

.abWhText {
    width: 100%;
    padding: 0 40px;
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    transition: all .48s;
}

.abWhText img {
    width: 68px;
    transition: all .48s;
}

.abWhText i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #4ecebf;
    margin: 20px auto 30px;
}

.abWhText span {
    color: #fff;
    display: block;
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: all .48s;
}

.abWhText p {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    font-size: 18px;
    transition: all .48s;
}


.abWhItem .num {
    font-size: 26px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    opacity: 0.36;
    z-index: 2;
}

.abWhItem:hover .abWhText span {
    color: #00a28c;
}

.abWhItem:hover .abWhText span,
.abWhItem:hover .abWhText p {
    transform: translateY(10px);
}

.abWhItem:hover .abWhText img {
    transform: translateY(-10px);
}

.abWhItem:hover .num {
    opacity: 1;
}


/*  */

/*  */

.abRyu {
    background: url(../images/abRyu_bg.png) no-repeat;
    background-size: cover;
}

.abRyu_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 40px;
    margin-bottom: 60px;
}

.abRyu_top .Tit {
    width: 50%;
    margin-bottom: 0;
}

.abRyu_top .Tit p {
    padding-top: 40px;
}

.indRyuBut {
    transform: translateY(30px);
}

.indRyuBut a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #333;
    margin-right: 20px;
}

.indRyuBut a img {
    width: 20px;
}

/*  */

.abRyuBox {
    padding-left: 5%;
}

.abRyuR {
    width: 100%;
}

.abRyuR .swiper-slide {
    padding: 20px;
    background: #fff;
}

.abRyuImg {
    padding-top: 76%;
    /* border: 4px solid #4ecebf; */
}

.abRyuImg img {
    object-fit: contain;
}

.abRyuText {
    padding-top: 40px;
}

.abRyuText p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #666;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.abRyuText p i {
    font-size: 20px;
    font-weight: 600;
    color: #00a28c;
}

.abRyuText span {
    font-size: 18px;
    font-weight: 600;
    display: block;
}

.abRyuR_xq .swiper-pagination {
    bottom: 0;
}

.abRyuR_xq .swiper-pagination-bullet {
    width: 18px;
    height: 5px;
    margin: 0 5px;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.18);
}

.abRyuR_xq .swiper-pagination-bullet-active {
    width: 32px;
    background: #00a28c;
}


/* == */

.abZgs {
    position: relative;
}

.abZgsBox {
    padding: 2%;
}

.ywbt_text {
    width: 100%;
    background: #fff;
    text-align: left;
    position: relative;
    box-shadow: 0 0px 14px 0px rgb(0 0 0 / 10%);
    padding: 48px 50px 58px;
    border-radius: 20px;
}

.ywbt_text i {
    position: absolute;
    bottom: 20px;
    right: 50px;
    /* background: #00a28c; */
    color: #00a28c;
    /* display: inline-block;
            width: 82px;
            height: 42px;
            line-height: 42px; */
    opacity: 0.22;
    text-align: center;
    letter-spacing: 2px;
    font-size: 86px;
    line-height: 1;
    font-weight: 600;
}

.ywbt_text h3 {
    color: #00a28c;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    font-size: 26px;
    padding-bottom: 6px;
    border-bottom: 2px dotted #eee;
    margin-bottom: 24px;
}

.ywbt_text p {
    margin-top: 5px;
    letter-spacing: .5px;
    min-height: 72px;
    opacity: 1;
    color: #333;
    font-size: 18px;
    margin-bottom: 28px;
}

.ywbt_text span {
    color: #00a28c;
    font-size: 13px;
    text-decoration: underline;
}

.abZgs_but {
    width: 50px;
    height: 50px;
    border: 1px solid #00a28c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 55%;
    z-index: 2;
}

.abZgs_but img {
    width: 20px;
}

.abZgs_but.prev {
    left: 2%;
}

.abZgs_but.next {
    right: 2%;
}


/* == */

.abHis {
    background: url(../images/abHis_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}


.abHisBox {
    position: relative;
    padding: 0 5%;
}

.abHisBox::after {
    content: '';
    width: 100%;
    height: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    /* background: url(./images/abHis_x.png) no-repeat; */
    background-size: cover;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.abHis_but a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.abHis_but img {
    width: 20px;
}


/*  */

.js_abHis {
    width: 100%;
}

.js_abHis .swiper-slide {
    width: 25%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.js_abHis .swiper-slide i {
    width: 10px;
    height: 10px;
    background: #00a28c;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 2;
}

.js_abHis .swiper-slide i::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: df 5s infinite linear;
}

@keyframes df {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.abHisItem {
    min-height: 280px;
}

.abHisTop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.abHisItem span {
    padding: 20px;
    font-size: 46px;
    line-height: 1;
    color: #fff;
    letter-spacing: -1px;
    font-weight: 600;
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.abHisBot {
    position: relative;
}

.abHisText {
    width: 100%;
    height: 100%;
    border-left: 1px solid #ddd;
}

.abHisTop .abHisText {
    padding: 10px 20px 30px;
}

.abHisBot .abHisText {
    padding: 30px 20px 10px;
}

.abHisItem p {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.abHisItem p i {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}




/* =========================================================================pro */


.Product {
    background: #f5f9fa;
}

.proBox {
    display: flex;
    justify-content: space-between;
}

.proL {
    width: 400px;
}

.proNav {
    width: 100%;
    position: sticky;
    top: 185px;
}

.Product .Tit {
    margin-bottom: 40px;
}

.Product .Tit span {
    color: #333;
    font-weight: 600;
}

.proNav ul li {
    padding: 0 26px 48px;
    border-radius: 20px;
    background: #00a28c;

}

.proNav ul li:nth-child(2) {
    transform: translateY(-30px);
}

.proNav ul li:nth-child(3) {
    transform: translateY(-60px);
}

.proNav ul li:nth-child(4) {
    transform: translateY(-90px);
}

.proNav ul li:nth-child(2n) {
    background: #0063cb;
}

.proNav ul li:last-child {
    padding-bottom: 18px;
}

.proNav ul li span {
    padding-top: 22px;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.proNav ul li span img {
    width: 18px;
    transform: rotate(-45deg);
}

.proNav ul li span .img2 {
    display: none;
}

.proNav_zk {
    display: none;
    padding-top: 18px;
}

.proNav_zk a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-radius: 50px;
    background: #f4f4f4;
    color: #999;
    font-size: 16px;
    margin-bottom: 10px;
}

.proNav_zk a.on {
    color: #000;
    font-weight: 600;
}

.proNav_zk a.on i {
    background: #000;
}

.proNav_zk a i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #adadad;
}

/*  */
/* .proNav ul {
    margin-bottom: -60px;
} */

/* .proNav ul li.on {
    border-top: 5px solid #0063cb;
    background: #fff;
} */

/* .proNav ul li.on:nth-child(2n) {
    border-color: #00a28c;
}

.proNav ul li.on span {
    color: #333;
}

.proNav ul li.on span .img2 {
    display: block;
}

.proNav ul li.on span .img1 {
    display: none;
} */

.proCon {
    padding: 30px 40px 30px 30px;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
}

.proCon img {
    width: 58px;
    margin-right: 20px;
}

.proConText p {
    display: block;
    font-size: 20px;
    font-weight: 600;
}

.proConText a {
    font-size: 22px;
    font-weight: 500;
    color: #00a28c;
    text-decoration: underline;
}

/*  */

.proXq {
    width: calc(100% - 465px);
}

.proXqWarp {
    background: #fff;
    border-radius: 20px;
    padding: 60px 65px;
    margin-bottom: 80px;
}

.proXqWarp:last-child {
    margin-bottom: 0;
}

.proXq_tit {
    margin-bottom: 30px;
}

.proXq_tit span {
    position: relative;
    font-size: 36px;
    font-weight: 600;
}

.proXqItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.proXqLi {
    padding: 25px 25px;
    width: calc(33.33% - 8px);
    background: #f6f8fa;
    border-radius: 10px;
    margin-bottom: 12px;
    position: relative;
}

.proXqLi img {
    width: 28px;
    margin-bottom: 20px;
}

.proXqLi span {
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.proXqLi p {
    min-height: 78px;
    color: #666;
    font-size: 16px;
}

.proXqLi i {
    width: 60px;
    height: 50px;
    padding-left: 10px;
    background: #ddefef;
    color: #00a28c;
    font-size: 18px;
    border-radius: 0 10px 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
}

/*  */

.proQh {
    display: none;
}

/* .proQh:first-child {
    display: block;
} */

/* == */
.proXqTable_change {
    margin: 40px 0 20px;
    display: flex;
    border-bottom: 2px solid #999;
}

.proXqTable_change span {
    flex: 1;
    text-align: center;
    font-size: 20px;
    line-height: 1.8;
    padding-bottom: 10px;
    position: relative;
    cursor: pointer;
}

.proXqTable_change span::after {
    content: '';
    width: 0;
    height: 2px;
    background: #00a28c;
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
}

.proXqTable_change span.on {
    color: #00a28c;
    font-weight: 600;
}

.proXqTable_change span.on::after {
    width: 100%;
}

.proXqTable_head {
    display: flex;
    justify-content: space-between;
    background: #ecf5f0;
}

.proXqTable_head span {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 30px;
}

/* .proXqTable_head span:nth-child(1),
.proXqTable_li span:nth-child(1) {
    flex: 0.5;
} */

.proXqTable_li {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    padding: 20px 0;
}

.proXqTable_li:nth-child(2n) {
    background: #f6f7fa;
}

.proXqTable_li span {
    padding: 0 30px;
    font-size: 18px;
    flex: 1;
}

/* == */


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

.proXq_ss {
    width: 300px;
    position: relative;
}

.proXq_ss a {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.proXq_ss a svg {
    width: 100%;
    height: 100%;
}

.proXq_ss input {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.proXq_ss input::placeholder {
    font-size: 16px;
    color: #999;
}

/* .proXqHead_mah span:nth-child(3) {
    flex: 2;
} */

.proXqHead_mah span:nth-child(4) {
    flex: 0.5;
}

.proXqTable_mah .proXqTable_li span b {
    font-size: 18px;
    color: #ff0023;
}

/* .proXqTable_mah .proXqTable_li span:nth-child(3) {
    flex: 2;
} */

.proXqTable_mah .proXqTable_li span:nth-child(4) {
    flex: 0.5;
}


/* === */

/* .proXqFx {
    display: flex;
    flex-wrap: wrap;
} */

.proXqFxItem {
    /* width: calc(33.33% - 20px);
    margin-right: 30px; */
    display: flex;
    justify-content: space-between;
    /* border-radius: 20px;
    background: #f6f8fa;
    padding: 40px 30px;
    margin-bottom: 20px; */
}

.proXqFxDl {
    width: 60%;
}

.proXqFxDl .proXq_tit {
    margin-bottom: 60px;
}

.proXqFxDl p{
    font-size: 18px;
    line-height: 2;
}

.proXqFxDl dd {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 20px;
    background: #f6f8fa;
    font-size: 18px;
    margin-right: 25px;
    margin-bottom: 25px;
}

.proXqFxItem:nth-child(3n) {
    margin-right: 0;
}

.proXqFxText span {
    display: block;
    font-size: 20px;
    margin-bottom: 40px;
}

.proXqFxImg {
    width: 34%;
    padding-top: 46%;
}

.proXqFxImg span {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    font-size: 16px;
}

.proXqFxImg img {
    height: 90%;
    object-fit: contain;
}

/* == */

.proXq_mah {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.proXq_mah::after{
    content: '';
    width: calc(33.33% - 15px);
}

.proli_mah {
    width: calc(33.33% - 15px);
    margin-bottom: 25px;
    /* border-radius: 20px; */
    overflow: hidden;
    /* box-shadow: 0 0 15px rgb(51 51 51 / 8%); */
    padding: 20px;
    border: 1px solid rgb(164 164 164 / 8%);
    background: #f9f9f9;
}

.proli_mahImg {
    padding-top: 76%;
    background: #fff;
    
}

.proli_mahImg img {
    height: 80%;
    top: 10%;
    object-fit: contain;
}

.proli_mahText {
    padding: 20px 10px;
    /* background: linear-gradient(0deg, rgb(31 95 179) 0, rgb(10 178 160 / 95%) 100%); */
    text-align: center;
}

.proli_mahText span {
    font-size: 20px;
    color: #666;
    line-height: 1;
    display: block;
}

.proli_mahText p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.proli_mahText h5 {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

/* ====================================================================rd */

.rdTxBox {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 80px;
}

.rdTxText {
    width: 56%;
}

.rdTxText .Tit {
    margin-bottom: 0;
}

.rdTxText .Tit span {
    padding-bottom: 20px;
}

.rdTxText .Tit p {
    color: #666;
}


/*  */

.rdTx {
    background: #f3f6fb;
    position: relative;
}

.rdTxImgBox {
    width: 100%;
    padding-top: 32%;
    border-radius: 20px;
    overflow: hidden;
}

.rdTxImg {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.rdTxImg:first-child {
    display: block;
}

/*  */

.js_rdTx {
    position: relative;
}

.js_rdTxBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.js_rdTxText {
    width: calc(25% - 20px);
    border-radius: 20px;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    background: #fff;
    /* background: linear-gradient(0deg, rgb(31 95 179) 0, rgb(10 178 160 / 95%) 100%); */
}

.rdTxP {
    width: 100%;
    padding: 40px 40px 50px;
    transition: all .68s;
}

.rdTxP img {
    width: 60px;
    margin-bottom: 20px;
}

.rdTxP span {
    font-size: 24px;
    color: #333;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
    transition: all .48s;
}

.rdTxP p {
    color: #666;
    font-size: 16px;
    line-height: 2;
    transition: all .48s;

    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; */
}

/*  */

.js_rdTxText.on .rdTxP {
    transform: translateY(15px);
}

/* .js_rdTxText.on .rdTxP p {
    -webkit-line-clamp: 7;
} */


/*  */

.rdTxShuju {
    width: 35%;
    display: flex;
    justify-content: space-between;
}

.rdTxShuju_li {
    position: relative;
    width: calc(50% - 30px);
}

.rdTxShuju span {
    display: block;
    font-size: 20px;
    color: #333;
    margin-top: 12px;
    padding-bottom: 40px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

.rdTxShuju .tx {
    color: #999;
    white-space: nowrap;
}

.rdTxShuju p b {
    font-size: 52px;
    font-family: "YSoppo";
    line-height: 1;
    font-weight: 500;
    color: #00a28c;
}

.rdTxShuju p i {
    font-size: 20px;
    font-family: "YSoppo";
    line-height: 1;
    color: #00a28c;
    margin-left: 10px;
}


/* == */

.rdSb .Tit {
    margin-bottom: 40px;
}

.rdSbChange {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.rdSb_but{
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
}

.rdSb_but a {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .8;
    margin-left: 20px;
}

.rdSb_but a img{
    width: 18px;
}

.rdSbChange span {
    font-size: 20px;
    display: inline-block;
    padding-bottom: 20px;
    border-bottom: 4px solid transparent;
    margin-right: 60px;
    color: #999;
    cursor: pointer;
}

.rdSbChange span.on {
    font-weight: 600;
    color: #333;
    border-color: #00a28c;
}

.rdSb_p {
    font-size: 18px;
    line-height: 2;
    color: #999;
    margin-bottom: 50px;
}

/*  */

.js_rdSb {
    display: none;
}

.js_rdSb:first-child {
    display: block;
}

.rdSbImg {
    padding-top: 64%;
    border-radius: 40px;
    background: #f6f8fa;
}

.rdSbImg img {
    object-fit: contain;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
}

.rdSbImg span {
    display: block;
    width: 100%;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    z-index: 2;
}


/* == */

.rdTs {
    background: #f5f9fa;
}

.rdTsItem {
    margin-bottom: 15px;
}


.rdTsTop {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #00a18c;
    cursor: pointer;
}

.rdTsTop span {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

.rdTsTop img {
    width: 24px;
    transform: rotate(-90deg);
    transition: all .48s;
}

.rdTsItem.on .rdTsTop img {
    transform: rotate(0);
}

/*  */
.rdTsZk {
    display: none;
}

.rdTsTable_head {
    display: flex;
    justify-content: space-between;
    background: #14d0b7;
}

.rdTsTable_head span {
    flex: 1;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    padding: 18px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.rdTsTable_head span:last-child,
.rdTsTable_li span:last-child {
    flex: 3;
}

.rdTsTable_li {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.rdTsTable_li:nth-child(2n) {
    background: #f6f7f9;
}


.rdTsTable_li span {
    padding: 20px 30px;
    font-size: 18px;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #eee;
}

.rdTsTable_li p {
    padding: 20px 30px;
    font-size: 18px;
    flex: 3;
}

.rdTsTable_li p b {
    font-size: 18px;
    color: #ff0023;
}


/* == */

.rdTsBox {
    display: flex;
    justify-content: space-between;
}

.rdTsL {
    width: 20%;
}

.rdTsDl span {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #666;
    padding: 10px 20px;
    /* background: #efefef; */
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.rdTsDl p.on span {
    color: #fff;
    background: #00a38c;
}

.rdTsR {
    width: 80%;

    width: 100%;
}

.rdTsRXq {
    display: none;
}

.rdTsRXq:first-child {
    display: block;
}


/* == */

.rdTsPt {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
}

.rdTsR h5 {
    font-size: 30px;
    color: #333;
    font-weight: 500;
}

.rdTsPtBox {
    padding: 40px 0 10px;
    display: flex;
    flex-wrap: wrap;
}

/*  */

.circle {
    position: absolute;
    transition: all 2s cubic-bezier(.165, .84, .44, 1);
    border-radius: 100%;
    border: 1px solid #ebebeb;
    top: 50%;
    left: 50%;
    transform: scale(1)
}

.circle.circle-1 {
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px
}

.circle.circle-2 {
    opacity: .5;
    width: 120px;
    height: 120px;
    transition-delay: .1s;
    margin-left: -60px;
    margin-top: -60px
}

.circle.circle-3 {
    width: 165px;
    opacity: .3;
    height: 165px;
    transition-delay: .2s;
    margin-left: -82px;
    margin-top: -82px
}

/*  */

.joinZc_li {
    width: 33.33%;
    padding: 0 55px;
    position: relative;
    margin: 30px 0;
}

.joinZc_img {
    margin-left: -38px;
    position: relative;
    width: 80px;
}

.joinZc_img img {
    width: 100%;
}

.joinZc_img .img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    opacity: 0;
    transition: all .5s;
}



.joinZc_li span {
    color: #767676;
    font-size: 21px;
    display: block;
    margin-bottom: 25px;
}

.joinZc_li p {
    color: #767676;
    font-size: 14px;
    line-height: 20px;
    transition: all .3s;
}

.joinZc_li:hover .img2 {
    opacity: 1;
}

@media(max-width: 1368px) {

    .joinZc_img,
    .joinZc_img .img2 {
        width: 60px;
    }

    .joinZc_li {
        padding: 0 40px;
    }

    .joinZc_li {
        width: 50%;
    }
}


@media(max-width: 1680px) {
 
    .joinZc_li span {
        font-size: 18px;
        margin-bottom: 0;
    }
}

@media(max-width: 1480px) {
    .rdTsDl span {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .rdTsTable_head span {
        font-size: 18px;
    }

    /* == */

    .joinZc_li span {
        font-size: 16px;
    }

}

@media(max-width: 1200px) {
    .rdTsDl span {
        font-size: 14px;
        padding: 6px 15px;
        margin-bottom: 10px;
    }

    .joinZc_li {
        margin: 30px 0;
    }

    .joinZc_li span {
        font-size: 14px;
    }
}

@media(max-width: 1024px) {
    .rdTsBox {
        flex-wrap: wrap;
    }

    .rdTsL {
        width: 100%;
    }

    .rdTsDl {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .rdTsR {
        width: 100%;
    }
}

@media(max-width: 680px) {
    .rdTsDl span {
        font-size: 12px;
        padding: 4px 10px;
        margin-bottom: 10px;
    }

    .rdTsPt {
        padding: 20px;
    }

    .rdTsR h5 {
        font-size: 18px;
    }

    .rdTsPtBox {
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .rdTsPtL {
        margin-bottom: -15px;
    }

    .joinZc_li {
        margin: 15px 0;
        padding: 8px 10px 8px 40px;
    }

    .rdTsPtL .joinZc_li:nth-child(2n) {
        transform: translateX(0);
    }

    .rdTsPtR .joinZc_li:nth-child(2n) {
        transform: translateX(0);
    }

    .joinZc_li {
        width: 100%;
    }

    .joinZc_img,
    .joinZc_img .img2 {
        width: 40px;
    }

    .circle.circle-1 {
        width: 50px;
        height: 50px;
        margin-left: -25px;
        margin-top: -25px;
    }

    .circle.circle-2 {
        width: 80px;
        height: 80px;
        margin-left: -40px;
        margin-top: -40px;
    }

    .circle.circle-3 {
        width: 110px;
        height: 110px;
        margin-left: -55px;
        margin-top: -55px;
    }
}

/* =================================================================== new */

.newTop {
    padding: 100px 0;
    background: #f6f8fa;
    background-image: url(../images/newTop_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.newTop .swiper-slide {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.newTopImg {
    width: 50%;
    padding-top: 28%;
    border-radius: 20px 0 0 20px;
}

.newTopText {
    width: 50%;
    background: #fff;
    padding: 60px;
    border-radius: 0 20px 20px 0;
    z-index: 2;
}

.newTopText i {
    display: block;
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
}

.newTopText span {
    color: #333;
    font-size: 34px;
    display: block;
    margin-bottom: 30px;
}

.newTopText_div {
    margin-top: 160px;
    padding-top: 45px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


.newTop .swiper-pagination {
    right: 60px;
    bottom: 60px;
}

.newTop .swiper-pagination-bullet {
    width: 18px;
    height: 5px;
    margin: 0 5px;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.18);
}

.newTop .swiper-pagination-bullet-active {
    width: 32px;
    background: #00a28c;
}

/*  */
.newBot .Tit {
    margin-bottom: 0;
}

.newBotBox {
    padding: 60px 0 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.newItem {
    width: calc(50% - 18px);
    background: #f7f8fa;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 35px;
}

.newWarp {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.newText {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.newText span {
    font-weight: 600;
    font-size: 24px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all .48s;
}

.newText p {
    color: #999;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px;
    margin-bottom: 10px;
    transition: all .48s;
}

.newImg {
    width: 42%;
    padding-top: 38%;
    border-radius: 10px;
}

.newBtn {
    padding: 10px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newBtn i {
    color: #00a28c;
    font-size: 16px;
}

.newBtn b {
    display: inline-block;
    padding: 0 10px;
}


.newItem:hover .newImg img {
    transform: scale(1.1);
}

.newItem:hover span {
    color: #00a28c;
}

/* */

.newDw {
    padding: 0 5% 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.newDwL a {
    display: inline-block;
    color: #666666;
    font-size: 18px;
    border-bottom: 1px solid transparent;
    margin-right: 25px;
}

.newDwL a.on {
    font-weight: 600;
    color: #00a28c;
}

.fzq_jut .form {
    display: flex;
    align-items: center;
    transition: all 0.4s;
    width: 560px;
    background-color: #f7f8fa;
    border-radius: 5px;
    border: 1px solid transparent;
    padding-right: 30px;
}

.fzq_jut .form input {
    width: calc(100% - 24px);
    color: #666666;
    padding: 24px 20px;
    font-size: 16px;
    background: none;
}

.fzq_jut .form .f_sub {
    display: block;
    width: 22px;
    overflow: hidden;
    background: none;
}

.fzq_jut .form .f_sub img {
    width: 100%;
}

/* == */

.fanYe {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Fanye_a {
    display: inline-block;
    padding: 10px 60px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    background: #fff;
    font-weight: bold;
    transition: all .48s;
}

.Fanye_a:hover {
    color: #fff;
    background: #00a28c;
}

.FanyeXq a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 16px;
    border: 1px solid #e5e5e7;
    margin: 0 10px;
}

.FanyeXq a.on {
    color: #fff;
    background: #00a28c;
}

/* =====================================================================join */

.join_banNtext.banNText {
    width: 38%;
    white-space: nowrap;
    position: absolute;
    left: 15%;
    top: 25%;
    z-index: 3;
    transform: translate(0, 0);
}

.banN_tit {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.join_banNtext.banNText span {
    /* background-image: -webkit-linear-gradient(180deg, rgb(32 96 179) 20%, rgb(31 95 179) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    margin-bottom: 0;
}

.js_banN {
    height: 80px;
    margin-left: 10px;
}

.js_banN .swiper-slide {
    display: flex;
    align-items: center;
}

.js_banN b {
    color: #fff;
    font-size: 66px;
    font-weight: 600;
    letter-spacing: 5px;
}

.banNText p {
    font-size: 36px;
    color: #49a2ff;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-bottom: 60px;
}

.banNText a {
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: block;
    margin-top: 30px;
}

.banN_join {
    width: 70%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 15%;
    bottom: 10%;
    z-index: 3;
}

.banN_joinItem {
    width: 48%;
    display: block;
    text-align: center;
    padding: 85px 0;
    background: rgb(244 247 254 / 68%);
    border-radius: 10px;
    /* border: 1px solid #fcfdff; */
    position: relative;
}

.banN_joinItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    transition: all .48s;
}

.banN_joinItem svg {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.banN_joinItem span {
    color: #fff;
    font-size: 30px;
    position: relative;
    z-index: 2;
    display: block;
    transform: translateY(-40px);
    transition: all .48s;
}

.banN_joinItem:hover img {
    opacity: 0;
}

.banN_joinItem:hover span {
    color: #00a28c;
    font-weight: 600;
    transform: translateY(0);
}

/*  */

.join_banN {
    height: 84vh;
    max-height: 820px;
}

.joinFcBox .swiper-slide {
    transform: scale(0.8) translateY(12%);
    transition: all .48s;
}

.joinFcBox .swiper-slide-active {
    transform: scale(1) translateY(0);
}

.joinFcImg {
    padding-top: 56%;
}

.joinFcImg p {
    padding: 20px 30px;
    font-size: 24px;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.js_join {
    padding-bottom: 80px;
}

.js_join .swiper-pagination {
    bottom: 0;
}

.js_join .swiper-pagination-bullet {
    width: 100px;
    height: 3px;
    background: #dadbdc;
}

.js_join .swiper-pagination-bullet-active {
    background: #00a28c;
}

.joinFcImg:hover img {
    transform: scale(1.1);
}

/* == */

.joinFl {
    background: #f6f8fa;
}

/* .joinFlBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

.joinFlL {
    width: 40%;
}

.joinFlText {
    width: 100%;
}

.joinFlText .swiper-slide {
    opacity: 0 !important;
}

.joinFlText .swiper-slide-active {
    opacity: 1 !important;
}

.joinFlText h5 {
    width: 80%;
    font-size: 36px;
    color: #111;
    font-weight: 600;
    display: block;
    margin-top: 100px;
    margin-bottom: 30px;
    position: relative;
}

.joinFlText h5 i {
    font-size: 160px;
    line-height: 1;
    color: #056457;
    opacity: 0.1;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.joinFlText p {
    font-size: 20px;
    color: #999;
    line-height: 2;
    display: block;
    margin-bottom: 30px;
}

.joinFlImg {
    width: 50%;
    padding-top: 32%;
    overflow: initial;
    margin-bottom: 40px;
}

.joinFlImg img {
    z-index: 2;
}

.joinFlImg::after {
    content: '';
    width: 80%;
    height: 80%;
    background: #00a28c;
    position: absolute;
    left: -30px;
    bottom: -30px;
}

.swiper-slide-thumb-active p {
    color: #00a28c;
    font-weight: 600;
}

.swiper-slide-thumb-active p::after {
    width: 100%;
}


/* == */



/* ================================================================================ contact */

#dTu {
    width: 100%;
    height: 54vh;
    max-height: 525px;
    margin-top: 40px;
}

.conDz {
    display: flex;
    justify-content: space-between;
    z-index: 999;
}

.conDz_li {
    width: calc(33.33% - 20px);
    padding: 50px 80px;
    background: #f6f8fa;
    border-radius: 10px;
    position: relative;
}

.conDz_li::after {
    content: '';
    width: 0;
    height: 3px;
    background: #00a28c;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all .68s;
}

.conDz_li i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #00a28c;
    margin-bottom: 30px;
    transition: all .48s;
}

.conDz_li i img {
    width: 35px;
    height: auto;
}

.conDz_li span {
    font-size: 18px;
    color: #999;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.conDz_li p {
    font-size: 18px;
    color: #333;
}

.conDz_li p.color {
    font-family: "OPPOSans";
}

/*  */
.conDz_li:hover::after {
    width: 100%;
}

.conDz_li:hover i {
    transform: translateY(-10px);
}


/* == */

.conBot {
    background: #f6f8fa;
}

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

.conBotImg {
    width: 40%;
    padding-top: 46%;
    border-radius: 20px;
}


.conR_form {
    width: 60%;
    padding-left: 5%;
}



/*  */

.conR_form form {
    margin-bottom: 40px;
}


.conR_l {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.conR_ipt {
    width: calc(50% - 10px);
    margin-bottom: 20px;
}

.conR_ipt.w100 {
    width: 100%;
}

.conR_ipt input,
.conR_ipt textarea {
    width: 100%;
    background: none;
    border-bottom: 1px solid #ddd;
    padding: 25px;
}

.conR_ipt textarea {
    height: 100%;
    border-left: none;
}

.conR_ipt input::placeholder,
.conR_ipt textarea::placeholder {
    font-size: 16px;
    color: #999;
}


.conR_r .conR_ipt {
    width: 100%;
    height: 100%;
}

.conR_form .More {
    position: relative;
    z-index: 2;
}