.contact-us {
    background: #fff;
    height: 100%;
}
.contact-us #wrap {
    padding-bottom: 163px;
    box-sizing: border-box;
}
.contact-us #main {
    margin: 0 auto;
    min-height: calc(100% - 330px);
    box-sizing: border-box;
}
.ie8 .contact-us .contact-banner {
    background: url(../images/banner.png) center #F7F9FA no-repeat;
}
.contact-us .contact-banner {
    background: url(../images/banner@2x.png) center #F7F9FA no-repeat;
    height: 317px;
    background-size: auto 100%;
}
.contact-us .contact-banner .banner-content,
.contact-us .home-inner {
    width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.contact-us .contact-banner .banner-content {
    padding: 42px 0 0 66px;
    font-size: 24px;
    font-weight: bold;
    line-height:40px;
    color: #505151;
}
.contact-us .contact-banner .qr-code {
    width: 132px;
    text-align: center;
    margin-top: 10px;
}
.contact-us .contact-banner .qr-code .qr-caption {
    font-size: 14px;
    color: #313131;
    font-weight: normal;
}
.contact-us .contact-banner .qr-code img {
    width: 132px;
    height: 132px;
    vertical-align: middle;
}
.contact-us .contact-content {
    box-sizing: border-box;
    padding: 69px 58px 0 10px;
}
.contact-us .contact-content .contact-title {
    margin-bottom: 35px;
    font-size: 20px;
    color: #212121;
}
.contact-us .contact-content .contact-text {
    float: left;
    color: #313131;
    font-size: 16px;
    width: 400px;
}
.contact-us .contact-content .contact-text p {
    position: relative;
    padding-left: 28px;
    line-height: 40px;
}
.contact-us .contact-content .contact-text .company-name,
.contact-us .contact-content .contact-text .company-mail {
    font-weight: bold;
}
.contact-us .contact-content .contact-text p:after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 17px;
    height: 17px;
    background: url(../images/icons@2x.png);
    background-size: 17px 238px;
}
.ie8 .contact-us .contact-content .contact-text p:after {
    background-image: url(../images/icons@1x.png);
}
.contact-us .contact-content .contact-text .company-web {
    margin-bottom: 15px;
}
.contact-us .contact-content .contact-text .company-name:after {
    background-position: 0 0;
}
.contact-us .contact-content .contact-text .company-address:after {
    background-position: 0 -20px;
}
.contact-us .contact-content .contact-text .company-tel:after {
    background-position: 0 -40px;
}
.contact-us .contact-content .contact-text .company-web:after {
    background-position: 0 -63px;
}
.contact-us .contact-content .contact-text .company-serve:after {
    background-position: 0 -83px;
}
.contact-us .contact-content .contact-text .company-mail:after {
    background-position: 0 -103px;
}
.contact-us .contact-content .contact-text .company-serve .number {
    font-weight: bold;
}
.contact-us .contact-content .contact-text span {
    display: inline-block;
}
.contact-us .contact-content .contact-map {
    float: right;
    width: 526px;
    height: 298px;
    box-sizing: border-box;
}
.contact-us .contact-content .contact-map img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.contact-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 53px;
    line-height: 53px;
    background-color: #1D222E;
    color: #fff;
    text-align: center;

}

@media screen and (max-width: 540px) {
    .contact-us {
        min-width: 100%;
    }
    .contact-us #wrap {
        padding-bottom: 53px;
    }
    .page-single.contact-us #header {
        display: block;
        background: #fff;
    }
    .page-single.contact-us #header .nav {
        display: none;
    }
    .contact-us .contact-banner {
        display: none;
    }
    .contact-us .home-inner {
        width: 100%;
    }
    .contact-us .contact-content {
        padding: 18px 20px 0 20px;
    }
    .contact-us .contact-content .contact-title {
        font-size: 4.8vw;
        color: #333333;
        margin-bottom: 12px;
    }
    .contact-us .contact-content .contact-text {
        font-size: 4vw;
        width: 85.333vw;
        float: none;
    }
    .contact-us .contact-content .contact-text p {
        padding-left: 0;
        line-height: 26px;
    }
    .contact-us .contact-content .contact-text p:after {
        display: none;
    }
    .contact-us .contact-content .contact-map {
        float: none;
        width: 89.333vw;
        height: 51.2vw;
        position: relative;
        visibility: hidden;
        margin-bottom: 15px;
        border-radius: 10px;
        overflow: hidden;
    }
    .contact-us .contact-content p.company-serve,
    .contact-us .contact-content p.company-mail {
        visibility: hidden;
        position: relative;
        /* top: 53.333vw; */
        padding-left: 40px;
    }
    .contact-us .contact-content .company-serve span,
    .contact-us .contact-content .company-mail span {
        display: block;
    }
    .contact-us .contact-content .contact-text .company-serve .number {
        font-weight: normal;
    }
    .contact-us .contact-content .contact-text .company-mail {
        margin-top: 20px;
        font-weight: normal;
    }
    .contact-us .contact-content .contact-text .company-serve:after,
    .contact-us .contact-content .contact-text .company-mail:after {
        display: block;
        width: 30px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 0 0;
        top: 4px;
    }
    .contact-us .contact-content p.company-serve:after {
        background-image: url(../images/headphone@2x.png);
    }
    .contact-us .contact-content p.company-mail:after {
        background-image: url(../images/mail@2x.png);
    }
    .contact-footer {
        border-top: 1px solid #EBEBEB;
        height: 33px;
        line-height: 33px;
        visibility: hidden;
        color: #8A8A8A;
        background-color: #fff;
    }
}