.page-contact-banner {
    position: relative;
    height: 100vh;
}

.page-contact-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-banner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    text-align: center;
    transform: translate(-50%, -50%);
}

.contact-banner-title {
    font-size: .24rem;
    color: var(--main-color);
}

.contact-banner-desc {
    font-size: .68rem;
    line-height: 1.3;
    color: #fff;
}

.hi-contact-classification {
    padding-right: 1.08rem;
}

.hi-classification__content {
    padding: .24rem .44rem;
    padding-right: calc(.44rem + 1.08rem);
    border-bottom: 1px solid #e6e6e6;
}

.hi-classification__list {
    gap: .1rem;
}

.hi-classification__list .item {
    min-width: 2.08rem;
    border: 1px solid var(--main-color);
    border-radius: .6rem;
    font-size: .18rem;
    line-height: .75rem;
    text-align: center;
    color: #666;
    background: #fffaf6;
}

.hi-classification__list .item.active {
    font-family: 'itcagsm';
    color: #fff;
    background: var(--main-color);
}

.hi-classification__mo-list {
    display: none;
}

.hi-classification__mo-icon {
    width: .3rem;
    height: .3rem;
}

.hi-classification__search {
    height: .68rem;
    border: 1px solid #e5e5e5;
    border-radius: .6rem;
    overflow: hidden;
}

.hi-classification__search .search-input {
    padding: 0 .4rem;
    font-size: .18rem;
    line-height: .68rem;
    color: #000;
    outline: 0;
}

.hi-classification__search .search-input::placeholder {
    color: #878787;
}

.hi-classification__search .search-btn {
    width: 1.04rem;
    height: .68rem;
    font-size: .3rem;
    line-height: .68rem;
    text-align: center;
    color: #fff;
    background: var(--main-color);
}

.contact-model {
    background: #f4f4f4;
}

.contact-model__title {
    margin-bottom: .3rem;
    font-size: .48rem;
    font-family: 'itcagsd';
    text-align: center;
    color: #333;
}

.contact-details {
    padding: 1.1rem 0;
}

.contact-details__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-details__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - 12px);
    padding: .7rem 0;
    margin-bottom: 24px;
    background: #fff;
}

.contact-details__item .icon {
    width: 66px;
    height: 66px;
}

.contact-details__item .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

.contact-details__item .name {
    margin-top: .2rem;
    font-size: .24rem;
    font-family: 'itcagsd';
}

.contact-details__item .info {
    margin-top: .1rem;
    font-size: .18rem;
    font-family: 'itcagsm';
}

.contact-details__item:nth-last-of-type(-n+2) {
    flex-direction: row;
}

.contact-details__item:nth-last-of-type(-n+2) .wrap {
    width: 20%;
    text-align: center;
    margin: 0 40px;
}

.contact-details__item:nth-last-of-type(-n+2) .wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 2px;
    height: 40px;
    margin-top: -20px;
    background: #e0e0e0;
}

.contact-details__item:nth-last-of-type(-n+2) .info {
    margin-left: 40px;
}

.contact-details__follows {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-details__social {
    position: relative;
    width: calc(20% - 25px);
    height: 2.15rem;
    background: #fff;
    transition: all .3s;
    overflow: hidden;
}

.contact-details__social .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .76rem;
    height: .76rem;
    transform: translate(-50%, -50%);
}

.contact-details__social .icon-n {
    display: block;
}

.contact-details__social .icon-a {
    display: none;
}

.contact-details__social .txt {
    position: absolute;
    bottom: -.36rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: .18rem;
    line-height: 1;
    font-family: 'itcagsm';
    color: #fff;
    transition: all .3s;
}

.contact-details__social .txt .arrow {
    width: .29rem;
    height: .06rem;
    margin-left: .1rem;
    fill: #fff;
}

.contact-details__social:hover {
    background: var(--main-color);
}

.contact-details__social:hover .icon-n {
    display: none;
}

.contact-details__social:hover .icon-a {
    display: block;
}

.contact-details__social:hover .txt {
    bottom: .18rem;
}

#map {
    height: 7.9rem;
}

.online-message {
    padding: 1.1rem 0;
}

.online-message__form {}

.online-message__form .content {
    padding: .78rem;
    background: #fff;
}

.online-message__form .el-input__inner,
.online-message__form .el-textarea__inner {
    border-style: none none solid none;
    border-radius: 0;
    padding: 0;
}

.online-message__form .el-input__inner::placeholder,
.online-message__form .el-textarea__inner::placeholder {
    color: #000;
}

.online-message__form .el-textarea__inner {
    height: 1rem;
}

.online-message__form .last-item {
    display: flex;
    align-items: center;
    margin-top: .3rem;
}

.online-message__form .el-checkbox {
    font-size: .16rem;
    color: #999;
}
.online-message__form .tips {
    margin-left: .1rem;
    font-size: .14rem;
    color: #333333;
    cursor: pointer;
}

.online-message__form .submit {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-size: .2rem;
    color: #333;
}

.online-message__form .submit .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .56rem;
    height: .56rem;
    margin-left: .1rem;
    border-radius: 50%;
    background: var(--main-color);
}

