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

/*--------------------------------------reset 此區塊請勿更動*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, /*p, */blockquote, pre,
/*a, */abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family:微軟正黑體;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*---------------------------------------------------------------------*/


body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	
}
img {border: 0;}
hr {
	margin: 0;
	padding: 0;
	clear: both;
	visibility:hidden;
}

ul,li,p{
	margin:0;
	padding:0;
}

.header {margin:0 auto; display:block;  max-width:960px; overflow:hidden;}
.header-bg h1,.header-bg h2,.header-bg h3 {display:none;}

.container {margin:0px 0px 30px 0px; }
.container2 {width:100%; position:relative; }
#container-bg {width:100%; height:100%; position: relative; overflow: hidden; margin-top:-30px;}


#r1 {background: url(../images/bg1.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:200; position: relative;}
#r2 {background: url(../images/bg2.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r3 {background: url(../images/bg3.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r4 {background: url(../images/bg4.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r5 {background: url(../images/bg5.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r6 {background: url(../images/bg6.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r7 {background: url(../images/bg7.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}
#r8 {background: url(../images/bg8.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:40px; padding-bottom:30px; z-index:150; position: relative;}


.title-big-free {width:100%; display: block;}
.title-big-free img {margin:0 auto;}
.free-content {font-size:24px; font-weight: bold; line-height: 40px; margin-top:30px;}
.services li {margin:0 auto;}
.services li img {margin:10px auto; }

.star {width:20px; height:20px; display: block; float:left; background: url(../images/icon-star.png) 0 0 repeat;}	
.staretc {padding-bottom:20px; padding-top:10px;}


@media screen and (min-width: 768px) {

.header-bg {margin:0 auto; max-width:2400px; overflow:hidden; margin-top:30px;}
.togglenav {display: none;}

.head1 {max-width:600px; margin:0 auto; margin-top:40px; margin-bottom:30px;}
.bar {height:6px; background: url(../images/bar.png) 0 0 no-repeat;}

.title-md {display:block; margin-bottom:10px; margin:0 auto; padding-top:260px; margin-top:-160px; max-width:550px;}
.title-md img {width:100%; display:block; margin:0 auto;}

.bigpic {display: none;}
	

}


