@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#network{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding: 100px 0;}

#network>.container{margin: 0 auto;}
#network>.container>.box{padding: 30px 0;  margin: 0 auto;}
#network>.container>.box>.txt{text-align: left; font-size: 1.6rem; line-height: 2.4rem; padding-bottom: 20px; color: #333;}
#network>.container>.box>.tel{ border-top: 1px solid #ddd; padding: 20px 0; text-align: left; font-size: 2rem;  color: #666;}
#network>.container>.box>.tel>i{ display: inline-block;float: left; font-size: 3rem;margin-right: 10px;}
#network>.container>.box>.tel>span{ display: inline-block; margin-left: 10px; font-weight: bold;color: rgba(38,87,191,1);}


#network  .map{text-align: center; position: relative;}
#network  .china-map{ position: relative; display: inline-block; margin: 0 auto;}
#network  .china-map .fixed-point{ position: absolute;z-index: 90; width: 20px;height: 20px; line-height: 20px; text-align: center; cursor: pointer; transition: all .35s;}
#network  .china-map .fixed-point:after{position: absolute;z-index: 9;left: 0;top: 0; font-family: iconfont; font-size: 2rem; color: rgba(38,87,161,1); content: '\f014a'; transition: all .35s; }
#network  .china-map .fixed-point:before{ display: none; position: absolute;z-index: 3; left:20px;top: -2px; text-align: left; white-space:nowrap; font-size: 1.2rem; color: rgba(38,87,161,1); content: attr(data-tit);}
#network  .china-map .fixed-point:hover{ transform: scale(1.3);}
#network  .china-map .fixed-point:hover:after,#network  .china-map .fixed-point:hover:before{ color: rgba(146,191,46,1);}
#network  .china-map>img{height: auto; max-width: 100%;}
#network  .nanhai{position: absolute; z-index: 1; right: 6%; bottom: 0; width:200px;}
#network  .nanhai>img{max-width: 100%;height: auto;}


#network>.container .list{ display: none; margin: 0 auto; margin-top: 65px; }
#network>.container .list>ul{margin: 0 auto;}
#network>.container .list>ul>li{background: #fff; display: block; float: left; position: relative; width: 48%; height: 0; padding: 20px 30px; padding-bottom: 26%; box-sizing: border-box; transition: all .35s; margin-bottom: 3%; box-shadow: 5px 5px 25px rgba(0,0,0, .036);}
#network>.container .list>ul>li:hover{background: rgba(38,87,191,1);}
#network>.container .list>ul>li:nth-child(even){float: right;}
#network>.container .list>ul>li .tit{font-size: 1.8rem; color: #2e2d3c; font-weight: bold; transition: all .35s;}
#network>.container .list>ul>li:hover .tit{color: #fff;}
#network>.container .list>ul>li .txt{margin-top: 18px; border-top: 1px solid #eee; padding-top: 18px; font-size: 1.3rem; line-height: 1.8; transition: all .35s;}
#network>.container .list>ul>li:hover .txt{color: #fff; border-top: 1px solid rgba(255,255,255, .12);}



@media only screen and (max-width: 1460px){

    #network  .nanhai{width: 160px; right: 4%; }
}

@media only screen and (max-width: 1360px){

    #network  .nanhai{width: 140px; right: 0; }
}

@media only screen and (max-width: 1280px){
    #network  .china-map{ width: 90%;}
    #network  .nanhai{width: 120px; }
}

@media only screen and (max-width: 1080px){

    #network  .china-map{ width: 82%;}
    #network  .china-map .fixed-point:after{font-size: 1.6rem;}
    #network  .china-map .fixed-point:before{left:0;font-size: 1rem;}
    #network  .nanhai{width: 100px; }

}

@media only screen and (max-width: 840px){
    #network>.container>.box>.txt{font-size: 1.4rem;}
    #network  .nanhai{width: 80px; right: 0; }
    #network>.container .list{display: block;}

}
@media only screen and (max-width: 780px){

    #network  .nanhai{width: 60px;}

    #network>.container .list>ul>li{ float: none; width: 100%; height: auto; padding-bottom: 20px; }
    #network>.container .list>ul>li:nth-child(even){float: none;}

}

@media only screen and (max-width: 640px){

    #network  .nanhai{width: 40px;}
    #network  .china-map .fixed-point{ width: 14px;height: 14px; line-height: 14px;}
    #network  .china-map .fixed-point:after{ font-size: 1rem;}
    #network  .china-map .fixed-point:before{display: none;}


}