.idxwrapper {
    height: 100vh;
}

.idxbanner {
    height: 100%
}

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

.bannerbox {
    position: relative;
    height: 100%
}

.bannerbox .container2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.bannerbox .contentbox .h1 {
    font-size: .58rem;
    color: #fff;
    line-height: .72rem;
}

.bannerbox .contentbox .h2 {
    font-size: .28rem;
    color: #fff;
    margin-top: .4rem;
}

.idxbanner .controlbox {
    position: absolute;
    bottom: 4vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.idxbanner .swiperbtn {
    display: flex;
    align-items: center;
    margin: 0 .36rem;
    cursor: pointer;
}

.idxbanner .swiperbtn div {
    font-size: .14rem;
    color: #fff;
    line-height: 1
}

.idxbanner .swiperbtn img {
    margin: 0 .1rem;
    transition: all .3s
}

.idxbanner .controlbox .line {
    width: 3.4rem;
    height: 2px;
    background: rgba(255, 255, 255, .6);
    position: relative;
}

.idxbanner .controlbox .line:after {
    content: "";
    left: 0;
    top: 0;
    height: 2px;
    background: #50a9b5;
    position: absolute;
    width: 0;
}

.idxbanner .controlbox .line.on:after {
    width: 100%;
    transition: all 5.2s linear
}

.idxbanner .controlbox .line.on2:after {
    width: 100%;
    transition: all 4s linear
}

.idxbanner .controlbox .line.on3:after {
    width: 100%;
    transition: all 40s linear
}

.idxbanner .swipernum {
    font-family: "DIN";
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: .22rem;
    color: #fff;
    z-index: 2
}

.idxbanner .swipernum .current {
    color: #50a9b5
}

.idxbanner .swipernum .line {
    width: .23rem;
    height: 1px;
    background: #fff;
    margin: 1.4vw auto
}

.idxbanner .swiper-slide-active .h1 {
    animation: fadeup 1s .5s;
    -webkit-animation: fadeup 1s .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.idxbanner .swiper-slide-active .h2 {
    animation: fadeup 1s .8s;
    -webkit-animation: fadeup 1s .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.idxbanner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.idxbox {
    height: 100vh
}

.index1 .item {
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}

.index1 .item .bgimg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.index1 .item .bottom {
    position: absolute;
    bottom: 5vw;
    left: 0;
    right: 0;
    text-align: center;
}

.index1 .item .bottom .h1 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.349);
    text-transform: uppercase;
}

.index1 .item .bottom .h2 {
    color: #fff;
    font-size: .48rem;
    margin-top: .25rem
}

.index1 .item .bottom .eyebox {
    width: .65rem;
    height: .38rem;
    margin: .4rem auto .3rem;
    background: #50a9b5;
    border-radius: .4rem;
    position: relative;
    cursor: pointer;
}

.index1 .item .bottom .eyebox img {
    width: .24rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.index1 .item .bottom .more {
    display: flex;
    align-items: center;
    width: 140px;
    justify-content: center;
    margin: 0 auto
}

.index1 .item .bottom .more img {
    margin-left: .24rem
}

.index1 .item .bottom .more div {
    font-size: .16rem;
    color: #fff;
    line-height: 1
}

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

.index2 .item {
    height: 100%;
    text-align: center;
    position: relative;
    transition: all .6s;
    width: 100%;
}

.index2 .bgimg {
    height: 100%;
}

.index2 .item .h1 {
    font-size: 12px;
    color: rgba(255, 255, 255, .349);
    text-transform: uppercase;
    margin-bottom: .2rem
}

.index2 .item .h2 {
    font-size: .48rem;
    color: #fff;
}

.index2 .item .eyebox {
    width: .65rem;
    height: .38rem;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #50a9b5;
    margin: .35rem auto .3rem
}

.index2 .item .eyebox img {
    width: .24rem
}

.index2 .item .more {
    display: flex;
    align-items: center;
    justify-content: center;
}

.index2 .item .more div {
    font-size: .16rem;
    color: #fff;
    margin-right: .1rem
}

.index2 .item .more img {
    transition: all .3s;
}

.index2 .item:nth-child(1) .bgimg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.index2 .item:nth-child(2) .bgimg {
    background-position: right;
}

.index2 .item .bottom {
    position: absolute;
    bottom: 8.3%;
    left: 0;
    right: 0;
    z-index: 3;
    transition: all .3s
}

.index2 .item:after {
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 90%;
    background: url(../images/idx2cover.png);
    background-size: cover;
    position: absolute;
    z-index: 2
}

.index2 .item.off {
    width: 25%
}

.index2 .item.on {
    width: 100%;
}

.index2 .item .bottom2 {
    position: absolute;
    bottom: 15%;
    font-size: .36rem;
    line-height: 1.5;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    transition: all .3s;
    opacity: 0;
    z-index: 3
}

.index2 .item.off .bottom2 {
    opacity: 1
}

.index2 .item.off .bottom {
    opacity: 0
}

.idx3box {
    height: 100%;
    background-size: cover;
}

.idx3box .container2 {
    height: 100%
}

.idx3bg {
    background-size: cover;
    position: absolute;
    background-position: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.idx3box2 {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    height: 100%;
    margin-right: -4vw
}

.idx3left .h1 {
    font-size: 2.5vw;
    color: #fff;
    line-height: 1.354;
    margin-top: -5vw
}

.idx3right {
    width: 50.5%;
}

.idx3right .item .h1 {
    font-size: 0
}

.idx3right .item .h1 .num {
    width: .38rem
}

.idx3right .item .h1 span {
    display: inline-block;
    font-size: .18rem;
    color: #fff;
}

.idx3right .item .content {
    padding: .38rem .56rem .36rem .38rem;
    display: none;
}

.idx3right .item .content p {
    font-size: .16rem;
    line-height: 1.75;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: .84rem;
}

.idx3right .item {
    padding: .24rem 0;
    display: block;
}

.idx3swpbox {
    position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    z-index: 3
}

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

.idx3swpbtn .item {
    width: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .15rem 0;
    border-top: 2px solid #fff;
    opacity: .5;
    cursor: pointer;
    transition: all .3s
}

.idx3swpbtn .item div {
    line-height: 1;
    font-size: .14rem;
    color: #fff
}

.idx3swpbtn .item img {
    margin: 0 .11rem;
    transition: all .3s
}

.index4 {
    position: relative;
}

.index4:after {
    content: "";
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: #f0f0f0;
    z-index: -1
}

.index4 .container2 {
    height: 100%;
}

.idx4box {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 1rem
}

.idx4left .item .time {
    position: relative;
    font-size: .16rem;
    color: #333;
    font-family: "DIN";
    line-height: 1;
    border-bottom: 1px solid #999;
    padding: .15rem 0;
    transition: all .3s
}

.idx4left .item .time:after {
    content: "";
    height: 1px;
    left: 0;
    transition: all .3s;
    background: #50a9b5;
    position: absolute;
    bottom: 0;
    width: 0
}

.idx4left .item .h1 {
    font-size: .18rem;
    color: #333;
    margin-bottom: .15rem;
    transition: all .3s
}

.idx4left .item .h2 {
    font-size: .16rem;
    color: #999;
    line-height: 1.75;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: .84rem;
}

.idx4left {
    width: 50%;
    padding-right: 11vw
}

.idx4left .item {
    display: block;
}

.idx4left .item .content {
    padding: 1.5vw .15rem 2.3vw 0;
    display: none;
}

.idx4left .item.on .time {
    color: #50a9b5;
    border-color: #fff
}

.idx4left .item.on .time:after {
    width: 100%
}

.idx4right {
    width: 27.6%;
    margin-left: 12%;
    position: relative;
    height: 65%;
}

.idx4right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.idx4right img.on {
    transform: rotate(0deg);
    opacity: 1;
    z-index: 10
}

.idx4right img.n1 {
    transform: rotate(4deg);
    opacity: 1;
    z-index: 9
}

.idx4right img.n2 {
    transform: rotate(8deg);
    opacity: 1;
    z-index: 8
}

.index5 {
    display: flex;
    align-items: center;
    background: url(../images/idx5bg.jpg);
    background-position: center;
    padding-top: 5%
}

.idx5con {
    margin-right: -4vw
}

.idx5box {
    height: 6rem;
    background: #fff;
    box-shadow: .27rem .3rem .43rem 0px rgba(0, 0, 0, 0.07);
}

.idx5-1box {
    padding: 0 .46rem;
}

.idx5box > div > .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
}

.idx5-1swiper {
    flex: 1
}

.idx5-3swiper {
    flex: 1
}

.idx5-1item {
    display: block;
    position: relative;
    overflow: hidden;
}

.idx5-1item img {
    transition: all .5s ease
}

.idx5-1item .title {
    background: rgba(0, 0, 0, .8);
    padding: .23rem 0;
    text-align: center;
    color: #fff;
    font-size: .16rem;
    border-radius: .2rem .2rem 0 0;
    line-height: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .5s ease
}

.idx5-1swpbtn {
    transition: all .3s;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    position: relative;
    background: #fff;
    box-shadow: 0rem 0rem 0.12rem 0.05rem rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 50%;
    margin-top: -.27rem;
    z-index: 5;
    cursor: pointer;
}

.idx5-1swpbtn img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all .3s
}

.idx5-1prev {
    left: .2rem
}

.idx5-1next {
    right: .2rem
}

.idx5-1swpbtn img:nth-child(2) {
    opacity: 0
}

.idx5-3prev {
    left: .2rem
}

.idx5-3next {
    right: .2rem
}

.idx5-3item {
    position: relative;
    height: 2.53rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx5-3item img:nth-child(1) {
    transform: translateX(50%);
    visibility: visible;
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0);
}

.idx5-3item img:nth-child(2) {
    transform: translateX(-50%);
    visibility: hidden;
    -webkit-clip-path: inset(50% 0 50% 0);
    clip-path: inset(50% 0 50% 0);
}

.idx5-3item img {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    max-width: 50%
}

.idx5-3item:after {
    content: "";
    transition: all .3s;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #50a9b5;
    transform: scale(.8);
    opacity: 0;
    z-index: -1
}

.idx5-2box {
    padding-left: 2.5vw
}

.idx5-2left {
    width: 3.15rem;
    height: 100%;
    padding: 4vw 0;
    position: relative;
}

.idx5-2lswiper {
    height: 100%;
    margin-left: -10px !important;
    padding-left: 10px !important
}

.idx5-2lswiper .item {
    padding-left: .26rem;
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.idx5-2lswiper .item .h1 {
    font-size: .18rem;
    color: #333;
    transition: all .3s;
    position: relative;
}

.idx5-2lswiper .item .h2 {
    font-size: .14rem;
    color: #a5a5a5;
    margin-top: .12rem;
}

.idx5-2lbtn {
    width: .32rem;
    height: .32rem;
    position: absolute;
    left: -.16rem;
    cursor: pointer;
}

.idx5-2lbtn img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.idx5-2lbtn.prev {
    top: .36rem
}

.idx5-2lbtn.next {
    bottom: .36rem
}

.idx5-2rswiper .item {
    display: flex;
    align-items: center;
    padding: 5vw 0
}

.idx5-2rswiper .item .headbox img {
    width: 1.83rem;
    height: 1.83rem;
    border-radius: 50%;
}

.idx5-2rswiper .item .headbox p {
    font-size: .28rem;
    color: #333;
    text-align: center;
    margin-top: 2.8vw
}

.idx5-2rswiper .item .headbox {
    padding: 0 5.5vw
}

.idx5-2rswiper .item .contentbox {
    padding-right: 10vw;
    font-size: .16rem;
    color: #333;
    line-height: 2.188;
    display: flex;
    align-items: center;
    height: 6rem;
}

.idx5-2lswiper .item .h1:before {
    content: "";
    width: .06rem;
    height: .06rem;
    border-radius: 50%;
    background: #333;
    position: absolute;
    top: 50%;
    left: -.29rem;
    margin-top: -.03rem;
    transition: all .3s;
}

.idx5-2lbtn:after {
    content: "";
    width: 100%;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #333;
    transition: all .3s;
    transform: scale(.6);
    opacity: 0
}

.idx5-2lswiper .swiper-slide-thumb-active .item .h1 {
    color: #e34220;
}

.idx5-2lswiper .swiper-slide-thumb-active .item .h1:before {
    background: #e34220;
}

.idx5-2rswiper .item .headbox {
    opacity: 0;
    transition: all .4s;
}

.idx5-2rswiper .swiper-slide-active .item .headbox {
    opacity: 1
}

.idx5-2rswiper .item .contentbox {
    transform: translateY(50px);
    opacity: 0;
    transition: all .4s;
}

.idx5-2rswiper .swiper-slide-active .item .contentbox {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}

.idx5tab {
    margin-top: 6vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.idx5tab .item {
    width: .42rem;
    text-align: center;
    cursor: pointer;
}

.idx5tab .item .point {
    width: .28rem;
    height: .28rem;
    margin: 0 auto;
    position: relative;
}

.idx5tab .item .point:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    background: #333
}

.idx5tab .item .title {
    font-size: .18rem;
    color: #333;
    margin-top: .12rem
}

.idx5tab .idx5line2 {
    width: 17vw;
    height: 1px;
    background: rgba(0, 0, 0, .302);
    margin-top: .13rem;
}

.idx5tab .idx5line1 {
    height: 1px;
    background: rgba(0, 0, 0, .302);
    margin-top: .13rem
}

.idx5tab .item .point:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #333;
    top: 0;
    left: 0;
    position: absolute;
    transition: all .3s;
    border-radius: 50%;
    transform: scale(.6);
    opacity: 0
}

.idx5tab .item.on .point:after {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 1601px) {
    .idx5tab .item .point:before {
        width: 6px;
        height: 6px
    }
}

@media (max-width: 1400px) {
    .bannerbox .contentbox .h1 {
        font-size: .6rem
    }

    .idxpage .item:after {
        height: 4px;
        margin-top: -2px
    }

    .idx5box {
        height: 5rem
    }
}

@media (max-width: 1200px) {
    .idx5tab .item .point {
        width: 24px;
        height: 24px
    }

    .idx5-2rswiper .item .headbox {
        padding: 0;
        margin-right: 5vw
    }

    .idx5-2rswiper .item .contentbox {
        padding-right: 5vw
    }

    .idx5-3item {
        height: 2rem
    }
}

@media (max-width: 1025px) {
    .idxwrapper {
        height: auto;
    }

    .idxwrapper > .swiper-wrapper {
        -webkit-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    }

    .idxbox {
        height: auto;
    }

    .index2 {
        height: 6rem
    }

    .idx3box2 {
        padding: 1rem 0
    }

    .idx4box {
        padding: 1rem 0
    }

    .idx5tab {
        margin-top: .6rem
    }

    .index5 {
        padding: 1rem 0
    }

    .idx5con {
        margin: 0 -4vw
    }

    .index2 .bgimg {
        background-size: cover;
    }

    .idx5-2lswiper .item .h1:before {
        width: 4px;
        height: 4px;
        margin-top: -2px
    }
}

@media (max-width: 1000px) {
    .idx4left {
        width: 65%
    }

    .idx5-2rswiper .item .headbox img {
        width: 1.6rem;
        height: 1.6rem
    }

    .idx5-2rswiper .item .headbox {
        margin-right: 4vw
    }

    .idx5-2rswiper .item .contentbox {
        padding-right: 4vw;
        line-height: 1.857
    }

    .idx5-2left {
        width: 2.8rem
    }

    .idx5-2box {
        padding-left: 4vw
    }
}

@media (max-width: 767px) {
    .idxbanner video {
        height: 60vh
    }

    .footermid {
        display: none;
    }

    .bannerimg {
        height: 60vh
    }

    .idxbanner .swipernum {
        font-size: 13px;
        right: 15px
    }

    .idxbanner .swipernum .line {
        margin: 10px auto
    }

    .bannerbox .contentbox .h1 {
        font-size: 24px;
        line-height: 36px
    }

    .bannerbox .contentbox .h2 {
        font-size: 15px;
        margin-top: 15px
    }

    .idxbanner .swiperbtn img {
        width: 6px;
    }

    .idxbanner .swiperbtn div {
        font-size: 12px
    }

    .idxbanner .controlbox .line {
        width: 50vw
    }

    .idxbanner .controlbox {
        bottom: 6%
    }

    .index2 {
        display: block;
        height: auto
    }

    .index2 .item {
        height: 100vw;
        display: block;
        width: 100%
    }

    .index2 .item .h2 {
        font-size: .4rem
    }

    .index2 .item .more img {
        width: 6px
    }

    .index2 .item .more div {
        font-size: 12px
    }

    .idx4box {
        display: block;
        padding: 300px 0 25px
    }

    .idx4left {
        width: 100%
    }

    .index4:after {
        display: none;
    }

    .idx4right {
        width: 50%;
        position: absolute;
        top: 40px;
        left: 25%;
        margin-left: 0
    }

    .idx4left .item .time {
        font-size: 13px;
        padding: 12px 0
    }

    .idx4left .item .h1 {
        font-size: 13px;
    }

    .idx4left .item .h2 {
        font-size: 12px;
        height: 63px
    }

    .idx4left .item .content {
        padding: 15px 15px 15px 0
    }

    .idx5con {
        margin: 0
    }

    .idx5tab .item .point {
        width: 20px;
        height: 20px
    }

    .idx5tab .item {
        width: 28px
    }

    .idx5tab .idx5line2 {
        margin-top: 9px
    }

    .idx5tab .idx5line1 {
        margin-top: 9px
    }

    .index5 {
        padding: 25px 0
    }

    .idx5tab .item .title {
        font-size: 12px
    }

    .idx5-1item .title {
        font-size: 12px;
        padding: 12px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .idx5-2box {
        display: block !important;
        padding: 0 15px
    }

    .idx5-2left {
        width: 100%;
        height: auto;
        padding: 20px 0
    }

    .idx5-2lswiper .item .h1 {
        font-size: 13px
    }

    .idx5-2lswiper .item .h2 {
        font-size: 12px
    }

    .idx5-2lbtn {
        margin-top: -.16rem;
        transform: rotate(-90deg);
    }

    .idx5-2lbtn.prev {
        top: 50%;
    }

    .idx5-2lbtn.next {
        top: 50%;
        bottom: auto;
        left: auto;
        right: -.16rem
    }

    .idx5-2lswiper .item .h1:before {
        display: none;
    }

    .idx5-2rswiper .item {
        padding: 0
    }

    .idx5-2rswiper .item .contentbox {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        padding-right: 0;
        height: auto;
    }

    .index2 .item.off {
        width: 100%
    }

    .index2 .item.on {
        width: 100%
    }

    .idx4right {
        height: 33%;
    }
}

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

.banner2 .container2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: .9rem;
    left: 0;
    display: flex;
    align-items: center;
}
.banner2 .bannertitle{
    font-size: .16rem;
    color: #fff
}
.banner2 .bannertitle .en {
    font-size: .66rem;
    color: #fff
}

.banner2 .bannertitle .cn {
    font-size: .38rem;
    color: #fff
}

.banner2 img{width:100%;}

.banli {
    display: flex;
    flex-flow: wrap;
    width: 70%;
    margin: 20px 0 0;
}

.banli p {
    width: 50%;
    padding: 10px 0 10px 25px;
    position: relative;
    font-size: 14px;
}

.banli p:before {
    background: url(../images/bgou.png) left center no-repeat;
    content: "";
    display: block;
    width: 25px;
    height: 20px;
    background-size: 20px;
    position: absolute;
    left: 0;
}
.subnav {
    margin-top: -.9rem;
    position: relative;
    z-index: 2
}

.subnavbox {
    height: .9rem;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    background: #fff;
    position: relative;
}

.subnavbox .navs a {
    display: inline-block;
    line-height: .9rem;
    position: relative;
    margin-right: 2.5vw;
    font-size: .16rem;
    color: #333;
    transition: all .3s
}

.subnavbox .navs a:after {
    content: "";
    height: .03rem;
    background: #50a9b5;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition: all .3s;
    width: 0;
    z-index: 2
}

.subnavbox .navs a.on:after {
    width: 100%
}

.subnavbox .navs a.on {
    color: #50a9b5
}

.subnavbox .back {
    display: flex;
    align-items: center;
    padding: 0 .1rem
}

.subnavbox .back .icon {
    width: .25rem;
    height: .17rem;
    position: relative;
    margin-right: .16rem
}

.subnavbox .back .icon img {
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s
}

.subnavbox .back .icon img:nth-child(2) {
    opacity: 0
}

.subnavbox .back div {
    font-size: .16rem;
    color: #333;
    transition: all .3s
}

.subnavbox:after {
    content: "";
    background: #e2e2e2;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
}

@media (min-width: 1000px) {
    .idxbanner .prev:hover img {
        transform: translateX(-3px);
    }

    .idxbanner .next:hover img {
        transform: translateX(3px);
    }

    .idx4left .item .content:hover .h1 {
        color: #50a9b5
    }

    .idx3swpbtn .item:hover {
        border-color: #50a9b5;
        opacity: 1
    }

    .idx3swpbtn .prev:hover img {
        transform: translateX(-3px);
    }

    .idx3swpbtn .next:hover img {
        transform: translateX(3px);
    }

    .idx5-1item:hover img {
        transform: scale(1.05);
    }

    .idx5-1item:hover .title {
        padding-bottom: .38rem
    }

    .idx5-1swpbtn:hover {
        background: #e72f37;
    }

    .idx5-1swpbtn:hover img:nth-child(1) {
        opacity: 0
    }

    .idx5-1swpbtn:hover img:nth-child(2) {
        opacity: 1
    }

    .idx5tab .item:hover .point:after {
        opacity: 1;
        transform: scale(1);
    }

    .idx5-3item:hover:after {
        transform: scale(1);
        opacity: 1
    }

    .idx5-3item:hover img:nth-child(2) {
        visibility: visible;
        -webkit-clip-path: inset(0% 0 0% 0);
        clip-path: inset(0% 0 0% 0);
    }

    .idx5-3item:hover img:nth-child(1) {
        visibility: hidden;
        -webkit-clip-path: inset(50% 0 50% 0);
        clip-path: inset(50% 0 50% 0);
    }

    .idx5-2lbtn:hover:after {
        transform: scale(1);
        opacity: 1
    }

    .subnavbox .navs a:hover:after {
        width: 100%
    }

    .subnavbox .navs a:hover {
        color: #50a9b5
    }

    .subnavbox .back:hover img:nth-child(1) {
        opacity: 0
    }

    .subnavbox .back:hover img:nth-child(2) {
        opacity: 1
    }

    .subnavbox .back:hover div {
        color: #50a9b5
    }
}

.newscon {
    background: #eee;
    padding-bottom: 6.3vw
}

.news1con {
    background: #e0e0e0;
    padding: 5vw 5vw 3.3vw
}

.news1con .swiper-container {
    height: 5.8rem
}

.news1box .imgbox {
    width: 55%;
    display: block;
    overflow: hidden;
}

.news1box .imgbox img {
    height: 5.8rem;
    object-fit: cover;
    transition: all .5s
}

.news1box {
    background: #fff;
    display: flex;
    align-items: flex-start;
}

.news1right {
    padding: 1.6vw 3.5vw;
    display: block;
}

.news1right .title {
    display: flex;
    align-items: center;
    padding: .25rem 0;
    border-bottom: 1px solid #cacaca;
    margin-bottom: 5vw
}

.news1right .title .h1 {
    font-size: .34rem;
    color: #333;
    font-family: "DIN"
}

.news1right .title .h2 {
    font-size: .14rem;
    color: #333;
    line-height: 1.286;
    text-align: right;
}

.news1right .content .h1 {
    font-size: .26rem;
    color: #333;
    margin-bottom: 1.7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s
}

.news1right .content .h2 {
    font-size: .16rem;
    color: #333;
    line-height: 1.75;
}

.news1con .swiper-pagination-bullet {
    width: .46rem;
    height: 4px;
    margin: 0 .07rem !important;
    border-radius: 10px;
    background: #c2c2c2;
    opacity: 1;
    transition: all .3s
}

.news1con .swiper-pagination {
    font-size: 0;
    position: static;
    margin-top: 3.5vw
}

.news1con .swiper-pagination-bullet-active {
    background: #50a9b5
}

.news2con {
    background: #fff;
    padding: 4.5vw 5vw
}

.news2box .col-sm-4 {
    padding: 0 .2rem
}

.news2box .row {
    margin: 0 -.2rem
}

.news2item {
    border-bottom: 1px solid #cacaca;
    display: block;
    transition: all .3s;
    margin-bottom: .5rem
}

.news2item .content {
    padding: .35rem 0 .38rem;
}

.news2item .h1 {
    font-size: .16rem;
    color: #333;
    font-family: "DIN";
    margin-bottom: .2rem
}

.news2item .h2 {
    font-size: .16rem;
    color: #333;
    line-height: 1.688;
    transition: all .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news2item .imgbox {
    overflow: hidden;
}

.news2item .imgbox img {
    height: 100%;
    object-fit: cover;
    transition: all .5s
}

.gotop {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .46rem;
    background: #50a9b5;
    cursor: pointer;
}

.gotop img {
    margin-right: 8px;
    transition: all .3s
}

.gotop div {
    font-size: .16rem;
    color: #fff
}

.news3con {
    background: #fff;
    display: flex;
}

.news3box {
    padding: 3vw 4.5vw .4rem 5vw
}

.news3box .titlebox {
    padding: .15rem 0;
    border-bottom: 1px solid #dadada
}

.news3box .titlebox .h1 {
    font-size: .32rem;
    color: #333;
    margin-bottom: .3rem
}

.news3box .titlebox .h2 {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;
    font-family: "DIN"
}

.news3box .titlebox .h3 {
    font-size: .32rem;
    color: #333;
    margin-bottom: .3rem;
    text-align: center;
}

.news3box .titlebox .h4 {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333;
    text-align: center;
    font-family: "DIN"
}

.news3box .titlebox .iconbox {
    display: flex;
    align-items: center;
}

.news3box .titlebox .iconbox .item {
    width: 18px;
    height: 18px;
    display: block;
    margin-right: .1rem
}

.news3box .titlebox .iconbox .item:nth-child(1) {
    background: url(../images/news2icon.png);
    background-position: 0px 0px
}

.news3box .titlebox .iconbox .item:nth-child(2) {
    background: url(../images/news2icon.png);
    background-position: -29px -1px;
    width: 16px;
    height: 16px
}

.news3box .titlebox .iconbox .item:nth-child(3) {
    background: url(../images/news2icon.png);
    background-position: -57px 0px
}

.news3box .titlebox .iconbox .item:nth-child(4) {
    background: url(../images/news2icon.png);
    background-position: -86px -1px;
    width: 16px;
    height: 16px
}

.news3box .contentbox {
    padding: .3rem 0 .3rem
}

.news3box .contentbox p {
    font-size: .16rem;
    color: #333;
    line-height: 1.625;
    margin-top: .3rem
}

.news3box .contentbox img {
    margin: .3rem auto 0;
    display: inline-block;
    width: 800px;
}

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

.news3box .bottom a {
    display: block;
    color: #333;
    font-size: .16rem;
    transition: all .3s
}

.news3box .bottom a span:nth-child(2) {
    margin: 0 .08rem
}

.news3right {
    width: 24%;
    background: #f9f9f9;
    padding: 2vw 3.5vw 0 3.5vw
}

.news3right .itembox {
    margin-bottom: .18rem
}

.news3right .itembox .title {
    color: #50a9b5;
    font-size: .16rem;
    padding: .18rem 0;
    border-bottom: 1px solid #ebebeb;
    line-height: 1;
    max-width: 2.5rem;
}

.news3right .itembox .item1 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .14rem;
    color: #333;
    margin-top: .15rem;
    line-height: 1;
    transition: all .3s;
    margin-right: -1.3vw
}

.news3right .itembox .item1 span:nth-child(1) {
    color: #333;
    font-family: "DIN"
}

.news3right .itembox .item1 span:nth-child(2) {
    margin: 0 .1rem
}

.news3right .itembox .item2 a {
    display: block;
    color: #333;
    font-size: .14rem;
    transition: all .3s;
    padding: .09rem 0;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news3right .itembox .item2 span {
    color: #333;
    font-size: .14rem;
    display: block;
    width: 10%;
    text-align: center;
}

.news3right .itembox .item2 {
    line-height: 1;
    display: flex;
    align-items: center;
}

.news3right .itembox .link {
    padding: .075rem 0
}

.subnavbox2 {
    background: #e3e3e3
}

.subnavbox2:after {
    background: #ebebeb
}

.solucon {
    padding-bottom: .75rem
}

.solubox {
    padding: 7.7vw 5vw .35rem;
    background: #e3e3e3
}

.solubox .row {
    margin: 0 -.625vw;
    padding-bottom: 8vw
}

.solubox .col {
    float: left;
    width: 20%;
    padding: 0 .625vw
}

.solulist .item {
    display: block;
    box-shadow: -3.625px 1.69px 4px 0px rgba(22, 22, 21, 0.35);
    transition: all .3s
}

.solulist .item .imgbox {
    position: relative;
}

.solulist .item .imgbox:after {
    content: "";
    width: .14rem;
    height: .02rem;
    position: absolute;
    bottom: 1.7vw;
    right: 1.25vw;
    background: #fff
}
/*.solulist .item .imgbox img:nth-child(2){}*/

.solulist .item .imgbox .icon {
    position: absolute;
    top: 1.7vw;
    left: 1vw;
    max-width: .35rem
}

.solulist .item .content {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 .2rem
}

.solulist .item .content p {
    font-size: .16rem;
    color: #333;
    line-height: 1.375;
    position: relative;
    z-index: 2;
    transition: all .3s
}

.solulist .item .content:after {
    content: "";
    background: #50a9b5;
    height: .07rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .3s;
}

.solulist .col:nth-child(even) .item {
    transform: translateY(5vw);
}

.solulist .item .imgbox .imgtxt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
}

.solulist .item .imgbox .imgtxt .h1 {
    font-size: .16rem;
    color: #fff;
}

.solulist .item .imgbox .imgtxt .h2 {
    font-size: .16rem;
    color: #fff;
    margin-top: .12rem
}

.sercon {
    padding-bottom: 6.5vw;
    background: #eeeeee
}

.serbox {
    background: #fff;
    padding: 0 5vw 6vw
}

.serbox1 {
    display: flex;
    align-items: center;
    margin-right: -5vw;
    margin-bottom: 5vw
}

.serbox1 .ser1right {
    width: 62%
}

.ser1left {
    padding-right: 10vw
}

.ser1left .h1 {
    font-size: .36rem;
    color: #333;
    margin-bottom: 3.5vw
}

.ser1left p {
    font-size: .16rem;
    color: #333;
    line-height: 1.75;
    margin-top: 1.5vw
}

.serbox2 {
    height: 3.9rem;
    display: flex;
    align-items: center;
    padding: 0 10vw;
    background: #f4f4f4;
    margin-bottom: 5vw
}

.serbox2 .item {
    flex: 1;
    text-align: center;
}

.serbox2 .item img {
    width: .5rem;
    margin: 0 auto;
    transition: all .3s
}

.serbox2 .item .line {
    width: .14rem;
    height: .03rem;
    background: #333;
    margin: .32rem auto .2rem
}

.serbox2 .item p {
    font-size: .16rem;
    color: #333;
    line-height: 1.75
}

.serbox3 {
    border-top: .03rem solid #50a9b5;
}

.serbox3 .item {
    display: flex;
    align-items: center;
    font-size: .16rem;
    color: #333;
    padding: .22rem 0;
    border-bottom: 1px solid #e2e2e2;
    cursor: pointer;
    transition: all .3s
}

.serbox3 .item .title {
    width: 35%
}

.casecon {
    background: #eee;
    padding-bottom: 6vw
}

.casebox {
    background: #fff;
    padding: 6vw 5vw 0
}

.caselist {
    padding: 0 2.7vw;
    padding-bottom: 7.2vw
}

.caselist .row {
    margin: 0 -3.1vw
}

.caselist .col-sm-4 {
    padding: 0 3.1vw
}

.caselist .item .h1 {
    position: relative;
    border-bottom: 1px solid #cacaca
}

.caselist .item .h1 .month {
    padding: .17rem 0;
    text-align: right;
    font-size: .16rem;
    color: #999
}

.caselist .item .h1 .date {
    font-size: .64rem;
    color: #333;
    line-height: 1;
    font-family: "DIN";
    position: absolute;
    left: -.04rem;
    bottom: .18rem;
    transition: all .3s
}

.caselist .item .content {
    padding: .05rem 1.35vw 0
}

.caselist .item .h2 {
    font-size: .16rem;
    color: #333;
    padding: .19rem 0;
    line-height: 1.8;
    transition: all .3s
}

.caselist .item .h2:nth-child(3) {
    height: .5rem;
    line-height: .25rem;
}

.caselist .item {
    margin-bottom: 3.3vw;
    display: block;
}

.caselist .col-sm-4:nth-child(3n + 2) .item {
    transform: translateY(12%);
}

.caselist .col-sm-4:nth-child(3n) .item {
    transform: translateY(24%);
}

.caselist .item .imgbox img {
    transition: all .5s
}

.caselist .item .imgbox {
    overflow: hidden;
}

.aboutcon {
    background: #eee;
    padding-bottom: 4.5vw
}

.aboutbox {
    background: #fff;
    padding: 0 5vw
}

.about1 {
    margin: 0 -5vw;
    padding: 7.5vw 0;
    display: flex;
    align-items: flex-start;
}

.about1left {
    padding-left: 5vw
}

.about1right {
    width: 59.4%;
    padding-right: 5vw
}

.atitle .en {
    font-size: .16rem;
    color: #333;
    line-height: 1.313
}

.atitle .line {
    width: .2rem;
    height: .04rem;
    background: #50a9b5;
    margin: .4rem 0
}

.atitle .cn {
    font-size: .22rem;
    color: #333
}

.about1right .h1 {
    font-size: .26rem;
    color: #333;
    line-height: 1.462;
    margin-bottom: .45rem
}

.about1right p {
    font-size: .16rem;
    color: #333;
    line-height: 1.75
}

.about2 {
    display: flex;
    align-items: center;
    margin: 0 -5vw;
    margin-bottom: 8vw
}

.about2right {
    width: 59.4%;
}

.about2left img {
    max-width: 13.5vw;
    margin: 0 auto
}

.about3 {
    margin: 0 -5vw;
    padding-right: 5vw
}

.about3box {
    display: flex;
    align-items: flex-start;
}

.about3box .title {
    text-align: right;
    font-size: 0;
    width: 2.3rem
}

.about3box .title .en {
    font-size: .16rem;
    color: #333;
    line-height: 1.313
}
.thisabout3swip {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.about3box .title .line {
    width: .2rem;
    height: .04rem;
    background: #50a9b5;
    margin: .35rem 0 .4rem;
    display: inline-block;
}

.about3box .title .cn {
    font-size: .22rem;
    color: #333
}

.about3ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2.3rem;
    position: relative;
    padding-left: 2.5rem;
}

.about3ctrl .item {
    line-height: .8rem;
    font-size: .16rem;
    font-family: "DIN";
    color: #999;
    /* margin-left: 0.5rem; */
    cursor: pointer;
    position: relative;
    transition: all .3s;
}

.about3bottom {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    margin-right: -5vw;
    padding-right: 5vw;
    z-index: 3
}

.about3bottom .year {
    width: 20%;
    text-align: center;
    font-family: "DIN";
    font-size: 1.3rem;
    color: #50a9b5;
    position: absolute;
    bottom: 0;
    font-weight: 600;
    line-height: 0.8;
    z-index: 3
}

.about3bottom .year > div {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    transition: all .5s;
    transform: translateY(-.3rem);
    opacity: 0;
    font-size: 1rem;
    text-align: left;
    line-height: 1.5rem;
}

.about3bottom .year > div.on {
    transform: translateY(0);
    opacity: 1
}

.about3ctrl .item:after {
    content: "";
    height: .04rem;
    position: absolute;
    left: 0;
    width: 0;
    bottom: -1px;
    transition: all .3s;
    background: #50a9b5
}

.about3ctrl .item.on:after {
    width: 100%
}

.about3ctrl .item.on {
    color: #50a9b5
}

.about3swiper {
    /* background: url(../images/about3bg.jpg); */
    /* height: 6.6rem; */
    background-position: center;
    background-size: 100% 100%;
}

.about3item {
    /* height: 100%; */
    display: flex;
    /* align-items: center; */
    padding: 0 0 2.5rem;
    padding: 1.8rem 0 0;
}

.about3item > div {
    display: flex;
    align-items: center;
}

.about3item .textbox {
    width: 49.6%;
    text-align: left;
    padding: 0 0 0 0.4rem;
}

.about3item .textbox p {
    font-size: .14rem;
    color: #fff;
    transition: all .5s;
    transform: translateY(.5rem);
    opacity: 0;
    font-weight: bold;
}

.about3item .imgbox img {
    border-radius: 50%;
    margin: 0 auto;
    max-width: 16vw;
    transition: all .5s;
    opacity: 0;
    transform: translateX(.5rem);
    display: none;
}

.about3swiper .swiper-slide-active .imgbox img {
    transform: translateX(0);
    transition-delay: 0.2s;
    opacity: 1
}

.about3swiper .swiper-slide-active .textbox p {
    transform: translateY(0);
    opacity: 1
}

.about4 {
    padding: 7.5vw 0 4.5vw
}

.about4 .atitle {
    display: flex;
    align-items: flex-end;
    margin-bottom: 6vw
}

.about4 .atitle .line {
    margin-bottom: .15rem;
    display: inline-block;
    margin-top: 0
}

.about4 .atitle .right {
    text-align: right;
    font-size: 0
}

.about4 .about4box {
    background: url(../images/about4.jpg);
    background-size: cover;
    height: 7.68rem;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    background-position: center;
}

.about4box .item {
    flex: 1;
    text-align: center;
    position: relative;
}

.about4box .item .num {
    font-size: 0;
    line-height: 1;
    margin-bottom: .4rem
}

.about4box .item .num span {
    font-size: .46rem;
    color: #fff;
    font-family: "DIN"
}

.about4box .item p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.5;
}

