@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Segoe UI", Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei', PMingLiU, sans-serif;
}
body {
	font-size: 16px;
	color: #333;
	line-height:1.5
}
a{transition:all 0.3s;}
.fixed body {margin-top:70px}
#fixed_bar .logoicon {
	width: 188px !important;
	height: 59px !important;
	margin-top: 0 !important;
}
.anchor_hide {
	display: block;
	height: 102px;
	margin-top: -102px;
	z-index: -1;
	visibility: hidden
}
.button-center .more {
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	background-color: #F90;
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.button-center .more:hover {
	background-color: #F60
}
h1{display: inline-block}
.maple h1 ,
h2 {
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 10px;
	line-height: 1.5;
	color: #930;
	background: url(../images/title-bg.svg) no-repeat top left;
	text-indent: 40px;
	-webkit-background-size: 36px 36px;
	background-size: 36px 36px
}
h3 {
	font-size: 20px;
	vertical-align: middle
}
h3 .grid_address {
	background-image: url(../images/mapicon.svg);
	background-repeat: no-repeat;
	-webkit-background-size: 22px 22px;
	background-size: 22px 22px;
	text-indent: 20px;
	font-weight: normal;
	font-size: 15px;
	color: #333;
	display: block
}
a {text-decoration: none}
h3, h3 a {color: #099;transition:all .4s;}
h3 a:hover{color: #069}
input {
	-webkit-appearance: none;
	border-radius: 0
}
em {font-style: normal}
img {object-fit: cover;max-width: 100%}
.remind{display: block;color: red}
.container {max-width: 1100px;width: 100%;margin: 0 auto}
article {margin: 40px 0}
.button-center {
	text-align: center;
	margin-top: 20px
}
.swiper-arrow {
	position: relative;
	z-index: 0
}
.swiper-arrow .swiper-button-prev, .swiper-arrow .swiper-button-next {
	height: 100%;
	top: 0;
	-webkit-background-size: 70% auto;
	background-size: 70% auto;
	margin: 0;
	opacity: 0.7
}
.swiper-arrow .swiper-button-next.swiper-button-disabled, .swiper-arrow .swiper-button-prev.swiper-button-disabled {opacity: 0}
.swiper-arrow .swiper-button-next {
	right: -65px;
	background-image: url(../images/blue-arrow-next.svg)
}
.swiper-arrow .swiper-button-prev {
	left: -65px;
	background-image: url(../images/blue-arrow-prev.svg)
}
.swiper-wrapper {
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out
}
.swiper-container {
	padding: 20px 0;
	background: transparent !important
}
.swiper-pagination {
	position: static !important
}
.swiper-button-prev, .swiper-button-next {
	width: 50px;
	height: 100%;
	top: 0
}
.swiper-button-next {right: 0}
.swiper-button-prev {left: 0}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 0}
.bg {
	height: 500px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 9;
	background: url("../images/bg.png") center center;;
	background-size:auto 100%;
}
.bg .bg-box {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align:center;
}
.bg .bg-box svg{display: block;margin: auto;/* width: 1460px; */
left: 50%;height: 100%;
position: absolute;
transform: translateX(-50%);
}
.bg>.container {
	z-index: 2;
	position: relative;
	text-align: center
}
.bg .title {
	margin-bottom:0px;
	max-width: 450px;
	width: 100%
}
.bg >.container p{margin: 0 0 20px;color:#FFF;}
.cav {  
            position: absolute;  
            top: 0;  
            left: 0;  
        }
nav a {
	font-size: 20px;
	color: #333;
	display: block;
	text-align: center;
	padding: 20px 0 5px;
	border-bottom: 5px solid #fff
}
nav#fixed_nav  a {
	padding: 10px 0 5px;
}
.tab-wrap {
	max-width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	list-style: none;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 20px 0 0 0;
}
.tab-wrap .tab {display: none}
.tab-wrap .tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1) {
	opacity: 1;
	-webkit-transition: .8s all ease-in-out;
	-o-transition: .8s all ease-in-out;
	transition: .8s all ease-in-out;
	position: relative;
	top: 0;
	z-index: 1
}
.tab-wrap .tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) {
	opacity: 1;
	-webkit-transition: .8s all ease-in-out;
	-o-transition: .8s all ease-in-out;
	transition: .8s all ease-in-out;
	position: relative;
	top: 0;
	z-index: 1
}
.tab-wrap .tab:checked:nth-of-type(3) ~ .tab-content:nth-of-type(3) {
	opacity: 1;
	-webkit-transition: .8s all ease-in-out;
	-o-transition: .8s all ease-in-out;
	transition: .8s all ease-in-out;
	position: relative;
	top: 0;
	z-index: 1
}
.tab-wrap .tab:checked+label {cursor: default}
.tab-wrap .tab+label {
	cursor: pointer;
	display: block;
	text-decoration: none;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all;
	width:33.33%
}
.tab-wrap .tab-content {
	padding: 20px 10px 0 10px;
	position: absolute;
	width: 100%;
	z-index: -1;
	opacity: 0;
	left: 0
}
.search_bar {
	padding: 10px;
	margin:10px auto 0px
}
.search_bar .btns {color: #fff !important}


.grid_list {position: relative}
.grid_list .grid_link,
.point_d .swiper-slide > a,
.grid_list .grid_pic a,
.grid_list .img_bg{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:3;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;transition: all .5s;}
.grid_list .img_bg{z-index:1;}
.grid_list .grid_link:hover{background-color: rgba(255,255,255,0.3);}
.grid_list .grid_beroom {
	font-size: 16px;
	position: absolute;
	top: 5px;
	left: 0;
	padding: 5px 10px;
	color: #fff;
	background-color: #F90;z-index: 2;
}
.grid_list .grid_pic {padding:37% 0;position:relative;}
.grid_list .grid_clear{display: block;clear: both;}
.grid_list .grid_txt{padding-top: 5px}
.grid_list .grid_name, .grid_list .grid_address {
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block
}
.grid_list .grid_name{margin-bottom: 5px}
.grid_list .grid_address {
	background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='%23999'><path d='M6,0.5c-4,0-7.1,4.4-4.6,8.6C2,10.2,6,16.9,6,17s4-6.7,4.6-7.8C13.1,4.9,10,0.5,6,0.5z M6,8.8 c-3.7,0-3.7-5.6,0-5.6S9.8,8.8,6,8.8z'/></svg>") no-repeat left center;
	-webkit-background-size: 12px 18px;
	background-size: 12px 18px;
	text-indent: 15px;
	font-weight: normal;
	font-size: 15px;
	color: #333;
	margin-top: 5px
}
.grid_list .grid_Prj {
	height: 50px;
	overflow: hidden;
	margin-top: 5px
}
.grid_list .grid_Prj a {color: #333}
.grid_list .grid_rate {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end
}
.grid_list .grid_booking {
	padding: 3px 25px;
	color: #fff;
	background-color: #f90
}
.grid_list .grid_prices {
	color: red;
	margin-right: 10px
}
.img_source{position:absolute;z-index:2;white-space: nowrap;font-size:0.9em;
	bottom:0;left:50%;text-align:center;transform: translateX(-50%);
	color:rgba(255,255,255,0.5);
	background:rgba(0,0,0,0.5);padding:0 10px;}

.point_d .swiper-wrapper{align-items:stretch;}
.point_d .swiper-slide{display:block;width: 300px;height:auto;}
.point_d .swiper-container{padding:20px 0 0 0;}
.point_d .new_info {align-items:center;align-self:center;margin: 0 0 10px 0;}
.point_d .new_info h3 {color: #099;margin-top: 10px}

.about{margin: 40px auto;}
/* 3大塊的專案飯店 */
.offer .swiper-slide {
	width: 350px;margin: 0 8px;
	border: 1px solid #eee;
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all;
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	opacity: .7
}
.offer .swiper-slide::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 3
}
.offer .swiper-slide-active {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;box-shadow:0 5px 10px rgba(0,0,0,0.5);
}
.offer .swiper-slide-active::after {display: none}
.offer .grid_list .grid_beroom {
	top: auto;
	bottom: -17.5px
}
.offer .grid_list .grid_txt {padding: 20px 10px 10px 10px}

/* 推薦飯店 */
.hotels .area {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   overflow-x: auto
}
.hotels .area li {
   -webkit-box-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   text-align: center;white-space: nowrap;
}
.hotels .area a {
   color: #FFF;
   padding: 10px 20px;
   display: block;
   background-color: #7b2
}
.hotels .area a:hover{background-color: #490}
.hotels .area .active a {background-color: #270}
.hotels .area .more a{background-color: #F90}
.hotels .area .more a:hover{background-color: #F60}
.hotels .recommend-box {position: relative}
.hotels .hotel-lists {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
	border: 1px solid #CCC;
	border-top:0px solid #CCC;
   background-color: #fff;
   opacity: 0;
   visibility: hidden;
   z-index: -1;
   -webkit-transition: 0.4s all;
   transition: 0.4s all;
   position: absolute;
   top: 0;
   left: 0;
   padding: 10px;
   padding-bottom: 0
}
.hotels .show {
   position: relative;
   opacity: 1;
   visibility: visible;
   z-index: 1
}
.hotels .grid_list {
   position: relative;
   margin-right: 1%;
   margin-bottom: 1%;
   width: 24.25%
}
.hotels .grid_list:nth-child(4n) {margin-right: 0}
.hotels .grid_link {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 3
}
.hotels .grid_beroom {
   font-size: 16px;
   position: absolute;
   top: 5px;
   left: 0;
   padding: 5px 10px;
   background-color: #EA5150;
   color: #fff
}
.hotels .grid_pic {position: relative}
.hotels .grid_pic a {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 3
}
.hotels .img_bg {

}
.hotels .grid_txt {padding-top: 5px}
.hotels .grid_name, .hotels .grid_address {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block
}
.hotels .grid_address {
   background-image: url(../images/mapicon.svg);
   background-repeat: no-repeat;
   background-size: 22px 22px;
   text-indent: 20px;
   font-weight: normal;
   font-size: 15px;
   color: #333;
   margin-top: 5px
}
.hotels .grid_Prj {
   height: 50px;
   overflow: hidden;
   margin-top: 5px
}
.hotels .grid_Prj a {color: #333}
.hotels .grid_rate {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
   align-items:center
}
.hotels .grid_booking {
   padding: 3px 25px;
   color: #fff;
   background-color: #f44336
}
.hotels .grid_prices {color:red;margin-right:10px}

/* events是首頁的  events_list是內頁的*/
.events{margin: 30px auto 30px auto}
.events a{color:#069}
.events .swiper-wrapper{align-items:stretch;}
.events .swiper-slide{height: auto; width:800px;display: flex;align-items:stretch;}
.events .grid_list .grid_pic{flex:0 0 auto;width:350px;padding:0;margin: 0 10px 0 0 }
.events .grid_txt{flex:1;}
.events .swiper-slide.more_txt-slide{width:10em;}
.events .more_txt{flex:1;display:flex;justify-content: center;align-items:center;background:#F2F2F2}
.events .more_txt::after{content:""}
.events_list.container{padding: 30px 10px 0 10px;}
.events_list a{color: #069;}
.events_list .grid_p a{color: #099;z-index: 5;position: relative;}
.events_list .grid_p a:hover{color: #069;}
.events_list .grid_list{height: auto;display: flex;align-items:stretch;margin: 0 0 30px 0}
.events_list .grid_list .grid_pic{flex:0 0 auto;width:350px;padding:0;margin: 0 15px 0 0 }
.events_list .grid_txt{flex:1;}
.events_list .grid_hotel{display: flex;align-items:stretch;border-top:1px solid #ccc;padding:10px 0 0 0;margin:10px 0 0 0}
.events_list .grid_hotel .list{margin:0 10px 0 0;flex:1;display: flex;position: relative;align-items:center;z-index:4}
.events_list .grid_hotel .pic img{height: 100%;}
.events_list .grid_hotel .pic{flex:0 0 auto;width:120px;height:90px;margin: 0 10px 0 0}
.events_list .grid_hotel .txt{flex:1;align-self: center}
.events_list .grid_hotel .booking{float: right;background:#F90;color:#fff;width:3.5em;text-align: center;border-radius:3px;}
.events_list .grid_hotel .prices{color:#C00}


/* 其他活動連結 */
.activity {min-height: auto;}
.activity .link-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; }
.activity .link-box img{border-radius: 50%;height: 100%;position: absolute;left: 0;top: 0;width: 100%;}
.activity figure { margin-right: 1%; margin-bottom: 1%;width: 24.25%;max-width: 300px;max-height: 300px;overflow: hidden;position: relative;padding: 12% 0;}
.activity figure:nth-child(4n) { margin-right: 0; }
.activity figure a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 1; -webkit-transition: 0.4s all; transition: 0.4s all; }

/* Q&A */
.qa{justify-content:center;display:flex;flex-wrap:wrap;margin:10px auto;max-width:1100px;width:100%;}
.qa_menu{order:1;transition: all 0.3s;text-align:center;/* flex: 1;*/background:#F90;color:#fff;margin: 0 10px;border-radius: 5px;padding:0.3em 1.2em;cursor: pointer}
.qa_menu.o,
.qa_menu:hover{background: #F60;}
.qa .container{order:2;display:block}
.qa p{color:#333;letter-spacing: 0px;margin:0.3em 0 1em 0;}
.qa ol{ margin:0.3em 0 1em 2em;list-style-type: decimal;}
.qa li{padding:0.2em 0}
.qa .pic{
	padding:0 0 0 7px;
	margin:0;
	float:right;position: relative;
}

/* 資料來源 */
.page{max-width: 1100px;width:100%;margin:10px auto;order:10;}
.page a{color:#069}
.page a:hover{color:#C00}

/* 螢火蟲小百科 */
.word15 {
	font-size: 18px;
	font-weight: bold;
	color: #669900;
}
.word13 {
	color: #333;
	border-bottom: 1px dashed #CCC;
	text-indent: 0px;
	padding: 0 0 10px 15px;
	margin: 0 0 10px 0;
}

/* 景點內頁 */
.attraction-p3 h2{text-indent: 0;}
.attraction-p3 .grid_list .grid_pic{padding: 0;}
.attraction-p3 .point_data h3{color:#333}
@media (max-width: 1100px) {
.container, .fixed_content {padding: 0 10px}
.hotels .container{border-bottom:1px solid #ccc;padding:0 10px 20px;overflow: hidden;}
article:not(:nth-of-type(1)) .swiper-button-next, article:not(:nth-of-type(1)) .swiper-button-prev {display:none}
.swiper-arrow {overflow: hidden}
}

@media (min-width: 741px) {
.search_button{display: none}
.search_container {background: rgba(255,255,255,0.7)}
nav {
	z-index: 1;
	position: relative
}
nav .active a {border-bottom: 5px solid #f60}
nav .container {
	border-bottom: 3px solid #eee;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex
}
nav li {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1
}
nav li:first-child {display: none}
#fixed_nav .container {border-bottom: 0}
.mobile_nav {display: none}
}

@media (min-width: 1024px) {
nav a {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
nav a:hover {border-bottom: 5px solid #f90}
#rooms_search_bar .btns {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
#rooms_search_bar .btns:hover {background-color: #f60}
figure a {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
figure a:hover {background-color: rgba(255,255,255,0.3)}
.swiper-button-prev, .swiper-button-next {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.swiper-button-prev:hover, .swiper-button-next:hover {opacity: 1}
.grid_booking {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.grid_booking:hover {background-color: #C00}
}
@media (max-width: 970px) {
body {margin-top: 60px}
.anchor_hide {
	height: 60px;
	margin-top: -60px
}
#header{
	position: fixed;top: 0;
	left: 0;
	width: 100%;
	z-index: 10
}
.activity .link-box {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}
.activity figure {
	margin-right: 2%;
	margin-bottom: 20px;
	width: 49%;padding:24% 0;

}
.activity figure img{max-height: 300px;}
.activity figure:nth-child(2n) {margin-right: 0}
#mobile_nav li a {
	border: 0;
	padding: 10px 0
}
	.events .swiper-slide{width:650px;}
	.events .grid_list .grid_pic{width:250px;}
	.events_list .grid_hotel{flex-direction:column;padding:0;}
	.events_list .grid_hotel .list{margin:10px 0 0 0}
}

@media (max-width: 740px) {
body {margin-bottom: 47px}
article {margin: 20px 0}
.bg .bg-box{background-size: 1000px auto;}
.bg {height: 255px}
.bg>.container {text-align: center;padding: 0 10px}
.bg .title {margin-bottom: 0;max-width: 300px}
.bg .bg-box .bubbles {max-width: calc(1708px / 1.5);width: calc(1708px / 1.5)}
.bg .bg-box .dolphins {
	max-width: calc(1670px / 2);
	width: calc(1670px / 2)
}
.bg .bg-box .cloud {
	max-width: calc(2000px / 1.5);
	width: calc(2000px / 1.5)
}
.search_bar {width: 100%}
.search_bar li {
	width: 100%;
	padding: 5px 0
}
.search_button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	color: #fff
}
.swiper-button-next, .swiper-button-prev {display: none}
.hotels .grid_list {
   margin-right: 2%;
   margin-bottom: 2%;
   width: 49%
}
.hotels .grid_list:nth-child(2n) {margin-right: 0}	
.events_list .grid_list{flex-direction:column;margin:0 0 50px 0}
.events_list .grid_list .grid_pic{width:100%;height:auto;padding: 38% 0;}
.events_list .grid_hotel{flex-direction:row;}
.events_list .grid_hotel .list{margin: 10px 10px 0 0}
.events .swiper-slide{width:530px;}
#top_bar{bottom:60px;}
}

@media (max-width:640px) {
.qa{flex-direction:column;}
.qa_menu{margin:5px 10px;padding: 0.2em 1.2em;order: initial;}
.qa .container{order: initial;}
.events_list .grid_hotel{flex-direction:column;}
.events_list .grid_hotel .list{margin: 10px 0 0 0}
}

@media (max-width:560px) {
.point_d .swiper-slide {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 300px;}
.point_d .swiper-slide img {
	width: 100%;
	margin-bottom: 10px
}
.point_d .new_info {
	width: 100%;
	padding: 0
}
.events .swiper-slide{width:90%;flex-direction:column;}
.events .grid_list .grid_pic{padding: 30% 0;width: auto}
.qa .pic{float:none;}
}
@media (max-width: 480px) {
body {font-size: 18px}
.bg .bg-box{background-size: 750px auto;}
.bg > .container p{display: none;}
.offer .swiper-slide {width: 290px;}
.mobile_button {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	width: 150px;
	color: #fff;
	background-color: #f90;
	text-align: center;
	padding: 10px 0
}
.areas {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}
.hotels .grid_list {
   margin-right: 0;
   width: 100%;
   margin-bottom: 10px
}
.hotels .grid_list:nth-child(1n) {margin-right: 0}
}