@charset "utf-8";


#map{position: absolute;z-index: 90; right: 0;top: 0;}
#map>.box{position: relative;z-index: 80;top: 0; right: 0; box-sizing: border-box;padding: 50px; width: 300px;}
#map>.box>a{ position: relative; display: block; margin: 10px auto; background: rgba(0,0,0,.5); color: #fff;font-size: 2rem; text-align: center; padding: 20px;}
#map>.box>a.active{background: rgba(21,74,154,1);}

#myMap{ position:relative; width:100%;height:100%;margin:0 auto; background:#fff;}
#myMap .info { width: 450px; padding:18px 20px; background:rgba(0,165,135,.9);  border: 0;}
#myMap div.info-top {position: relative; background: none repeat scroll 0 0; border-bottom: 2px solid rgba(255,255,255,.3);}
#myMap div.info-top div { display: inline-block; color: #fff; font-size: 18px; font-weight: bold; padding:5px 0 10px 0;}
#myMap div.info-top img { position: absolute; top: 0; right: 0; transition-duration: 0.35s;}
#myMap div.info-top img:hover { box-shadow: 0 0 5px #fff;}
#myMap div.info-middle { background:none!important; font-size: 14px; padding:10px 0; line-height: 20px; color:#fff;}
#myMap div.info-middle a{display: block; color: #154a9a; padding-top: 10px;font-weight: bold; }
#myMap div.info-middle img{height: 20px;width: auto; margin-right: 6px;}
#myMap div.info-bottom { height: 0; width: 100%; clear: both; text-align: center;}
#myMap div.info-bottom img {  position: relative;  z-index: 104; margin-top:18px;}
#myMap span {margin-left: 5px;font-size: 11px;}




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


    #map{position: relative;}
    #map>.box{padding: 0; width: 100%;}
    #map>.box>a{float: left; padding: 0;  height: 50px; line-height: 50px; font-size: 1.8rem; margin: 0 auto;}
    #map>.box>a:after{position: absolute;z-index: 1;  top: 0; right: 0;width: 1px;height: 100%; background: rgba(255,255,255,.2);content: '';}
    #map>.box>a:last-child:after{display: none;}
    #map>.col-2>a{width: 50%;}
    #map>.col-3>a{width: 33.33%;}
    #map>.col-4>a{width: 25%;}


    #myMap .info{width: 400px;}


}

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

    #map>.box>a{ font-size: 1.6rem;}

}


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

    #myMap .info{width: 300px;}

}