.about4box .item:before {
    content: "";
    width: .18rem;
    height: .04rem;
    position: absolute;
    top: -.8rem;
    left: 50%;
    margin-left: -.09rem;
    background: #fff;
    transition: all .3s
}

.about4box .item:after {
    content: "";
    width: .18rem;
    height: .04rem;
    position: absolute;
    bottom: -.8rem;
    left: 50%;
    margin-left: -.09rem;
    background: #fff;
    transition: all .3s
}

.about5 {
    /*background: url(../images/about5.jpg);*/
    height: 8.85rem;
    position: relative;
    background-size: cover;
    margin: 0 -5vw;
    display: flex;
    align-items: center;
    z-index: 0;
    background-color:#cdcdcd ;
}

.about5 .atitle {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 3.8vw 5vw;
}

.about5 .atitle .line {
    margin-bottom: .15rem;
    display: inline-block;
    margin-top: 0;
    background: #fff
}

.about5 .atitle .right {
    text-align: right;
    font-size: 0
}

.about5 .atitle .en {
    color: #fff
}

.about5 .atitle .cn {
    color: #fff
}

.about5 .coverimg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    transition: all .3s;
    z-index: -1
}

.about5bottom {
    background: rgba(169, 6, 0, .469);
    height: .66rem;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5
}

