@charset "utf-8";




/* news */
.news {
    padding: 66px 0 77px;
    background: url(../images/news_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

.news .w1430 {
    display: flex;
}

.news_left {
    width: 64.55%;
}


.news_left_main {
    width: 115.82%;
    background: #EBF2FF;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px;
    padding-right: calc(15.82% + 30px);
}

.news_left_main .news_left_tw {
    width: 48.5%;
    border-bottom: 1px solid #D9DBDF;
    margin-bottom: 15px;
}

.news_left_main .news_left_tw .news_left_img {
    width: 100%;
    height: 282px;
    overflow: hidden;
}

.news_left_main .news_left_tw .news_left_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.news_left_main .news_left_tw:hover .news_left_img img {
    transform: scale(1.1);
}

.news_left_main .news_left_tw .news_left_text {
    margin: 25px 0;
    font-size: 16px;
    font-weight: 400;
    color: #2A2A2A;
    line-height: 20px;
    width: calc(100% - 30px);
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.news_left_main .news_left_tw:hover .news_left_text {
    color: #0949C8;
    font-weight: bold;
    border-bottom: 2px solid #97ABE4;
}

.news_left_main .news_left_tw .news_left_time {
    display: flex;
    align-items: center;
    height: 14px;
    margin-bottom: 20px;
}

.news_left_main .news_left_tw .news_left_time span {
    width: 14px;
    height: 14px;
    background: url(../images/dot.png);
    background-size: auto;
    transition: background 0.3s ease-in-out;
}

.news_left_main .news_left_tw:hover .news_left_time span {
    background: url(../images/dot_.png);
}

.news_left_main .news_left_tw .news_left_time p {
    font-size: 15px;
    font-weight: 400;
    color: #4B4B4B;
    margin-left: 10px;
    transition: color 0.3s ease-in-out;
}

.news_left_main .news_left_tw:hover .news_left_time p {
    color: #2150AE;

}

.news_left_main li {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 11px;
}

.news_left_main li::before {
    position: absolute;
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 6px;
    background: #883B8A;
    left: 0;
    top: calc(50% - 2.5px);
}

.news_left_main li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news_left_main li a p {
    font-size: 16px;
    color: #646464;
    max-width: calc(100% - 120px);
}

.news_left_main li a span {
    font-size: 16px;
    white-space: nowrap;
    color: #888989;
}

.news_right {
    width: 33.85%;
}

.news_right .title {
    padding-left: 0;
}

.news_right_main {
    position: relative;
    height: 590px;
}

.news_right_main img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.news_right_main ul {
    z-index: 9;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 30px);
    height: 526px;
    background: #FFFFFF;
    padding: 32px 42px 10px 12px;
}

.news_right_main ul li {
    margin-bottom: 38px;
}

.news_right_main ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news_right_main ul li a div {
    width: 77px;
    height: 52px;
    border-right: 1px solid #D9DBDF;
}

.news_right_main ul li a div span {
    display: block;
    text-align: center;
    line-height: 28px;
    font-size: 34px;
    font-weight: bold;
    color: #1D53BE;
    margin-bottom: 14px;
}

.news_right_main ul li a div p {
    text-align: center;
    font-size: 12px;
    line-height: 9px;
    font-weight: 400;
    color: #000000;
}

.news_right_main ul li a .line-2 {
    width: calc(100% - 95px);
    line-height: 33px;
    font-weight: 400;
    color: #000000;
    font-size: 15px;
}

/* map */
.map{
    display:none;
    padding:30px 0;
    /* background: url(../images/mapWrap_top.png); */
    background-position: center;
    background-size: 100% 100%;
}
.map_title_{
     display: flex;
    align-items: center;
}

.map_title_ p{
     margin-left: 27px;
     font-size: 32px;
     font-weight: bold;
     color: #2150AE;
}
.map_content{
    margin:30px 0 0;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.map_content li{
   width: 49%;
   padding: 10px 20px;
   margin-bottom:20px;
   background: #fff;
    box-shadow:0px 0px 10px 2.5px rgba(0,0,0,0.1);
transition:background 0.3s ease;
}
.map_content li:hover{
   background: #2150ae;
}
.map_content li:hover a p{
   color:#fff;
}
.map_content li:hover a span {
    background:url(../images/dz_.png)
}
.map_content li a {
    display:flex;
    align-items:center;
}
.map_content li a span {
   display:block;
    width:24px;
    height:24px;
    background:url(../images/dz.png);
    transition:background 0.3s ease;
}
.map_content li a p {
  font-size: 18px;
  margin-left:10px;
  color:#2453b1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    transition:color 0.3s ease;
}
.map_title {
    display: flex;
    align-items: center;
    justify-content: center;
   padding: 67px 0 44px;
    background: url(../images/mapWrap_top.png);
    background-position: center;
    background-size: 100% 100%;
}

.map_title p {
    margin-left: 27px;
    font-size: 32px;
    font-weight: bold;
    color: #FFFFFF;
}

#mapWrap {
    background: url("../images/map_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: calc(100vw/1919*831);
}

#mapWrap .line1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#mapWrap .line1 path {
    width: 100%;
    height: 100%
}



#mapWrap .dotBox {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}

#mapWrap .dotBox .dot {
    position: absolute;
}

#mapWrap .dotBox .dot.n1 {
    top: 47.8%;
    left: 71.5%;
    z-index: 999999;
}