@media screen and (min-width: 900px) {
	
/***按鈕列***/
.main-menu {max-width:960px; margin:0 auto; }
.main-menubg1 {display: block; width:100%; height:73px; background:#ffffff; z-index:500; margin-top:-30px;}
.main-menubg2 {width:100%; height:73px; background:#ffffff;}

.menu,.menu0 {max-width:960px; margin:0 auto;}
.menu1 {width:100%;  margin:0 auto; /*margin-left:40px;*/}
.main-menu {max-width:960px; margin:0 auto;}	
.main-menu li {float:left;  text-indent: -9999px; }
.main-menu li a {width:100%; height:100%; display: block; cursor: pointer;}	


.nav {
	width:100%;
	height: 100px;
	z-index:1500;
}
.menu li,.menu0 li {
	float:left;
	height:73px;
}
.menu li a,.menu0 li a {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	color:#626262;
	text-decoration: none;
	text-indent: -9999px;
}
	
.nav0 {width: 179px; height:73px; background: url(../images/nav.png) 0px 0px no-repeat;}
.nav0:hover,.menu li.on a .nav0,.menu0 li.on a .nav0 {width: 179px; height:73px; background: url(../images/nav.png) 0px 0px no-repeat;}

.nav1 {width: 110px; height:73px; background: url(../images/nav.png) -179px 0px no-repeat;}
.nav1:hover,.menu li.on a .nav1,.menu0 li.on a .nav1 {width: 110px; height:73px; background: url(../images/nav-over.png) -179px 0px no-repeat;}	
	
.nav2 {width: 100px; height:73px; background: url(../images/nav.png) -289px 0px no-repeat;}
.nav2:hover,.menu li.on a .nav2,.menu0 li.on a .nav2 {width: 100px; height:73px; background: url(../images/nav-over.png) -289px 0px no-repeat;}
	
.nav3 {width: 84px; height:73px; background: url(../images/nav.png) -389px 0px no-repeat;}
.nav3:hover,.menu li.on a .nav3,.menu0 li.on a .nav3 {width: 84px; height:73px; background: url(../images/nav-over.png) -389px 0px no-repeat;}
	
.nav4 {width: 88px; height:73px; background: url(../images/nav.png) -473px 0px no-repeat;}
.nav4:hover,.menu li.on a .nav4,.menu0 li.on a .nav4 {width: 88px; height:73px; background: url(../images/nav-over.png) -473px 0px no-repeat;}
	
.nav5 {width: 97px; height:73px; background: url(../images/nav.png) -562px 0px no-repeat;}
.nav5:hover,.menu li.on a .nav5,.menu0 li.on a .nav5 {width: 97px; height:73px; background: url(../images/nav-over.png) -562px 0px no-repeat;}
	
.nav6 {width: 87px; height:73px; background: url(../images/nav.png) -659px 0px no-repeat;}
.nav6:hover,.menu li.on a .nav6,.menu0 li.on a .nav6 {width: 87px; height:73px; background: url(../images/nav-over.png) -659px 0px no-repeat;}
	
.nav7 {width: 96px; height:73px; background: url(../images/nav.png) -746px 0px no-repeat;}
.nav7:hover,.menu li.on a .nav7,.menu0 li.on a .nav7 {width: 96px; height:73px; background: url(../images/nav-over.png) -746px 0px no-repeat;}
    
.nav8 {width: 87px; height:73px; background: url(../images/nav.png) -842px 0px no-repeat;}
.nav8:hover,.menu li.on a .nav8,.menu0 li.on a .nav8 {width: 87px; height:73px; background: url(../images/nav-over.png) -842px 0px no-repeat;}

}

@media screen and (min-width: 825px) and (max-width: 899px) {

/***按鈕列***/
.main-menu {max-width:960px; margin:0 auto; }
.main-menubg1 {display: block; width:100%; height:73px; background:#ffffff; z-index:500; margin-top:-30px;}
.main-menubg2 {width:100%; height:73px; background:#ffffff;}

.menu,.menu0 {max-width:960px; margin:0 auto;}
.menu1 {width:100%;  margin:0 auto;}
.main-menu {max-width:960px; margin:0 auto;}	
.main-menu li {float:left;  text-indent: -9999px; }
.main-menu li a {width:100%; height:100%; display: block; cursor: pointer;}	


.nav {
	width:100%;
	height: 100px;
	z-index:1500;
}
.menu li,.menu0 li {
	float:left;
	height:73px;
}
.menu li a,.menu0 li a {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	color:#626262;
	text-decoration: none;
	text-indent: -9999px;
}
	
.nav0 {width: 220px; height:73px; background: url(../images/nav.png) 0px 0px no-repeat; margin-left:-70px;}
.nav0:hover,.menu li.on a .nav0,.menu0 li.on a .nav0 {width: 220px; height:73px; background: url(../images/nav.png) 0px 0px no-repeat;}

.nav1 {width: 112px; height:73px; background: url(../images/nav.png) -220px 0px no-repeat;}
.nav1:hover,.menu li.on a .nav1,.menu0 li.on a .nav1 {width: 112px; height:73px; background: url(../images/nav-over.png) -220px 0px no-repeat;}	
	
.nav2 {width: 99px; height:73px; background: url(../images/nav.png) -332px 0px no-repeat;}
.nav2:hover,.menu li.on a .nav2,.menu0 li.on a .nav2 {width: 99px; height:73px; background: url(../images/nav-over.png) -332px 0px no-repeat;}
	
.nav3 {width: 85px; height:73px; background: url(../images/nav.png) -431px 0px no-repeat;}
.nav3:hover,.menu li.on a .nav3,.menu0 li.on a .nav3 {width: 85px; height:73px; background: url(../images/nav-over.png) -431px 0px no-repeat;}
	
.nav4 {width: 87px; height:73px; background: url(../images/nav.png) -516px 0px no-repeat;}
.nav4:hover,.menu li.on a .nav4,.menu0 li.on a .nav4 {width: 87px; height:73px; background: url(../images/nav-over.png) -516px 0px no-repeat;}
	
.nav5 {width: 100px; height:73px; background: url(../images/nav.png) -603px 0px no-repeat;}
.nav5:hover,.menu li.on a .nav5,.menu0 li.on a .nav5 {width: 100px; height:73px; background: url(../images/nav-over.png) -603px 0px no-repeat;}
	
.nav6 {width: 84px; height:73px; background: url(../images/nav.png) -703px 0px no-repeat;}
.nav6:hover,.menu li.on a .nav6,.menu0 li.on a .nav6 {width: 84px; height:73px; background: url(../images/nav-over.png) -703px 0px no-repeat;}
	
.nav7 {width: 88px; height:73px; background: url(../images/nav.png) -787px 0px no-repeat;}
.nav7:hover,.menu li.on a .nav7,.menu0 li.on a .nav7 {width: 88px; height:73px; background: url(../images/nav-over.png) -787px 0px no-repeat;}
	
}

@media screen and (min-width: 768px) and (max-width: 824px) {

/***按鈕列***/
.main-menu {max-width:960px; margin:0 auto;}
.main-menubg1 {display: block; width:100%; height:73px; background:#ffffff; z-index:500; margin-top:-30px;}
.main-menubg2 {width:100%; height:73px; background:#ffffff;}

.menu,.menu0 {max-width:960px; margin:0 auto;}
.menu1 {width:100%;  margin:0 auto;}
.main-menu {max-width:960px; margin:0 auto;}	
.main-menu li {float:left;}
.main-menu li a {width:100%; height:100%; display: block; cursor: pointer;}	


.nav {
	width:100%;
	height: 100px;
	z-index:1500;
}
.menu li,.menu0 li {
	float:left;
	width:12%;
	height:73px;
	padding:30px 5px 0px 5px;
	text-align: center;
}
.menu li a {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	color:#000000;
	text-decoration: none;
	font-size:18px;
	font-weight: bold;
}	
.menu li a:hover,.menu li.on a {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	color:#2c8396;
	text-decoration: none;
	font-size:18px;
	font-weight: bold;
}		

	
}



.bg {margin-top:60px;}	
.title {margin:0 auto; width: 100%;}
.title img {margin:0 auto;}
.content-blue {min-height:153px; background: url(../images/content-bg1.png) center center no-repeat; margin:40px auto;}
.content-blue p {text-align: center; line-height: 36px; font-size:18px; font-weight: bold; color:#0d7086; padding:20px 0px 10px 0px;}
.content-green {min-height:153px; background: url(../images/content-bg2.png) center center no-repeat; margin:40px auto;}
.content-green p {text-align: center; line-height: 36px; font-size:18px; font-weight: bold; color:#4a8735; padding:20px 0px 10px 0px;}


.content {padding:5px;}
.content-img {padding:0px 5px 10px 5px;}	
.content-tt	{color:#0d7086; font-size:16px;}
.content-tt2 {color:#4a8735; font-size:16px;}
.content-con {color:#535353; font-size:13px;}
.content-txt {color:#ffff00; background:#ff9e1b; padding:3px; font-size:15px; font-weight: bold;}
.content-btn {text-align: center; padding:5px;}
.content-btn a {display: block; width:100%; font-size:16px; color:#ffffff; background: #0d7086; padding:10px 0px; text-decoration: none;}
.content-btn a:hover {color:#ffffff; background: #1092af; text-decoration: none;}
.content-btn2 {text-align: center; padding:5px;}
.content-btn2 a {display: block; width:100%; font-size:16px; color:#ffffff; background: #4a8735; padding:10px 0px; text-decoration: none;}
.content-btn2 a:hover {color:#ffffff; background: #5ea048; text-decoration: none;}	

.content-con2 {margin-bottom:8px;}


@media screen and (min-width: 960px) {
.left {width:46%; float:left; margin-top:350px; padding:30px; font-size:16px;  line-height: 36px; margin-left:25px;}
.right {width:50%; float:right;}

.left-content {width:100%;}
.left-content p {width:100%; clear: both;}
.sale {width:100%; margin-left:20px; margin-top:90px; padding:30px;}

em {color:#d6001c; font-weight: bold; margin:0px 5px; font-size:14px;}


	
.title-small {display: none;} 
.area {display: none;}
	
.sale-title {display: none;}	

.bigpic {display:block;}
.bigpic-md {display: none;}	
	
.carousel-pic {display: none;}
	
	
.free-bg1 {max-width:960px; height:583px; background: url(../images/content-4-1.png) 0 0 no-repeat; background-size: contain; clear: both;}
.free-bg2 {max-width:960px; height:462px; background: url(../images/content-4-2.png) 0 0 no-repeat; background-size: contain; clear: both;}
.free-bg3 {max-width:960px; height:462px; background: url(../images/content-4-3.png) 0 0 no-repeat; background-size: contain; clear: both;}
.free1-content {width:35%; margin-top:20px; padding:10px;}
.free1-content p,.free2-content p,.free3-content p {display: block; line-height: 36px; font-size:15px;}
	
.free2-content {float:right; width:35%; margin-top:20px; padding:10px;}
.free3-content {width:35%; margin-top:20px; padding:10px;}
.content-4-sm {display: none;}
}

@media screen and (max-width: 959px) {
.left {width:100%; float:right; margin-top:20px;}
.left-bg1 {background:#f5e1b5;}
.left-bg2 {background:#dcc9ac;}
.left-bg3 {background:#c4b18e;}
.right {width:100%; float:left;}

.left-content {width:100%; padding:30px; line-height: 32px; font-size:15px;}
.left-content p {width:100%; clear: both;}
	
em {color:#d6001c; font-weight: bold; margin:0px 5px; font-size:14px;}
.title {margin:0 auto; width:100%;}
.title-big {display: none;}
.title-small {display: block; margin-top:30px;}
.title-small img {margin:0 auto;}
.area {/*background: #ffffff; color:#000000; padding:10px 20px;*/ line-height: 32px; background: url(../images/icon-4.png) 0 0 no-repeat; padding-left:30px;}
.sale {padding:10px 20px; margin-top:50px;}
.sale-bg1 {background:#f8ebcd;}
.sale-bg2 {background:#e8dbc7;}
.sale-bg3 {background:#d7c8ad;}

.sale-title {float:left; width:100%; margin-top:-50px;}	
.sale-title img {margin:0 auto;}

.star {width:20px; height:20px; display: block; float:left; background: url(../images/icon-star.png) 0 0 repeat; margin-top:-6px;}	
.staretc {background: url(../images/icon-5.png) 0 0 no-repeat; padding-left:30px; padding-bottom:20px; padding-top:10px;}	
	
.carousel-pic {width:100%; clear:both; background: #ffffff; padding:15px; margin:10px 0px 30px 0px;}
.container {margin-top:40px; margin-bottom:30px;}
	
	
.free-bg1 {max-width:960px; background:none; background-size: contain; clear: both;}
.free-bg2 {max-width:960px; background:none; background-size: contain; clear: both;}
.free-bg3 {max-width:960px; background:none; background-size: contain; clear: both;}
.free1-content {width:100%; margin-top:20px; padding:10px;}
.free1-content p {display: block; line-height: 36px; font-size:15px;}
	
.content-4-sm {display: block; max-width:716px; margin:0 auto;}
.content-4-sm img {width:100%; margin:0 auto;}
}


@media screen and (min-width: 830px) and (max-width: 959px) {
.menu1 {width:100%;  margin:0 auto; margin-left:0px;}
.bigpic {display: none;}
.bigpic-md {display: block; margin:0 auto;}	
}




@media screen and (max-width: 767px) {

.header-bg {margin:0 auto; max-width:2400px; height:100%; overflow:hidden;}
.togglenav {
        display: block;
        z-index: 9999;
        position: fixed;
        right: 0;
        overflow: hidden;
        line-height: 33px;
        width: 100%;
        cursor: pointer;
    }
.nav {display:none;}
.main-menubg1 {display:none;}
	
.title-md {display:block; margin-bottom:10px; margin:0 auto; padding-top:0px; margin-top:0px; max-width:550px;}
.title-md img {width:100%; display:block; margin:0 auto;}

.bigpic {display:none;}
	
.content-blue {background: #dbf4fa; margin:40px auto; padding:15px; }	
.content-blue p {font-size:14px; line-height: 24px;}
.content-green {background:#cef0e9; margin:40px auto; padding:15px;}
.content-green p {font-size:14px; line-height: 24px;}
	
	
#r1 {background: url(../images/bg1.jpg) 0 0 repeat; background-attachment: fixed; float:left; clear:both; padding-top:0px; padding-bottom:30px; z-index:150; position: relative;}	

.content-con2 {margin-bottom:0px;}    
}

	
.hotel-btn {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.hotel-btn:after {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.hotel-btn:hover {
	-webkit-transform: translateY(1%);
	-moz-transform: translateY(1%);
	-ms-transform: translateY(1%);
	transform: translateY(1%);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
	
	
	
.sale-okinawa {display:block; margin:0 auto; max-width: 960px; margin-bottom:10px;}	
.sale-okinawa img {margin:0 auto;}		
	
.sp-sale {display: block; margin:0 auto; max-width:960px; height:62px; margin-bottom:20px; padding-top:20px; text-align: center; background: url(../images/sp-sale.png) center center no-repeat;}	
.sp-sale-bg	{color:#ffffff; font-weight: bold; font-size:21px; padding:15px;}