.about5bottom .pagebtn .txt {
    color: #fff
}

.about5bottom .pagebtn .icon {
    margin-top: -2px
}

.about5bottom .pagebtn {
    transition: all .3s
}

.about5swiper {
    padding: 0 5vw;
    height: 100%
}

.about5swiper .swiper-container {
    height: 100%
}

.about5swiper .swiper-container .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
}

.about5item {
    padding: 0 2.5vw;
}

.about5item img {
    margin: 0 auto;
    box-shadow: -5px 5px 10px 5px rgba(0, 0, 0, .15);
    transition: all .3s
}

.about5snum {
    font-size: .16rem;
    color: #fff;
    font-family: "DIN";
    text-align: center;
}

.about5swiper .swiper-container .swiper-slide:nth-child(odd) .about5item {
    margin-bottom: 25%
}

.about5swiper .swiper-container .swiper-slide:nth-child(even) .about5item {
    margin-top: 35%
}

.about6 {
    padding: 7vw 5vw 4.5vw;
    background: url(../images/about6bg.jpg);
    background-size: cover;
    background-position: right;
    margin: 0 -5vw
}

.about6 .item {
    float: left;
    width: 50%;
    height: 2.4rem;
    display: flex;
    align-items: center;
    padding-right: 6.5vw
}