#mapWrap .dotBox .dot.n1 .icon {
    width: 13px;
    height: 13px;
    background: #ffd927;
    border: 2px solid #ffd927;
    display: block;
    border-radius: 50%;
    box-shadow: 0px 0px 14px 5px #ffd927;
    position: relative;
    -webkit-animation: bordershow 3s infinite;
    -moz-animation: bordershow 3s infinite;
    animation: bordershow 3s infinite;
}

#mapWrap .dotBox .dot.n1 .icon:after,
#mapWrap .dotBox .dot.n1 .icon:before {
    content: "";
    width: 13px;
    height: 13px;
    background: #ffd927;
    border: 1px solid #ffd927d9;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
}

#mapWrap .dotBox .dot.n2 {
    top: 28%;
    left: 23.3%;
}

#mapWrap .dotBox .dot.n3 {
    top: 31.6%;
    left: 44.7%;
}

#mapWrap .dotBox .dot.n4 {
    top: 34.5%;
    left: 46.4%;
}

#mapWrap .dotBox .dot.n5 {
    top: 34.2%;
    left: 47.5%;
}

#mapWrap .dotBox .dot.n6 {
    top: 36%;
    left: 47.5%;
}

#mapWrap .dotBox .dot.n7 {
    top: 38.5%;
    left: 48.8%;
}

#mapWrap .dotBox .dot.n8 {
    top: 39.8%;
    left: 49.8%;
}

#mapWrap .dotBox .dot.n9 {
    top: 41%;
    left: 48.5%;
}

#mapWrap .dotBox .dot.n10 {
    top: 21%;
    left: 64.3%;
}

#mapWrap .dotBox .dot.n11 {
    top: 52%;
    left: 71%;
}

#mapWrap .dotBox .dot.n12 {
    top: 51.8%;
    left: 71.55%;
}

#mapWrap .dotBox .dot.n13 {
    top: 50.3%;
    left: 72.15%;
}

#mapWrap .dotBox .dot.n14 {
    top: 51.1%;
    left: 71.9%;
}

#mapWrap .dotBox .dot.n15 {
    top: 50.2%;
    left: 73%;
}

#mapWrap .dotBox .dot.n16 {
    top: 42.2%;
    left: 76%;
}

#mapWrap .dotBox .dot.n17 {
    top: 38%;
    left: 76.25%;
}

#mapWrap .dotBox .dot.n18 {
    top: 62.4%;
    left: 68.35%;
}

#mapWrap .dotBox .dot.n19 {
    top: 65.5%;
    left: 69.5%;
}

#mapWrap .dotBox .dot .tit {
    font-size: 18px;
    color: #FFF;
    position: absolute;
    top: 25px;
    left: -30px;
    display: flex;
    align-items: center;
}

#mapWrap .dotBox .dot .tit a {
    font-size: 12px;
    line-height: 12px;
    color: #FFF;
    white-space: nowrap;
}

#mapWrap .dotBox .dot.n14 .tit a {
    margin-top: 0px;
    padding-top: 45px;
}

#mapWrap .dotBox .dot.n1 .tit {
    top: -7px;
    left: 18px;
}

#mapWrap .dotBox .dot.n2 .tit {
    top: 17px;
    right: 16px;
    left: auto;
}

#mapWrap .dotBox .dot.n3 .tit {
    top: -20px;
    left: auto;
    right: 6px;
}

#mapWrap .dotBox .dot.n4 .tit {
    top: 17px;
    left: auto;
    right: 6px;
}

