@charset "utf-8";

#banner{width: 100%; height: 300px; position: relative; z-index: 1; background: #eff0f2 url('../img/b-contact.jpg') no-repeat center/cover;}


#contact{padding: 20px 0 130px 0; min-height: 320px; background: url('../img/contact-map.jpg') no-repeat right bottom/50%;}
#contact .wrap>.path{padding-bottom: 60px;}
#contact .wrap>.path a{font-size: 1.4rem; position: relative; transition: all .3s; color: #aaa;}
#contact .wrap>.path i{color: #aaa; font-size: 1.2rem;}
#contact .wrap>.path a:hover{color: #464646;}
#contact .wrap>.path a::after{content: ''; display: block; width: 0; height: 1px; background: #464646; left: 0; bottom: -1px; position: absolute; transition: all .3s;}
#contact .wrap>.path a:hover::after{width: 100%; background: #464646;}
#contact .wrap>.tit{color: #2b2b2b; font-size: 4rem; font-weight: 300; margin-bottom: 30px;}
#contact .wrap>.desc{font-size: 1.6rem; font-weight: 300; border-bottom: 1px solid #e3e5e7; padding-bottom: 45px;}

#contact .net-icos{display: flex; margin-top: 50px; border-bottom: 1px solid #e3e5e7; padding-bottom: 50px;}
#contact .net-icos a{display: block; margin-right: 30px;}
#contact .net-icos a>div{display: inline-block; vertical-align: middle; margin-right: 3px;}
#contact .net-icos a>div>i{font-size: 2.8rem;}
#contact .net-icos a>span{display: inline-block; vertical-align: middle; font-size: 1.6rem;}
#contact .net-icos a:hover>span{text-decoration: underline;}


#contact .list{margin-top: 50px;}
#contact .list .item{margin-bottom: 50px;}
#contact .list .item .tit{font-size: 2rem; font-weight: 700; margin-bottom: 15px;}
#contact .list .item .tit>i{font-size: 1.8rem; font-weight: normal; display: inline-block; margin-left: 5px;}
#contact .list .item .con{line-height: 1.5; font-size: 1.6rem; font-weight: 300;}
#contact .list .item .con p{margin-bottom: 13px;}
#contact .list .item .con a{text-decoration: underline;}
#contact .list .item .con a:hover{text-decoration: none; color: #30a239;}

@media (max-width:1440px){
  #contact .wrap>.tit{font-size: 3.8rem;}

  #contact .net-icos{margin-top: 45px; padding-bottom: 45px;}

  #contact .list .item .tit{font-size: 1.8rem;}
  #contact .list .item .tit>i{font-size: 1.6rem;}
  #contact .list .item .con{font-size: 1.5rem;}
  #contact .list .item .con p{margin-bottom: 13px;}
}
@media (max-width:1366px){
  #contact .wrap>.path a{font-size: 1.3rem;}
  #contact .wrap>.path i{font-size: 1.2rem; transform: scale(.88); display: inline-block;}

  #contact .wrap>.tit{font-size: 3.5rem;}
  #contact .wrap>.desc{font-size: 1.5rem;}

  #contact .net-icos{margin-top: 40px; padding-bottom: 40px;}
  #contact .net-icos a>span{font-size: 1.5rem;}

  #contact .list .item .tit{font-size: 1.7rem;}
  #contact .list .item .tit>i{font-size: 1.5rem;}
  #contact .list .item .con{font-size: 1.4rem;}
  #contact .list .item .con p{margin-bottom: 12px;}
}
@media (max-width:1000px){
  #banner{height: 180px;}

  #contact{padding: 20px 15px 100px 15px; min-height: unset;}
  #contact .wrap>.path{padding-bottom: 40px;}
  #contact .wrap>.tit{font-size: 2.8rem; margin-bottom: 20px; line-height: 1.16;}
  #contact .wrap>.desc{font-size: 1.5rem; padding-bottom: 30px; line-height: 1.26;}

  #contact .net-icos{margin-top: 30px; padding-bottom: 30px; justify-content: space-between;}
  #contact .net-icos a{margin-right: 0;}
  #contact .net-icos a>div{margin-right: 0;}
  #contact .net-icos a>div>i{font-size: 2.3rem;}
  #contact .net-icos a>span{font-size: 1.3rem; margin-top: 0;}

  #contact .list{margin-top: 45px;}
  #contact .list .item{margin-bottom: 45px;}
  #contact .list .item .tit{font-size: 1.8rem;}
  #contact .list .item .con{line-height: 1.5; font-size: 1.4rem;}
}