.about6box {
    padding-right: 21%
}

.about6 .item .en {
    font-size: .16rem;
    color: #333;
    line-height: 1.313
}

.about6 .item .cn {
    font-size: .32rem;
    color: #50a9b5;
    margin-top: .25rem
}

.about6 .item .h1 {
    font-size: .16rem;
    color: #333;
    margin-bottom: .32rem;
    transition: all .3s
}

.about6 .item .h2 {
    font-size: .16rem;
    color: #999;
    line-height: 1.75;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: .84rem
}

.ctacon {
    background: #eeeeee;
    padding-bottom: 7.5vw
}

.ctabox {
    background: #fff;
    padding: 0 5vw
}

.cta1 {
    padding: 7vw 0;
    margin: 0 -5vw;
    display: flex;
    align-items: center;
}

.cta1left {
    width: 39.6%
}

.cta1left .item p {
    font-size: .16rem;
    color: #333;
    line-height: 1.75;
    text-align: center;
}

.cta1left .item {
    padding: .35rem 0;
    position: relative;
}

.cta1left .item:not(:last-child):after {
    content: "";
    width: .2rem;
    height: .04rem;
    background: #50a9b5;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -.1rem
}

.cta1right .mapbox {
    height: 6.5rem;
}

.map {
    width: 100%;
    height: 6.5rem;
}

.cta1r-title {
    height: .8rem;
    position: relative;
    display: flex;
    align-items: center;
    font-size: .16rem;
    color: #333;
    margin-right: 5vw;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: .32rem;
    z-index: 4
}

.cta1r-title img {
    width: .22rem;
    margin-right: .25rem
}

.cta1r-title .en {
    font-size: .78rem;
    color: #50a9b5;
    line-height: 1.038;
    text-align: right;
    position: absolute;
    right: 0;
    font-family: "DIN"
}

.anchorBL {
    display: none;
}

.cta2 {
    padding: 3.5vw 6.5vw 11vw
}

.cta2 .title {
    font-size: .3rem;
    color: #333;
    text-align: center;
    margin-bottom: 3.5vw
}

.cta2 .row {
    margin: 0 -3vw
}

.cta2 .col-sm-4 {
    padding: 0 3vw
}

.cta2 .item {
    position: relative;
}

.cta2 .item:after {
    content: "";
    height: 1px;
    left: 0;
    right: 0;
    background: #c5c5c5;
    position: absolute;
    bottom: 0;
    transition: all .3s
}

.cta2 .item .h1 {
    font-size: .16rem;
    color: #333;
    transition: all .3s;
    position: absolute;
    line-height: 20px;
    top: 50%;
    margin-top: -10px;
    left: .05rem
}

.cta2 .item .h1.on {
    margin-top: 0;
    top: -15px;
    left: .1rem;
    font-size: .14rem
}

.cta2 .item input {
    padding: 0 .1rem;
    color: #333;
    font-size: .16rem;
    height: .5rem;
    display: block;
    width: 100%
}

.cta2 textarea {
    display: block;
    margin: 2.7vw 0 2vw;
    background: #f3f3f3;
    height: 2.9rem;
    padding: .2rem .25rem;
    font-size: .16rem;
    color: #333;
    width: 100%
}

.cta2 .btn1 {
    line-height: .62rem;
    font-size: .16rem;
    text-align: center;
    display: block;
    color: #50a9b5;
    transition: all .3s;
    background: #fff;
    border: 1px solid #dedede;
    width: 100%
}

.cta2 .item.on:after {
    height: 2px;
    background: #50a9b5
}

.subnav2 .navs a {
    margin-right: 3.5vw
}

.crscon {
    padding-bottom: 10vw;
    background: #eee
}

.crsbox {
    background: #fff;
    padding: 10vw 0 0 0;
    overflow: hidden;
}

.crsbox1 {
    position: relative;
    margin-bottom: 10vw;
}

.crscontent .h1 {
    padding: 0 0 1vw;
    font-size: .18rem;
    color: #333;
    position: relative;
    margin-bottom: 1vw;
}

.crscontent .h1:after {
    content: "";
    height: .04rem;
    width: .24rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #50a9b5
}

.crscontent p {
    font-size: .16rem;
    color: #666;
    line-height: 1.75;
    margin: 00 0 0.2rem;
    text-align: justify;
}
.ccadd_mainbox ul li .right_main .text .lip {
    display: flex;
    flex-flow: wrap;
}

.ccadd_mainbox ul li .right_main .text .lip span {
    width: 100%;
    padding: 10px 0 10px 25px;
    display: flex;
    align-items: center;
    position: relative;
}
.ccadd_mainbox ul li .right_main .text .lip50 span {
    width: 50%;
}

.ccadd_mainbox ul li .right_main .text .lip100 span {
    width: 100%;
}
.ccadd_mainbox ul li .right_main .text .lip span:before {content: "";width: 20px;height: 20px;display: block;background: url(../images/gou.png) left 2px no-repeat;background-size: 17px;position: absolute;left: 0;top: 10px;}
.crscontent .link {
    display: flex;
    align-items: center;
    color: #50a9b5;
    font-size: .16rem;
    width: 1rem;
    height: .36rem;
    margin-top: 2.3vw
}

.crscontent .link img {
    margin-left: .1rem;
    width: .08rem;
    margin-top: .02rem;
    transition: all .3s
}

.crsbox1list .item {
    position: relative;
    height: 2.3rem;
    float: right;
    display: flex;
    align-items: center;
    padding: 0 5vw 0 2.25vw;
}

.crsbox1list .item:nth-child(1) {
    background: #50a9b5;
    width: 54.6%;
    padding-left: 4vw;
}

.crsbox1list .item:nth-child(2) {
    background: #d9d9d9;
    width: calc(54.6% + 6.25vw);
}

.crsbox1list .item:nth-child(3) {
    background: #eb6967;
    width: calc(54.6% + 12.5vw);
}

.crsbox1list .item:nth-child(4) {
    background: #f5b03b;
    width: calc(54.6% + 18.75vw);
}

.crsbox1list .item dl dt {
    font-size: .16rem;
    color: #fff;
    font-weight: 500;
    margin-bottom: .15rem
}

.crsbox1list .item dl dd a {
    font-size: .14rem;
    color: #fff;
    line-height: 1.571;
    display: block;
    text-align: justify;
}

.crsbox1list .item dl {
    float: left;
    margin-bottom: 0;
    min-width: 7.2vw;
    margin-right: 4vw
}

.crsbox1list .item .num {
    font-size: .32rem;
    color: #fff;
    font-family: "DIN"
}

.crsbox1 .crscontent {
    position: absolute;
    left: 5vw;
    top: 0;
    width: 24.5%;
    z-index: 20
}

.crs1left .num {
    font-size: .78rem;
    color: #333;
    font-family: "DIN";
    line-height: .8;
    margin-bottom: .32rem
}

.crs1left p {
    font-size: .26rem;
    color: #333;
    line-height: 1.462
}

.crs1left {
    position: absolute;
    left: 5vw;
    bottom: .32rem
}

.crsbox1list .item:nth-child(2):after {
    content: "";
    width: 6.25vw;
    height: 35px;
    background: url(../images/crs1-1.png);
    background-position: left bottom;
    position: absolute;
    left: 0;
    top: -35px
}

.crsbox1list .item:nth-child(3):after {
    content: "";
    width: 6.25vw;
    height: 35px;
    background: url(../images/crs1-2.png);
    background-position: left bottom;
    position: absolute;
    left: 0;
    top: -35px
}

.crsbox1list .item:nth-child(4):after {
    content: "";
    width: 6.25vw;
    height: 35px;
    background: url(../images/crs1-3.png);
    background-position: left bottom;
    position: absolute;
    left: 0;
    top: -35px
}

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

.crsbox2 .imgbox {
    width: 50%
}

.crs2right {
    /* padding: 0 3vw 0vw 3vw */
}

.crs2right > div:nth-child(1) {
    margin-bottom: 1.5vw
}

.crsbox3 {
    display: flex;
    align-items: center;
    padding: 4vw 0 13vw
}

.crs3left {
    width: 35.5%;
    padding: 0 4vw
}

.crs3right {
    background: #eaeaea;
    height: 22.4vw;
    position: relative;
}

.crs3right img {
    border-radius: 50%;
    max-width: 36vw;
    position: absolute;
    left: 10.9vw;
    top: 50%;
    box-shadow: 0px 2vw 3vw 0px rgba(23, 22, 22, 0.19);
    transform: translateY(-50%);
}

.crsbox4 {
    padding: 0 5vw;
    background: #393939
}

.crsbox4 .item {
    height: 4.4rem;
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
}

.crs4left {
    width: 39%;
    margin-right: 5vw
}

.crs4left .h1 {
    font-size: .26rem;
    color: #fff;
    margin-bottom: 1vw
}

.crs4left p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.625
}

.crsbox4 .item:last-child {
    border-bottom: 0
}

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

.crs4right1 .item2 {
    text-align: center;
    flex: 1
}

.crs4right1 .item2 .num {
    font-size: .68rem;
    color: #fff;
    display: inline-block;
    position: relative;
    font-family: "DIN";
    line-height: 1
}

.crs4right1 .item2 p {
    font-size: .26rem;
    color: #fff;
    margin-top: .05rem
}

.crs4right1 .item2 .num .fuhao {
    font-size: .36rem;
    position: absolute;
    right: -.24rem;
    top: 0
}

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

.crs4right2 .item2 {
    flex: 1;
    text-align: center;
}

.crs4right2 .item2 p {
    font-size: .26rem;
    color: #fff;
    line-height: 1.231;
    margin-top: 1.25vw
}

.crs4right2 .item2 .h1 {
    line-height: .58rem;
    font-size: .68rem;
    color: #fff;
    font-family: "DIN"
}

.crs4right2 .item2 img {
    height: .58rem;
    margin: 0 auto
}

