@charset "utf-8";

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

#contact .theme{ margin: 0 auto;}
#contact .theme>.title{display: block; text-align: left; margin: 0 auto;}
#contact .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#contact .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#contact .container{margin: 0 auto; padding: 50px 0;}
#contact .container>.layout{margin: 0 auto; position: relative;}
#contact .container>.layout>.content{ width: 45%;text-align: left;}
#contact .container>.layout>.content>.rows{display: flex; align-items: center; align-content: center; justify-content: flex-start; padding: 28px 0; border-bottom: 1px solid #eee;}
#contact .container>.layout>.content>.rows>a{display: inline-block;}
#contact .container>.layout>.content>.rows i{display: inline-block; width: 36px;height: 36px; line-height: 36px; text-align: center; background: #cc151e; border-radius: 100%; color: #fff;}
#contact .container>.layout>.content>.rows span{display: inline-block; flex: 1; margin-left: 20px; font-size: 1.6rem; line-height: 1.8rem; color: #333; font-weight: bold;}
#contact .container>.layout>.map{ width: 46%; position: absolute;z-index: 12; right: 0;top: 0; background: #fff;  height: 100%; box-sizing: border-box; overflow: hidden; box-shadow: 0 0 57px 0 rgba(0, 10, 18, 0.1);padding: 12px;}
#contact .container>.layout>.map>a{display: flex; align-content: center; align-items: center; width: 100%;height: 100%; text-align: center;overflow: hidden;}
#contact .container>.layout>.map>a img{ display: inline-block; width: auto; height: 100%; object-fit: cover; transform: scale(1.2);}




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

    #contact .container>.layout>.content>.rows{padding: 24px 0;}

}

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

    #contact .theme>.title>h3 {font-size: 2.8rem;}

    #contact .container>.layout>.content{ width: 100%;float: none; margin-bottom: 50px;}
    #contact .container>.layout>.content>.rows:last-child{border-bottom: 0;}
    #contact .container>.layout>.map{ width: 100%; height: 350px; float: none; position: relative;}
    #contact .container>.layout>.map>a img{ width: 100%;height: auto; }

}





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

    #contact .theme>.title>h3 { font-size: 2.4rem;}

    #contact .container>.layout>.content{ margin-bottom: 30px;}
    #contact .container>.layout>.content>.rows{padding: 20px 0; }
    #contact .container>.layout>.content>.rows span{font-size: 1.4rem; line-height: 1.6rem;}


}



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

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

    #contact .theme>.title>h3 { font-size: 2rem;}

    #contact .container{padding: 30px 0;}
    #contact .container>.layout>.content>.rows{padding: 15px 0;}
    #contact .container>.layout>.map{ height: 220px;}
    #contact .container>.layout>.map>a img{ width: auto;height: 100%;transform: scale(2.4) }


}


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

    #contact .statistics .layout>.rows {  padding: 20px 0;}
    #contact .statistics .layout>.rows>.ico>img { height: 32px;}
    #contact .statistics .layout>.rows>.num { padding: 10px 0; font-size: 3.2rem;}

}