html,body {
    height:100%;
}
.map-container{
    height:500px;
    margin:0 40px;  
}
#show{
    overflow:hidden;
}
.map {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.contact-phone{
    margin: 0 auto;
    position:relative;
    text-align:center;
}
.contact-phone ul{
    margin:0 auto;
}
.contact-phone ul li {
    display: inline-block;
    padding-right:30px;
    text-align:center;
}
.contact-phone ul li i{
    display: inline-block;
    margin-right:10px;
}
    .contact-phone ul li span {
        display: inline-block;
        font-size:18px;
        color:#666666;
    }

    .map-picture{
        width: 24px;
        height: 24px;
        display: block;
        background-size: 100%;
        background-repeat:no-repeat;
        vertical-align: middle;
    }
.map1 {
    background-image: url(../image/mark.png);
}
.map2 {
    background-image: url(../image/phone.png);
}
.map3 {
    background-image: url(../image/phone.png);
}
.map4 {
    background-image: url(../image/email.png);
}
.map-contact {
    height: 100%;
    bottom: -50px;
    position: relative;
}
.map-btn {

}
.type {
    width: 150px;
    height: 50px;
    position: relative;
    margin: 40px auto 0px auto;
    line-height: 50px;
    cursor: pointer;
    text-align:center;
}

    .type span {
        color: #666666;
        font-size: 18px;
        text-align: center;
    }


.border-top {
    position: absolute;
    width: 100%;
    height: 70%;
    top: 0px;
    right: -1px;
    border-top: 1px solid rgb(194,194,194);
    border-right: 1px solid rgb(194,194,194);
}

.border-bottom {
    position: absolute;
    width: 100%;
    height: 70%;
    bottom: 0px;
    left: -1px;
    border-bottom: 1px solid rgb(194,194,194);
    border-left: 1px solid rgb(194,194,194);
}

.border-left {
    position: absolute;
    width: 20%;
    height: 50%;
    bottom: -5px;
    left: -5px;
    border-bottom: 1px solid rgb(194,194,194);
    border-left: 1px solid rgb(194,194,194);
}

.border-right {
    position: absolute;
    width: 20%;
    height: 50%;
    top: -5px;
    right: -5px;
    border-top: 1px solid rgb(194,194,194);
    border-right: 1px solid rgb(194,194,194);
}
iframe {
    width:100%;
    height:100%;
    border: 1px solid #808080; 
}

@media (max-width:820px){
    .contact-phone ul li{
        padding-right:0px;
        padding-bottom:8px;
    }
}
@media (max-width:768px) {
    .contact-phone{
        text-align:left;
    }

    .contact-phone ul{
        width:250px;
    }
    .contact-phone ul li {
        text-align:left;
        display: block;
    }
    .map-contact {
        bottom: -40px;
    }
    .type {
        margin: 60px auto 0px auto;
    }

}
@media (max-width:375px) {
    .map-contact {
        bottom: -20px;
    }
    .type {
        margin: 20px auto 0px auto;
    }

}
    @media (max-width:320px) {
        .type {
            width: 120px;
            height: 40px;
            line-height: 40px;
            margin-top: 20px;
        }

        .contact-phone ul li {
            padding-bottom: 3px;
        }

    }
@media (max-width:560px) {


}
    @media (max-height:560px){
        .contact-phone ul li {
            padding-bottom: 0px;
        }
        .contact-phone ul {
            width: 185px;
        }
        .map-picture{
            width:16px;
            height:16px;
        }
        .contact-phone ul li span {
            font-size: 14px;
        }
        .type{
            width:120px;
            height:40px;
            line-height:40px;
        }
    }