.crs4right3 .item2 {
    float: left;
    width: 50%;
    height: 1.32rem;
    padding: 0 3.8vw 0 2.5vw
}

.crs4right3 {
    padding-left: 2.5vw
}

.crs4right3 .item2 p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.625;
}

.crs4right3 .item2 p:nth-child(1) {
    margin-bottom: 1.2vw
}

.crs4right3 .item3 {
    display: flex;
    align-items: center;
    float: left;
    width: 50%;
    padding: .35rem 0 0 3.5vw
}

.crs4right3 .item3 .en {
    font-size: .22rem;
    color: #fff;
    font-family: "DIN";
    margin-right: .18rem
}

.crs4right3 .item3 .num {
    font-size: .32rem;
    color: #fff;
    font-family: "DIN"
}

.crs4right3 .item2:nth-child(-n + 2) {
    margin-bottom: .35rem;
}

.crs4right3 {
    border-left: 1px solid rgba(255, 255, 255, .231)
}

.softcon {
    background: #eee;
    padding-bottom: 6.5vw
}

.softbox {
    background: #fff;
    /* padding: 0 5vw; */
}

.soft1 {
    padding: 10vw 0 7vw;
    position: relative;
}

.soft1 .crscontent {
    max-width: 5rem
}

.soft1right {
    max-width: 40.5vw;
    position: absolute;
    right: 0;
    bottom: 5vw;
}

.soft2 {
    margin-left: -5vw;
    padding: 10vw 0 9vw;
    padding-left: 5vw;
    background: #f3f3f3
}

.soft2 .title {
    max-width: 4.3rem;
    font-size: .16rem;
    color: #333;
    line-height: 1.75;
    margin-bottom: 8vw
}

.soft2 .item {
    display: flex;
    align-items: center;
    padding-left: 1.6vw
}

.soft2 .item img {
    max-width: 3.2vw;
    margin-right: .6vw
}

.soft2box {
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.soft2 .item .h1 {
    font-size: .22rem;
    color: #333;
    margin-bottom: .12rem
}

.soft2 .item .h2 {
    font-size: .16rem;
    color: #333
}

.soft2 .item .h2 p {
    line-height: 25px;
    background-color: #80b4c1;
    padding: 15px 5px;
    color: #fff;
}

.soft2 .item {
    width: 33.33% !important;
    margin: 2vw 00 0 0;
}

.soft2 .item:nth-child(2) {
    width: 25%
}

.soft2 .item:nth-child(3) {
    flex: 1
}

.soft3 {
    margin: 6vw 0 5vw
}

.soft3box {
    position: relative;
    background-size: cover;
}

.soft3content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 6.5vw
}

.soft3content .h1 {
    font-size: .26rem;
    color: #fff;
    margin-bottom: 2vw
}

.soft3content .h2 {
    font-size: .16rem;
    color: #fff;
    line-height: 1.5
}

.soft3btn .item {
    line-height: .96rem;
    flex: 1;
    text-align: center;
    font-size: .26rem;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: all .3s
}

.soft3btn {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d5d5d5
}

.soft3btn .item:after {
    content: "";
    bottom: 0;
    height: 0;
    background: #50a9b5;
    left: 0;
    right: 0;
    transition: all .3s;
    position: absolute;
}

.soft3btn .item.on:after {
    height: 3px
}

.soft3btn .item.on {
    color: #50a9b5
}

.soft3 .swiper-slide-active .h1 {
    animation: fadeup 1s .3s;
    -webkit-animation: fadeup 1s .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.soft3 .swiper-slide-active .h2 {
    animation: fadeup 1s .5s;
    -webkit-animation: fadeup 1s .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.soft4 {
    margin: 0 -5vw;
    padding: 5.5vw 5vw;
    background: url(../images/soft4bg.jpg);
    background-position: center;
}

.soft4 .crscontent {
    max-width: 4.4rem;
    float: right;
    margin-right: 4vw
}

.soft4 .crscontent .h1 {
    margin-bottom: 3vw;
    color: #fff
}

.soft4 .crscontent p {
    /* margin-bottom: 1vw; */
    color: #fff
}

.hardcon {
    background: #eee;
    padding-bottom: 5vw
}

.hardbox {
    padding: 0 5vw;
    background: #fff;
    padding-top: 2.5vw
}

.hard1 {
    position: relative;
    margin: 0 -5vw
}

.hard1 .crscontent {
    max-width: 5.8rem;
    left: 5vw;
    top: 10%;
    position: absolute;
}

.hard2 .item p {
    font-size: .16rem;
    color: #333;
    line-height: 1.5;
    margin-top: 1.6vw
}

.hard2 .item {
    text-align: center;
    margin-left: 4vw
}

.hard2 .item img {
    max-width: 6.2vw;
    margin: 0 auto;
    box-shadow: 0px .14rem .13rem 0px rgba(23, 22, 22, 0.07);
    border-radius: 50%
}

.hard2 {
    position: absolute;
    bottom: 23.3%;
    right: 18%;
    display: flex;
    align-items: center;
}

.hard3 .row {
    margin: 0 -1.9vw
}

.hard3 .col-sm-4 {
    padding: 0 1.9vw
}

.hard3-1 {
    border-top: 1px solid #d6d6d6;
}

.hard3-1 .item {
    font-size: .16rem;
    padding: .36rem 0;
    text-align: center;
    color: #333
}

.hard3-1 .item:after {
    content: "";
    width: .2rem;
    background: #50a9b5;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -.1rem;
    height: 2px
}

.hard3-2 .item {
    background: #fff;
    border-radius: .1rem;
    box-shadow: 0px .37rem .57rem 0px rgba(23, 22, 22, 0.2);
    padding: 2.3vw
}

.hard3-2 .item .titlebox {
    display: flex;
    align-items: center;
    padding: 1.9vw 0 2.25vw;
    border-bottom: 1px solid #b3b3b3;
    margin-bottom: 1.7vw
}

.hard3-2 .item .titlebox .h1 {
    font-size: .26rem;
    color: #333;
    line-height: 1.231
}

.hard3-2 .item .titlebox .iconbox img {
    width: .38rem;
    margin: 0 auto
}

.hard3-2 .item .titlebox .iconbox .txt {
    font-size: .16rem;
    color: #999;
    margin-top: .05rem
}

.hard3-2 .item .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hard3-2 .item .imgbox img {
    max-width: 90%;
    max-height: 90%
}

.hard3-2 .item p {
    font-size: .16rem;
    color: #333;
    line-height: 1.5;
    /* height: 1.44rem;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:6; */
}

.hard4 {
    margin: 18.5vw -5vw 22.5vw;
    position: relative;
    padding: 0 5vw
}

.hard4 .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0 5vw;
    justify-content: center;
}

.hard4 .content > div {
    max-width: 43.5%
}

.hard4 .content .h1 {
    font-size: .38rem;
    color: #333;
}

.hard4 .content .line {
    width: .24rem;
    height: .04rem;
    background: #50a9b5;
    margin: 2vw auto
}

.hard4 .content p {
    font-size: .16rem;
    color: #333;
    line-height: 1.5
}

.hard4 .img1 {
    max-width: 34.5%;
    position: absolute;
    right: 0;
    top: -12vw
}

.hard4 .img2 {
    max-width: 36.2%;
    position: absolute;
    left: 0;
    bottom: -16vw
}

.hard3-2 .item .content-p {
    margin-bottom: 12px
}

.hard5 {
    margin: 0 -5vw;
    overflow: hidden;
    position: relative;
}

.hard5 .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}

.hard5 .content .en {
    font-size: .16rem;
    color: #fff;
    margin-bottom: 1vw
}

.hard5 .content .cn {
    font-size: .38rem;
    color: #fff;
    line-height: 1.447;
}

.hard6 {
    position: relative;
    margin: 0 -5vw;
    overflow: hidden;
}

.hard6 .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13%;
    text-align: center;
}

.hard6 .content .en {
    font-size: .16rem;
    color: #333;
    margin-bottom: 1vw
}

.hard6 .content .cn {
    font-size: .38rem;
    color: #333;
    line-height: 1.447;
}

.hard6 .img1 {
    position: absolute;
    max-width: 27.7%;
    top: 3%;
    right: 12%
}

.hard6 .img2 {
    position: absolute;
    max-width: 28%;
    left: 36.8%;
    bottom: 38%
}

.hard6 .img3 {
    position: absolute;
    max-width: 30%;
    left: 3%;
    bottom: 6.3%
}

.hard8 {
    margin: 0 -5vw;
    position: relative;
    overflow: hidden;
}

.hard8 .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 17%;
    text-align: center;
}

.hard8 .content .en {
    font-size: .16rem;
    color: #333;
    margin-bottom: 1vw
}

.hard8 .content .cn {
    font-size: .38rem;
    color: #333;
    line-height: 1.447;
}

.hard8 .imgbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.hard8 .imgbox img {
    max-width: 48%;
    margin: 0 auto;
    transform: translateY(5%);
    transition: all .3s
}

@media (min-width: 1000px) {
    .news1right:hover .content .h1 {
        color: #50a9b5
    }

    .news1box .imgbox:hover img {
        transform: scale(1.05);
    }

    .news2item:hover .h2 {
        color: #50a9b5
    }

    .news2item:hover .imgbox img {
        transform: scale(1.05);
    }

    .gotop:hover img {
        transform: translateY(-5px);
    }

    .news3box .bottom a:hover {
        color: #50a9b5
    }

    .news3right .itembox .item1:hover {
        color: #50a9b5
    }

    .news3right .itembox .item2 a:hover {
        color: #50a9b5
    }

    .solulist .item:hover {
        box-shadow: -4.532px 2.113px .76rem 0px rgba(22, 22, 21, 0.46);
        transform: translateY(-10px);
    }

    .solulist .item:hover .content:after {
        height: 100%
    }

    .solulist .item:hover .content p {
        color: #fff
    }

    .serbox3 .item:hover {
        color: #50a9b5
    }

    .serbox2 .item:hover img {
        transform: translateY(-8px);
    }

    .caselist .item:hover .date {
        bottom: 0
    }

    .caselist .item:hover .h2 {
        color: #50a9b5
    }

    .caselist .item:hover .imgbox img {
        transform: scale(1.05);
    }

    .about4box .item:hover:before {
        top: -.6rem;
        width: .4rem;
        margin-left: -.2rem
    }

    .about4box .item:hover:after {
        bottom: -.6rem;
        width: .4rem;
        margin-left: -.2rem
    }

    .about5bottom .pagebtn:hover .txt {
        color: #fff
    }

    .about5bottom .pagebtn:hover .icon img:nth-child(1) {
        opacity: 1
    }

    .about5bottom .pagebtn1:hover {
        transform: translateX(-5px);
    }

    .about5bottom .pagebtn2:hover {
        transform: translateX(5px);
    }

    .about5item:hover img {
        transform: translateY(-8px);
    }

    .about6 .item:hover .h1 {
        color: #50a9b5
    }

    .about3ctrl .item:hover:after {
        width: 100%
    }

    .about3ctrl .item:hover {
        color: #50a9b5
    }

    .crscontent .link:hover img {
        transform: translateX(5px);
    }

    .cta2 .btn1:hover {
        background: #50a9b5;
        color: #fff;
        border-color: #50a9b5
    }

    .soft3btn .item:hover:after {
        height: 3px
    }

    .soft3btn .item:hover {
        color: #50a9b5
    }

    .hard8:hover .imgbox img {
        transform: translateY(0);
    }

    .index2 .item .more:hover img {
        transform: translateX(4px);
    }
}

@media (max-width: 1400px) {
    .news1box .imgbox img {
        height: 5rem
    }

    .news1right .title {
        margin-bottom: 4vw
    }

    .ser1left {
        padding-right: 5vw
    }

    .ser1left .h1 {
        margin-bottom: 2vw
    }

    .ser1left p {
        margin-top: 1vw
    }

    .about3swiper {
        /* height: 4.5rem; */
    }
    .about3bottom .year > div{font-size:0.8rem}
    .about4 .about4box {
        height: 6rem
    }

    .cta1r-title {
        margin-bottom: .24rem;
        height: .66rem
    }

    .cta1r-title .en {
        /* font-size: .6rem; */
        /* bottom: -.56rem; */
    }

    .cta2 {
        padding: 3.5vw 5vw 10vw
    }

    .crs2right {
        padding: 0 3.5vw 6vw 3.5vw
    }

    .crs2right > div:nth-child(1) {
        margin-bottom: 3vw
    }

    .crs4right3 .item2 {
        padding: 0 2vw
    }

    .soft1right {
        max-width: 45vw;
        bottom: -6vw
    }

    .hard3-2 .item .titlebox .h1 {
        font-size: .2rem
    }
}

