*{margin:0;padding:0;border:0;outline:none;}

@viewport{ width:device-width;}
@-ms-viewport{width:devide-width;} /* for microsoft device */
@-o-viewport{width:devide-width;} /* for old opera device */

/* 320px-480px */
@media only screen and (max-width:580px)
{ 
#headbg {margin:0 auto; width:100%; float:none; z-index:1000; position:relative; background:#fff; }
#top, #menu {width:96%; margin:0 auto; float:none; padding:10px 0;}
.bk, #call {width:96%; margin:0 auto; float:none; padding:10px 0; text-align:center;}
.logo{margin:0 auto; width:202px; float:none;}
.hotel { margin:0 auto; width:80%; float:none; }
.tx {margin:10% 8%; text-align:center; font-size:21px; position:absolute; z-index:9; padding:10px; background: rgba(0,0,0,0.7); color:#ccc; font-weight:bold;}
.circle, .atx, .atpic {margin:0 auto; width:70%; float:none; margin-bottom:22px; }
.footer-col, .footer-co, .detail, .ftp, .pxpic, .px, .atx, .atpic, .ctfrm, .key  {float:none; width:96%; margin:0 auto; margin-bottom:20px; height:auto; padding-bottom:10px;}
 .ft {float:none; width:100%; margin:0 auto; margin-bottom:20px; height:auto; padding-bottom:10px;}
 .ftimg { margin:0 auto; float:none; width:64px; }
.slide-sub .sltx {
  position: absolute; margin-left:6%; margin-right:6%;
  bottom:10%; text-align:center;
      text-shadow: 5px 5px 7px #333; line-height:26px;
  color: #fff; font-size:17px; font-weight:bold;
  padding:16px 25px;
}
}
	
@media only screen and (min-width:581px) and (max-width:768px)
{
#head {width:96%; margin:0 auto; padding:0px 10px; }	
#headbg {margin:0 auto; width:100%; float:none; z-index:1000; position:relative; background:#fff; }
.hotel { margin:0 auto; width:80%; float:none; }
.tx {margin:10% 8%; text-align:center; font-size:21px; position:absolute; z-index:9; padding:10px; background: rgba(0,0,0,0.7); color:#ccc; font-weight:bold;}
.circle, .atx, .atpic {margin:0 auto; width:70%; float:none; margin-bottom:22px; }
.footer-col, .footer-co, .detail, .ftp, .pxpic, .px, .atx, .atpic, .ctfrm, .key  {float:none; width:90%; margin:0 auto; margin-bottom:20px; height:auto; padding-bottom:10px;}
 .ft {float:none; width:100%; margin:0 auto; margin-bottom:20px; height:auto; padding-bottom:10px;}
 .ftimg { margin:0 auto; float:none; width:64px; }
 .slide-sub .sltx {
  position: absolute; margin-left:16%; margin-right:16%;
  bottom:10%; text-align:center;
      text-shadow: 5px 5px 7px #333; line-height:26px;
  color: #fff; font-size:19px; font-weight:bold;
  padding:16px 25px;
}
}
@media only screen and (min-width:769px) and (max-width:1100px)
{ 
#head {width:96%; margin:0 auto; padding:0px 10px; }	
#headbg {margin:0 auto; width:100%; float:none; z-index:1000; position:relative; background:#fff; }
.footer-col, .footer-co, .footer-sm, .footer-de { float:left; width:42%; margin:10px;}
.pool { width:90%; float:none; margin:0 auto; margin-top:15px; clear:both;}
.contentmain, .contentsub { width:86%; float:none; margin:0 auto; margin-top:15px;}
 .col1 { width:40%; float:left; }
 .ftbg {width:92%; margin:0 auto;}
.ftm, .ftdetail { width:80%; float:none; margin:0 auto; margin-top:15px;}
 .slide-sub .sltx {
  position: absolute; margin-left:16%; margin-right:16%;
  bottom:10%; text-align:center;
      text-shadow: 5px 5px 7px #333; line-height:30px;
  color: #fff; font-size:23px; font-weight:bold;
  padding:16px 25px;
}
}