#title{width:100%;height:400px;background:url("../img/upload/img/title1.jpg") center no-repeat;background-size:cover;position:relative;}
#title.arround{background-image:url("../img/upload/img/title2.jpg")}
#title.room{background-image:url("../img/upload/img/title3.jpg")}
#title.reservation{background-image:url("../img/upload/img/title4.jpg")}
#title.comunity{background-image:url("../img/upload/img/title5.jpg")}

#title h2{text-align:center;color:#fff;font-size:35px;letter-spacing:1px;position:absolute;top:55%;width:100%;font-weight:bold}
#title ul{position:absolute;overflow:hidden;top:78%;width:100%;text-align:center;}
#title ul li{margin:0 5px;display:inline-block}
#title ul li a{display:block;font-size:15px;color:#fff;background-color:#aaa;line-height:45px;padding:0 30px;min-width:60px;text-align:center;transition:color ease .3s,background ease .3s}
#title ul li a:hover,
#title ul li.on a{background-color:#222}

/* Àλ縻 */
.about.first+.mid img{display:block;width:100%}

/* ¿À½Ã´Â ±æ */
.about.second+#container .mid{overflow:hidden}
.about.second+#container .mid>div{float:left;width:48%;box-sizing:border-box;}
.about.second+#container .mid>div.maps{margin-right:4%}
.about.second+#container .mid>div.about_info{height:450px;padding:50px;border:1px solid #ccc}
.about.second+#container .mid>div.about_info>div{margin-bottom:55px}
.about.second+#container .mid>div.about_info h3{font-size:14px;color:#333;font-weight:normal;margin-bottom:10px}
.about.second+#container .mid>div.about_info p,
.about.second+#container .mid>div.about_info a{color:#999;line-height:20px}
.about.second+#container .mid>div.about_info ul{overflow:hidden}
.about.second+#container .mid>div.about_info ul li{float:left;text-align:center;width:33.33%}
.about.second+#container .mid>div.about_info ul li h3{font-size:0;text-indent:-99999px;overflow:hidden;width:30px;height:30px;margin:0 auto 20px;background:url("../img/upload/img/email.png") no-repeat center/28px auto;}
.about.second+#container .mid>div.about_info ul li:nth-child(2) h3{background-image:url("../img/upload/img/open.png")}
.about.second+#container .mid>div.about_info ul li:nth-child(3) h3{background-image:url("../img/upload/img/phone.png")}
.about.second+#container .mid>div.about_info ul li p{font-size:11px}


.agree+#container .mid>h2{font-size:18px;font-weight:normal;margin-bottom:30px;line-height:30px}
.agree+#container .mid>textarea{width:100%;height:500px;padding:10px;font-size:12px;line-height:20px;color:#666;border:1px solid #ddd;background-color:#fff;resize:none;}



@media (max-width:1024px){
  .about.second+#container .mid>div.about_info{padding:50px 30px}
}
@media (max-width:769px){
  #title{height:250px}
  #title h2{font-size:20px;top:50%}
  #title ul{top:75%}
  #title ul li a{font-size:10px;min-width:50px;line-height:30px;padding:0 10px}

  .about.second+#container .mid>div{float:none;width:100%;}
  .about.second+#container .mid>div.maps{margin-right:0}
  .about.second+#container .mid>div.about_info{margin-top:20px;padding:20px;height:300px}
  .about.second+#container .mid>div.about_info h3{font-size:12px;}
  .about.second+#container .mid>div.maps iframe{height:300px!important}
  .about.second+#container .mid>div.about_info p,
  .about.second+#container .mid>div.about_info a,
  .about.second+#container .mid>div.about_info ul li p{font-size:10px;line-height:18px}
  .about.second+#container .mid>div.about_info>div{margin-bottom:20px}
}