@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: 102px
}
#fixed_bar .logoicon {
	width: 188px !important;
	height: 59px !important;
	margin-top: 0 !important;
	/*margin-bottom: 5px !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: #c00;
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.button-center .more:hover {
	background-color: #F00
}
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
}
.attraction_page h2{text-indent:0;}
h3 {
	font-size: 20px;
	vertical-align: middle
}
h3 .grid_address {
	background-image: url(../images/mapicon.html);
	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;
}
.attraction_page .point_data h3{color: #333;}
h3 a:hover{
	color: #069
}
input {
	-webkit-appearance: none;
	border-radius: 0
}
em {
	font-style: normal
}
img {
	max-width: 100%
}
.remind {
	display: block;
	color: red
}
.main{overflow: hidden;}
.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: 600px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align:initial;
	-webkit-align-items:initial;
	-ms-flex-align:initial;
	align-items:initial;
	z-index:9;
}
.bg .bg-box {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bg .bg-box svg{display: block;margin: auto;width:1920px;
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.bg>.container {
	z-index: 2;display: flex;flex-direction:column;justify-content:center;align-items:center;
	position: relative;
	text-align: center}
.bg>.container::after{content:"";display: block;width: 2px;height: 150px}
.bg .title {
	margin:0 auto 0 auto;
	max-width: 400px;
	width: 100%
}
.bg >.container p{margin: 0 auto 0;max-width: 95%;width:700px
}
#pc_searchbar{align-self:stretch;}
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
}


.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 .swiper-slide img{height:220px}
.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}
.point_d .beroom {font-size: 16px;
position: absolute;top:0;left: 0;
padding: 5px 10px;
color: #fff;
background-color: #F90;
z-index: 2;}

#news .swiper-slide{width: 540px;}
.news_new .swiper-container{padding:20px 0 0 0;}
.news_new {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start
}
.news_new>a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1
}
.news_new img {
	width: 40%
}
.news_new .new_info {
	width: 60%;
	padding-left: 20px
}
.news_new .new_info h3 {
	color: #099;
	margin-bottom: 10px
}
.news_new .new_info p {
	line-height: 1.5;
	padding-bottom: 10px
}
.offer .swiper-slide {
	width: 366px;
	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 .container{border-bottom:1px solid #ccc;padding:0 0 20px;}
.hotels .tab-wrap img {
}
.hotels .tab-content {
	border-top: 3px solid #ccc;margin-top: -3px;
}
.hotels .hotels-type {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding:10px 20px;/* border-bottom:3px solid #ccc; */ z-index:3;position:relative;transition:all 0.3s;
border-radius:10px;background: #EEE;margin:0 0 5px 0;
}
.hotels .hotels-type:hover{/*border-bottom:3px solid #999;*/background: #CEE;border-radius:20px;
}
.hotels .hotels-type svg{width:14px;height: 18px;fill:#099;transition:all 0.3s;}
.hotels .hotels-type:hover svg{fill:#099;}
.hotels .tab-wrap .tab:checked + label .hotels-type svg{fill:#099}
.hotels .tab-wrap .tab:checked+label .hotels-type {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all;
	border-bottom: 3px solid #099;background: #cee;margin:3px 0 0 0;
	border-radius: 30px 30px 0 0;}
.hotels .swiper-slide{width: 240px;
}
.grid_list {
	position: relative
}
.market-link,
.point_d a,
.grid_list .grid_link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;transition: all .5s;}
.market-link:hover,
.point_d a:hover,
.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;
}
.attraction_page .grid_list .grid_pic {padding:0;
	position: relative;
}
.grid_list .grid_pic a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3
}
.grid_list .grid_clear{display: block;clear: both;}
.grid_list .img_bg {
	object-fit: cover;
	width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.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: flex;
	flex-direction: row-reverse;
	align-items: flex-end
}
.grid_list .grid_booking {
	padding: 3px 25px;
	color: #fff;
	background-color: #f60
}
.grid_list .grid_prices {
	color: red;
	margin-right: 10px
}
.stroke{padding: 40px 0;margin: 0;position: relative;}
.stroke .areas {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;align-items: center;
	margin-bottom: 20px;flex-wrap: wrap;margin-left:-10px;
}
.stroke .area {flex: 1 1 260px;position: relative;margin: 0 0 10px 10px;text-align: center;}
.stroke .areas a {display: block;color:#000;position: relative;top:0;padding: 0 0 30px;transition:all 0.5s;z-index: 2}
.stroke .areas a:hover{}
.stroke .area img{transition:all 0.2s;width: 100%;object-fit: cover;height:190px;border-radius:20px}
.stroke .area a:hover img{opacity:0.8;}
.stroke .container{position: relative;z-index: 3}
.stroke .area span{transition:all 0.5s;text-align:center;display:inline-block;padding:0.3em 1em;letter-spacing:3px;background: rgba(230,230,230,0.8);position:relative;top:-10px;box-shadow:0 3px 5px -2px rgba(0,0,0,0);border-radius:5px}
.stroke .area a:hover span{background: rgba(230,230,230,1);box-shadow:0 3px 5px -2px rgba(0,0,0,0.8)}
.stroke .area .beroom{top: 0px;position: absolute;left: 50%;border-radius: 0 0 5px 5px;transform: translateX(-50%);padding: 0.2em 1em;background:rgba(0,0,0,0.5);color: #FFF;}
.stroke .area a:hover .beroom{background:rgba(0,0,0,0.8);color: #FFF;}

.route form {
	padding: 10px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	text-align: center;
	background-color: #ebfafd
}
.route form select {
	border: 1px solid;
	font-size: 16px;
	height: 35px;
	padding: 0 0 0 5px;
	width: 100%;
	color: #666;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin-right: 10px
}
.route form input {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	cursor: pointer;
	background-color: #099;
	color: #fff
}
.route .route-lists {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 20px 0
}
.route .route-list {
	width: calc(100%/3);
	background: url(../images/list-icon.html) no-repeat left;
	text-indent: 20px;
	line-height: 45px
}
.route .route-list a {
	color: #333;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block
}
.route .route-map {
	border: 1px solid #099;
	width: 100%
}
.route iframe {
	width: 100%;
	height: 500px
}


/* 其他活動連結 */
.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; }



.events{background:#FFE34D;display: block;width: 100%; border-bottom:100px solid #C7B81A;padding:0;position: relative;transition:all 1s;}
.events.season{background:#79cced;border-bottom:100px solid #9dc21a;}
.events::before,
.events::after{content:"";position: absolute;display: block;bottom:-82px;left: 0;width: 100%;height:40px;background:#c6b9b4}
.events::after{bottom:-80px;height:36px;border-bottom:2px solid #fff;border-top:2px solid #fff;}
.events h2{width:100%;max-width:1100px;text-align: center;padding: 20px 0 10px 0.5em;margin:0 auto;text-indent: 0;font-weight: bold;font-size:2em;color:#fff;background: #fb0;border-radius: 0 0 0.3em 0.3em;}
.events.season h2{background: #FF869D;}
.events .swiper-arrow .swiper-button-next{left:50%;transform: translateX(-50%); width: 100%;max-width:1100px;background: none;}
.events .swiper-arrow .swiper-button-next::before{content: "";display: block;border-top:3px solid;border-right:4px solid;border-color:#C60;width:80px;height:70px;right:20px;top:50%;transform: translateY(-50%) rotate(60deg) skewX(30deg);position: absolute;transition:border 1s;}
.events.season .swiper-arrow .swiper-button-next::before{border-color:#069;}
.events .swiper-arrow{position: relative;margin:0 0 -80px;z-index: 3;}
.events .swiper-slide{overflow: hidden; align-items:stretch;align-self:end;justify-content:center;display: flex;height: 100%;}
.events .ev_box{flex:1 1 1%; position: relative; padding: 0 80px 0 300px;max-width: 1100px;width:100%;}
.events .ev_box h3{color:#C60;font-size:2em;margin: 0 0 -1.5em -3em;position: relative;}
.events.season .ev_box h3{color:#069;}
.events .ev_box strong{font-size:1.3em;}
.events .ev_box::before{position: absolute;bottom: 0;left:20px;content:url("../images/bicycle.svg");display: block;width:250px;height: 160px;transition:all .5s}
.events .ev_box img{float:right;width:300px;margin:0 0 0 20px;}
#trees{width:1400px;max-width:115%;position: absolute;bottom:-10px;left:50%;transform: translateX(-50%);}
#trees rect{fill:#958B51;}
#trees path{transition:all 1s;}
.trees1{fill:#DBB800;}
.trees2{fill:#FF8951;}
.trees3{fill:#FFA400;}
.trees4{fill:#FF8951;}
.season .trees1{fill:#BDD624;}
.season .trees2{fill:#94B61B;}
.season .trees3{fill:#BDD624;}
.season .trees4{fill:#FF869D;}

.point{margin: 0 0 30px;}
.point ul{display: block;}
.point ul::before{content:"";display: block;clear: both;}
.point li{float:left;width: 13em}
.point.spa li{float:left;width: 8.5em}

nav.point ul a{font-size:1em;padding:5px 0;border-bottom: 0;text-align: left}
nav.point ul a:hover{border-bottom: 0;}


.container .msg-list {
	display: flex;
	margin: 0 0 3em;
	padding: 0;
	overflow: hidden;align-items:center;position: relative;
}
.container .msg-list h4{padding:1em 0 0.2em 0;}
.container .msg-list ol,
.container .msg-list ul{margin: 0 0 0 1.5em}
.container .msg-list ol{list-style-type:decimal;}
.container .msg-list ul{list-style-type: disc;}
.container .msg-list li{padding:0.2em 0;}
.container .msg-link {display: block; position: absolute;top:0;left: 0;width: 100%;height: 100%;z-index: 3;}
.container .msg-link:hover{background:rgba(0,0,0,0.1)}
.container .infotxt {
	display: inline-block;
	margin: 0 0 0 0;
}
.container .infotxt p{margin:0 0 1em 0;}
.container .infopic {flex: 0 0 400px;
	width: 400px;
	height: 300px;
	padding: 0;
	margin: 0 2em 0 0;
	overflow: hidden;
}
 .container .promo_bikelane_area .infopic {flex: 0 0 350px;
	width: 350px;
	height: 220px;
}
.container .infopic img{
	width:100%;
	height:100%;
}
.container .infolist {
	width: 410px;
	font-size: 1em;
	box-sizing: border-box;flex: 0 0 auto;
}
.container .infotxt h3 {
	margin: 0;
	color: #069;
	display: block;
	font-weight: normal;
}



.images_area{display: flex;flex-wrap: wrap;margin:0 0 10px -10px;justify-content:space-between;}
.images_area img{flex: 1 1 21%;max-width: 249px; margin:10px 0 0 10px;}
td{vertical-align: top;padding: 0.2em 0}
ul.citiestabs {display: flex;margin:0 0 10px -5px;width: 100%;font-size:1.2em;font-weight: bold;}
ul.citiestabs li {flex:1 1 21%;overflow:hidden;position:relative;margin:0 0 5px 5px;}
ul.citiestabs li a{display: block;padding: 0.5em 0;color: #fff;text-decoration: none;border-radius: 5px;background: #5da632;text-align: center;}
ul.citiestabs li a:hover {background: #2c7800;}
ul.citiestabs li.active a {background: #3e8bca;}
.citiestab_content .ubike{width:400px;height:300px;float:left;margin:0 10px 10px 0;}
.citiestab_content p{margin:0 0 15px 0;}
.promo_bikelane_area h2{background:none;text-indent:0;font-weight:bold;}

.citiestab_container a{color:#BB0033;position: relative;z-index: 5}
.citiestab_container .notice a::after,
.citiestab_container .infotxt a::after{transition: all .3s; content:"";display:block;background:#C69;position:absolute;bottom:0;left:0;height:2px;width:0%;}
.citiestab_container .notice a:hover:after,
.citiestab_container .infotxt a:hover:after{width:100%;}
.rateTbale{overflow: auto;max-width:calc( 100vw - 90px)}
.rateTbale .time{white-space: nowrap;}

.notice {
    width: 99%;
    border-radius: 10px;
    border: 1px solid #CCC;
    margin: 0 0 20px 0;
    padding:10px;
    overflow: hidden;
}
.notice h2{background:none;text-indent:0;color:#069;font-weight: bold;}
.notice ul ul{margin:.2em 0 0.7em 1.2em}
.notice ol{margin:0 0 0 1.2em;list-style: decimal}
.notice li{padding:0.2em 0}
.notice li > table{margin: 0 0 0 1.2em}
.rateTbale table,
.rateTbale th,
.rateTbale td{border: 3px solid #c9dae2;vertical-align:middle}
.rateTbale table{width: 100%; border-collapse: collapse;background-color:#deedfe;text-align:center;color:#002761;}
.rateTbale th{background-color: #6ab0d4;color: #fff;}
.source{text-align: right;font-size: 0.95em}
.rentListType > li{margin:0 0 1.5em 0} 

.lane_search{margin:0 0 10px -10px;padding:0;position: relative;z-index: 6}
.lane_search ul{display: flex;}
.lane_search li{flex: 1 1 auto;text-align: center;position: relative;}
.lane_search li a,
.lane_search li span{display: block; border:1px solid #ccc;color:#000;padding: 0.2em 0;transition: all .3s;}
.lane_search > ul > li{margin: 0 0 0 10px;z-index: 2}
.lane_search > ul > li.v{z-index: 3}
.lane_search li a:hover,
.lane_search > ul > li > span:hover{background:#e9eaf0}
.lane_search > ul > li.v > span,
.lane_search > ul > li.v > a,
.lane_search li.w a{background:#dff6ff}
.lane_search > ul > li > span::after{content:"";display: inline-block;width:.8em;height:.8em;border:2px solid #ccc;border-width:0 0 2px 2px;transform: rotate(-45deg) translate(5px,2px);transition: border .3s;}
.lane_search > ul > li.v > span::after{border-color:#2483cb}
.lane_search li > ul,
.lane_search li > div{width:450px;padding: 10px; top:2.2em; position: absolute;left:50%;transform: translateX(-50%);border: 1px solid #999;background: #fff;z-index: 3;box-shadow:0 3px 10px rgba(0,0,0,0.2);border-radius:10px;}
.lane_search li > div{left:auto;right: 0; transform: translateX(0);}
.lane_search > ul > li span::before{transition: all .3s; content:"";display:inline-block;width:0em;height:0em;border:1px solid #999;border-width:0 0 1px 1px;position: absolute;top:36px;left: 50%;background: #fff; transform: rotate(135deg) translate(-10%,70%);z-index: 5;} 
.lane_search > ul > li.v span::before{width:.8em;height:.8em;}
.lane_search li > ul{flex-wrap: wrap;}
.lane_search li > ul >li{white-space: nowrap;flex: 1 1 6em;margin:0;}
.lane_search li > ul > li > a{margin:5px;}
.lane_search input[type='text']{border:1px solid #ccc;flex: 1 1 auto;margin: 0 10px 0 0;padding:.2em .5em}
.lane_search input.btns{border: 0;cursor: pointer;background:#79cced;;color: #fff;font-size: 1em;padding:.2em 0; flex: 1 1 auto;transition:all .2s}
.lane_search input.btns:hover{background: #2483CB;}
.search_text{padding: 40px 0 0 0;/*  border-bottom: 1px solid #CCC; */}

.market-box {
	position: relative;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between;
 -webkit-box-orient:horizontal;
 -webkit-box-direction:reverse;
 -ms-flex-direction:row-reverse;
 flex-direction:row-reverse;
 margin-bottom:20px
}
.market-area {margin:60px 0 60px 0}
.market-area:nth-of-type(2n) .market-box {
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -ms-flex-direction:row;
 flex-direction:row
}
.hotels > h3,
.market-area .point_d > h3{border-bottom:2px solid #e9eaf0;color: #2483CB;padding: 0 0;margin: 10px 0 10px 0;}
.market-area h3 span{white-space: nowrap;align-self:self-start;
    font-size: 16px;
    padding: 5px 10px;
    color: #fff;
    background-color: #2483CB;
    display: inline-block;
    margin-right: 10px;
}
.market-pic {
 width:45%;
 padding-bottom:30%;
 min-height:200px;position: relative;
}
.market-pic img {width: 100%;object-fit: cover;height: 100%;position: absolute;top:0;left: 0;}
.market-info {width:100%;display: flex;flex-direction:column;justify-content:space-between;
}
.market-pic+.market-info { width:55%; padding-right:20px;}

.market-area:nth-of-type(2n) .market-pic+.market-info {padding-left:20px;padding-right:0}


.market-txt h3 {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 background-color:#e9eaf0;color: #000;
}

.market-info .hotels{margin:20px 0 0 0;position: relative;z-index: 4}
.market-info .hotels .swiper-container{padding:0;margin:0;}
.market-info .hotels .swiper-slide{width:260px; display:flex;align-items:stretch;}
.market-info .hotels .grid_pic{flex:0 0 120px;padding: 19% 0;margin:0 10px 0 0;height:100%;}
.market-info .hotels .grid_txt{align-self:center;}
.market-info .hotels .grid_name{white-space: normal;font-weight: normal; color:#000;font-size: 1.05em; overflow: inherit;}
.market-info .hotels .grid_rate{flex-direction: row;}
.market-info .hotels .swiper-arrow .swiper-button-prev,
.market-info .hotels .swiper-arrow .swiper-button-next{width: 30px;bottom: 0;top:auto;background-color:rgba(0,0,0,0.5);}
.market-info .hotels .swiper-arrow .swiper-button-prev{left:0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
.market-info .hotels .swiper-arrow .swiper-button-next{right:0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}

.market-area .point_d .swiper-container{padding:0;}
.market-area .point_d .swiper-slide{width: 240px;}
.market-area .point_d .swiper-slide img{height:175px}
.market-area .point_d .new_info h3{margin-top: 5px;font-size: 1.05em;color:#000;font-weight: normal;}

@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: 971px) {
	.map_box{width:550px;}
	.map .grid_list{display:none;}
	.map .grid_list.on{display:block;}
	.map .grid_list img{height:350px;}
}
@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
}
.news_new>a {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.news_new>a:hover {
	background-color: rgba(255,255,255,0.3)
}
.route input:hover {
	-webkit-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all
}
.route input:hover:hover {
	background-color: #13a0bd
}
}
@media (max-width: 1100px) {
.container, .fixed_content {
	padding: 0 10px
}
.hotels .container{border-bottom:1px solid #ccc;padding:0 10px 20px;}
article:not(:nth-of-type(1)) .swiper-button-next, article:not(:nth-of-type(1)) .swiper-button-prev {
display:none
}
.events .swiper-arrow .swiper-button-next{display: block}
.swiper-arrow {
	overflow: hidden
	}
	.events h2{border-radius: 0;}
	.events .ev_box{padding: 0 80px 10px 190px;}
	.events .ev_box::before{width: 190px;height: 120px;}
}
@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
}
.route .route-list {
	width: calc(100%/2)
}
.stroke {overflow: hidden;}
	.stroke .a2 img{transform: rotate(4.3deg) translate(0,0);}

.map .grid_list p{display:none;}
	
	#map_svg{display: none;}
	.events .ev_box{padding: 0 80px 90px 140px;}
	.events .ev_box::before{width: 190px;height: 120px;left: 130px;}	
#trees{max-width:100%;}
}

@media (max-width:820px) {
	.events .ev_box{padding:20px 80px 130px 50px;}
	.events .ev_box h3{margin: 0;}
	.lane_search > ul > li{position: inherit;}
	.lane_search li > ul,
	.lane_search li > div{top: 2.5em;left: 10px;width: calc(100% - 10px);transform: translateX(0);border-width:1px 0 0 0;padding:5px 0;border-radius: 0;box-shadow:none;}
	.lane_search li > div{padding:10px 5px;}
	.lane_search > ul > li.v span::before{display: none;}
}

@media (max-width: 740px) {
body {
	margin-bottom: 47px
}
article {
	margin: 20px 0
}
.bg {
	height: 345px;max-height: 100vw
}
.bg>.container {
	text-align: center;
	padding: 0 10px
}
.bg>.container::after{content:"";display: block;width: 2px;height: 100px}
.bg .bg-box svg{width: 1110px;max-width: 320vw;}
.bg .title {
	margin-bottom: 0;
	max-width: 300px
}
.bg > .container p{display: none;}
.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
}
	.tab-wrap .tab + label{width:50%;}
.events .ev_box{padding: 10px 80px 35vw 30px;}
.events .ev_box img{float: none;width: 32vw;margin: 0;position: absolute;bottom: 0;right: 90px;}
.events .ev_box::before{left:10vw;width:25vw;height:16vw;}
	.container .msg-list{display: block;}
.container .infopic,.container .promo_bikelane_area .infopic {
	width: 100%;
	height: auto;
}
	.lane_search.search_bar input.btns{padding:0.2em 0;text-align: center;width: 100%;margin: 0.2em 0 0}
.main>article {
	font-size: 1em;
}
.market-box{display: block;}
	.market-pic,.market-pic + .market-info{width:100%;}
	.market-pic{padding-bottom: 60%;}
	.market-info,.market-pic +.market-info,.market-area:nth-of-type(2n) .market-pic +.market-info{padding:20px 0 0 0;}
	.market-info .hotels .swiper-container{margin: 0;}
}

@media (max-width:560px) {
.images_area img{flex: 1 1 40%;min-width: 40%;height: 41vw;}
	.news_new {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column
}
	#news .swiper-slide{width: 300px;}
.news_new img {
	width: 100%;
	margin-bottom: 10px
}
.news_new .new_info {
	width: 100%;
	padding: 0
}
}
@media (max-width:510px) {
	.maple ul.m{float:none;display: flex;margin:20px 0 0 -10px; justify-content:center;}
	.maple .m li{float:none;}
	ul.citiestabs{font-size: 1em;}
	ul.citiestabs li{flex: 1 1 auto;}
}
@media (max-width: 480px) {
body {
	font-size: 18px
}
	.bg .bg-box{background-size: 750px auto;}
	.bg > .container p{display: none;}
	.map ul{font-size: 0.9em;}
.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
}
.stroke .areas a{padding: 0 0 15px;}
.route .route-list{width:100%}	
.map .grid_list h3{white-space:nowrap;}
.map .grid_list .icon1,
.map .grid_list .icon2,
.map .grid_list .icon3{width:60px;height:60px;margin:-35px 0 0 -15px;}
	
	.market-info .hotels .grid_name{font-size: 1em;}
	
	.lane_search ul{display: block;}
	.lane_search li > ul, .lane_search li > div{position: relative;top: 0;left: 0;width:100%;border-color: #ccc;}
	.lane_search > ul > li.v > span{border:0}
	.lane_search > ul > li{margin: 0 0 10px 10px;}
	.lane_search > ul > li.v{border:1px solid #666}
	.lane_search li > ul > li{flex: 1 1 5em;}
	.lane_search li > ul.ar > li{flex: 1 1 6em;}
	.lane_search li > div{flex-direction:column;}
	.lane_search input[type="text"]{margin: 0 0 10px 0;}
	
}
@media (max-width: 430px) {
	.lane_search li > ul > li{flex: 1 1 7em;}
}