@charset "utf-8";





#contact{margin: 0 auto;}
#contact .headquarters{margin: 100px auto;}
#contact .headquarters .layout{ position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 auto;padding: 50px; box-sizing: border-box; background: #f2f8ff; border-radius: 6px;}
#contact .headquarters .layout>.logo{ display: inline-block; width: 240px; margin-right: 4%; padding: 20px 0; text-align: left; border-right: 1px solid rgba(0,0,0,.1);}
#contact .headquarters .layout>.info{ display: inline-block; flex: 1;}
#contact .headquarters .layout>.info>.rows{display: inline-flex; align-content: center; align-items: center; float: left; margin: 10px 50px 10px 0;}
#contact .headquarters .layout>.info>.rows:first-child{display: flex; float: none; width: 100%; margin-right: 0;}
#contact .headquarters .layout>.info>.rows>i{ display: inline-block; font-size: 2.8rem; color: #999;}
#contact .headquarters .layout>.info>.rows>span, #contact .headquarters .layout>.info>.rows>a{display: inline-block; font-size: 1.8rem; color: #333; margin-left: 10px; transition: all .35s;}
#contact .headquarters .layout>.info>.rows>a:hover{text-decoration: underline;}
#contact .headquarters .layout>.qrcode{ position: absolute; right: 50px;top: 50%; transform: translateY(-50%); display: inline-block; width: 120px;}
#contact .headquarters .layout>.qrcode>img{width: 100%;height: auto;}


#contact .branches{margin: 0 auto; background: #f7f7f7; padding: 100px 0 50px 0;}
#contact .branches .theme{margin: 0 auto; text-align: left;}
#contact .branches .theme>h3{ position: relative; display: inline-block; font-size: 4.2rem; font-weight: bold; color: #333; padding: 15px 0;}
#contact .branches .theme>h3:after{position: absolute;z-index: 1;left: 0;bottom: 0; transform: translateX(0); width: 40px;height: 2px;background:#0758ab; content: '';}
#contact .branches .container{margin: 0 auto; padding: 80px 0;}
#contact .branches .container>.lists{margin: 0 auto;}
#contact .branches .container>.lists>ul>li{display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; background: #fff; border-radius: 3px; box-sizing: border-box;padding: 50px;text-align: left; transition: all .35s;}
#contact .branches .container>.lists>ul>li:nth-child(3n){margin-right: 0;}
#contact .branches .container>.lists>ul>li>.title{ position: relative; font-size: 2.4rem; color: #333; padding-bottom: 10px;}
#contact .branches .container>.lists>ul>li>.title:after{position: absolute;z-index: 1;left: 0;bottom: 0;width: 32px;height: 2px;background:#0758ab; content: '';}
#contact .branches .container>.lists>ul>li>.box{padding-top: 20px; height: 120px;}
#contact .branches .container>.lists>ul>li>.box>.rows{display:flex;align-items: center;align-content: center; padding: 5px 0;}
#contact .branches .container>.lists>ul>li>.box>.rows>strong{display: inline-block; font-size: 1.6rem; color: #444; margin-right: 10px;}
#contact .branches .container>.lists>ul>li>.box>.rows>span{display: inline-block; font-size: 1.6rem; color: #999;}
#contact .branches .container>.lists>ul>li:hover{box-shadow: 0 6px 16px rgba(0,0,0,.062);}




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

    #contact .headquarters .layout>.logo{ width: 200px; float: left;}
    #contact .headquarters .layout>.info>.rows{ margin: 10px 30px 10px 0;}
    #contact .headquarters .layout>.info>.rows>span, #contact .headquarters .layout>.info>.rows>a{font-size: 1.6rem;}


    #contact .branches .theme>h3{ font-size: 3.6rem;}
    #contact .branches .container>.lists>ul>li{width: 48.5%; margin-right: 0;}
    #contact .branches .container>.lists>ul>li:nth-child(even){float: right;}





}

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

    #contact .headquarters .layout{display: block;}
    #contact .headquarters .layout>.logo{ display: block; width: 180px;}
    #contact .headquarters .layout>.info{display: block; width: 100%; margin-top: 20px;}
    #contact .headquarters .layout>.info>.rows>i{ font-size: 2rem;}
    #contact .headquarters .layout>.qrcode{position: relative; right: auto; left: 0; top: auto; transform: translateY(0); width: 70px;}


    #contact .branches{ padding: 80px 0 50px 0;}
    #contact .branches .theme>h3{ font-size: 3.2rem;}
    #contact .branches .container{ padding: 50px 0;}

}

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

    #contact .branches .container>.lists>ul>li{width: 100%; float: none;}
    #contact .branches .container>.lists>ul>li:nth-child(even){float: none;}

}

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

    #contact .headquarters .layout>.info>.rows{align-items: flex-start;}

}

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

    #contact .headquarters{margin: 50px auto;}
    #contact .headquarters .layout>.logo{ width: 120px; padding-right: 20px;}
    #contact .headquarters .layout>.info>.rows>span, #contact .headquarters .layout>.info>.rows>a{font-size: 1.4rem;}

    #contact .branches .theme>h3{ font-size: 2.4rem; }
    #contact .branches .container>.lists>ul>li{padding: 35px; margin-bottom: 20px;}
    #contact .branches .container>.lists>ul>li>.title{ font-size: 2rem;}




}