@charset "utf-8";

#contact{margin: 0 auto; position: relative;z-index: 90;}
#contact .wrap{margin: 0 auto;max-width: 1460px;padding: 100px 0 350px 0; }


#contact .layout{ position: relative; margin: 0 auto; overflow: hidden;}
#contact .layout>.content{ width: 28%; box-sizing: border-box;padding: 50px 0;}
#contact .layout>.content>.title{ font-size: 4rem;font-weight: normal; color: #333; padding-bottom: 30px;}
#contact .layout>.content>.box{ text-align: left; }
#contact .layout>.content>.box>.rows{display: block; text-align: left; padding: 20px 0; border-bottom: 1px solid #eee;}
#contact .layout>.content>.box>.rows:last-child{border-bottom: 0;}
#contact .layout>.content>.box>.rows>.ico{ color: #12479b; background: #eee; border-radius: 100%; width: 62px;height: 62px; line-height: 62px; text-align: center; float: left;}
#contact .layout>.content>.box>.rows>.ico>i{ font-size: 3rem;}
#contact .layout>.content>.box>.rows>.txt{ float: left; width: calc(100% - 62px); box-sizing: border-box; padding-left: 15px;}
#contact .layout>.content>.box>.rows>.txt>h3{ display: block; font-size: 1.8rem; font-weight: 400; color: #222;}
#contact .layout>.content>.box>.rows>.txt>p{ display: block; font-size: 1.7rem; color: #666;}
#contact .layout>.content>.box>.rows>.txt>a{ display: block; font-size: 1.7rem; color: #666;}
#contact .layout>.content>.navigation{text-align: left; padding-top: 40px;}
#contact .layout>.content>.navigation>a{display: inline-flex; align-items: center;align-content: center; border: 2px solid rgba(229,1,18,.3); color: #e50112; font-size: 1.6rem; border-radius: 50px; padding: 10px 30px; transition: all .35s;}
#contact .layout>.content>.navigation>a>span{display: inline-block;vertical-align: middle; margin-right: 5px;}
#contact .layout>.content>.navigation>a>i{display: inline-block;vertical-align: middle; font-size: 1.8rem; font-weight: bold; }
#contact .layout>.content>.navigation>a:hover{background: #e50112; color: #fff;}
#contact .layout>.map{position: relative; width: 65%; overflow: hidden;}
#contact .layout>.map>.locate{position: absolute;z-index: 10; left: 38.2%;top: 46.6%; animation:ani_opacity 1.2s ease-out 0.4s both;}
#contact .layout>.map>.locate>a{display: inline-block; position: relative; z-index: 50;}
#contact .layout>.map>.locate>a:after{ position: absolute;z-index: 12; left: 50px; top: 50%; transform: translateY(-50%); background: #2554a9; text-align: center; font-family: iconfont; font-size: 1.4rem; content: '\e632'attr(data-tit); width: 150px; height: 40px; line-height: 40px; color: #fff; border-radius: 30px;}
#contact .layout>.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: 100%; transform: scale(0); opacity:0; will-change: transform, opacity;}
#contact .layout>.map>.locate:before {background:rgba(18,71,155,.5);animation: scaled-rect 1.5s infinite; animation-timing-function: ease-in-out;}
#contact .layout>.map>.locate:before {animation: out-circle 2s infinite;animation-timing-function: ease-in;}
#contact .layout>.map>img{width: auto;height: 100%; overflow: hidden; object-fit: cover; border-radius: 20px;}


@-webkit-keyframes ani_opacity {
    0% {opacity: 0; }
    100% { 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: 1380px){

    #contact .wrap{padding: 100px 0 300px 0; }

    #contact .layout>.content>.box>.rows>.txt>h3{ font-size: 1.7rem;}
    #contact .layout>.content>.box>.rows>.txt>p{ font-size: 1.7rem;}
    #contact .layout>.content>.box>.rows>.txt>a{ font-size: 1.7rem;}

}


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

    #contact .wrap{padding: 100px 0 200px 0; }

    #contact .layout>.content{ width: 28%;padding: 20px 0;}
    #contact .layout>.content>.title{ font-size: 3.6rem;}
    #contact .layout>.map>.locate>a>img{height: 36px; width: 36px;}
    #contact .layout>.map>.locate>a:after{ left: 40px; font-size: 1.3rem; width: 80px; height: 30px; line-height: 30px;}

}

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


    #contact .layout>.content>.box>.rows>.txt>h3{ font-size: 1.6rem;}
    #contact .layout>.content>.box>.rows>.txt>p{ font-size: 1.6rem;}
    #contact .layout>.content>.box>.rows>.txt>a{ font-size: 1.6rem;}

    #contact .layout>.content>.navigation>a{font-size: 1.4rem;padding:8px 20px;}
    #contact .layout>.content>.navigation>a>i{ font-size: 1.6rem; }

}


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

    #contact .layout>.content{ width: 100%; float: none;}
    #contact .layout>.map{width: 100%; float: none;}
}


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


    #contact .layout>.content>.title{ font-size: 3rem;}

    #contact .layout>.content>.box>.rows>.txt>h3{ font-size: 1.6rem;}
    #contact .layout>.content>.box>.rows>.txt>p{ font-size: 1.6rem;}
    #contact .layout>.content>.box>.rows>.txt>a{ font-size: 1.6rem;}


}


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

    #contact .wrap{padding: 30px 0 100px 0; }

    #contact .layout>.content>.title{ font-size: 2.4rem;}
    #contact .layout>.content>.box>.rows>.ico { width: 50px;  height: 50px; line-height: 50px;}
    #contact .layout>.content>.box>.rows>.txt{ width: calc(100% - 50px);}

    #contact .layout>.content>.navigation>a{font-size: 1.2rem;}
    #contact .layout>.content>.navigation>a>i{ font-size: 1.4rem; }

    #contact .layout>.map>.locate>a>img{height: 26px; width: 26px;}
    #contact .layout>.map>.locate>a:after{ left: 30px; font-size: 1.2rem; width: 60px; height: 20px; line-height: 20px;}





}