@charset "utf-8";

#contact{margin: 0 auto; padding: 100px 0;}
#contact .title{text-align: center; margin: 0 auto;}
#contact .title>h3{font-size: 5rem; color: #333;}
#contact .title>h4{font-size: 2rem; font-weight: normal; color: #999; text-transform: uppercase;}
#contact>.preface{margin: 0 auto;}
#contact>.preface .container{background: #eee;margin: 50px auto;}
#contact>.preface .container>.img{width: 50%;text-align: left;}
#contact>.preface .container>.img>img{width: 100%;height: auto;}
#contact>.preface .container>.box{ width: 50%; box-sizing: border-box;padding: 60px;text-align: left;}
#contact>.preface .container>.box>.tit{ position: relative; padding-bottom: 10px; font-size: 2.4rem; color: #014081;font-weight: bold;}
#contact>.preface .container>.box>.tit:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 40px;height: 2px;background: #014081; content: '';}
#contact>.preface .container>.box>.txt{font-size: 1.4rem;line-height: 2.4rem; color: #666; padding: 20px 0;}

#contact>.info{margin: 0 auto; padding: 20px 0;}
#contact>.info>.item{display: block; float: left;width: 22.75%; height: 230px; background: #eee; text-align: center; margin-bottom:3%;margin-right: 3%; box-sizing: border-box;padding:50px 10px;}
#contact>.info>.item:nth-child(4n){margin-right: 0;}
#contact>.info>.item .ico{ margin-bottom: 20px;}
#contact>.info>.item .ico>img{width: 56px;height: auto;}
#contact>.info>.item .tit{font-size: 1.6rem; font-weight: bold; color: #333;}
#contact>.info>.item .txt{ padding-top: 6px; font-size: 1.4rem; line-height: 2.4rem; color: #999;}

#contact>.map{margin: 50px auto;}
#contact>.map #myMap{ margin: 50px 0; height: 600px;}


#myMap{ position:relative; width:100%;height:600px;margin:0 auto; background:#fff;}
#myMap .info {padding:18px 20px; background:#014081; border: 0;}
#myMap div.info-top {position: relative; background: none repeat scroll 0 0; border-bottom: 2px solid rgba(255,255,255,.5);}
#myMap div.info-top div { display: inline-block; color: #fff; font-size: 16px; font-weight: bold; padding:5px 0 10px 0;}
#myMap div.info-top img { position: absolute; top: 0; right: 0; transition-duration: 0.35s;}
#myMap div.info-top img:hover { box-shadow: 0 0 5px #fff;}
#myMap div.info-middle { background:none!important; font-size: 13px; padding:10px 0; line-height: 20px; color:#fff;}
#myMap div.info-bottom { height: 0; width: 100%; clear: both; text-align: center;}
#myMap div.info-bottom img {  position: relative;  z-index: 104; margin-top:18px;}
#myMap span {margin-left: 5px;font-size: 11px;}



@media (max-width:1280px){


    #contact .title>h3{font-size: 3.6rem;}
    #contact>.map #myMap{ height: 500px;}

}

@media (max-width:1200px){

    #contact>.preface .container>.img{width: 100%;float: none;}
    #contact>.preface .container>.box{width: 100%;float: none;}

    #contact>.info>.item{width: 48.5%; margin-right: 0;}
    #contact>.info>.item:nth-child(4n){margin-right: 0;}
    #contact>.info>.item:nth-child(even){float: right;}

}

@media (max-width:640px){

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

    #contact>.preface .container>.box{padding: 30px;}
    #contact>.preface .container>.box>.tit{font-size: 2rem;}

    #contact>.info>.item{width: 100%; float: none;}
    #contact>.info>.item:nth-child(even){float: none;}

    #contact>.map #myMap{ height: 300px;}


}