/* =====================联系我们样式======================== */

/* 联系方式 s */
.contact_det {
    background: #f9f9f9;
}

.contact_det .con {
    margin-top: 0.3rem;
}

.contact_det .con .info {
    padding-bottom: 0.5rem;
}

.contact_det .con .tit {
    font-size: 30px;
    max-width: 50%;
    line-height: 1.5;
}

.contact_det .con .add {
}

.contact_det .con .add .text {
    text-align: right;
}

.contact_det .con .add .text i {
    width: 35px;
    display: inline-block;
    margin-bottom: 0.1rem;
}

.contact_det .con .add .text .t1 {
}

.contact_det .con .add .text .t1 p {
    font-size: 16px;
    line-height: 30px;
    color: #333;
}

.contact_det .con .add .pic {
    width: 150px;
    height: 150px;
    margin-left: 0.15rem;
}

.contact_det .con .add .pic img {
    width: 100%;
}

.contact_det .con .add .pic p {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

.contact_det .con .mapbox {
    width: 100%;
    height: 4.5rem;
    border: 1px solid #e0e0e0;
}

.contact_det .con .mapbox iframe, .contact_det .con .mapbox #map {
    width: 100%;
    height: 4.48rem;
}

.contact_det .con .mapbox #map img {
    max-width: none;
    max-height: none;
}

.contact_det .con .mapbox #map .BMap_bubble_title {
    color: #ACCE22;
    font-size: 16px;
}

.contact_det .con .mapbox #map .BMap_bubble_content {
    line-height: 1.3;
    font-size: 14px;
    margin-top: 0.05rem;
}

/* 联系方式 e */


/* 在线留言 s */

.mess-contact {
    font-size: 15px;
    padding: 0.3rem 0;
}

.mess-contact .row {
    margin: 0 -17px;
}

.mess-contact .col {
    float: left;
    width: 33.33333%;
    padding: 0 18px;
}

.mess-contact .col p,
.mess-contact .text p {
    margin-bottom: 15px;
    font-size: 20px;
}

.mess-contact .col input {
    width: 100%;
    font-size: 16px;
    padding: 18px 25px 18px 55px;
    line-height: 30px;
    height: 56px;
    background-color: #f9f9f9;
    background-position: 20px center;
    background-repeat: no-repeat;
    -o-background-size: 22px;
    background-size: 22px;
    border: 1px solid #e7e7e7;
    color: #919191;

}

.mess-contact .col input.upper {
    background-color: #25599f;
    color: #fff;
}


.mess-contact .check {
    float: none;
    width: 300px;
    margin-top: 0.2rem;
    padding: 0;
}

.mess-contact .check input {
    width: calc(100% - 130px);
    padding: 0;
    height: 45px;
    line-height: 43px;
    padding-left: 10px;
}

.mess-contact .check img {
    height: 45px;
    cursor: pointer;
}

.mess-contact .col input.user {
    background-image: url(../image/online-1.png);
}

.mess-contact .col input.tel {
    background-image: url(../image/online-2.png);
}

.mess-contact .col input.E-mail {
    background-image: url(../image/online-3.png);
}

.mess-contact .text textarea.massage {
    background-image: url(../image/online-4.png);
}

.mess-contact .col input.upper.user {
    background-image: url(../image/online-1-1.png);
}

.mess-contact .col input.upper.tel {
    background-image: url(../image/online-2-1.png);
}

.mess-contact .col input.upper.E-mail {
    background-image: url(../image/online-3-1.png);
}

.mess-contact .text textarea.upper.massage {
    background-image: url(../image/online-4-1.png);
}

.mess-contact .text {
    margin-top: 38px;
    position: relative;
}

.mess-contact .text textarea {
    padding: 18px 25px 18px 55px;
    background-color: #f9f9f9;
    background-position: 20px 18px;
    background-repeat: no-repeat;
    -o-background-size: 22px;
    background-size: 22px;
    border: 1px solid #e7e7e7;
    color: #919191;
    height: 180px;
    width: 100%;
    font-size: 16px;
}

.mess-contact .text textarea.upper {
    background-color: #25599f;
    color: #fff;
}

.mess-contact .button-bubble {
    margin-top: 0.5rem;
}

.button-bubble {
    display: inline-block;
    width: 2.4rem;
    /* height: 0.56rem; */
    margin: 0.3rem 0.1rem 0;
    padding: 0.18rem 0;
    font-size: 18px;
    position: relative;
    border: none;
    color: #FFFFFF;
    background: #ACCE22;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.button-bubble.reset {
    background-color: #aeaeae;
}

.button-bubble:hover {
    opacity: 0.8;
}


.mess-contact .col input::-webkit-input-placeholder,
.mess-contact .text textarea::-webkit-input-placeholder {
    color: #919191;
}

.mess-contact .col input::-moz-placeholder,
.mess-contact .text textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #919191;
}

.mess-contact .col input:-moz-placeholder,
.mess-contact .text textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #919191;
}

.mess-contact .col input:-ms-input-placeholder,
.mess-contact .text textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #919191;
}

/* 在线留言 e */


/* -------------------------PC端--------------------------- */
@media all and (max-width: 1700px) {
    /* 1600 × (900/1024/1200) */
}

@media all and (max-width: 1599px) {
    /* 1440 × (900/1050) */
    .contact_det .con .tit {
        font-size: 28px;
    }
}

@media all and (max-width: 1439px) {
    /* 1360 × (768) */
    .contact_det .con .tit {
        font-size: 24px;
    }
}

@media all and (max-width: 1359px) {
    /* 1280 × (800/854/1024) */
}

@media all and (max-width: 1279px) {
    /* 1152 × (864) */
}

@media all and (max-width: 1151px) {
    /* 1024 × (600/768) */
}


/* ------------------------手机端-------------------------- */
@media all and (max-width: 1000px) {
    /* 平板设备 720 适配 */
    .mess-contact .col {
        width: 100%;
        margin-bottom: 0.3rem;
    }

    .mess-contact .col p, .mess-contact .text p {
        margin-bottom: 0.2rem;
        font-size: 16px;
    }

    .mess-contact .text {
        margin-top: 0;
    }

    .mess-contact .col input, .mess-contact .text textarea {
        font-size: 14px;
        background-position: 10px center;
        padding-left: 40px;
    }

    .mess-contact .text textarea {
        background-position: 10px 15px;
    }

    .button-bubble {
        font-size: 16px;
        padding: 0.24rem 0;
        width: 3rem;
    }

    .contact_det .con .info {
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .contact_det .con .tit {
        font-size: 20px;
    }

    .contact_det .con .tit, .contact_det .con .add {
        width: 100%;
        max-width: 100%;
    }

    .contact_det .con .add .text {
        width: 100%;
        text-align: left;
    }

    .contact_det .con .add .text {
        margin: 0.3rem 0;
    }

    .contact_det .con .add .text i {
        width: 20px;
    }

    .contact_det .con .add .pic {
        width: 2rem;
        height: auto;
        margin-left: 0;
    }

    .contact_det .con .add .pic p {
        font-size: 14px;
    }

    .contact_det .con .mapbox {
        height: 6rem;
    }

    .contact_det .con .mapbox iframe, .contact_det .con .mapbox #map {
        height: 5.98rem;
    }
}

@media all and (max-width: 768px) {

}

@media all and (max-width: 640px) {
    /* 移动终端以上 360 适配 */
    .contact_det .con .add .text .t1 p {
        font-size: 14px;
    }
}

@media all and (max-width: 480px) {

}

@media all and (max-width: 420px) {

}

@media all and (max-width: 376px) {

}
