/* 关于我们-联系我们 */
.contact_main{margin-top: 90px;}


#contact{padding: 70px 0 120px;}
#contact .top_brief{margin-top: 16px; font-size: 16px; line-height: 26px; color: #666;}
#contact .map_box{margin: 6px auto 20px; width: 100%;}
#contact .map_box .map{width: 63.8%; height: 550px;}
#contact .map_box .info{width: 27.39%;}
#contact .map_box .info .item{margin-top: 38px;}
#contact .map_box .info .item:first-child{margin-top: 0;}
#contact .map_box .info .item .tit{font-size: 16px; line-height: 25px; color: #666;}
#contact .map_box .info .item .desc{margin-top: 5px; font-size: 20px; line-height: 34px; color: #333;}

#contact .box{padding: 50px 3.26% 60px; margin-top: 60px; background-color: #f8f8f8;} 
#contact .box .title_box{}
#contact .box .title_box .icon{margin-right: 28px;}
#contact .box .title_box .icon .svg{width: 32px; height: 32px;}
#contact .box .title_box .name{margin-top: 1px; font-size: 24px; line-height: 1.3; color: #333; font-weight: normal;}

#contact .box.intl_box{margin-top: 0;}
#contact .intl_box .intl_swiper{padding-bottom: 52px; margin-left: 60px; margin-top: 30px;}
#contact .intl_box .intl_swiper .slide{padding: 18px 20px 18px 0;}
#contact .intl_box .intl_swiper .slide::before{content: ''; display: block; width: 1px; height: 100%; background-color: #e4e4e4; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); z-index: 1;}
#contact .intl_box .intl_swiper .slide .area{font-size: 18px; line-height: 32px; color: #333;}
#contact .intl_box .intl_swiper .slide .email{font-size: 16px; line-height: 30px; color: #666; margin-top: 2px;}
#contact .intl_box .intl_swiper .swiper-pagination{z-index: 1; bottom: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 3px;}
#contact .intl_box .intl_swiper .swiper-pagination .swiper-pagination-bullet{ margin: 0 10px; width: 30px; height: 3px; background-color: #d1d1d1; border-radius: 5px; opacity: 1; transition: 0.5s linear;}
#contact .intl_box .intl_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 60px; height: 3px; background-color: #333;}

#contact .follow_box{display: flex; align-items: center; justify-content: space-between;}
#contact .follow_box .title_box{width: 15.65%;}
#contact .follow_box .follow_list{width: calc(100% - 16.65%);}
#contact .follow_box .follow_list .item{width: 150px; height: 150px; border-radius: 50%; background-color: #fff; cursor: pointer; transition: all .3s ease;}
#contact .follow_box .follow_list .item .icon_box{width: 100%; height: 100%;}
#contact .follow_box .follow_list .item .icon_box .icon{margin-bottom: 16px; display: flex; justify-content: center; align-items: center;}
#contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 39px; color: #333; fill: #333;}
#contact .follow_box .follow_list .item .icon_box .tit{font-size: 16px; line-height: 24px; color: #333;}
#contact .follow_box .follow_list .item .code{opacity: 0; z-index: 2; width: 100%; height: 100%; background-color: #fff; transition: opacity .4s ease-in-out;}
#contact .follow_box .follow_list .item .code img{width: 105px; height: 105px;}
#contact .follow_box .follow_list .item:hover{border-radius: 22px; }
#contact .follow_box .follow_list .item:hover .code{opacity: 1;}

