/*===================main========================*/
main{ position: relative; background: #fff;width: 100%;overflow: hidden;}
.inner{margin: 0 auto;}

/*=================================================联系我们*/ 
/*HQ*/
.HQ{margin-top: 30px;} 
.HQ_area{ padding:4.5% 4%; background: url(../images/contact_01.jpg) center top no-repeat; background-size:cover; color:#fff;}
.HQ_img{ float:left; width:29%; max-width: 420px; overflow: hidden;}
.HQ_img img{ display:block;max-width: 100%;}
.HQ_info{ float:left; width: 35%; margin:0 3%; padding: 0 3%; border-left:1px solid rgba(255,255,255,.20); border-right:1px solid rgba(255,255,255,.20);}
.HQ_info h6,
/* .HQ_list{ padding-left: 20px;} */
.HQ_info h6{ margin-bottom:30px;color: #fff;}
.HQ_list{ }
.HQ_list li{ line-height: 1.8; margin-bottom: 20px;color: #fff;}
.HQ_list li em{ display:block; float: left; margin-left: -20px; padding-left:20px; background: url(../images/ico_31.png) left center no-repeat;font-style: normal;}
.HQ_list li span{ display:block; overflow: hidden;font-size: 16px;}
.HQ_part{ overflow: hidden;}
.HQ_part h6{color: #fff;margin-bottom: 30px;}
.HQ_part li{ line-height: 1.8; margin-bottom:20px;color: #fff;}
.HQ_part li em{ display:block; float: left;font-style: normal;}
.HQ_part li span{ display:block; overflow: hidden;font-size: 16px;}
.HQ_part li span i{ display:block;font-style: normal;}
/*spread_map*/
.spread_map{ padding:5% 0;}
.spread_map .title02{ margin-bottom:-2%;}
.map_box{ text-align:center;}
.map_box #map{
    width: 100%;
    height: 500px;
}
/*spread_city*/
.spread_city{ padding: 5% 0; background: url(../images/contact_04.jpg) center center no-repeat; background-size:cover; background-attachment: fixed; }
.spread_city{ overflow: hidden; margin: 0 -25px;}
.spread_city li.li_item0{ width:33.33%; float:left; padding: 25px;}
.spread_city li.li_item0 a{ display:block; background: #fff; border:1px solid #d4d5d5; height: 240px; padding: 0 5%; color: #666;}
.spread_city li.li_item0 a h6{ padding: 20px 0; border-bottom: 1px solid #eaeaea; margin-bottom: 20px; color: #333;margin-top: 20px;}
.spread_city li.li_item0 a h6 em{ color:#c2c2c2;}
.city_info{}
.city_info p{ overflow:hidden; line-height: 25px; margin-bottom: 10px; padding-left: 35px; background-position: left top; background-repeat:no-repeat; background-size:25px;}  
.city_info p{background-image: url(../images/contact_ico01.png);}
/* .city_info li.li_tel{ background-image: url(../images/contact_ico02.png);} */
.spread_city li.li_item0 a:hover{ background: #d70917; color: #fff; box-shadow: 0 0 20px -2px rgba(0,0,0,.30);}
.spread_city li.li_item0 a:hover h6,
.spread_city li.li_item0 a:hover h6 em{ color:#fff;}
.spread_city li.li_item0 a:hover .city_info p{ background-image: url(../images/contact_ico01b.png);color: #fff;}
/* .spread_city li.li_item0 a:hover .city_info li.li_tel{ background-image: url(../images/contact_ico02b.png);color: #fff;} */


/*font*/ 
.f26{ font-size: 26px;}
.f24{ font-size: 24px;} 
.f16{ font-size: 16px;}


@media screen and (max-width: 768px){
    .HQ_img{
        width: 100%;
        margin-bottom: 10px;
    }
    .HQ_info{
        width: 100%;
        border-right: 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.20);
        border-bottom: 1px solid rgba(255,255,255,.20);
        padding: 0;
        margin: 10px 0;
    }
    .HQ_info h6, .HQ_info h6{
        margin: 10px 0;
        font-size: 20px;
    }
    .HQ_list li{
        margin-bottom: 5px;
    }
    .HQ_list li em{
        font-size: 14px;
    }
    .HQ_list li span{
        font-size: 14px;
    }
    .HQ_part{
        width: 100%;
    }
    .HQ_part h6{
        margin: 0 0 10px 0;
        font-size: 20px;
    }
    .HQ_part li{
        margin-bottom: 5px;
    }
    .HQ_part li em{
        font-size: 14px;
    }
    .HQ_part li span{
        font-size: 14px;
    }
    .map_box #map{
        height: 300px;
    }
    .spread_city li.li_item0{
        width: 100%;
    }
    .spread_city li.li_item0 a h6{
        font-size: 20px;
    }
}