@media (max-width: 1200px) {
    .about6box {
        padding-right: 0
    }

    .cta2 .col-sm-4 {
        padding: 0 2vw
    }

    .cta2 .row {
        margin: 0 -2vw
    }

    .cta1r-title {
        height: .6rem
    }

    .cta1r-title .en {
        /* bottom: -.48rem; */
        /* font-size: .5rem; */
    }

    .soft2 .item {
        padding-left: 0
    }

    .soft3btn .item {
        line-height: .8rem
    }

    .hard1 .crscontent {
        max-width: 5rem
    }
}

@media (max-width: 1025px) {
    .news3right {
        display: none;
    }

    .solulist .item .imgbox:after {
        height: 1px
    }

    .caselist {
        padding-left: 0;
        padding-right: 0
    }

    .about4 .about4box {
        margin: 0 -5vw
    }

    .crs4right3 .item2 {
        padding-left: 0
    }

    .crs4right3 .item3 {
        padding: .35rem 0 0 2vw
    }
}

@media (max-width: 1000px) {
    .serbox1 {
        display: block;
        margin-right: 0
    }

    .serbox1 .ser1right {
        width: 100%
    }

    .ser1left {
        padding: 5vw 0 4vw;
        padding-right: 0
    }

    .caselist .col-sm-4 {
        padding: 0 2.5vw
    }

    .caselist .row {
        margin: 0 -2.5vw
    }

    .about3box .title {
        width: 1.6rem
    }

    .about3ctrl {
        padding-right: 1.6rem
    }

    .about3item .textbox {
        width: 55%
    }

    .about3bottom .year {
        font-size: 1rem
    }

    .about6 .item {
        height: 2rem
    }

    .cta1 {
        display: block;
        margin: 0
    }

    .cta1left {
        width: auto;
        overflow: hidden;
        margin-bottom: 5vw
    }

    .cta1left .item {
        float: left;
        width: 25%;
        padding: .4rem 0
    }

    .cta1right .mapbox {
        height: 6rem
    }

    .cta1left .item:last-child:after {
        content: "";
        width: .2rem;
        height: .04rem;
        background: #50a9b5;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -.1rem
    }

    .cta2 {
        padding: 3.5vw 0 10vw
    }

    .crs4left {
        margin-right: 3vw
    }

    .crs4right1 .item2 p {
        font-size: .2rem
    }

    .crs4right2 .item2 p {
        font-size: .2rem
    }

    .soft4 .crscontent {
        max-width: 100%;
        margin-right: 0
    }

    .soft3btn .item.on:after {
        height: 2px
    }

    .soft2box {
        display: block;
    }

    .soft2 .item {
        width: 100% !important;
        margin-top: .3rem
    }

    .soft1right {
        max-width: 40vw;
        bottom: -5vw;
        right: -5vw
    }

    .soft2 {
        padding: 5vw 0 5vw 5vw
    }

    .soft2 .title {
        margin-bottom: 4vw
    }

    .soft2 .item img {
        max-width: 3.5vw;
        margin-right: .12rem
    }

    .hard1 .crscontent {
        max-width: 4rem;
        top: 8%
    }

    .hard4 .content .h1 {
        font-size: .3rem
    }

    .hard5 .content .cn {
        font-size: .3rem
    }

    .hard6 .content .cn {
        font-size: .3rem
    }

    .hard8 .content .cn {
        font-size: .3rem
    }

    .hard3 .col-sm-4 {
        padding: 0 1vw
    }

    .hard3-2 .item p {
        font-size: 12px;
    }

    .hard3-2 .item .iconbox {
        display: none
    }

    .hard3-2 .item .imgbox {
        margin-top: 12px
    }
}

.videowindow {
    display: none
}

@media (max-width: 767px) {
    .news1con .swiper-container {
        height: 405px;
    }

    .banner2 .bannertitle .en {
        font-size: 6vw
    }

    .banner2 .bannertitle .cn {
        font-size: 5vw
    }

    .banner2 .container2 {
        padding: 0 15px
    }

    .banner2 > img {
        height: 50vh;
        object-fit: cover;
    }

    .subnavbox {
        padding: 0 15px
    }

    .subnavbox .navs {
        white-space: nowrap;
        overflow-x: auto;
    }

    .subnavbox .navs a:after {
        bottom: 0;
        height: 2px;
    }

    .subnavbox .back .icon {
        margin-right: 8px
    }

    .subnavbox .back div {
        font-size: 12px
    }

    .subnavbox .back {
        padding: 0;
        margin-left: 15px
    }

    .subnavbox .navs a {
        line-height: 40px;
        margin-right: 12px;
        font-size: 12px;
    }

    .news1box {
        display: block;
    }

    .news1box .imgbox {
        width: 100%;
    }

    .news1box .imgbox img {
        height: auto
    }

    .news1right {
        padding: 15px 15px 20px
    }

    .news1right .title {
        padding: 10px 0;
        margin-bottom: 15px
    }

    .news1right .title .h2 {
        font-size: 12px
    }

    .news1right .title .h1 {
        font-size: 18px
    }

    .news1right .content .h1 {
        font-size: 15px;
        margin-bottom: 10px
    }

    .news1right .content .h2 {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        height: 63px
    }

    .news1con {
        padding: 25px 15px 20px
    }

    .news1con .swiper-pagination-bullet {
        width: 26px;
        height: 3px
    }

    .news1con .swiper-pagination {
        margin-top: 20px
    }

    .news2con {
        padding: 25px 15px 0
    }

    .news2item .content {
        padding: 15px 0
    }

    .news2item .h1 {
        font-size: 12px
    }

    .news2item .h2 {
        font-size: 12px;
        height: 40px
    }

    .news2item {
        margin-bottom: 15px
    }

    .gotop div {
        font-size: 12px
    }

    .gotop {
        height: 36px
    }

    .pagebtn .txt {
        font-size: 12px
    }

    .news2box .row {
        margin: 0 -7.5px
    }

    .news2box .col-sm-4 {
        padding: 0 7.5px
    }

    .pagebtn {
        display: none;
    }

    .news3box .titlebox .h1 {
        font-size: 18px;
        margin-bottom: 15px
    }

    .news3box .titlebox {
        padding: 10px 0
    }

    .news3box .contentbox {
        padding:
    }

    .news3box {
        padding: 15px
    }

    .news3box .bottom {
        display: block;
    }

    .news3box .bottom a {
        font-size: 12px;
        padding: 5px 0
    }

    .solubox {
        padding: 25px 15px 0
    }

    .solubox .col {
        width: 50%;
        padding: 0 6px
    }

    .solubox .row {
        margin: 0 -6px;
        padding-bottom: 0
    }

    .solulist .item .imgbox .icon {
        left: 6px;
        top: 10px
    }

    .solulist .item .imgbox:after {
        bottom: 10px;
        right: 6px
    }

    .solulist .col:nth-child(even) .item {
        transform: translateY(0)
    }

    .solulist .item .content p {
        font-size: 13px
    }

    .solulist .item {
        margin-bottom: 12px
    }

    .serbox {
        padding: 25px 15px 0
    }

    .ser1left {
        padding: 0 0 15px 0
    }

    .ser1left .h1 {
        font-size: 20px;
        margin-bottom: 15px
    }

    .ser1left p {
        font-size: 12px;
        margin-top: 10px
    }

    .serbox1 {
        margin-bottom: 15px
    }

    .serbox2 {
        margin-bottom: 15px;
        height: 3.5rem;
        padding: 0
    }

    .serbox2 .item p {
        font-size: 12px
    }

    .serbox3 .item {
        display: block;
        font-size: 12px;
    }

    .serbox3 .item .title {
        width: auto;
        font-size: 13px;
        margin-bottom: 8px
    }

    .caselist .item {
        transform: none !important;
        margin-bottom: 10px
    }

    .casebox {
        padding: 25px 15px 0
    }

    .caselist .row {
        margin: 0 -7.5px
    }

    .caselist .col-sm-4 {
        padding: 0 7.5px
    }

    .caselist .item .h2 {
        font-size: 12px;
        line-height: 1.333;
        padding: 10px 0;
        height: 50px;
    }

    .caselist .item .h1 .month {
        font-size: 12px
    }

    .caselist .item .content {
        padding: .05rem 7.5px 0
    }

    .caselist {
        padding-bottom: 0
    }

    .about1 {
        display: block;
        padding: 25px 15px
    }

    .about1right {
        width: auto;
        padding-right: 0
    }

    .about1right .h1 {
        margin-bottom: 15px
    }

    .about1right p {
        font-size: 12px
    }

    .about1left {
        padding-left: 0
    }

    .atitle {
        margin-bottom: 15px
    }

    .atitle .line {
        margin: 10px 0;
        height: 2px
    }

    .atitle .en {
        font-size: 13px
    }

    .atitle .cn {
        font-size: 12px
    }

    .about2 {
        margin: 0 -15px;
        margin-bottom: 25px
    }

    .about3box {
        display: block;
    }

    .about3box .title {
        width: auto;
        margin-bottom: 15px;
        padding-left: 15px;
        text-align: left
    }

    .about3box .title .line {
        margin: 10px 0;
        height: 2px
    }

    .about3box .title .en {
        font-size: 13px
    }

    .about3box .title .cn {
        font-size: 12px
    }

    .about3 {
        padding-right: 0;
        margin: 0 -15px
    }

    .about3item > div {
        display: block;
    }

    .about3item .textbox {
        width: auto;
        padding: 0 15px;
        margin-bottom: 15px;
    }

    .about3item .textbox p {
        font-size: 12px
    }

    .about3item .imgbox img {
        max-width: 25vw
    }

    .about3bottom .year {
        width: 95%;
        bottom: .8rem;
        font-size: .8rem
    }

    .about3bottom {
        margin-right: -15px;
        padding-right: 15px
    }

    .about3ctrl {
        padding-right: 0;
        justify-content: center;
        padding: 0;
        justify-content: space-around;
    }

    .about3ctrl .item {
        font-size: 12px
    }

    .aboutbox {
        padding: 0 15px
    }

    .about1 {
        margin: 0 -15px
    }

    .about4 .about4box {
        margin: 0 -15px;
        padding: 25px 15px 20px;
        display: block;
        height: auto;
        overflow: hidden;
    }

    .about4box .item {
        float: left;
        width: 100%;
        padding: 15px 0
    }

    .about4box .item:before {
        display: none;
    }

    .about4box .item:after {
        display: none;
    }

    .about4box .item p {
        font-size: 12px;
    }

    .about4 {
        padding: 25px 0
    }

    .about4 .atitle {
        margin-bottom: 25px
    }

    .about6 {
        padding: 15px;
        margin: 0 -15px
    }

    .about5 {
        margin: 0 -15px;
        height: 400px
    }

    .about6 .item {
        width: 100%;
        padding-right: 0
    }

    .about6 .item .h1 {
        font-size: 13px;
        margin-bottom: 15px
    }

    .about6 .item .h2 {
        font-size: 12px;
        height: 63px
    }

    .about6 .item .cn {
        font-size: 18px
    }

    .about6 .item .en {
        font-size: 12px;
    }

    .about5 .atitle {
        padding: 25px 15px
    }

    .about5 .atitle .line {
        margin-top: 0
    }

    .about5swiper {
        padding: 0 15px
    }

    .about5bottom {
        padding: 0 15px
    }

    .about5bottom .pagebtn {
        display: flex;
    }

    .about5snum {
        font-size: 13px
    }

    .ctabox {
        padding: 0 15px
    }

    .cta1left .item {
        width: 100%
    }

    .cta1left .item p {
        font-size: 14px
    }

    .cta1 {
        padding: 15px 0 25px
    }

    .cta1r-title {
        font-size: 12px;
        margin-right: 0;
        margin-top: 70px;
        height: .7rem
    }

    .cta1r-title .en {
        font-size: 20px;
        text-align: center;
        right: 0;
        left: 0;
        top: -45px;
        bottom: auto
    }

    .cta1left {
        margin-bottom: 25px
    }

    .cta1right .mapbox {
        height: 84vw
    }

    .cta1left .item:after {
        height: 2px
    }

    .cta2 {
        padding: 15px 0 25px
    }

    .cta2 .item {
        margin-top: 22px
    }

    .cta2 .item input {
        height: 40px
    }

    .cta2 .title {
        margin-bottom: 15px
    }

    .cta2 .item .h1 {
        font-size: 13px;
    }

    .cta2 .item input {
        font-size: 13px
    }

    .cta2 textarea {
        margin: 15px 0;
        font-size: 13px;
    }

    .cta2 .btn1 {
        line-height: .6rem;
        font-size: 13px
    }

    .cta2 .item .h1.on {
        font-size: 12px
    }

    .subnav2 .navs a {
        margin-right: 16px
    }

    .crsbox1 {
        margin-bottom: 20px
    }

    .crsbox2 {
        display: block;
    }

    .crsbox {
        padding: 25px 15px
    }

    .crsbox2 .imgbox {
        width: 100%
    }

    .crs2right {
        padding: 20px 0
    }

    .crscontent .h1 {
        font-size: 16px;
        padding-bottom: 15px;
        margin-bottom: 10px
    }

    .crscontent .h1:after {
        height: 2px
    }

    .crscontent p {
        font-size: 12px
    }

    .crs2right > div:nth-child(1) {
        margin-bottom: 15px
    }

    .crsbox3 {
        padding: 0;
        display: block;
        margin-bottom: 25px
    }

    .crs3left {
        width: 100%;
        padding: 0
    }

    .crs3right img {
        left: 50%;
        margin-left: -30vw;
        max-width: 60vw
    }

    .crs3right {
        height: 40vw;
        margin: 18vw 0
    }

    .crsbox4 .item {
        height: auto;
        display: block;
        padding: 25px 0
    }

    .crsbox4 {
        padding: 0 15px
    }

    .crs4left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px
    }

    .crs4left p {
        font-size: 12px
    }

    .crs4left .h1 {
        margin-bottom: 10px;
        font-size: 16px
    }

    .crs4right1 .item2 p {
        font-size: 12px
    }

    .crs4right1 .item2 .num {
        font-size: .5rem;
    }

    .crs4right1 .item2 .num .fuhao {
        font-size: .3rem;
    }

    .crs4right2 .item2 .h1 {
        font-size: .5rem;
        line-height: .5rem
    }

    .crs4right2 .item2 img {
        height: .5rem
    }

    .crs4right2 .item2 p {
        font-size: 12px;
        margin-top: 10px
    }

    .crs4right3 {
        padding-left: 0;
        border-left: 0
    }

    .crs4right3 .item2 {
        width: 100%;
        height: auto;
    }

    .crs4right3 .item2 p {
        font-size: 12px;
    }

    .crs4right3 .item2 p:nth-child(1) {
        margin-bottom: 5px
    }

    .crs4right3 .item2:nth-child(-n + 2) {
        margin-bottom: 15px
    }

    .crs4right3 .item3 {
        width: 100%;
        justify-content: center;
        padding: 15px 0 0
    }

    .crsbox1 .crscontent {
        position: static;
        width: 100%
    }

    .crscontent .link {
        width: 80px;
        margin-top: 10px;
        font-size: 12px
    }

    .crs1left {
        position: static;
        padding: 15px 0
    }

    .crs1left .num {
        font-size: .6rem;
        margin-bottom: 15px
    }

    .crs1left p {
        font-size: 16px
    }

    .crsbox1list .item {
        width: 100% !important;
        padding: 0 15px !important;
        height: 260px
    }

    .crsbox1list .item:after {
        display: none !important
    }

    .crsbox1list .item dl dt {
        font-size: 13px
    }

    .crsbox1list .item dl dd a {
        font-size: 12px
    }

    .soft1 .crscontent {
        max-width: 100%
    }

    .softbox {
        padding: 0 15px
    }

    .soft1 {
        padding: 25px 0
    }

    .soft1right {
        max-width: 100%;
        position: static;
        margin-top: 20px
    }

    .soft2 .title {
        max-width: 100%
    }

    .soft2 {
        padding: 25px 15px;
        margin-left: -15px
    }

    .soft2 .title {
        font-size: 12px;
        margin-bottom: 25px
    }

    .soft2 .item img {
        max-width: 7vw
    }

    .soft2 .item .h1 {
        font-size: 13px
    }

    .soft2 .item .h2 {
        font-size: 12px
    }

    .soft4 {
        margin: 0 -15px;
        padding: 25px 15px
    }/* .soft4 .crscontent p{margin-bottom: 10px} */

    .soft3 {
        margin: 25px 0
    }

    .soft3box {
        height: 4rem
    }

    .soft3content {
        padding: 0 20px
    }

    .soft3content .h1 {
        font-size: 15px;
        margin-bottom: 10px
    }

    .soft3 .swiper-slide-active .h2 {
        font-size: 12px
    }

    .soft3btn .item {
        font-size: 15px
    }

    .hard1 > img {
        display: none;
    }

    .hard1 .crscontent {
        position: static;
        max-width: 100%;
        margin-bottom: 20px
    }

    .hard1 {
        padding: 25px 15px
    }

    .hard2 {
        position: static;
    }

    .hard2 .item img {
        max-width: 12vw
    }

    .hard2 .item {
        margin-left: 0;
        flex: 1
    }

    .hard2 .item p {
        font-size: 12px
    }

    .hard3-1 {
        display: none;
    }

    .hard3-2 .item .titlebox .h1 {
        font-size: 13px
    }

    .hard4 {
        padding: 0 15px
    }

    .hard4 .content {
        padding: 0 30px
    }

    .hard4 .bgimg {
        height: 4rem;
        object-fit: cover;
    }

    .hard4 .content > div {
        max-width: 100%
    }

    .hard4 .content p {
        font-size: 12px
    }

    .hard4 .content .line {
        margin: 10px auto
    }

    .hard4 .content .h1 {
        font-size: 16px
    }

    .hard5 .content .cn {
        font-size: 16px
    }

    .hard8 > img {
        height: 4rem
    }

    .hard8 .content .cn {
        font-size: 16px
    }

    .hard6 .bgimg {
        height: 4rem;
        object-fit: cover;
    }

    .hard6 .content .cn {
        font-size: 16px
    }

    .hard5 .content .en {
        font-size: 12px
    }

    .hard6 .content .en {
        font-size: 12px
    }

    .hard8 .content .en {
        font-size: 12px
    }

    .hard6 .content {
        bottom: 8%
    }

    .hard3-2 .item .titlebox {
        padding: 10px 0;
        margin-bottom: 10px;
    }

    .hard3-2 .item {
        padding: 15px
    }

    .hard3 .col-sm-4 {
        padding: 7.5px 15px
    }

    .subnavbox .back {
        display: none
    }

    .hard3 .row {
        margin: 0
    }

    .about1left img {
        width: 120px;
        margin: 0 auto;
        margin-bottom: 15px
    }

    .about1right .h1 {
        font-size: 14px
    }

    .about2left {
        display: none
    }

    .about2right {
        width: 100%;
        padding-left: 15px
    }

    .pagebox {
        margin-top: 25px
    }

    .videowindow {
        position: fixed;
        top: 50%;
        left: 50%;
        border-radius: .1rem;
        background: #fff;
        width: 55vw;
        z-index: 1500000;
        transform: translateY(-50%);
        margin-left: -27.5vw;
        width: 90vw;
        left: 5vw;
        margin-left: 0;
    }

    .videowindow video {
        display: block;
        width: 100%;
    }

    .videowindow .video-close {
        cursor: pointer;
        width: .18rem;
        position: absolute;
        right: 0;
        top: -.33rem;
    }

    .mask {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .7);
        z-index: 50;
        display: none;
    }
}