.online-message__form .submit .arrow {
    width: .29rem;
    height: .06rem;
    fill: #fff;
}

.contact-privacy-policy {
    position: fixed;
    top: .82rem;
    left: 0;
    z-index: 99;
    display: none;
    width: 100%;
    height: calc(100% - .82rem);
    background: #f5f5f5;
}

.contact-privacy-policy .rich-text-wrap {
    height: 100%;
    padding: 1rem;
    background: #fff;
}

.contact-privacy-policy .rich-text-wrap .rich-text {
    max-height: 60vh;
    overflow-y: auto;
}

.close-privacy-policy {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.close-privacy-policy .icon-close {
    font-size: 16px;
    color: #666;
}


@media (max-width: 1600px) {
    .hi-layout {
        padding-right: calc(1.08rem + 15px);
    }
}

/* 2xl */
@media (max-width: 1536px) {}

@media (max-width: 1366px) {
    .hi-layout {
        padding-right: calc(1.08rem + 30px);
    }

    .contact-details__item .name {
        font-size: .2rem;
    }

    .contact-details__item .info {
        font-size: .16rem;
    }
}

/* xl */
@media (max-width: 1280px) {
    .contact-details__item {
        padding-left: .3rem;
        padding-right: .3rem;
    }

    .contact-details__item .name {
        font-size: .18rem;
    }

    .contact-details__item:nth-last-of-type(-n+2) {
        padding-left: 0;
        padding-right: 0;
    }

    .contact-details__social {
        height: 1.8rem;
    }

    .contact-details {
        padding: .9rem 0;
    }

}

/* lg */
@media (max-width: 1024px) {
    .hi-contact-classification {
        padding-right: 0;
    }

    .hi-layout {
        padding-right: 30px;
    }

    .contact-details__list {
        flex-direction: column;
    }

    .contact-details__item {
        width: 100%;
    }

    .contact-details__item:nth-last-of-type(-n+2) {
        padding-left: 10%;
    }

    .contact-details__social {
        height: 1.4rem;
    }

    .online-message__form .last-item {
        /*flex-direction: column;*/
        align-items: center;
        justify-content: center;
    }

    .online-message__form .submit {
        /*margin-top: .3rem;*/
    }

    .close-privacy-policy {
        bottom: 2rem;
    }

    .online-message__form .submit span {
        display: none;
    }

    .online-message__form .submit .icon {
        margin-left: 0;
    }

}

/* md */
@media (max-width: 768px) {
    .contact-banner-wrap {
        width: 90%;
    }

    .contact-details__social {
        width: calc(20% - 10px);
        height: 1rem;
    }

    .contact-details__social .txt {
        display: none;
    }
    .online-message__form .tips {
        font-size: .20rem;
    }
}

/* sm */
@media (max-width: 640px) {}


.info-box {
    width: 60%;
    padding: .75rem .44rem 0;
}

.info-box__title {
    font-size: .24rem;
    font-family: 'itcagsd';
    color: #fff;
}

.info-box__desc {
    font-size: .18rem;
    font-family: 'itcagsm';
    color: rgba(255, 255, 255, .6);
}

.contact-map {
    position: relative;
}

.contact-map .map-cover {
    height: 7.89rem;
    object-fit: cover;
}

.contact-map .map-address {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 100%;
    transform: translateX(-50%);
}

.contact-map .map-address .list {
    background: #6d6d6d;
}

.contact-map .map-address .item {
    width: calc(33.3333% - 0.12rem);
    padding: .26rem 0.3rem;
    text-align: center;
}

.contact-map .map-address .icon {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
}

.contact-map .map-address .label {
    margin-top: .1rem;
    font-size: .24rem;
    color: rgba(255,255,255,.6);
    transition: all 0.3s;
}

.contact-map .map-address .text {
    margin-top: .1rem;
    font-size: .18rem;
    color: #c0c0c0;
}

.contact-map .map-address .item.active .label,
.contact-map .map-address .item:hover .label {
    color: rgba(255,255,255,1);
}
/*.contact-map .infoBox {*/
/*    position: relative;*/
/*    width: 7.12rem !important;*/
/*    height: 2.63rem !important;*/
/*    background-size: contain !important;*/
/*    background-repeat: no-repeat !important;*/
/*}*/

/*.contact-map .infoBox::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    bottom: -100px;*/
/*    width: 1px;*/
/*    height: 100px;*/
/*    border-left: 1px dashed #ff7418;*/
/*    transform: translateX(-50%);*/
/*}*/

/*.contact-map .infoBox img {*/
/*    width: 24px;*/
/*}*/

@media screen and (max-width: 1366px) {
    .contact-map .map-address .item {
        padding: .2rem;
    }
    .contact-map .map-address .icon {
        width: 1rem;
        height: 1rem;
    }
    .contact-map .map-address .label {
        font-size: .2rem;
    }

    .contact-map .map-address .text {
        font-size: .14rem;
    }
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .contact-map .map-address .list {
        padding: 0;
    }
    .contact-map .map-address .item {
        padding: .2rem 0;
    }
    .contact-map .map-address .text {
        display: none;
    }
}
@media screen and (max-width: 768px) {}