.banner-container{width: 100%;overflow: hidden;}
.banner{width: 100%;}
.banner .swiper-slide img {width: 100%;object-fit: cover;}
.banner .swiper-pagination{bottom: 64px;font-size: 0;width: 100%;text-align: center;}
.banner .swiper-pagination li{width: 44px;height: 3px;border-radius: initial;background: #8b99b4;display: inline-block;margin: 0 8px;cursor: pointer;}
.banner .swiper-pagination li.on{background: #0e7cc7;}

.banner .swiper-pagination .swiper-pagination-bullet{width: 44px;height: 3px;border-radius: initial;background: #8b99b4;display: inline-block;margin: 0 8px !important;cursor: pointer;}
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #0e7cc7;}

.tablist-container{width: 100%;padding: 60px 0;}
.tablist{width: 100%;padding: 0 50px;overflow: hidden;margin-top: 34px;}
.tablist-top{width: 100%;}
.tablist-top ul{margin-left: -1%;}
.tablist-top ul li{width:24%;float: left;margin-left: 1%;background-color: #eff2f7;transition: all .4s linear;height: 430px;position: relative;padding: 32px;margin-bottom: 1%;}
.tablist-topwords h4{font-size: 28px;color: #111;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.tablist-topwords p{font-size: 18px;color: #666;margin-top: 8px;}
.tablist-topwords a{display: inline-block;font-size: 16px;color: #1b8ad7;margin-top: 18px;position: relative;padding: 4px 0;}
.tablist-topwords a:after{position: absolute;content: "";width: 20px;height: 20px;background: url('../images/tablist-arr.png') no-repeat center center;top: 50%;right: -20px;margin-top: -10px;}
.tablist-topwords a:before{content: "";position: absolute;width: 0%;height: 1px;background: #1b8ad7;left: 0;bottom: 0;transition: all .4s linear;z-index: 2;}
.tablist-topwords a:hover:before{width: 100%;}
.tablist-toppic{width: 100%;margin-top: 18px;}
.tablist-toppic a{display: flex;height: 230px;align-items: center;justify-content: center;}
.tablist-toppic img{max-width: 100%;object-fit: cover;max-height: 100%;transition: all .6s linear;}
.tablist-top ul li:hover{box-shadow: 0 6px 16px 2px rgb(216, 216, 216);transform: translateY(-4px);}
.tablist-top ul li:hover .tablist-toppic img{transform: translateY(-10px);}
.tablist-bottom{width: 100%;margin-top: 20px;}
.tablist-bottom ul{margin-left: -1%;}
.tablist-bottom ul li{width: 24%;float: left;margin-left: 1%;background-color: #eff2f7;transition: all .4s linear;height: 318px;position: relative;padding: 28px 44px;}
.tablist-bottomwords h4{font-size: 24px;color: #111;}
.tablist-bottomwords a{display: inline-block;font-size: 16px;color: #1b8ad7;margin-top: 10px;position: relative;padding: 4px 0;}
.tablist-bottomwords a:after{position: absolute;content: "";width: 20px;height: 20px;background: url('../images/tablist-arr.png') no-repeat center center;top: 50%;right: -20px;margin-top: -10px;}
.tablist-bottomwords a:before{content: "";position: absolute;width: 0%;height: 1px;background: #1b8ad7;left: 0;bottom: 0;transition: all .4s linear;z-index: 2;}
.tablist-bottomwords a:hover:before{width: 100%;}
.tablist-bottompic{width: 100%;margin-top: 22px;text-align: right;padding-right: 4%;}
.tablist-bottompic img{max-width: 100%;object-fit: cover;max-height: 100%;transition: all .6s linear;}
.tablist-bottom ul li:hover{box-shadow: 0 6px 16px 2px rgb(216, 216, 216);transform: translateY(-4px);}
.tablist-bottom ul li:hover .tablist-bottompic img{transform: translateY(-10px);}











.case-container{width: 100%;padding: 20px 0 80px 0;}
.case{width: 100%;}
.case-title{width: 100%;text-align: center;}
.case-title h4{font-size: 42px;color: #111;}
.case-title i{display: block;margin: 0 auto;width: 30px;height: 3px;background-color: #0e7cc7;margin-top: 10px;}
.case-message{width: 100%;margin-top: 34px;}
.case-messagelist{width: 100%;margin-top: 40px;}
.case-messagelist-size{width: 100%;height: 260px;position: relative;overflow: hidden;}
.case-messagelist-size img{width: 100%;height: 100%;object-fit: cover;transition: all .4s linear;}
.case-messagelist-size:hover img{transform: scale(1.08);}
.case-messagelist .swiper-wrapper{transition-timing-function: linear;}
.case-messagelist-words{display: block;position: absolute;width: 100%;height: 100%;z-index: 2;left: 0;top: 0;overflow: hidden;}
.case-messagelist-words p{width: 90%;text-align: center;opacity: 0;margin-top: -16px;position: absolute;left: 5%;top: 50%;transform: translate(0,-50%);font-size: 18px;color: #fff;font-weight: bold;z-index: 6;}
.case-messagelist-words:before{content: "";position: absolute;background: rgba(0, 0, 0,.6);z-index: 3;width: 80%;height: 80%;transform: translate(-50%,-50%);left: 50%;top: 50%;transition: all .4s linear;opacity: 0;}
.case-messagelist-size:hover .case-messagelist-words:before{width: 100%;height: 100%;opacity: 1;}
.case-messagelist-size:hover .case-messagelist-words p{animation: caseDh .4s linear both;animation-delay:400ms;}
@keyframes caseDh {0% {margin-top: -16px;opacity: 0;}100% {margin-top: 0px;opacity: 1;}}
.case-more{width: 100%;overflow: hidden;text-align: center;margin-top: 44px;padding: 10px 0;}
.case-more a{
    font-size: 16px;color: #fff;width: 180px;height: 50px;text-align: center;line-height: 54px;
    display: block;position: relative;z-index: 1;transition: all .4s linear;margin: 0 auto;box-sizing: border-box;
}
.case-more a i{width: 14px;height: 7px;background: url('../images/case-arr.png') no-repeat;display: inline-block;vertical-align: middle;margin-left: 10px;transition: all .4s linear;position: relative;z-index: 3;}
.case-more a span{position: relative;z-index: 3;}
.case-more a:before,.case-more a:after {
    content: '';border-radius: inherit;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;transition: transform 0.3s, background-color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
}
.case-more a:before{border: 2px solid #1b8ad7;}
.case-more a:after{background: #1b8ad7;margin-top: 2px}
.case-more a:hover:before {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
.case-more a:before, .case-more a:hover::after {-webkit-transform: scale3d(0.8, 0.8, 1);transform: scale3d(0.8, 0.8, 1);}
.case-message .swiper-slide{width: 380px;float: left;margin: 0 10px}
.case-message .swiper-container,.case-message .swiper-wrapper{font-size: 0;}


.videopic-container{width: 100%;background: url('../images/video-bg.jpg') repeat center center;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;}
.videopic{width: 100%;padding: 210px 0 80px;}
.videopic-words{width: 1200px;margin: 0 auto;text-align: center;}
.videopic-words h4{font-size: 42px;color: #fff;}
.videopic-words b{display: block;margin: 0 auto;width: 30px;height: 3px;margin-top: 12px;background-color: #fff;}
.videopic-words p{font-size: 18px;color: #fff;line-height: 26px;margin-top: 24px;}
.videopic-words p>span{font-weight: bold;}
.videopic-play{margin-top: 60px;text-align: center;}
.videopic-play i{display: inline-block;vertical-align: middle;width: 48px;height: 48px;background: url('../images/video-play.png') no-repeat;position: relative;}
.videopic-play i:before,.videopic-play i:after{    content: "";
    display: block;width: 58px;height: 58px;border: 1px dotted #fff;border-radius: 100%;position: absolute;
    top: -5px;left: -5px;animation: videoDh 1.5s linear infinite;opacity: 0.8;
}
.videopic-play i:before{animation-delay: 0.6s}
.videopic-play i:after{animation-delay: 0s }
@keyframes videoDh { from {transform: scale(1, 1); opacity: 0.8;} to {transform: scale(1.8, 1.8); opacity: 0;} }
.videopic-play span{display: inline-block;vertical-align: middle;font-size: 18px;color: #fff;margin-left: 16px;height: 48px;line-height: 48px;}
.videopic-play a:hover span{text-decoration: underline;}

.news-container{width: 100%;padding: 80px 0;background-color: #eff2f7;}
.news{width: 1520px;margin: 0 auto;}
.news ul{margin-left: -1%;}
.news ul li{width: 32.3333333333%;margin-left: 1%;float: left;}
.news-pic{width: 100%;height: 260px;overflow: hidden;position: relative;}
.news-pic img{width: 100%;height: 100%;object-fit: cover;transition: all .6s linear;}
.news-pic h6{position: absolute;bottom: 36px;left: 36px;font-size: 36px;color: #fff;z-index: 1;}
.news ul li:hover .news-pic img{transform: scale(1.1);}
.news-words{width: 100%;overflow: hidden;padding: 0 38px 38px 38px;background-color: #fff;}
.news-wordslist{width: 100%;padding: 28px 0;border-bottom: 1px solid #e5e5e5;overflow: hidden;}
.news-wordslist p{font-size: 16px;color: #666;}
.news-wordslist a{display: block;font-size: 18px;color: #333;margin-top: 10px;line-height: 26px;height: 52px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-wordslist a:hover{color: #1b8ad7;}
.news-words>div:nth-child(3){border-bottom: none;}
.news-wordsmore{width: 100%;overflow: hidden;margin-top: 20px;font-size: 0;}
.news-wordsmore a p{width: 28px;height: 28px;border-radius: 100%;background-color: #1b8ad7;display: inline-block;vertical-align: middle;position: relative;}
.news-wordsmore a p i{display: block;position: absolute;left: 7px;width: 14px;height: 7px;background: url('../images/case-arr.png') no-repeat;top: 10.5px;}
.news-wordsmore a span{font-size: 16px;color: #1b8ad7;display: inline-block;vertical-align: middle;padding-left: 12px;height: 28px;line-height: 28px;}
.news-wordsmore a:hover p i{animation: newsDh .4s linear both;}
@keyframes newsDh {0% {left: 7px;opacity: 1;}25%{left: 14px;opacity: 0;}75%{left: -14px;opacity: 0;}100% {left: 7px;opacity: 1;}}


/* 弹窗视频 */
.media_show {
    display: none;position: fixed;background: rgba(0,0,0,0.8);left: 50%;
    top: 50%;width: 702px;height: 425px;z-index: 99;margin-left: -351px;margin-top: -213px;
}
.media_show span {
    position: absolute;right: -30px;top: -30px;width: 40px;height: 40px;background: #000;color: #fff;
    font-size: 20px;line-height: 40px;text-align: center;border-radius: 50%;cursor: pointer;
}





/* -------------------------PC端--------------------------- */

@media all and (min-width:2000px) {
    .case-message .swiper-slide{width: 512px;}
    .case-messagelist-size{height: 320px;}
}
@media all and (max-width:1560px) {
    .tablist-toppic{padding-right: 0;}
    .case-messagelist-size{height: 240px;}
    .news{width: 94%;}
    .news-pic{height: 240px;}
}

@media all and (max-width:1460px) {
    .case-container {padding: 4px 0 60px 0;}
    .case-title h4{font-size: 36px;}
    .case-messagelist-words p{font-size: 16px;}
    .case-messagelist-size{height: 210px;}
    .case-messagelist{margin-top: 20px;}
    .case-more{margin-top: 30px;}
    .videopic{padding: 160px 0;}
    .videopic-words h4{font-size: 36px;}
    .news-container{padding: 60px 0;}
    .news-pic{height: 230px;}
    .news-words {padding: 0 28px 38px 28px;}
    .news-pic h6{font-size: 32px;}
}

@media all and (max-width:1380px) {
    .tablist-top ul li {padding: 24px 28px;}
    .tablist-topwords h4{font-size: 24px;}
    .tablist-bottom ul li{height: 318px;padding: 24px 28px;}
    .tablist-bottomwords h4{font-size: 22px;}
    .case-title h4 {font-size: 30px;}
    .videopic-words h4 {font-size: 30px;}
    .news-pic{height: 216px;}
    .news-pic h6{font-size: 30px;}
}

@media all and (max-width:1300px) {
    .news-pic{height: 204px;}
    .news-pic h6 {font-size: 26px;left: 28px;bottom: 28px;}
    .news-wordslist{padding: 18px 0;}
    .tablist{padding: 0 4%;}
}

@media all and (max-width:1200px) {
    .tablist-bottom ul li{height: 288px;}
    .case-messagelist-words p {font-size: 14px;}
    .case-messagelist-words p {font-size: 14px;}
    .news-wordslist a {font-size: 16px;margin-top: 8px;line-height: 24px;height: 46px;}
    .news-words {padding: 0 16px 28px 16px;}
    .news-pic h6 {font-size: 22px;left: 20px;bottom: 20px;}
    .news-pic {height: 176px;}
    .videopic-words{width: 94%;}
   
}

/* ------------------------手机端-------------------------- */
/* 
@media all and (max-width:1000px) {
    .tablist-container{padding: 32px 0;}
    .tablist-top ul{margin-left: 0;}
    .tablist-top ul li {width: 100%;float: left;margin-left: 0%;margin-top: 16px;padding: 20px 24px;height: auto;}
    .tablist-bottom{margin-top: 0;}
    .tablist-bottom ul li{width: 49%;margin-top: 16px;padding: 20px 16px;height: 244px;}
    .tablist-bottomwords h4 {font-size: 18px;}
    .case-title h4 {font-size: 24px;}
    .case-messagelist-size{height: 110px;}
    .case-messagelist {margin-top: 8px;}
    .case-message {margin-top: 26px;}
    .case-messagelist-words p {font-size: 12px;}
    .case-more a{width: 166px;height: 42px;line-height: 46px;}
    .case-more {margin-top: 18px;}
    .case-container {padding: 4px 0 32px 0;}
    .videopic {padding: 52px 0;}
    .videopic-words h4 {font-size: 22px;}
    .videopic-words p {font-size: 16px;line-height: 24px;margin-top: 18px;}
    .videopic-play i:before, .videopic-play i:after {width: 48px;height: 48px;top: -1px;left: -1px;}
    .videopic-play{margin-top: 44px;}
    .news-container {padding: 32px 0 44px 0;}
    .news ul {margin-left: 0;}
    .news ul li {width: 100%;margin-left: 0;}
}
 */




.joan2 {
    width: 100%;
    }
.joan2 ul {
      width: 100%;
      height: 680px;
      background-color: #034d80;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start; }
      .joan2 ul li {
        width: 50%; }
       .joan2 ul li figure {
          display: block;
          width: 100%;
          position: relative;
          padding: 35.51%;
          min-height: 680px; }
         .joan2 ul li figure img {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            object-fit: cover;
            left: 0;
            top: 0; }
        .joan2 ul li + li {
          max-width: 699px;
          padding-left: 48px; }
           .joan2 ul li + li p {
            margin-top: 40px;
            font-size: 16px;
            color: #fff;
            line-height: 30px; }
           .joan2 ul li + li a {
            display: block;
            width: 150px;
            margin-top: 68px;
            font-size: 18px;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            border: 2px solid #fff;
            border-radius: 50px;
            transition: .4s all; }
             .joan2 ul li + li a:hover {
              background-color: #25878c;
              border-color: #25878c;
              color: #fff; }

             section {
                display: block;
            }

            .public_title2 {
                font-size: 30px;
                color: #fff;
                line-height: 30px;
                text-transform: uppercase;
                padding-bottom: 30px;
                border-bottom: 1px solid #fff;
                font-weight: bold;
            }



            .public_title2 span {
                display: block;
                font-size: 24px;
                line-height: 30px;
                margin-top: 8px;
                font-weight: bold;
            }
            .joan2 ul li + li p {
                margin-top: 40px;
                font-size: 16px;
                color: #fff;
                line-height: 30px;
            }
           .joan2 ul li + li a {
                display: block;
                width: 150px;
                margin-top: 68px;
                font-size: 18px;
                color: #fff;
                padding: 10px 0;
                text-align: center;
                border: 2px solid #fff;
                border-radius: 50px;
                transition: .4s all;
            }


            .public_title {
                width: 385px;
                margin: 0 auto;
                font-weight: bold;
                text-align: center;
                font-size: 36px;
                color: #184755;
                line-height: 30px;
                text-transform: uppercase;
            }



            .public_title span {
                display: block;
                margin-top: 15px;
                font-size: 24px;
                color: #184755;
                line-height: 30px;
                text-align: center;
                position: relative;
            }


            .public_title span:before {
                content: '';
                opacity: 1;
                display: block;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 120px;
                height: 1px;
                background-color: #184755;
            }.public_title span:after {
                content: '';
                opacity: 1;
                display: block;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 120px;
                height: 1px;
                background-color: #184755;
            }


            .public_dl dl {
                width: 1400px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-start;
                align-items: unset;
            }

            .public_dl dl dd {
                width: 20%;
                padding: 62px 0;
                text-align: center;
                font-size: 36px;
                color: #fff;
                font-weight: bold;
                border-right: 1px solid #bedbdd;
                transition: .4s all;
            }


            .public_dl dl dd > a {
                display: block;
                padding: 41.5px 0;
                width: 100%;
                text-align: center;
                font-size: 36px;
                color: #fff;
                font-weight: bold;
                transition: .4s all;
            }









           .joan4 {
                width: 100%;
                background: url("../images/joan.jpg") no-repeat;
                background-size: cover;
                padding-top: 80px; }
                .joan4 > div {
                  width: 100%; }
                  .joan4 > div .joan4_title {
                    width: 1400px;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center; }
                     .joan4 > div .joan4_title .public_title {
                      width: 495px;
                      margin-bottom: 42px; }
                      .joan4 > div .joan4_title .public_title span {
                        color: #fff; }
                        .joan4 > div .joan4_title .public_title span:before {
                          background-color: #fff; }
                         .joan4 > div .joan4_title .public_title span:after {
                          background-color: #fff; }
                    .joan4 > div .joan4_title p {
                      width: 80%;
                      margin: 0 auto;
                      font-size: 18px;
                      line-height: 30px;
                      color: #fff;
                      text-align: center; }
                     .joan4 > div .joan4_title a {
                      display: inline-block;
                      margin: 0 auto;
                      margin-top: 55px;
                      font-size: 18px;
                      color: #fff;
                      font-weight: bold;
                      width: 150px;
                      padding: 8px 0;
                      border: 2px solid #fff;
                      text-align: center;
                      border-radius: 50px;
                      transition: .4s all; }
                      .joan4 > div .joan4_title a:hover {
                        background-color: #25878c;
                        border-color: #25878c; }
                     .joan4 > div .joan4_title figure {
                      display: block;
                      width: 53.7373%;
                      position: relative;
                      padding: 6.5%;
                      margin: 0 auto; }
                       .joan4 > div .joan4_title figure img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        position: absolute;
                        object-fit: contain;
                        left: 0;
                        top: 0; }
                   .joan4 > div .public_dl {
                    margin-top: 80px;
                    background-color: transparent;
                    border-top: 1px solid #c7ccd1; }
                    .joan4 > div .public_dl dl dd {
                      width: 16.6666%;
                      padding: 0;
                      border-right: 1px solid #c7ccd1;
                      position: relative; }
                      .joan4 > div .public_dl dl dd:first-child {
                        border-left: 1px solid #c7ccd1; }
                       .joan4 > div .public_dl dl dd figure {
                        width: 50px;
                        height: 44px;
                        margin: 0 auto; }
                        .joan4 > div .public_dl dl dd figure img {
                          width: 100%;
                          height: 100%;
                          object-fit: contain; }
                       .joan4 > div .public_dl dl dd span {
                        font-size: 16px;
                        color: #fff;
                        line-height: 30px;
                        font-weight: bold; }
                       .joan4 > div .public_dl dl dd:before {
                        content: '';
                        opacity: 1;
                        display: block;
                        width: 0;
                        height: 5px;
                        background-color: #25878c;
                        transition: .4s all;
                        position: absolute;
                        bottom: 0;
                        left: 0; }
                       .joan4 > div .public_dl dl dd:hover {
                        background-color: rgba(0, 0, 0, 0.4); }
                         .joan4 > div .public_dl dl dd:hover:before {
                          width: 100%; }






.padding {padding: 5% 0; }
.warpper {
    width: 80%;
    margin: 0 auto;
}
.in_youshi .item {
    border: 1px solid #dcdcdc;
    margin-top: 34px;
}
.in_youshi .item .list{
    float: left;
    width: 25%;
    height: 378px;
    position: relative;
    padding:0 2%;
    border-left:1px solid #dcdcdc;
    overflow: hidden;
    background: #fff;
}
.in_youshi .item .list:first-child{
    border-left:none;
}
.in_youshi .item .list .text{
    height: 100%;
}
.in_youshi .item .list .text .inner{
    margin-top: 16%;
}
.in_youshi .item .list .title{
    font-weight: bold;
    font-size:30px;
    color:#333333;
}
.in_youshi .item .list .con{
    font-size:16px;
    color:#999999;
    margin:10% 0 33% 0;
    width: 55%;
    line-height: 2;
}
.in_youshi .item .list .shu{
    font-size:30px;
    color:#00528a;
    font-weight: bold;
}
.in_youshi .item .list .shu span{
    opacity: 0;
}
.in_youshi .item .list .img1{
    position: absolute;
    height: 100%;
    width: 55%;
    top:0;
    right:0;
}

.in_youshi .item .list .img2{
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 55%;
    top:0;
    right:0;
}

.in_youshi .item .list:hover{
    background: #00528a;
}
.in_youshi .item .list:hover .img1{
    opacity: 0;
}
.in_youshi .item .list:hover .img2{
    opacity: 1;
}
.in_youshi .item .list:hover .text .title{
    color:#fff;
}
.in_youshi .item .list:hover .text .con{
    color:#fff;
}
.in_youshi .item .list:hover .text .shu{
    color:#fff;
}
.in_youshi .item .list:hover .text .shu span{
    color:#fff;
    opacity: 1;
}
.img_jz {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


 .about-lists {
    text-align: center;
   padding-bottom: 150px;
}
.about-lists ul {
    text-align: left;
    display: inline-block;
}
.about-lists ul li {
    float: left;
    margin-right: 75px;
}
.about-lists .about-img {
    width: 70px;
    height: 70px;
    margin-right: 30px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.float-left {
    float: left;
}
 .about-lists .about-txt {
    color: #fff;
    text-align: left;
    font-size: 16px;
}
 .about-lists .about-txt span {
    font-size: 24px;
    margin-bottom: 10px;
}
.about-lists .about-txt p {
    margin-top: 8px;
    font-size: 15px;
}

@media (max-width:1600px){

    .warpper{
        width: 100%;
    }
}