.dpcon {
    background: #eee
}

.dpbox {
    background: #080808
}

.dpbox1 {
    padding-top: 7vw
}

.dpbox1 .title {
    text-align: center;
    margin-bottom: 1.5vw
}

.dpbox1 .title .h1 {
    font-size: .52rem;
    color: #fff
}

.dpbox1 .title .line {
    margin: 2.4vw auto;
    width: .28rem;
    height: .05rem;
    background: #50a9b5;
    border-radius: 5px;
}

.dpbox1 .title p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.75
}

.dpbox2 {
    height: 5.9rem;
    background: url(../images/dp2bg.jpg);
    padding: 0 5vw;
    display: flex;
    align-items: center;
}

.dpbox2 .item {
    flex: 1;
    text-align: center;
}

.dpbox2 .item img {
    box-shadow: 0px .14rem .13rem 0px rgba(23, 22, 22, 0.07);
    margin: 0 auto;
    max-width: 1.69rem;
    margin-bottom: .3rem;
    transition: all .3s
}

.dpbox2 .item .en {
    font-size: .22rem;
    color: #fff;
    line-height: 1.091;
}

.dpbox2 .item .line {
    width: .2rem;
    height: .03rem;
    background: #fff;
    border-radius: 3px;
    margin: .25rem auto .2rem;
    box-shadow: 0px 0px .1rem .1rem rgba(255, 255, 255, .05)
}

.dpbox2 .item .cn {
    font-size: .36rem;
    color: #fff
}

.dptitle1 .h1 {
    font-size: .36rem;
    color: #fff;
    line-height: 1.333
}

.dptitle1 .h1 p {
    font-size: .36rem;
    color: #fff;
    line-height: 1.333;
    margin: 0
}

.dptitle1 .h1 p span {
    font-size: .36rem !important;
    color: #fff;
    line-height: 1.333;
    margin: 0;
    display: block;
}

.dptitle1 p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.75;
    margin-top: 1.5vw
}

.dpbox4 .dptitle1 .h1 p {
    color: #333;
}

.dpbox4 .dptitle1 .h1 p span {
    color: #333;
}

.dptitle1 .line {
    width: .3rem;
    height: .05rem;
    background: #fff;
    border-radius: 5px;
    margin-top: 1.8vw
}

.dptitle1 {
    max-width: 5.4rem
}

.dpbox3-1 {
    overflow: hidden;
    position: relative;
}

.dpbox3-1 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10vw;
    text-align: right;
}

.dpbox3-1 .dptitle1 .iconbox img {
    width: .23rem
}

.dpbox3-1 .dptitle1 .iconbox .txt {
    margin-top: .05rem;
    color: #fff
}

.dpbox3-1 .dptitle1 {
    max-width: 100%
}

.dpbox3-2 {
    overflow: hidden;
    position: relative;
}

.dpbox3-2 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0 10vw;
}

.dpbox3-2 .dptitle1 .iconbox img {
    width: .23rem
}

.dpbox3-2 .dptitle1 .iconbox .txt {
    margin-top: .05rem;
    color: #fff
}

.dpbox3-2 .dptitle1 {
    max-width: 100%
}

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

.dpbox4 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 6.5vw
}

.dpbox4 .dptitle1 .h1 {
    color: #333
}

.dpbox4 .dptitle1 .line {
    background: #333
}

.dpbox4 .dptitle1 p {
    color: #333
}

.dpbox4 .dptitle1 {
    font-size: 0
}

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

.dpbox5 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10vw;
    text-align: right;
}

.dpbox5 .dptitle1 .iconbox img {
    width: .26rem
}

.dpbox5 .dptitle1 .iconbox .txt {
    margin-top: .08rem;
    color: #fff
}

.dpbox5 .dptitle1 {
    max-width: 100%;
    font-size: 0
}

.dpbox5 .dptitle1 .line {
    display: inline-block;
}

.dpbox5 .img2 {
    position: absolute;
    max-width: 13.3%;
    top: 27.9%;
    left: 25.8%
}

.dptitle1 .iconbox img {
    width: .3rem;
    margin: 0 auto
}

.dptitle1 .iconbox {
    display: inline-block;
    margin-bottom: 2.5vw
}

.dptitle1 .iconbox .txt {
    font-size: .16rem;
    color: #333;
    margin-top: .7vw
}

.dpbox6 {
    height: 5.6rem;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    background: url(../images/dp6bg.jpg);
}

.dpbox6 .item {
    flex: 1;
    text-align: center;
    position: relative;
}

.dpbox6 .item .en {
    font-size: .14rem;
    color: #fff
}

.dpbox6 .item .h1 {
    font-size: .36rem;
    color: #fff;
    margin-top: .12rem
}

.dpbox6 .item p {
    font-size: .16rem;
    color: #fff;
    line-height: 1.75
}

.dpbox6 .item .line {
    width: .3rem;
    height: .05rem;
    background: #fff;
    border-radius: 5px;
    margin: 1.5vw auto 1.6vw
}

.dpbox6 .item img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 18vw
}

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

.dptitle {
    text-align: center;
    position: absolute;
    top: 6vw;
    left: 0;
    right: 0
}

.dptitle .h1 {
    font-size: .52rem;
    color: #fff;
}

.dptitle .h2 {
    font-size: .16rem;
    color: #fff;
    margin-top: 1vw
}

.dpbox10 {
    background: #fff;
    padding: 6vw 5vw 5vw
}

.dpbox10 .row {
    margin: 0 -15px
}

.dpbox10 .col-sm-6 {
    padding: 3vw 15px;
    text-align: center;
}

.dpbox10 .h1 {
    font-size: .26rem;
    color: #333
}

.dpbox10 .h2 {
    font-size: .16rem;
    color: #333;
    margin-top: .15rem
}

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

.dpbox11 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    left: 0
}

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

.dpbox12 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    left: 0
}

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

.dpbox13 .content {
    padding: 0 10vw;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    left: 0
}

.dptitle2 {
    color: #333
}

