.map-con{
    width:96%;
    margin:0 auto;
    margin-top:10px;
}
.map-con-title{
    width:100%;
    height:200px;
    box-shadow: gray 1px 1px 5px;
    border-radius: 2px;
}
.map-cnen{
    width:80%;
    height:50px;
    line-height: 50px;
    margin:0 auto;
    font-size:18px;
}
.map-cnen .cn{
    font-weight: bold;
}
.map-con-title .map-con-zi{
    width:80%;
    color:#999999;
    margin:0 auto;
    margin-top:6px;
}
.map{
    width:100%;
    height:300px;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 2px;
}
@media screen and (min-width: 768px) {
    .map-con{
       display:flex;
       justify-content: space-between;
       align-items: center;
    }
    .map-con-title{
        width:40%;
        height:300px;
    }
    .map{
        width:58%;
        height:300px
    }
    .map-cnen{
        width:90%;
        line-height: 60px;
        font-size:30px;
    }
    .map-con-title .map-con-zi{
        width:90%;
        font-size: 14px;
        margin-top:15px;
    }
}
@media screen and (min-width: 1024px) {
    .map-con{
        width:70%;
        height:600px;
        position:relative;
        margin-bottom: 40px;
     }
     .map-con-title{
         width:35%;
         height:300px;
         background: white;
         position:absolute;
         left:0;
         z-index: 1;
     }
     .map{
         position: absolute;
         right:0;
         width:72%;
         height:498px;
     }
     .map-cnen{
         width:90%;
         line-height: 100px;
         font-size:30px;
     }
     .map-con-zi-div{
         margin-top: 50px;
     }
     .map-con-title .map-con-zi{
         width:90%;
         font-size: 14px;
         margin-top:12px;
     }
}