#contact .buy_box{}
#contact .buy_box .cont{margin-left: 60px;}
#contact .buy_box .cont .brief{margin-top: 15px; font-size: 16px; line-height: 26px; color: #666;}
#contact .buy_box .cont .buy_list{margin-top: 35px; width: calc(100% - 60px);}
#contact .buy_box .cont .buy_list .item{width: 17.35%;}
#contact .buy_box .cont .buy_list .item a{width: 100%; height: max-content;}
#contact .buy_box .cont .buy_list .item .pic_box{width: 100%; height: 212px; background-color: #fff;}
#contact .buy_box .cont .buy_list .item .pic_box .icon{width: 95px; height: 85px; transition: all .3s ease;}
#contact .buy_box .cont .buy_list .item .pic_box .icon .svg{max-width: 100%; max-width: 100%;transition: all .5s ease;}
#contact .buy_box .cont .buy_list .item .pic_box .code{opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width:100%; height:100%; transition: opacity .3s ease;}
#contact .buy_box .cont .buy_list .item .pic_box .code img{width: 70.52%; height: 70.76%;}
#contact .buy_box .cont .buy_list .item .tit{text-align: center; margin-top: 16px; font-size: 16px; line-height: 25px; color: #333;  transition: all .3s ease;}
#contact .buy_box .cont .buy_list .item.hasCode:hover .pic_box .icon{opacity: 0;}
#contact .buy_box .cont .buy_list .item.hasCode:hover .pic_box .code{opacity: 1;}
#contact .buy_box .cont .buy_list .item:hover .tit{color: var(--main);}
#contact .buy_box .cont .buy_list .item:hover .pic_box .icon .svg{transform: scale(1.05);}
/* #contact .buy_box .cont .buy_list .item:nth-child(2) .pic_box .code,
#contact .buy_box .cont .buy_list .item:nth-child(3) .pic_box .code{display: none;}
#contact .buy_box .cont .buy_list .item:nth-child(2):hover .pic_box .icon,
#contact .buy_box .cont .buy_list .item:nth-child(3):hover .pic_box .icon{opacity: 1;} */

#contact .contact_box{}
#contact .contact_box .item{width: 47.8%;}
#contact .contact_box .item:nth-child(2n),
#contact .contact_box .item:last-child{margin-right: 0;}
#contact .contact_box .item:last-child{width: 100%;}
#contact .contact_box .item.code_item{display: flex; justify-content: space-between; align-items: center;}
#contact .contact_box .item.code_item .left{padding-right: 30px; width: calc(100% - 150px);}
#contact .contact_box .item.code_item .code{padding: 15px; width: 150px; height: 150px; background-color: #fff;}
#contact .contact_box .item .info{margin-left: 60px; margin-top: 20px; font-size: 16px; line-height: 29px; color: #666;}
#contact .contact_box .item .info span{display: inline-block; margin: 0 45px;}
#contact .contact_box .item .apply_btn{margin-left: 60px; margin-top: 33px; padding: 0 20px; width: max-content; min-width: 140px; height: 50px; font-size: 16px; color: #fff; background-color: #666;}
#contact .contact_box .item .apply_btn .jt{margin-left: 20px; display: flex; justify-content: center; align-items: center; transform: translateY(1px);}
#contact .contact_box .item .apply_btn .jt .svg{width: .0606rem; font-size: .0606rem; color: #fff; fill: #fff; }
#contact .contact_box .item .apply_btn:hover{background-color: #333;}