#mapWrap .dotBox .dot.n5 .tit {
    top: -26px;
    left: 8px;
}

#mapWrap .dotBox .dot.n6 .tit {
    top: -11px;
    left: 15px;
}

#mapWrap .dotBox .dot.n7 .tit {
    top: 3px;
    left: auto;
    right: 22px;
}

#mapWrap .dotBox .dot.n8 .tit {
    top: -9px;
    left: 17px;
}

#mapWrap .dotBox .dot.n9 .tit {
    top: 15px;
    left: auto;
    right: 12px;
}

#mapWrap .dotBox .dot.n10 .tit {
    top: -36px;
    left: -78px;
}

#mapWrap .dotBox .dot.n11 .tit {
    top: 20px;
    left: -35px;
}

#mapWrap .dotBox .dot.n12 .tit {
    top: 95px;
    left: 115px;
}

#mapWrap .dotBox .dot.n12 .tit::before,
#mapWrap .dotBox .dot.n12 .tit:after {
    content: '';
    width: 35px;
    height: 1px;
    background: #FFF;
    display: inline-block;
    vertical-align: super;
    margin-right: 10px;
}

#mapWrap .dotBox .dot.n12 .tit:after {
    transform: rotateZ(-139deg);
    position: absolute;
    top: -40px;
    left: -123px;
    width: 140px;
}

#mapWrap .dotBox .dot.n13 .tit {
    top: 55px;
    left: 114px;
    padding-top: 1px;
}

#mapWrap .dotBox .dot.n13 .tit::before,
#mapWrap .dotBox .dot.n13 .tit:after {
    content: '';
    width: 35px;
    height: 1px;
    background: #FFF;
    display: inline-block;
    vertical-align: super;
    margin-right: 10px;
}

#mapWrap .dotBox .dot.n13 .tit::before {
    margin-left: -8px;
}

#mapWrap .dotBox .dot.n13 .tit:after {
    transform: rotateZ(30deg);
    position: absolute;
    top: -23px;
    left: -115px;
    width: 115px;
}


#mapWrap .dotBox .dot.n14 .tit {
    left: auto;
    right: -220px;
    width: 120px;
    top: 27px;
}

#mapWrap .dotBox .dot.n14 .tit::before,
#mapWrap .dotBox .dot.n14 .tit:after {
    content: '';
    width: 35px;
    height: 1px;
    background: #FFF;
    display: inline-block;
    vertical-align: super;
    margin-right: 10px;
}

#mapWrap .dotBox .dot.n14 .tit::before {
    margin-top: 45px;
}

#mapWrap .dotBox .dot.n14 .tit:after {
    transform: rotateZ(36deg);
    position: absolute;
    top: 15px;
    left: -112.5px;
    width: 124px;
}

#mapWrap .dotBox .dot.n15 .tit {
    left: auto;
    right: -178px;
    top: -2px;
}

#mapWrap .dotBox .dot.n15 .tit:before {
    content: '';
    width: 127px;
    height: 1px;
    background: #FFF;
    display: inline-block;
    vertical-align: super;
    margin-right: 10px;
}

#mapWrap .dotBox .dot.n16 .tit {
    top: -6px;
    left: 21px;
}

#mapWrap .dotBox .dot.n17 .tit {
    top: -21px;
    left: 11px;
}

#mapWrap .dotBox .dot.n18 .tit {
    top: 12px;
    left: auto;
    right: 17px;
}

#mapWrap .dotBox .dot.n19 .tit {
    top: 12px;
    left: auto;
    right: -11px;
}

#mapWrap .dotBox .icon {
    width: 9px;
    height: 9px;
    background: #ffffff;
    border: 1px solid #fff;
    display: block;
    border-radius: 50%;
    box-shadow: 0px 0px 14px 5px #85acb2;
    position: relative;
    -webkit-animation: bordershow 3s infinite;
    -moz-animation: bordershow 3s infinite;
    animation: bordershow 3s infinite;
}

#mapWrap .dotBox .icon:after,
#mapWrap .dotBox .icon:before {
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
}

#mapWrap .dotBox .icon:after {
    -webkit-animation: boderM 3s infinite;
    -moz-animation: boderM 3s infinite;
    animation: boderM 3s infinite;
}

#mapWrap .dotBox .pulse {
    position: absolute;
    width: 26px;
    height: 26px;
    left: 50%;
    top: 50%;
    margin-top: -18px;
    margin-left: -18px;
    border: 5px solid rgba(0, 161, 133, 0.8);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s linear 0s infinite;
    -moz-animation: warn 2s linear 0s infinite;
    animation: warn 2s linear 0s infinite;
}

