@charset "utf-8";
/* CSS Document */

#contact{margin:0 auto;}
#contact>.wrap{ position:relative; width:86%; max-width:1300px; margin:120px auto;background:#fff;overflow:hidden;}
#contact .hotline{ position:absolute;z-index:12;left:0;top:0; min-width:400px; width:36%; height:100%; padding:50px; box-sizing:border-box; text-align:left; background:#999 url("../img/contact_hotline_bg.jpg") no-repeat; background-position:right bottom; background-size:auto 100%;}
#contact .hotline>img{height:60px; width:auto;margin-bottom:6px;opacity:.9;}
#contact .hotline>h3{font-size:16px; color:#fff;opacity:.9;}
#contact .hotline>h2{ display:block;padding-top:20px; font-size:36px; color:#fff;}
#contact .content{ width:100%;padding:50px 100px 50px 50%; text-align:left; box-sizing:border-box;}
#contact .content>h1{display: block; font-weight:normal; margin-bottom: 15px;}
#contact .content>p{display:block;font-size:16px; color:#666; padding: 6px 0;}
#contact .qrcode{position:absolute;z-index:4; right:0;bottom:0;}
#contact .qrcode>.min{ position:absolute;z-index:1; right:0;bottom:0; width:40px;height:40px; line-height:40px; box-sizing:border-box; border:1px solid #eee; border-bottom:0 !important; border-right:0 !important; text-align:center;cursor:pointer; transition:all .3s;}
#contact .qrcode>.min>img{ width:24px;height:auto;opacity:.3;}
#contact .qrcode>.min:hover img{opacity:.8;}

#contact .qrcode>.max{position:absolute;z-index:4; right:0;bottom:0;width:100px;height:100px; line-height:100px; background:#fff; box-sizing:border-box; border:1px solid #eee; border-bottom:0 !important; border-right:0 !important; text-align:center;cursor:pointer;opacity:0; transition:all .5s;}
#contact .qrcode>.max>img{ width:160px;height:auto;}
#contact .qrcode:hover .min{opacity:0;}
#contact .qrcode:hover .max{ width:180px; height:180px; line-height:180px; opacity:1;}

#contact>.map{ width:100%;height:600px;margin:0 auto; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15);}
#contact>.map .BMap_bubble_title{ font-size:16px; font-weight:bold; color:#333;}
#contact>.map .BMap_bubble_content{ font-size:14px; color:#333; line-height:24px;}
#contact>.map .BMap_bubble_content .url{ display:inline-block; margin-top:6px; font-size:14px;color:#14c6f2;padding-left:30px; box-sizing:border-box; background:url("../img/icon_navigation.png") no-repeat; background-position:0 0; background-size:auto 100%;}


@media only screen and (max-width: 1080px){
  #contact .hotline{ float:none; position:relative; min-width:initial; width:100%; height:auto; padding:50px;}
  #contact .content{ float:none; padding:50px;}

}

@media only screen and (max-width: 640px){
  #contact>.wrap{ margin:60px auto;}
}

@media only screen and (max-width: 450px){
  #contact .hotline>h2{ font-size:30px;}
  #contact .content{ padding:30px;}
  #contact .content>p{font-size:14px;padding:8px 0;}

}