.dptitle2 .en {
    font-size: .14rem;
}

.dptitle2 .h1 {
    font-size: .36rem;
    margin: 1.5vw 0 2vw
}

.dptitle2 .h2 {
    font-size: .16rem;
    line-height: 1.75;
    max-width: 3rem
}

.dpbox13 .dptitle2 {
    color: #fff
}

.dpbox14 {
    background: #fff;
    padding: 8.5vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dpbox14 .item img {
    width: .7rem;
    margin: 0 auto
}

.dpbox14 .item p {
    font-size: .18rem;
    color: #333;
    margin: .32rem 0 .3rem
}

.dpbox14 .item .btn1 {
    display: block;
    line-height: .58rem;
    font-size: .18rem;
    color: #50a9b5;
    width: 2.5rem;
    border-radius: .1rem;
    border: 1px solid #b8b8b8;
    text-align: center;
    transition: all .3s
}

.dpbox14 .item {
    text-align: center;
    margin: 0 6vw
}

.solucon2 {
    background: #eee
}

.solubox2 {
    background: #fff;
    padding: 10vw 5vw .35rem
}

.banner2 video {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

@media (min-width: 1000px) {
    .dpbox14 .item .btn1:hover {
        background: #50a9b5;
        border-color: #50a9b5;
        color: #fff
    }

    .dpbox2 .item:hover img {
        transform: scale(.8);
    }
}

@media (max-width: 1400px) {
    .dpbox2 .item .cn {
        font-size: .3rem
    }

    .dptitle1 .h1 {
        font-size: .3rem
    }

    .dptitle2 .h1 {
        font-size: .3rem
    }

    .dpbox6 .item .h1 {
        font-size: .3rem
    }
}

@media (max-width: 1200px) {
    .dpbox1 .title .h1 {
        font-size: .4rem
    }

    .dptitle .h1 {
        font-size: .4rem
    }

    .dpbox10 .h2 {
        height: .4rem;
        line-height: 1.5
    }

    .dpbox14 .item .btn1 {
        line-height: .5rem
    }

    .banner2 video {
        height: auto
    }
}

@media (max-width: 1000px) {
    .dpbox2 {
        padding: 0
    }

    .dpbox2 .item .cn {
        font-size: .26rem
    }

    .dptitle1 .h1 {
        font-size: .24rem
    }

    .dpbox3-1 .content {
        padding: 0 5vw
    }

    .dpbox3-2 .content {
        padding: 0 5vw
    }

    .dpbox4 .content {
        padding: 5vw 5vw
    }

    .dpbox6 {
        height: auto;
        display: block;
        padding: 2vw 0
    }

    .dpbox5 .content {
        padding: 0 5vw
    }

    .dpbox6 .item {
        padding: 2vw 0
    }

    .dpbox11 .content {
        padding: 0 5vw
    }

    .dpbox12 .content {
        padding: 0 5vw
    }

    .dpbox13 .content {
        padding: 0 5vw
    }
}

.searchcon .box {
    max-width: 8.6rem;
    margin: 0 auto;
}

.searchcon {
    padding: 1rem 0;
    background: #f3f3f3
}

.search-top {
    max-width: 4.8rem;
    margin: 0 auto;
    display: flex;
    margin-bottom: .3rem
}

.search-top input {
    font-size: .16rem;
    color: rgb(51, 51, 51);
    height: .48rem;
    flex: 1;
    border: 1px solid #e24228;
    border-right: 0;
    padding: 0 .18rem
}

.search-top .btn1 {
    width: 1rem;
    background: #e24228;
    padding: 0;
    height: .48rem
}

.search-top .btn1 img {
    margin: 0 auto;
    width: .2rem
}

.searchcon .result {
    font-size: .15rem;
    color: rgb(51, 51, 51);
    text-align: center;
    margin-bottom: .65rem
}

.searchcon .item {
    display: flex;
    align-items: center;
    padding: .1rem 0;
    border-bottom: 1px solid #e24228
}

.searchcon .item .title {
    font-size: .14rem;
    line-height: 20px;
    padding-left: 2px;
    padding-right: .16rem;
    border-right: 1px solid #dadada
}

.searchcon .item .content {
    flex: 1;
    font-size: .16rem;
    color: rgb(51, 51, 51);
    padding: 0 .15rem
}

.searchcon .item .content span {
    color: #1f4fa5
}

@media (max-width: 767px) {
    .videobox {
        position: relative;
    }

    .videobox .videoimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2
    }

    .videobox .playbtn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 3;
        width: 40px;
    }

    .bannertitle {
        position: relative;
        z-index: 20
    }

    .dptitle1 .h1 p {
        font-size: 14px;
    }

    .dptitle1 .h1 p span {
        font-size: 14px !important;
    }

    .banner2 video {
        height: 100vw
    }

    .search-top input {
        height: .6rem;
        font-size: 14px
    }

    .search-top .btn1 {
        height: .6rem;
    }

    .search-top .btn1 img {
        width: .24rem
    }

    .searchcon .result {
        font-size: 13px
    }

    .searchcon .item .title {
        font-size: 13px;
    }

    .searchcon .item .content {
        font-size: 13px;
        line-height: 1.5
    }

    .dpbox1 .title .line {
        margin: 12px auto
    }

    .dpbox1 {
        padding-top: 30px
    }

    .dpbox1 .title p {
        font-size: 12px
    }

    .dpbox1 .title {
        margin-bottom: 20px
    }

    .dpbox2 .item .line {
        height: 2px
    }

    .dpbox2 .item .en {
        font-size: 12px
    }

    .dpbox2 .item .cn {
        font-size: 13px
    }

    .dpbox2 .item img {
        max-width: 1.2rem;
        margin-bottom: 15px
    }

    .dpbox2 {
        height: 240px
    }

    .dpbox2 .item .line {
        margin: 10px auto
    }

    .dpbox3-1 .dptitle1 .iconbox img {
        width: 16px
    }

    .dptitle1 .iconbox .txt {
        margin-top: 5px
    }

    .dptitle1 .iconbox .txt {
        font-size: 12px
    }

    .dptitle1 .h1 {
        font-size: 14px
    }

    .dptitle1 p {
        font-size: 12px;
        margin-top: 2vw;
    }

    .dpbox3-1 .content {
        padding: 0 15px
    }

    .dpbox3-2 > img {
        height: 240px;
        object-fit: cover;
    }

    .dpbox3-1 > img {
        height: 240px;
        object-fit: cover;
    }

    .dpbox3-2 .dptitle1 .iconbox img {
        width: 16px
    }

    .dptitle1 .line {
        height: 2px;
        margin-top: 2vw
    }

    .dpbox4 .content {
        padding: 25px 15px
    }

    .dpbox4 > img {
        height: 240px;
        object-fit: cover;
    }

    .dpbox5 .dptitle1 .iconbox img {
        width: 18px
    }

    .dpbox5 .content {
        padding: 0 15px
    }

    .dpbox5 .bgimg {
        height: 240px;
        object-fit: cover;
    }

    .dpbox5 .img2 {
        top: 30%;
        max-width: 20%;
        left: 40%
    }

    .dpbox6 .item .en {
        font-size: 12px
    }

    .dpbox6 .item .h1 {
        font-size: 16px
    }

    .dpbox6 .item p {
        font-size: 12px
    }

    .dpbox6 .item .line {
        height: 2px;
        margin: 3vw auto
    }

    .dpbox6 .item img {
        max-width: 32vw;
    }

    .dpbox6 .item {
        padding: 3vw 0
    }

    .dpbox6 {
        padding: 3vw 0
    }

    .dptitle .h1 {
        font-size: 20px
    }

    .dptitle .h2 {
        margin-top: 8px
    }

    .dpbox10 {
        padding: 5vw 15px
    }

    .dpbox10 .h2 {
        font-size: 12px
    }

    .dpbox10 .h1 {
        font-size: 15px
    }

    .dptitle .h2 {
        font-size: 12px
    }

    .dpbox11 > img {
        height: 300px;
        object-fit: cover;
    }

    .dpbox11 .content {
        padding: 0 15px
    }

    .dpbox10 .col-sm-6 {
        padding: 2.5vw 15px
    }

    .dpbox12 .content {
        padding: 0 15px
    }

    .dptitle2 .h1 {
        font-size: 14px;
        margin: 1.8vw 0 2vw
    }

    .dptitle2 .en {
        font-size: 12px
    }

    .dptitle2 .h2 {
        font-size: 12px
    }

    .dpbox14 .item {
        margin: 0 2vw
    }

    .dpbox14 .item p {
        font-size: 12px;
        margin: 12px 0
    }

    .dpbox14 .item .btn1 {
        margin: 0 auto;
        font-size: 12px
    }

    .dpbox14 .item img {
        width: .6rem
    }

    .idx3left .h1 {
        font-size: 13px
    }

    .idx3swpbtn .item {
        border-width: 1px
    }

    .idx3swpbtn .item img {
        width: 5px
    }

    .idx3swpbtn .item div {
        font-size: 12px
    }

    .idx3right .item .h1 .num {
        font-size: 13px
    }

    .idx3right .item .h1 span {
        font-size: 13px
    }

    .idx3right .item {
        padding: .2rem 0
    }

    .idx3right .item .content {
        padding: 15px .38rem 0
    }

    .idx3right .item .content p {
        font-size: 12px;
        height: auto;
    }
}

.mobile-footer-btn {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    justify-items: center;
    bottom: 0;
    background: #000;
    z-index: 999;
}

.mobile-footer-item {
    padding: 8px 0;
    flex: 1;
    justify-content: center;
    justify-items: center;
}

.mobile-footer-item img {
    width: 40px;
    display: block;
    margin: auto;
}

.mobile-footer-item p {
    color: #fff;
    text-align: center;
    margin-top: 0px;
}

.weixin {
    position: relative;
}

.weixin-code {
    width: 200px;
    height: 200px;
    top: -200px;
    right: 0;
    position: absolute;
    display: none;
}

.weixin-code img {
    width: 100%
}



.ccadd_mainbox {
    background: #fff;
    padding: 0 5vw;
}

.ccadd_mainbox ul {
    padding: 0;
}

.ccadd_mainbox ul li {
    display: flex;
    justify-content: space-between;
    padding: 4vw 0 4vw;
    gap: 4vw;
}

.ccadd_mainbox ul li .left_main {
    flex: 1;
    order: 2;
}

.ccadd_mainbox ul li .left_main .imgbox {}

.ccadd_mainbox ul li .left_main .imgbox img {}

.ccadd_mainbox ul li .right_main {
    flex: 1;
    order: 1;
}

.ccadd_mainbox ul li:nth-child(2n) .right_main {
    order: 2;
}

.ccadd_mainbox ul li:nth-child(2n) .left_main {
    order: 1;
}
.ccadd_mainbox ul li h2 {
    margin: 0 0 0.3rem;
}
.ccadd_mainbox ul li .right_main .text {
    margin: 0 0 0.3rem;
}

.people_con {
    background: #fff;
    padding: 5vw;
}

.people_con .addti {
    text-align: center;
}

.people_con .addti .h1 {
    font-size: 0.38rem;
    margin: 0 0 0.3rem;
}

.people_con .addti p {
    font-size: .16rem;
    color: #666;
    line-height: 1.75;
    margin: 00 0 0.2rem;
}

.people_box {}

.people_box .addti {
    /* text-align: left; */
}

.people_box .addti h3 {
    position: relative;
    padding: 0.5rem 0 0.2rem;
}
.people_box .addti h3:after {
    content: "";
    height: .04rem;
    width: .24rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    background: #50a9b5;
    transform: translate(-50%, 0px);
}
.people_box ul {
    display: flex;
    flex-flow: wrap;
    padding: 0;
    margin: 0.3rem 0;
}

.people_box ul li {
    width: 25%;
    padding: 0.15rem;
}

.people_box ul li .imgj {}

.people_box ul li .imgj img {}


@media (max-width: 800px){
.ccadd_mainbox ul li {
    flex-flow: column;
}

.ccadd_mainbox ul li .left_main {
    order: 1;
}

.people_box ul li {
    width: 50%;
}
}


.addabout5 {}

.addabout5 img {
    width: 100%;
    height: auto;
}
.img_text_list {}

.img_text_list ul {
    display: flex;
    flex-flow: wrap;
    margin: -1vw;
}

.img_text_list ul li {
    width: 25%;
    padding: 1vw;
}

.img_text_list ul li .item {}

.img_text_list ul li .item .imgj {}

.img_text_list ul li .item .imgj img {
    width: 100%;
}

.img_text_list ul li .item .text {}

.img_text_list ul li .item .text h3 {
    font-size: 20px;
    margin: 10px 0;
}

.img_text_list ul li .item .text p {}
.img_text_list.flew5 ul li {
    width: 20%;
}