@keyframes boderM {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    75% {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }

    100% {
        opacity: 0
    }

}

@-webkit-keyframes boderM {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    75% {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.mapWrap_bottom{
    width: 100%;
    height: calc(100vh/80*1);
    margin: 0;
    padding: 0;
    display: block;
}

/* link */

.link {
    background: url(../images/link_bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto;
    padding: 60px 0 145px;
}

.link .w1430 {
    display: flex;

}

.link_title {
    width: 62px;
    background-color: #0C3FA4;
    background-image: url(../images/link_title_bg.png);
    background-position: 0 -30px;
    background-repeat: no-repeat;
    padding: 20px 19px 8px;
}

.link_title p {
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 25px;
    text-align: center;
    margin-top: 40px;
}

.link_content {
    margin-top: 27px;
    width: calc(100% - 62px);
    display: flex;

}

.link_content li {
    flex: 1;
    text-align: center;
}

.link_content li a div {
    width: 138px;
    height: 120px;
    margin: 0 auto;
    background: url(../images/hexagon.png);
    display: flex;
    align-items: center;
    justify-content: center;
}

.link_content li a p {
    margin-top: 35px;
    font-size: 17px;
    color: #0A0A0A;
    line-height: 35px;
}


@media (max-width: 1500px) {

    .news .w1430,
    .link .w1430 {
        width: 100%;
        padding: 0 3%;
    }
}

@media (max-width: 1200px) {
    .link .w1430 {
        display: block;
    }

    .link_title {
        width: 183px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        background-image: url(../images/link_title_bg_.png);
        background-position: left;
    }

    .link_title p {
        margin-top: 0;
        margin-left: 10px;
    }

    .link_content {
        margin-top: 30px;
        width: 100%;
        flex-wrap: wrap;

    }
    .link_content li a p {
        margin-top: 10px;
        font-size: 16px;
        line-height: 32px;
    }
    .link_content li {
        margin-bottom: 20px;
    }
}

@media (max-width: 1024px) {
    .title {
        padding: 0;
        margin-bottom: 45px;
    }

    .news .w1430 {
        display: block;
    }

    .news_left,
    .news_left_main,
    .news_right {
        width: 100%;
    }

    .news_left_main {
        padding-right: 30px;
    }

    .news_right_main {
        height: auto;
    }

    .news_right {
        margin-top: 30px;
    }

    .news_right_main ul {
        position: relative;
        transform: none;
        width: calc(100% - 40px);
        height: auto;
        padding: 25px 15px 3px 0;
        margin: 0 20px;
    }

    .news_right_main img {
        width: 100%;
        right: 0;
        top: -20px;
        height: calc(100% + 40px);
    }
}

@media (max-width: 850px) {
#mapWrap,
.map_title{
display:none;
}

    .map{
    display:block;
    padding: 0px 3%;
}

}



@media (max-width: 768px) {
    .news_left_main .news_left_tw {
        width: 100%;

    }

        .news_left_main .news_left_tw .news_left_img {
            height: calc(84vw/3*2);
        }
}

@media (max-width: 576px) {
    .news_left_main {

        padding: 15px;

    }
    .map_title_ p{
     margin-left: 20px;
     font-size: 26px;
}
}

@media (max-width: 480px) {
    .news {
        padding: 30px 0;

    }

    .title {
        margin-bottom: 30px;
    }

    .news_right_main ul {
        width: calc(100% - 20px);
        padding: 20px 10px 3px 0;
        margin: 0 10px;
    }

    .news_right_main ul li {
        margin-bottom: 22px;
    }

    .news_right_main img {
        right: 0;
        top: -20px;
        height: calc(100% + 30px);
    }

    .news_right_main
    {
        margin-top: 50px;
    }
     .map_title_ p,
    .title div span{
     margin-left: 10px;
     font-size: 23px;
}
    .map_title_ img,
    .title div img{
        width: 40px;
        height: 40px;
    }
    .map_content li{
   width: 100%;
}
    .map_content li a p {
    font-size: 16px;
    
}
    .link {
   
    padding: 10px 0 80px;
}

    .link_content li a div {
    width: 92px;
    height: 80px;
   background-size:contain;
}
       .link_content li a div img{
    width: 40px;
    height: 40px;
 
}
    .link_content li a p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 25px;
}
}