@charset "utf-8";

#contact{margin: 0 auto;}
#contact .wrap{margin: 0 auto;max-width: 1600px;padding: 100px 0; }
#contact .title{ border-bottom: 1px solid #ddd; padding-bottom: 40px;}
#contact .title .name{ width: 70%;}
#contact .title .name>h2{font-size: 4rem; font-weight: normal;}
#contact .title .name>p{display: block; color: #666; padding-top: 10px;}
#contact .title .name>p>i{display: inline-block;vertical-align: middle;margin-right: 10px;font-size: 2.4rem;}
#contact .title .name>p>span{display: inline-block;vertical-align: middle; font-size: 1.6rem;}
#contact .title .qrcode{ width: 30%;text-align: right;}
#contact .title .qrcode>.tip{display: inline-block; color: #999; padding-right: 10px; padding-top: 20px;}
#contact .title .qrcode>.tip>p{ display: block; font-size: 1.4rem;font-weight: bold;}
#contact .title .qrcode>.tip>span{ display: block; font-size: 1.2rem;}
#contact .title .qrcode>.img{ display: inline-block; float: right; width: 85px;}
#contact .title .qrcode>.img>img{width: 100%;height: auto;}

#contact .container{margin: 0 auto;}
#contact .container>.content{ padding: 50px 0;}
#contact .container>.content>.rows{display: block; float: left; width: 33.33%; text-align: left;}
#contact .container>.content>.rows>.tit{font-size: 1.4rem; color: #666;}
#contact .container>.content>.rows>.tit>i{display: inline-block;vertical-align: middle;margin-right: 5px;color: #666; font-size: 2.4rem;}
#contact .container>.content>.rows>.tit>span{display: inline-block;vertical-align: middle;}
#contact .container>.content>.rows>.txt{padding: 10px 0; font-size: 3.2rem; color: #333; }
#contact .container>.map{position: relative; margin: 0 auto 50px auto; overflow: hidden;}
#contact .container>.map>.locate{position: absolute;z-index: 10; left: 47%;top: 43%;}
#contact .container>.map>.locate>a{display: inline-block; position: relative; z-index: 50;}
#contact .container>.map>.locate>a:after{ display: none; position: absolute;z-index: 12; right: -100px;top: 30px; min-width: 90px; box-sizing: border-box; padding: 8px 10px; background: rgba(32,42,134,.8); border-radius: 3px; font-size: 1.3rem; color: #fff; content: attr(data-tips);transition: all 0.36s ease;animation: ani_opacity 0.3s ease backwards;}
#contact .container>.map>.locate>a:hover:after{display: block;}
#contact .container>.map>.locate:before {content: "";box-sizing: border-box;width:80px; height:80px;position: absolute; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; border-radius: 50%; transform: scale(0); opacity:0; will-change: transform, opacity;}
#contact .container>.map>.locate:before {background:rgba(178,0,19,.3);animation: scaled-rect 1.5s infinite; animation-timing-function: ease-in-out;}
#contact .container>.map>.locate:before {animation: out-circle 1s infinite;animation-timing-function: ease-in;}
#contact .container>.map>.locate:after {content: "";box-sizing: border-box;width:300px; height:300px;position: absolute; left: 50%; top: 50%; margin-top: -150px; margin-left: -150px; border-radius: 50%; transform: scale(0); opacity:0; will-change: transform, opacity;}
#contact .container>.map>.locate:after {background:rgba(178,0,19,.1);animation: scaled-rect 2s infinite; animation-timing-function: ease-in-out;}
#contact .container>.map>.locate:after {animation: out-circle 1.5s infinite;animation-timing-function: ease-in;}
#contact .container>.map>img{width: 100%;height: auto; border-radius: 8px;overflow: hidden; }


@-webkit-keyframes ani_opacity {
    0% { right: -110px; opacity: 0; }
    100% { right: -100px; opacity: 1; }
}

@keyframes scaled-rect {
    0%, to {
        transform:translateZ(0) scale(1.2) rotate(0);
        -moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
    }
    50% {
        transform:translateZ(0) scale(.8) rotate(0);
        -moz-transform:translateZ(0) scale(.8) rotate(.02deg)
    }
}
@keyframes out-circle {
    0% {
        transform:scale(0);
        -moz-transform:scale(0) rotate(.02deg);
        opacity:1
    }
    70% {
        opacity:1
    }
    to {
        transform:scale(1);
        -moz-transform:scale(1) rotate(.02deg);
        opacity:0
    }
}



@media only screen and (max-width: 1280px){

    #contact .wrap{padding: 50px 0; }

    #contact .title .name>h2 {font-size: 3.2rem;}
    #contact .container>.content>.rows>.txt {font-size: 2.4rem; }

}

@media only screen and (max-width: 860px){

    #contact .title .name>h2 {font-size:3rem;}

    #contact .container>.content>.rows {float: left; width: 50%; margin-bottom: 20px;}

}

@media only screen and (max-width: 780px){

    #contact .title .name { width: 100%; float: none;}
    #contact .title .qrcode{ width: 100%;text-align: left; float: none; padding-top: 20px;}
    #contact .title .qrcode>.img{float: left; width: 65px;}
    #contact .title .qrcode>.tip{padding-top: 10px; padding-left: 10px;}

    #contact .container>.content>.rows {float: none; width: 100%;}



}


@media only screen and (max-width: 640px){

    #contact .title .name>h2 {font-size:2.4rem;}
    #contact .title .name>p>span {font-size: 1.4rem;}

    #contact .container>.content { padding: 30px 0;}
    #contact .container>.content>.rows>.txt {font-size: 2rem;}

    #contact .container>.map{height: 300px;}
    #contact .container>.map>.locate {left: 40.7%;top: 36.4%;}
    #contact .container>.map>img{width: auto;height: 100%; object-fit: cover; }



}