body::-webkit-scrollbar {
    width: 7px;
    background: #477DCF;
    border-radius: 4px;
}
body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px #F8F8F8;
    background-color: #63E6FA;
}
.title{
    width: 100%;
    height: 42px;
    background-color: brown;
}
.header_ban{
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
    min-width: 1500px;
    background-image:  url(../img/banner.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 100% 100%;
}
.content{
    width: 100%;
    height: auto;
}
.Info_Bigbox{
    width: 100%;
    height: calc(620px - 256px);
    background-image:  url(../img/Info_ban.png);
    background-repeat: no-repeat;
    padding:126px 0;
}
.Info_box{
    width: 1200px;
    height: 100%;
    margin: auto;
    position: relative;
}
.hexagon{
    width: 186px;
    height: 215px;
    position: absolute;
    background-image: url(../img/hexagon1.png);
    background-position: center center;
    overflow: hidden;
    top: 64%;
    left: 91%;
}
.hexagon1{
    width: 150px;
    height: 160px;
    position: absolute;
    background-image: url(../img/hexagon2.png);
    background-position: center center;
    overflow: hidden;
    top: -26%;
    left: 70%;
}
.hexagon2{
    top: 0;
}
.information{
    width: 100%;
    height: 100%;
    /* background-color: #f66; */
    display: flex;
    justify-content: space-between;
    position: relative;
}
.Info_img{
    width: 368px;
    height: 100%;
    background-image:  url(../img/Info_img.png);
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    box-shadow: 4px 3px 21px 0px rgba(168,168,168,0.51);
    border-radius: 20px 0px 0px 20px;
    clip-path: polygon(0 0 , 100% 0,83% 100%,0 100%,0 0 );
    background-position: -13px -14px;
}
.Info_text{
    width: calc(863px - 117px);
    height: calc(100% - 80px);
    position: absolute;
    background: #fff;
    box-shadow: 4px 3px 19px 2px rgba(189,189,189,0.22);
    border-radius: 0px 20px 20px 0px;
    clip-path: polygon(0 0 , 100% 0,100% 100%,0 100%,7% 0 );
    right: 0;
    /* transform: translate(25px,0); */
    padding: 38px 35px 42px 82px;
    
}
.Info_text p{
    width: 100%;
    height: 100%;
    font-size: 21px;
    /* font-family: SourceHanSansCN; */
    font-weight: 500;
    color: #333333;
    line-height: 36px;
    
    letter-spacing:1px;
    text-align: justify;
    text-indent: 44px;
}
.resource_Box,.industrial_Box{
    width: 100%;
    height: auto;
}
.resource_Box{
     width: 100%;
     height: 1217px;
    background: linear-gradient(145deg, #63A3FF 0%, #B6DCFF 50%, #72BEFF 100%);
    opacity: 0.88;
    background-image:  url(../img/resource_Ban.png);
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    background-position: top center;
}
.industrial_Box{
    background-image:  url(../img/industrialInfoBan.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
    /* background-size: 100% 100%; */
}
.resource_directory,.industrial_cluster,.honeycomb{
    width: 1200px;
    height: auto;
    margin: auto;
    /* background-color: blueviolet; */
}
.honeycomb{
    height: calc(100% - 152px - 97px - 114px);
    padding-top: 97px;
    padding-bottom: 114px;
    position: relative;
}
.honeycombArea{
    width: 100%;
    height: 100%;
    /* background-color: blueviolet; */
}
.mainImg{
    width: 192px;
    height: 212px;
    background: linear-gradient(-59deg, #4FACFE, #00F2FE);
    background-image: url(../img/mainTit.png);
    position: relative;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.mainImg span{
    width: 15px;
    height: 15px;
    background: #00fff3;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 46%;
    top: -8px;
    animation:mymove 5s linear infinite;
    -webkit-animation:mymove 5s linear infinite;

}
@keyframes mymove {
    0%{
        transform: translate(0,0);
    }
    16%{
        transform: translate(95px,50px);
    }
    33%{
       transform: translate(98px,160px);
    }
    49.5%{
        transform: translate(8px,215px);
    }
    66%{
        transform: translate(-98px,160px);
    }
    82.5%{
        transform: translate(-95px,50px);
    }
    100%{
        transform: translate(0,0);
    }
}
.mainImg p{
    width: 127px;
    height: 2px;
    background-color: #2a87f5;
    position: relative;
}
.mainImg p::before{
    content:'';
    width: 9px;
    height: 9px;
    background: transparent;
    border: 2px solid #37A7E8;
    border-radius: 50%;
    display: block;
    position: relative;
    left: -11px;
    top: -6px;
}
.mainImg .line:nth-child(2){
    background-color: #2a87f5;
    transform: rotate(60deg);
    left: -44px;
    top: -32px;
}
.mainImg .line:nth-child(3){
    background-color: #2a87f5;
    width: 234px;
    left: -234px;
    top: 102px;
}
.mainImg .line:nth-child(4){
    background-color: #2a87f5;
    transform: rotate(300deg);
    width: 174px;
    left: -90px;
    top: 255px;
}
.mainImg .line:nth-child(5){
    background-color: #2a87f5;
    transform: rotate(240deg);
    width: 140px;
    left: 108px;
    top: 241px;
}
.mainImg .line:nth-child(6){
    background-color: #2a87f5;
    transform: rotate(172deg);
    width: 240px;
    left: 190px;
    top: 80px;
}
.mainImg .line:nth-child(7){
    background-color: #2a87f5;
    transform: rotate(120deg);
    width: 174px;
    left: 100px;
    top: -63px;
}
.secondHoney{
    width: 116px;
    height: 130px;
    position: relative;
    background: linear-gradient(-59deg, #34A4E7, #7AE9F5);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.Advanced{
    left: 33%;
    top: -11.7%;
    background-image: url(../img/XJJCCL.png);
}
.other_materials{
    left: 142px;
    top: 20px;
    background-image: url(../img/QTCL.png);
}
.resourceDirectory{
    left: 363px;
    top: 179px;
    background-image: url(../img/QYXCL.png);
}
.strategies{
    left: 694px;
    top: 23px;
    background-image: url(../img/GJZLCL.png);
}
.inspection{
    left: 945px;
    top: -405px;
    background-image: url(../img/JYJC.png);
}
.null{
    top: -794px;
    left: 59.4%;
    background-image: url(../img/null.png);
    display: flex;
    align-items: center;
    justify-content: center;
}

.line_S{
    width: 33px;
    height: 2px;
    background: #7AE9F5;
    position: relative;
}
.line_S:nth-child(1){
    width: 33px;
    transform: rotate(60deg);
    left: 10px;
    top: -4px;
}

.line_S:nth-child(2){
    width: 33px;
       /* transform: rotate(60deg); */
       left: -33px;
       top: 62px
}

.line_S:nth-child(3){
       width: 33px;
       transform: rotate(300deg);
       left: 0px;
       top: 122px;
}
.line_S:nth-child(4){
    width: 33px;
    transform: rotate(120deg);
    left: 80px;
    top: -5px;
}

.line_S:nth-child(5){
    width: 33px;
    left: 115px;
    top: 56px;
}
.honeycombTh{
    position: absolute;
    width: 82px;
    height: 91px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(-59deg, #34A4E7, #7AE9F5); */
    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.other_materials .honeycombTh{
    background-image: url(../img/2.png);
}
.resourceDirectory .honeycombTh{
    background-image: url(../img/3.png);
}
.strategies .honeycombTh{
    background-image: url(../img/4.png);
}
.inspection .honeycombTh{
    background-image: url(../img/5.png);
}
.honeycombTh:hover{
    font-size: 18px;
    transform: scale(1.1, 1.1);
}
.honeycombTh p{
    font-size: 16px;
    font-family: SourceHanSansCN;
    font-weight: 500;
    color: #FFFFFF;
    width: calc(100% - 16px);
    text-align: center;
    padding: 0 8px;
}

.AdvancedTh{
    left: -80px;
    top: -42px;
    transform: rotate(300deg);
}
.AdvancedTh:hover{
    transform: scale(1.1, 1.1) rotate(300deg);
}
.HGmaterial{
    left: -80px;
    top: -42px;
}
.FHmaterial{
    transform: rotate(60deg);
    left: -80px;
    top: -44px;
}
.FHmaterial:hover{
    transform: scale(1.1, 1.1) rotate(60deg);
}

.FJSmaterial{
    transform: rotate(240deg);
    left: -80px;
    top: -44px;
}
.FJSmaterial:hover{
     transform: scale(1.1, 1.1)  rotate(240deg);
}
.JSmaterial{
    left: 32px;
    top: -44px;
}
.other_materials .JXHGline_S{
    transform: rotate(60deg);
    left: 80px;
    top: 120px;
}

.other_materials .JXHGmaterial{
    transform: rotate(300deg);
}
.other_materials .JXHGmaterial:hover{
     transform: scale(1.1, 1.1)  rotate(300deg);
}

.resourceDirectory  .ZNmaterial{
    transform: rotate(240deg);
    left: 80px;
    top: 120px;
}
.resourceDirectory .ZNmaterialTH{
    transform: rotate(120deg);
}
.resourceDirectory .ZNmaterialTH:hover{
     transform: scale(1.1, 1.1)  rotate(120deg);
}



.strategies .NewDisplayLine{
    transform: rotate(240deg);
    left: 80px;
    top: 120px;
}
.strategies .NewDisplay{
    transform: rotate(120deg);
}
.strategies .NewDisplay:hover{
    transform: scale(1.1, 1.1)  rotate(120deg);
}

.strategies .line_S:nth-child(6){
    transform: rotate(210deg);
    left: 108px;
    top: 108px;
    width: 90px;
}
.SWYYarea{
    left: -86px;
    top: -45px;
    transform: rotate(150deg);
}
.SWYYarea:hover{
    transform: scale(1.1, 1.1) rotate(150deg);
}


.inspection .hot_line{
    transform: rotate(240deg);
    left: 83px;
    top: 124px;
}
.hot_line .hotMaterial{
    transform: rotate(120deg);
}
.hot_line .hotMaterial:hover{
    transform: scale(1.1, 1.1) rotate(120deg);
}

.inspection .line_S:nth-child(6){
    width: 82px;
    transform: rotate(90deg);
    left: 17px;
    top: -52px;
}
.LXperformance{
    left: -87px;
    top: -45px;
    transform: rotate(270deg);
}
.LXperformance:hover{
    left: -87px;
    top: -45px;
    transform: scale(1.1, 1.1) rotate(270deg);
}

.inspection .line_S:nth-child(7){
    width: 82px;
    transform: rotate(90deg);
    left: 17px;
    top: 157px;
}
.GXdetection{
    left: 87px;
    top: -45px;
    transform: rotate(270deg);
}
.GXdetection:hover{
    transform: scale(1.1, 1.1) rotate(270deg);
}
.industrial_cluster{
    padding-bottom:  130px;
}
.resource_directory img{
    margin-top: 112px;
}
.industrial_cluster img{
    margin-top: 141px;
    margin-bottom: 93px;
}
.industrialInfo{
    width: 1200px;
    height: 340px;
    display: flex;
    justify-content: space-between;
}
.industrialText{
    width: calc(792px - 72px);
    height: calc(100% - 89px);
    background: #FFFFFF;
    box-shadow: 4px 3px 38px 0px rgba(168,168,168,0.42);
    opacity: 0.95;
    border-radius: 20px;
    padding: 43px 36px 46px;
    /* background-color: #63E6FA; */
}
.echartsArea{
    width: 388px;
    height: 100%;
    background: #FFFFFF;
    /* box-shadow: 4px 3px 38px 0px rgba(168,168,168,0.42); */
    border-radius: 32px 16px 16px 16px;
    
}
.industrialText p{
    width: 100%;
    height: 100%;
    font-size: 21px;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: 36px;
    text-align: justify;
    text-indent: 44px;
    letter-spacing:1px
}


.pop_up{
    width: 311px;
    height: 355px;
    background: #477DCF;
    border-radius: 8px;
    position: absolute;
    left: 58%;
    top: 5%;
    display: none;
    box-shadow:  5px 5px 20px  #62cbf1,
                    -5px -5px 20px #62cbf1;
}
.popUpcontent{
    width: calc(100% - 40px);
    height: calc(100% - 53px);
    padding: 0 19px 0 19px;
    margin-top: 25px;
    margin-bottom: 35px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.popUpcontent img{
    position: relative;
    left: -19px;
    margin-bottom: 25px;
}
.popUpcontent .popupTit, .popUpcontent .popupTit .popupTitLink{
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 21px;
}
.popUpcontent .popupTit .popupTitLink{
    padding-top: 15px;
    padding-bottom: 25px;
    display: block;
}

.popUpcontent .popupItems{
    padding-top: 15px;
    padding-bottom: 25px;
}
.popUpcontent .popupItems a{
    font-size: 16px;
    font-weight: 400;
    color: #65ECFD;
    line-height: 20px;
   
}
.popUpcontent::-webkit-scrollbar {
    width: 7px;
    background: #477DCF;
    border-radius: 4px;
}
.popUpcontent::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px #F8F8F8;
    background-color:  #63E6FA;;
}
.popupA{
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
}
.base .popupTit{
    margin-top: 20px;
}
.base .popupTit:nth-child(1){
    margin-top: 10px;

}
.popupTitle{
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 21px;
    text-align: center;
}
.institution .popupTit:nth-child(1){
    margin-top: 10px;
}
.icon_G{
    width: 23px;
    height: 23px;
    position: absolute;
    right: 10px;
    top: 6px;
    cursor: pointer;
}

.active::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #00fff3;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 46%;
    top: -8px;
    /* -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation: boxBorder 2s linear infinite;
    animation: boxBorder 2s linear infinite; */

    animation: mymoves 5s linear infinite;
    -webkit-animation: mymoves 5s linear infinite;
}

/* .active::after {
    content: "";
    width: 108%;
    height: 108%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid;
    position: absolute;
    top: -4%;
    left: -4%;
    -webkit-animation: boxBorder 2s linear infinite;
    animation: boxBorder 2s linear infinite;
} */
@-webkit-keyframes mymoves {
    0% {
        transform: translate(0,0);
    }
    16% {
        transform: translate(42px,26px);
    }
    33% {
        transform: translate(42px,68px);
    }
    49.5% {
        transform: translate(0,95px);
    }
    66% {
        transform: translate(-42px,68px);
    }
    82.5% {
        transform: translate(-40px,26px);
    }
    100% {
        transform: translate(0,0);
    }
}
.echartsArea .echartImg{
    margin: 0;
    width: 117%;
    height: 120%;
    position: relative;
    left: -7%;
    top: -9%;
}