@media (max-width: 1680px) {
    #contact .map_box .info{width: 30%;}

    #contact .follow_box .title_box{width: 17.65%;}
    #contact .follow_box .follow_list{width: calc(100% - 18.65%);}

    #contact .buy_box .cont .buy_list .item .pic_box{height: 210px;}
}
@media (max-width: 1620px) {
    #contact .buy_box .cont .buy_list .item .pic_box{height: 197px;}
}
@media (max-width: 1536px) {
    #contact .map_box .map{height: 500px;}
    #contact .map_box .info{width: 32%;}
    #contact .map_box .info .item{margin-top: 30px;}

    #contact .box{padding: 45px 3.26% 55px; margin-top: 50px;} 
    
    #contact .buy_box .cont .buy_list .item .pic_box{height: 190px;}

    /* #contact .contact_box .item{margin-right: 50px;} */
    #contact .contact_box .item .info span{margin: 0 40px;}
}
@media (max-width: 1480px) {
    #contact .buy_box .cont .buy_list .item .pic_box{height: 182px;}
}
@media (max-width: 1440px) {
    #contact .map_box .map{height: 450px;}
    #contact .map_box .info{width: 33%;}
    
    #contact .box{padding: 45px 3.26% 50px; margin-top: 45px;} 
    #contact .box .title_box .icon{margin-right: 20px;}
    #contact .box .title_box .name{font-size: 24px;}

    #contact .intl_box .intl_swiper{padding-bottom: 40px;}

    #contact .follow_box .title_box{width: 19.65%;}
    #contact .follow_box .follow_list{width: calc(100% - 20.65%);}
    #contact .follow_box .follow_list .item{width: 135px; height: 135px;}
    /* #contact .follow_box .follow_list .item .icon_box .icon .svg{width: 43px; height: 35px;} */
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 33px;}

    #contact .buy_box .cont{margin-left: 50px;}
    #contact .buy_box .cont .buy_list{margin-top: 30px;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 178px;}

    /* #contact .contact_box .item{margin-right: 45px;} */
    #contact .contact_box .item .info{margin-left: 50px;}
}
@media (max-width: 1366px) {
    #contact .map_box{margin-bottom: 0;}
    #contact .map_box .map{height: 430px;}
    #contact .map_box .info .item{margin-top: 25px;}
    #contact .map_box .info .item .desc{font-size: 18px; line-height: 1.6;}

    #contact .box{padding: 45px 3.26%; margin-top: 45px;}
    #contact .box .title_box .icon{margin-right: 20px;}
    
    #contact .intl_box .intl_swiper,
    #contact .buy_box .cont,
    #contact .contact_box .item .info,
    #contact .contact_box .item .apply_btn{margin-left: 55px;}

    #contact .follow_box .follow_list .item{width: 132px; height: 132px;}
    #contact .follow_box .follow_list .item .icon_box .icon{margin-bottom: 12px;}
    /* #contact .follow_box .follow_list .item .icon_box .icon .svg{width: 40px; height: 32px;} */
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 30px;}

    #contact .buy_box .cont .buy_list .item .pic_box .icon{width: 89px; height: 78px;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 165px;}
    
    /* #contact .contact_box .item{margin-right: 45px;} */
}
@media (max-width: 1280px) {
    #contact{padding: 70px 0 100px;}
    #contact .map_box .map{height: 400px;}
    
    #contact .box{padding: 40px 3.26%; margin-top: 40px;}
    #contact .box .title_box .name{font-size: 22px; margin-top: 3px;}

    #contact .intl_box .intl_swiper .slide .area{font-size: 16px; line-height: 1.5;}
    #contact .intl_box .intl_swiper .slide .email{font-size: 14px; line-height: 1.5;}

    #contact .follow_box .follow_list .item{width: 130px; height: 130px;}

    #contact .buy_box .cont .brief{margin-top: 10px;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 155px;}
    
    /* #contact .contact_box .item{margin-right: 40px;} */
    #contact .contact_box .item.code_item .left{padding-right: 20px;}
    #contact .contact_box .item .info{margin-top: 15px; line-height: 1.6;}
    #contact .contact_box .item .info span{margin: 0 30px;}
}
@media (max-width: 1200px) {
    #contact .map_box .map{height: 380px;}

    #contact .box{padding: 35px 3.26%; margin-top: 35px;}
    #contact .box .title_box .name{font-size: 20px;}
    #contact .intl_box .intl_swiper, 
    #contact .follow_box .follow_list,
    #contact .buy_box .cont, 
    #contact .contact_box .item .info,
    #contact .contact_box .item .apply_btn{margin-left: 52px;}

    #contact .follow_box{flex-wrap: wrap;}
    #contact .follow_box .title_box{width: 100%;}
    #contact .follow_box .follow_list{width: 100%; margin-top: 25px;}
    #contact .follow_box .follow_list .item{width: 135px; height: 135px;}

    #contact .buy_box .cont .buy_list{margin-top: 25px;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 144px;}
    #contact .buy_box .cont .buy_list .item .pic_box .icon{width: 81px; height: 75px;}

    /* #contact .contact_box .item{margin-right: 35px;} */
    #contact .contact_box .item.code_item .left{width:calc(100% - 140px);}
    #contact .contact_box .item.code_item .code{width: 140px; height: 140px;}
}
@media (max-width: 1050px) {
    #contact .map_box .map{height: 340px;}
    #contact .map_box .info .item{margin-top: 15px;}
    #contact .map_box .info .item .desc{font-size: 16px;}

    #contact .intl_box .intl_swiper{padding-bottom: 30px;}
    #contact .intl_box .intl_swiper .swiper-pagination .swiper-pagination-bullet{margin: 0 5px; width: 20px;}
    #contact .intl_box .intl_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 50px;}

    #contact .follow_box .follow_list{margin-top: 20px;}
    #contact .follow_box .follow_list .item{width: 120px; height: 120px;}
    #contact .follow_box .follow_list .item .icon_box .icon{margin-bottom: 8px;}
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 24px;}
    #contact .follow_box .follow_list .item .icon_box .tit{font-size: 14px; line-height: 1.5;}
    #contact .follow_box .follow_list .item .code img{width: 95px; height: 95px;}
    
    #contact .buy_box .cont .buy_list{margin-top: 20px; width: 100%;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 134px;}
    #contact .buy_box .cont .buy_list .item .tit{margin-top: 12px; font-size: 14px; line-height: 1.5;}

    #contact .contact_box .item.code_item{flex-wrap: wrap;}
    #contact .contact_box .item.code_item .left{width: 100%; padding-right: 0;}
    #contact .contact_box .item.code_item .code{margin-left: 52px; margin-top: 15px;}
    #contact .contact_box .item .info{font-size: 15px;}
    #contact .contact_box .item .info span{margin: 0 15px;}
    #contact .contact_box .item .apply_btn{font-size: 15px;}
}
@media (max-width: 1024px) {
    #contact .buy_box .cont .buy_list .item .pic_box{height: 130px;}
}
@media (max-width: 992px) {
    .contact_main{margin-top: 66px;}

    #contact{padding: 8vw 0;}
    #contact .top_brief{margin-top: 1vw; font-size: .13rem; line-height: 1.8;}
    #contact .map_box{margin-top: 2vw; flex-wrap: wrap;}
    #contact .map_box .map{width: 100%; height: 320px;}
    #contact .map_box .info{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
    #contact .map_box .info .item{margin-top: 4vw; width: 48%;}
    #contact .map_box .info .item:first-child{margin-top: 4vw; }
    #contact .map_box .info .item .tit{font-size: .12rem; line-height: 1.5;}
    #contact .map_box .info .item .desc{margin-top: .5vw; font-size: .15rem; line-height: 1.6;}

    
    #contact .box{padding: 4vw 4.5%; margin-top: 5vw;}
    #contact .box.intl_box{margin-top: 5vw;}
    #contact .box .title_box .name{font-size: .18rem;}

    #contact .intl_box .intl_swiper .slide .area{font-size: .13rem; line-height: 1.6;}
    #contact .intl_box .intl_swiper .slide .email{font-size: .12rem; line-height: 1.6;}

    #contact .follow_box .follow_list{flex-wrap: wrap; margin-top: 0; justify-content: flex-start;}
    #contact .follow_box .follow_list .item{margin-top: 2vw; margin-right: 2vw; width: 31.5%; height: 23.5vw;}
    #contact .follow_box .follow_list .item:nth-child(3n){margin-right: 0;}
    #contact .follow_box .follow_list .item .icon_box .icon{margin-bottom: 2vw;}
    /* #contact .follow_box .follow_list .item .icon_box .icon .svg{width: 44px; height: 40px;} */
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 30px;}
    #contact .follow_box .follow_list .item .icon_box .tit{font-size: .13rem; line-height: 1.5;}
    #contact .follow_box .follow_list .item .code img{width: 150px; height: 150px;}
    #contact .follow_box .follow_list .item:hover{border-radius: .22rem; }

    #contact .buy_box .cont .brief{margin-top: 1vw; font-size: .12rem; line-height: 1.6;}
    #contact .buy_box .cont .buy_list{flex-wrap: wrap; margin-top: 0; justify-content: flex-start;}
    #contact .buy_box .cont .buy_list .item{margin-top: 2vw; margin-right: 2vw; width: 31.5%;}
    #contact .buy_box .cont .buy_list .item:nth-child(3n){margin-right: 0;}
    #contact .buy_box .cont .buy_list .item .pic_box{ height: 23.5vw;}
    #contact .buy_box .cont .buy_list .item .pic_box .code img{width: 150px; height: 150px;}
    #contact .buy_box .cont .buy_list .item .tit{font-size: .12rem; line-height: 1.5;}
    #contact .buy_box .cont .buy_list .item:hover .pic_box .icon .svg{transform: scale(1);}
    /* #contact .buy_box .cont .buy_list .item:nth-child(2) .pic_box .code,
    #contact .buy_box .cont .buy_list .item:nth-child(3) .pic_box .code{display: block;}
    #contact .buy_box .cont .buy_list .item:nth-child(2):hover .pic_box .icon,
    #contact .buy_box .cont .buy_list .item:nth-child(3):hover .pic_box .icon{opacity: 0; } */

    /* #contact .contact_box .item{margin-right: 5vw; width: 46.8%;} */
    #contact .contact_box .item{width: 46.8%;}
    #contact .contact_box .item .info{font-size: .12rem; line-height: 1.5;}
    #contact .contact_box .item .apply_btn{margin-top: 3vw; height: 5vw; font-size: .12rem;}
}
@media (max-width: 768px) {
    #contact .top_brief{font-size: .18rem;}
    #contact .map_box .map{height: 380px;}
    #contact .map_box .info .item .tit{font-size: .16rem;}
    #contact .map_box .info .item .desc{font-size: .2rem;}
    
    #contact .box{padding: 5vw;}
    #contact .box .title_box .name{margin-top: 0; font-size: .26rem;}

    #contact .intl_box .intl_swiper{margin-top: 3vw; padding-bottom: 3vw;}
    #contact .intl_box .intl_swiper .slide{padding: 0 2vw; padding-left: 0;}
    #contact .intl_box .intl_swiper .slide::before{display: none;}
    #contact .intl_box .intl_swiper .slide .area{font-size: .18rem;}
    #contact .intl_box .intl_swiper .slide .email{font-size: .16rem;}

    #contact .follow_box .follow_list .item{width: 31.2%;  border-radius: .22rem;}
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 35px;}
    #contact .follow_box .follow_list .item .icon_box .tit{font-size: .16rem;}
    #contact .follow_box .follow_list .item .code img{width: 70%; height: 70%;}
    #contact .follow_box .follow_list .item:hover{ border-radius: .22rem; }
    
    #contact .buy_box .cont .brief{font-size: .16rem;}
    #contact .buy_box .cont .buy_list .item{width: 31.2%;}
    #contact .buy_box .cont .buy_list .item .pic_box{height: 22vw;}
    #contact .buy_box .cont .buy_list .item .pic_box .code img{width: 70%; height: 70%;}
    #contact .buy_box .cont .buy_list .item .tit{font-size: .16rem;}
    #contact .buy_box .cont .buy_list .item:hover .tit{color: #333;}

    #contact .contact_box .item{width: 100%; margin-right: 0;}
    #contact .contact_box .item .info{font-size: .16rem; line-height: 1.7;}
    #contact .contact_box .item .apply_btn{padding: 0 4vw; margin-top: 5vw; height: 50px; font-size: .16rem; background-color: #333;}
}
@media (max-width: 576px) {
    #contact{padding: 10vw 0;}
    #contact .top_brief{font-size: .26rem;}
    #contact .map_box .map img{height: 100%;}
    #contact .map_box .info .item{width: 100%;}
    #contact .map_box .info .item .tit{font-size: .26rem;}
    #contact .map_box .info .item .desc{font-size: .28rem;}

    #contact .box{padding: 6vw;}
    #contact .box .title_box{align-items: center;}
    #contact .box .title_box .icon{margin-right: 4vw; width: 8vw; height: 8vw;}
    #contact .box .title_box .name{margin-top: 1px; font-size: .32rem; font-weight: 600;}
    
    #contact .intl_box .intl_swiper{margin-top: 5vw; padding-bottom: 5vw;}
    #contact .intl_box .intl_swiper .slide .area{font-size: .28rem;}
    #contact .intl_box .intl_swiper .slide .email{font-size: .26rem;}
    #contact .intl_box .intl_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px;}

    #contact .follow_box .follow_list {margin-top: 2vw; justify-content: space-between;}
    #contact .follow_box .follow_list .item{padding: 0; padding-bottom: 5vw; margin-top: 3vw; margin-right: 0; width: 100%; height: auto;}
    /* #contact .follow_box .follow_list .item:nth-child(3n){margin-right: 3vw;} */
    /* #contact .follow_box .follow_list .item:nth-child(2n){margin-right: 0;} */
    #contact .follow_box .follow_list .item:nth-child(3),
    #contact .follow_box .follow_list .item:nth-child(4),
    #contact .follow_box .follow_list .item:nth-child(5),
    #contact .follow_box .follow_list .item:nth-child(6){width: 47%;}
    #contact .follow_box .follow_list .item .icon_box .icon{margin-bottom: 0; height: 20vw; display: flex; justify-content: center; align-items: center;}
    #contact .follow_box .follow_list .item .icon_box .icon .svg{font-size: 0.58rem;}
    #contact .follow_box .follow_list .item .icon_box .tit{font-size: .26rem;}
    #contact .follow_box .follow_list .item .code{display: none;}
    #contact .follow_box .follow_list .item .code_mb{display: block; margin-bottom: 4vw; width: 30vw;}
    #contact .follow_box .follow_list .item .code img,
    #contact .buy_box .cont .buy_list .item .pic_box .code img{width: 80%; height: 80%;}

    #contact .buy_box .cont .brief{margin-top: 2vw; font-size: .26rem; line-height: 1.5;}
    #contact .buy_box .cont .buy_list {margin-top: 2vw;}
    #contact .buy_box .cont .buy_list .item{margin-top: 3vw; margin-right: 3vw; width: 47%; }
    #contact .buy_box .cont .buy_list .item:nth-child(3),
    #contact .buy_box .cont .buy_list .item:nth-child(5){margin-right: 0;}
    /* #contact .buy_box .cont .buy_list .item:nth-child(2n){margin-right: 3vw;} */
    #contact .buy_box .cont .buy_list .item .pic_box{height: 31vw;}
    #contact .buy_box .cont .buy_list .item .pic_box .icon{width: 60px; height: 60px;}
    #contact .buy_box .cont .buy_list .item .tit{font-size: .26rem;}

    #contact .buy_box .cont .buy_list .item.hasCode{padding-bottom: 5vw; width: 100%; margin-right: 0; background-color: #fff; border-radius: 0.16rem;}
    #contact .buy_box .cont .buy_list .item.hasCode .pic_box{height: 20vw;}
    #contact .buy_box .cont .buy_list .item.hasCode .pic_box .code{display: none;}
    #contact .buy_box .cont .buy_list .item.hasCode:hover .pic_box .icon{opacity: 1;}
    #contact .buy_box .cont .buy_list .item.hasCode .code_mb{display: block; margin: 4vw auto 0; width: 30vw;}

    #contact .contact_box .item .info{margin-top: 2vw; font-size: .26rem;}
    #contact .contact_box .item .apply_btn{padding: 0 5vw; height: 0.79rem; font-size: .26rem;}
    #contact .contact_box .item .apply_btn .svg,
    #contact .contact_box .item .apply_btn .jt .svg{width: auto; font-size: 0.18rem; transform: scale(0.8);}
}
@media (max-width: 530px) {
    #contact .contact_box .item.code_item .code{width: 33vw; height: 33vw;}

    #contact .buy_box .cont .buy_list .item.hasCode a{padding-top: 2vw;}
}