@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#contact{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto;}
#contact .wrap{ width: 86%; max-width: 1420px;margin: 0 auto;}


#contact .headquarters{margin: 0 auto; padding: 100px 0;}
#contact .headquarters>.title{ position: relative; text-align: left;padding: 0 50px; }
#contact .headquarters>.title:after{position: absolute;z-index: 3;left: 0;top: 15px;width: 40px;height: 3px;background: rgba(38,87,161,1);content: '';}
#contact .headquarters>.title>h2{font-size: 36px; color: #333;}
#contact .headquarters>.title>h3{font-size: 18px; color: #333; text-transform: uppercase;}
#contact .headquarters>.container{margin: 30px auto;}
#contact .headquarters>.container>ul{margin: 0 auto;}
#contact .headquarters>.container>ul>li{ width: 25%; min-height: 340px; float: left; border-right: 1px solid #fff; box-sizing: border-box;padding: 50px 0; text-align: center; background: #d4e6f1;}
#contact .headquarters>.container>ul>li:last-of-type{border: 0;}
#contact .headquarters>.container>ul>li>.ico{display: block; margin: 0 auto;padding: 20px; transition: all .35s;}
#contact .headquarters>.container>ul>li>.ico>i{display: block;font-size: 56px; color: #666;}
#contact .headquarters>.container>ul>li>.con{text-align: center;padding: 20px;}
#contact .headquarters>.container>ul>li>.con>p{font-size: 16px; color: #666;padding: 5px 0;}
#contact .headquarters>.container>ul>li>.con .bright{font-size: 20px; color: rgba(38,87,161,1);font-weight: bold;}
#contact .headquarters>.container>ul>li>.con p.address{font-size: 18px;}
#contact .headquarters>.container>ul>li:hover .ico{transform:translateY(-8px);}

#contact .area{ position: relative;  background: rgba(255,255,255,1) url("../img/contact_area_bg.png") no-repeat; background-position: 96% 200px; background-size: auto 100%;overflow: hidden; padding: 100px 0;}
#contact .area>.hot{ text-align: left;}
#contact .area>.hot>.tit{font-size: 24px; font-weight: bold; color:rgba(38,87,161,1);}
#contact .area>.hot>.tit>i{font-size: 40px; float: left; margin-right: 10px;}
#contact .area>.hot>.txt{font-size: 24px; color:rgba(38,87,161,1);}

#contact .area>.container{margin: 0 auto; padding: 50px 10px 30px 10px;}
#contact .area>.container>ul{ margin: 0 auto;}
#contact .area>.container>ul>li{display: block;float: left; width: 22.75%; box-sizing: border-box; margin: 0 3% 3% 0;padding: 30px; background: rgba(255,255,255,.6); border: 1px solid #ddd; transition: all .35s; }
#contact .area>.container>ul>li:nth-child(4n){margin-right: 0;}
#contact .area>.container>ul>li>.tit{ position: relative; padding-bottom: 5px; font-size: 20px; color:#666;transition: all .35s; }
#contact .area>.container>ul>li>.tit:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 30px;height: 1px;background: rgba(38,87,191,1); content: ''; }
#contact .area>.container>ul>li>.txt{padding: 10px 0; font-size: 30px; color: #333;}
#contact .area>.container>ul>li:hover{ box-shadow:2px 3px 8px rgba(0,0,0,.1); background: rgba(255,255,255,1); transform:translateY(-8px)}
#contact .area>.container>ul>li:hover .tit{color: rgba(38,87,161,1);}

#myMap{ position:relative; width:100%; height: 700px; margin:0 auto; background:#fff;}
#myMap .BMap_bubble_title{ font-size:16px; font-weight:bold; color:#333;}
#myMap .BMap_bubble_content{ font-size:14px; color:#333; line-height:24px;}
#myMap .BMap_bubble_content .url{ display:inline-block; margin-top:6px; font-size:14px;color:rgba(38,87,191,1);padding-left:30px; box-sizing:border-box; background:url("../img/ico_navigation.png") no-repeat; background-position:0 0; background-size:auto 100%;}
#myMap .BMap_Marker>div{z-index:90 !important;}





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

    #contact .area>.container>ul>li{width: 31.33%; }
    #contact .area>.container>ul>li:nth-child(4n){margin-right: 3%;}
    #contact .area>.container>ul>li:nth-child(3n){margin-right: 0;}



}

@media only screen and (max-width: 1280px){
    #contact .headquarters>.container>ul>li{ min-height: 280px; padding: 30px 0;}

    #contact .headquarters>.container>ul>li>.con .bright{font-size: 16px;}
    #contact .headquarters>.container>ul>li>.con>p{font-size: 14px;}
    #contact .headquarters>.container>ul>li>.con p.address{font-size: 16px;}

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

    #contact .headquarters>.container>ul>li{ width: 50%; min-height: 320px; border-bottom: 1px solid #fff;}
    #contact .area>.container>ul>li>.txt{font-size: 22px;}


}

@media only screen and (max-width: 840px){
    #contact .headquarters{padding: 50px 0;}
    #contact .headquarters>.container>ul>li{ min-height: 260px;}

    #contact .area{padding: 50px 0;}
    #contact .area>.container>ul>li{width: 48.5%; margin-right: 0;}
    #contact .area>.container>ul>li:nth-child(4n){margin-right: 0;}
    #contact .area>.container>ul>li:nth-child(3n){margin-right: 0;}
    #contact .area>.container>ul>li:nth-child(even){float:right;}
}

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

    #contact .headquarters>.title>h2 { font-size: 32px; }
    #contact .headquarters>.container>ul>li{ float: none; width: 100%; min-height: auto; padding: 10px 0;}

}
@media only screen and (max-width: 540px){
    #contact .headquarters>.title>h2 { font-size: 26px; }
    #contact .headquarters>.title>h3{font-size: 14px;}
    #contact .area>.container>ul>li{float: none!important; width: 100%; margin-bottom: 3%;}

    #contact .area>.hot>.tit{font-size: 16px; }
    #contact .area>.hot>.tit>i{font-size: 36px;}
    #contact .area>.hot>.txt{font-size: 14px; }


}


@media only screen and (max-width: 480px){
    #contact .headquarters>.title>h2 { font-size: 24px; }

}


@media only screen and (max-width: 440px){
    #contact .headquarters>.title>h2 { font-size: 18px; }

}