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

#contact{margin: 0 auto; padding-top: 100px;}
#contact>.title{font-size: 3rem; font-weight: bold; color: #333;}
#contact>.content{width: 100%;box-sizing: border-box; padding: 50px 0;}
#contact>.content .rows{ display: block; text-align: center; float: left; width: 31.33%; background: #e7f2ff; padding: 50px; box-sizing: border-box; margin-right: 3%; margin-bottom:3%; transition: all .35s;}
#contact>.content .rows:nth-child(3n){ margin-right: 0}
#contact>.content .rows img{display: block; height: 60px; width: auto; margin: 0 auto; background: #0079c3; border-radius: 100%;padding: 15px;}
#contact>.content .rows strong{ display: block; font-size: 1.5rem; margin: 5px auto; color: #0079c3;}
#contact>.content .rows span{ display:block; font-size: 1.6rem; color: #666;}
#contact>.content .rows a{display: inline-block; font-size: 1.6rem; color: #666;}
#contact>.content .rows a:hover{ text-decoration: underline;}
#contact>.content .rows:hover{background: #fff;box-shadow: 0 0 16px rgba(0,0,0,.1);}

#contact>.map{position: relative; margin: 0 auto; overflow: hidden;}
#contact>.map>.locate{position: absolute;z-index: 10; left: 50%;top: 38%;}
#contact>.map>.locate>a{display: inline-block; position: relative; z-index: 50;}
#contact>.map>.locate>a:after{ position: absolute;z-index: 12; right: -260px;top: -20px; width: 250px; box-sizing: border-box; padding: 15px 25px; background: #fff; box-shadow: 0 5px 12px rgba(0,0,0,.1); font-size: 1.4rem; color: #333; content: attr(data-title);}
#contact>.map>img{width: 100%;height: auto; border-radius: 8px;overflow: hidden; }