*{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; }
.logo{ width:92px; margin:0 auto; float:none; padding:12px 0; }
.bk{ float:none; margin:0 auto;  text-align:center;}
.imenu, .top-right { width:96%; float:none; margin:0 auto; margin-top:12px;}
.ph {margin-top:0px;}
.check1{ margin:10px 8px; float:left; width:40%;}
.ftm, .ftdetail, .col, .ft { width:90%; float:none; margin:0 auto; margin-top:15px;}
.atpic, .atx, .hotel, .pol, .polpic {width:90%; float:none; margin:0 auto; margin-top:5px; clear:both; margin-bottom:20px;}
.content, .contentsub { width:86%; float:none; margin:0 auto; margin-top:15px;}
.atpic, .polpic, .roompic { width:90%; float:none; margin:0 auto; margin-top:15px; background-size:cover;}
.footer-col, .footer-co, .footer-sm, .footer-de  { float:none; width:98%; margin:0 auto; clear:both;}
hr {margin: 6% 0;}
.vid  { float:none; width:98%; margin:0 auto; position:relative; padding-bottom:56%; margin-top:3%; clear:both; }
}
	
@media only screen and (min-width:581px) and (max-width:767px)
{

#headbg {margin:0 auto; width:100%; float:none; z-index:1000; position:relative; }
.imenu { width:96%; float:none; margin:0 auto;}
.check1{ margin:10px 8px; float:left; width:40%;}
.ftm, .col { width:90%; float:none; margin:0 auto; margin-top:15px;}
.ftdetail { width:100%; float:none; margin:0 auto; margin-top:15px; clear:both;}
.ft{width:46%; float:left; margin:8px 8px;}
.atpic, .atx, .hotel, .pol, .polpic {width:90%; float:none; margin:0 auto; margin-top:5px; clear:both; margin-bottom:20px;}
.content, .contentsub { width:86%; float:none; margin:0 auto; margin-top:15px;}
.atpic, .polpic, .roompic { width:90%; float:none; margin:0 auto; margin-top:15px; background-size:cover;}
.footer-col, .footer-co, .footer-sm, .footer-de  { float:none; width:98%; margin:0 auto; clear:both;}
hr {margin: 6% 0;}
.vid  { float:none; width:98%; margin:0 auto; position:relative; padding-bottom:56%; margin-top:3%; clear:both; }
}
@media only screen and (min-width:768px) and (max-width:1100px)
{ 
#head {width:96%; margin:0 auto;}
.check1{ margin:10px 10px; float:left; width:12%;}
.reserve { clear:both; width:80%;}
.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;}
.content, .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;}

}