@charset "UTF-8";
.viewmore-icon {
	width: auto;
	height: 50px;
	margin: 5px;
	padding: 0 30px;
	display: inline-block;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
	position: relative;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

.viewmore-icon:focus, .viewmore-icon:active:focus {
	outline-offset: -2px;
	text-decoration: none;
}

.viewmore-icon:active {
	background-image: none;
	outline: 0;
}

.book-icon > button, .exposure__item a::after, .exposure__item a::before, .viewpoint__item a::after, .viewpoint__title, .idx-about__img::before, .news__item, .cart__img img, .agroup img, .contact__left .social-icon img {
	-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* ===========共用=========== */
.font--30 {
	font-size: 30px;
}

.font--26 {
	font-size: 26px;
}

.font--20 {
	font-size: 20px;
}

.font--18 {
	font-size: 18px;
}

.font--16 {
	font-size: 16px;
}

.font--15 {
	font-size: 15px;
}

.font--12 {
	font-size: 12px;
}

.font--md {
	font-weight: 500;
}

.font--bold {
	font-weight: 700;
}

.font--green {
	color: #449D44;
}

.font--yellow {
	color: #F7FF84;
}

.font--black {
	color: #000;
}

.font--gray {
	color: #808080;
}

.font--gray500 {
	color: #525252;
}

.font--gray800 {
	color: #8d8d8d;
}

.font--blue {
	color: #0F6E9B;
}

.font--bgwt {
	background: #fff;
}

.font--center {
	text-align: center;
}

.font--line {
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 0 10px;
}

.page--shadow {
	-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background: #fff;
}

.page--line {
	border: 1px solid #dedede;
}

.page__title {
	padding-right: 40px;
	font-size: 30px;
	font-size: 1.875rem;
	line-height: 2.813rem;
	font-weight: 700;
	color: #343434;
	position: relative;
	z-index: 2;
	margin-bottom: 40px;
	background: url("../svg/title_bg.svg");
	background-position: left 10px;
	background-repeat: no-repeat;
}

.page__ply {
	grid-template-columns: repeat(2, 1fr) !important;
}

.page__gridbasic {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 25px;
}

.page__gridaccent {
	display: grid;
	grid-template-columns: 65% 1fr;
	grid-template-rows: auto;
	grid-gap: 25px;
}

.page__basic {
	padding: 100px 60px;
	margin-bottom: 30px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background: #fff;
	border-radius: 5px;
}

.page__formbasic {
	padding: 30px;
	margin-bottom: 30px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background: #fff;
	border-radius: 5px;
}

.page__formaccent, .page__formdefault {
	position: relative;
	padding: 0 30px 30px;
	margin-bottom: 30px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background: #fff;
	border-radius: 5px;
}

.page__formaccent::before, .page__formdefault::before {
	content: '';
	position: absolute;
	top: 0;
	left: 30px;
	width: 32px;
	height: 45px;
}

.page__formaccent::after, .page__formdefault::after {
	content: '';
	position: absolute;
	top: 31px;
	left: 30px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 17.5px 14px 17.5px;
	border-color: transparent transparent #ffffff transparent;
}

.page__formaccent:nth-child(odd)::before {
	background: #449D44;
}

.page__formaccent:nth-child(even)::before {
	background: #343434;
}

.page__formdefault::before {
	background: #343434;
}

.page--pgl25 {
	padding-left: 25px;
}

.page--pgtb10 {
	padding: 0 0 10px 45px;
}

.page--mgblose {
	margin-bottom: -5px;
}

.page--mgb5 {
	margin-bottom: 5px;
}

.page--mgb100 {
	margin-bottom: 100px;
}

.page--mgb150 {
	margin-bottom: 150px;
}

.page--full {
	width: 100%;
}

.page--bgColor {
	background: #FBFBFB;
}

.page--bgray {
	background: #f3f3f3;
}

.page--bgreen {
	background: #449D44;
}

.page--bgyellow {
	background: #FCFFCF;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.page--idxbg {
	background: url(../webp/idx-bg.webp) 50% bottom no-repeat;
}

.page--pgb100 {
	padding-bottom: 100px;
}

.page--samemgt {
	margin-top: 70px;
}

@media only screen and (max-width: 640px) {
	.page--pgtb10 {
		padding: 0 0 10px 28px;
	}
}

.form__space {
	padding: 5px 0;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.flex--end {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.flex--between {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.flex--acenter {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

@media only screen and (max-width: 768px) {
	.page__ply {
		grid-template-columns: 1fr !important;
	}
	.page__gridbasic {
		grid-template-columns: 1fr;
	}
	.page__gridaccent {
		grid-template-columns: 1fr;
	}
	.page__basic {
		padding: 40px 15px;
	}
	.page__formbasic {
		padding: 15px;
	}
	.page__formaccent, .page__formdefault {
		padding: 0 15px 15px;
	}
	.page__formaccent::before, .page__formdefault::before {
		left: 15px;
		width: 21px;
		height: 33px;
	}
	.page__formaccent::after, .page__formdefault::after {
		content: '';
		position: absolute;
		top: 23px;
		left: 15px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 10px 10px;
		border-color: transparent transparent #ffffff transparent;
	}
	.page--pgb100 {
		padding-bottom: 60px;
	}
	.page--mgb100, .page--mgb150 {
		margin-bottom: 60px;
	}
}

@media only screen and (max-width: 768px) {
	.page--pgb100 {
		padding-bottom: 40px;
	}
	.page--mgb100, .page--mgb150 {
		margin-bottom: 40px;
	}
}

/*==============共用按鈕===============*/
.del-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 35px !important;
	padding: 0 15px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	color: #8d8d8d;
	font-size: 16px;
	border-radius: 3px;
	border: 1px solid #ddd;
}

.del-icon i {
	margin-right: 4px;
	font-size: 20px;
}

.del-icon:hover {
	background: #343434;
	color: #fff;
	border: 1px solid #343434;
}

.select-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 50px !important;
	padding: 0 15px;
	margin-left: 5px;
	align-items: center;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
	border: 1px solid #449D44;
	background: #449D44;
}

.select-icon:checked, .select-icon:hover {
	background: #333;
	border: 1px solid #333;
}

.select-icon i {
	margin-right: 4px;
	font-size: 20px;
}

.apply-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 120px;
	height: 40px !important;
	margin-left: 5px;
	align-items: center;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
	border: 1px solid #0F6E9B;
	background: #0F6E9B;
	cursor: pointer;
}

.apply-icon:checked, .apply-icon:hover {
	background: #333;
	border: 1px solid #333;
}

.viewmore-icon {
	margin: 70px 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-weight: 700;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	color: #449D44;
	border: 1px solid #449D44;
	background: transparent;
}

.viewmore-icon:hover {
	background: #449D44;
	border: 1px solid #449D44;
}

.book-icon {
	margin: -20px 0 20px 0;
	width: 100%;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 20px;
	font-weight: 700;
}

.book-icon > button {
	width: 100%;
	height: 40px;
	background: #FFF67E;
	color: #5B4E34;
	text-align: center;
	border: none;
	cursor: pointer;
	border-radius: 6px;
}

.book-icon > button:hover {
	background: #FAB617;
	color: #fff;
}

.same-icon {
	position: absolute;
	right: 0;
	top: -49px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background: #f2f2f2;
	border: 1px solid #D8D8D8;
	border-width: 1px 1px 0 1px;
	border-radius: 5px 5px 0 0;
}

.same-icon input[type=checkbox].css-checkbox, .policy-icon input[type=checkbox].css-checkbox {
	display: none;
}

.same-icon input[type=checkbox].css-checkbox + label.css-label.sam01, .policy-icon input[type=checkbox].css-checkbox + label.css-label.sam01 {
	padding: 0 15px 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	line-height: 46px;
	background-repeat: no-repeat;
	background-position: 8px 11px;
	font-size: 16px;
	color: #0388C7;
	vertical-align: middle;
	cursor: pointer;
}

.same-icon input[type=checkbox].css-checkbox:checked + label.css-label.sam01, .policy-icon input[type=checkbox].css-checkbox:checked + label.css-label.sam01 {
	background-position: 8px -40px;
}

.same-icon label.css-label.sam01, .policy-icon label.css-label.sam01 {
	background: url(../png/csscheckbox-s.png);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	height: 46px;
	overflow: hidden;
}

.same-icon label.css-label.sam01 a, .policy-icon label.css-label.sam01 a {
	color: #449D44;
	text-decoration: underline !important;
}

@media only screen and (max-width: 640px) {
	.viewmore-icon {
		margin: 30px 0;
	}
}

/*==============共用靜態文字==============*/
.out__content ul {
	margin-bottom: 10px;
}

.out__content ul li {
	padding-left: 30px;
}

.out__content p {
	margin-bottom: 10px;
}

/*==============編輯器==============*/
.edit__news {
	padding: 30px;
	margin-bottom: 40px;
	border: 1px solid #DEDEDE;
	border-width: 1px 0 1px 0;
}

@media only screen and (max-width: 768px) {
	.edit__news {
		padding: 15px;
	}
}

.ticket-pick {
	padding: 5px 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.ticket-pick__input {
	opacity: 0;
	position: absolute;
}

.ticket-pick__label {
	cursor: pointer;
	display: block;
}

.ticket-pick__text {
	position: relative;
	vertical-align: middle;
	padding: 5px 10px 5px 0;
	font-weight: normal;
	max-width: initial;
}

.ticket-pick__text .ticket-pick__option, .ticket-pick__text .ticket-pick__note {
	display: inline-block;
	vertical-align: top;
	font-weight: 700;
}

.ticket-pick__text .ticket-pick__option {
	margin-right: 5px;
	position: relative;
}

.ticket-pick__text .ticket-pick__option::before {
	content: '';
	position: absolute;
	-webkit-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	display: none;
}

.ticket-pick__box {
	padding-top: 5px;
	padding-left: 23px;
	display: none;
}

.ticket-pick__text--radiobox {
	line-height: 23px;
}

.ticket-pick__text--radiobox .ticket-pick__option, .ticket-pick__text--radiobox .ticket-pick__option::before {
	border-radius: 23px;
}

.ticket-pick__text--radiobox .ticket-pick__option {
	width: 23px;
	height: 23px;
	background-color: #fff;
	border: 1px solid #dedede;
}

.ticket-pick__text--radiobox .ticket-pick__option::before {
	width: 13px;
	height: 13px;
	margin: auto;
	background: #1e9813;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.ticket-pick__text--checkbox {
	line-height: 23px;
}

.ticket-pick__text--checkbox .ticket-pick__option, .ticket-pick__text--checkbox .ticket-pick__note::before {
	border-radius: 3px;
}

.ticket-pick__text--checkbox .ticket-pick__option {
	width: 23px;
	height: 23px;
	background-color: #fff;
	border: 1px solid #dedede;
}

.ticket-pick__text--checkbox .ticket-pick__option::before {
	width: 13px;
	height: 7.659px;
	border-style: solid;
	border-color: #1e9813;
	border-width: 0 0 3px 3px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: rotate(-45deg) translate(2px, -2px);
	    -ms-transform: rotate(-45deg) translate(2px, -2px);
	        transform: rotate(-45deg) translate(2px, -2px);
}

.ticket-pick__text--btn {
	width: 180px;
	height: 40px;
	padding: 8px 0px;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #555;
	font-weight: 500;
	border-radius: 99rem;
	text-align: center;
	margin-right: 15px;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

.ticket-pick__text--btn:hover {
	background-color: #36BE81;
	border: 1px solid #1FA167;
	color: #fff;
}

.ticket-pick__input:checked + .ticket-pick__label > .ticket-pick__text--radiobox .ticket-pick__option::before,
.ticket-pick__input:checked + .ticket-pick__label > .ticket-pick__text--checkbox .ticket-pick__option::before {
	display: block;
}

.ticket-pick__input:checked + .ticket-pick__label .ticket-pick__text--btn {
	background-color: #36BE81;
	border: 2px solid #1FA167;
	color: #fff;
}

.ticket-pick__input:checked + .ticket-pick__label > .ticket-pick__box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.ticket-pick__input[disabled] {
	cursor: not-allowed;
}

.ticket-pick__input[disabled] + .ticket-pick__label {
	-webkit-filter: opacity(50%);
	        filter: opacity(50%);
	opacity: 0.4;
	cursor: not-allowed;
}

.ticket-pick-tips {
	padding: 5px 10px 0 0;
	display: block;
	color: #E5916C;
}

.ticket-pick-tips::before {
	content: "\e97e";
	font-family: 'icomoon';
	margin: -2px 10px 0 10px;
	display: inline-block;
	vertical-align: middle;
	font-size: 17px;
}

@media only screen and (max-width: 540px) {
	.ticket-pick__text--btn {
		width: 160px;
	}
}

/*=============汽車接駁價格表===========*/
.shuttle {
	padding: 100px 50px;
}

.shuttle__main {
	width: 100%;
	display: grid;
	grid-template-columns: 250px 1fr;
	margin-bottom: 50px;
}

.shuttle__main li:nth-of-type(2) {
	padding-left: 30px;
}

.shuttle__img {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 65%;
}

.shuttle__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.shuttle__txt {
	padding: 10px 0 0 20px;
}

.shuttle__tip {
	display: block;
	position: relative;
	font-size: 18px;
	line-height: 20px;
	color: #000;
	background: #ABEFA8;
	margin-bottom: 4px;
	padding: 8px 15px 8px 48px;
	border-radius: 4px;
}

.shuttle__tip i {
	position: absolute;
	left: 16px;
	top: 8px;
}

.shuttle__head {
	color: #666;
	font-weight: 500;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.875rem;
	margin-bottom: 3px;
}

.shuttle__info, .shuttle__head {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 15px;
}

.shuttle__info {
	margin-bottom: 50px;
}

.shuttle__item {
	display: grid;
	grid-template-columns: 1fr 150px;
	gap: 2px;
}

.shuttle__item p {
	padding-left: 15px;
}

.shuttle__area, .shuttle__price {
	font-size: 16px;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #FCFFCF;
}

.shuttle__area i, .shuttle__price i {
	font-size: 15px;
}

.shuttle__price {
	color: #449D44;
}

.shuttlepic .slick-arrow {
	width: 40px;
	height: 40px;
	margin: auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	cursor: pointer;
}

.shuttlepic i {
	font-size: 30px;
	line-height: 40px;
	color: #fff;
	opacity: 0.5;
}

.shuttlepic:hover i {
	opacity: 1;
	-webkit-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}

.shuttlepic .prev {
	left: 0;
}

.shuttlepic .next {
	right: 0;
}

@media only screen and (max-width: 1200px) {
	.shuttle__info, .shuttle__head {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 20px;
	}
	.shuttle__head .shuttle__item:nth-of-type(3) {
		display: none;
	}
	.shuttle__main {
		grid-template-columns: 100%;
	}
	.shuttle__main li:nth-of-type(2) {
		padding-left: 0;
	}
	.shuttle__img {
		width: 100%;
		padding-bottom: 55%;
	}
	.shuttle__txt {
		padding: 30px 0 0 0;
	}
}

@media only screen and (max-width: 768px) {
	.shuttle {
		padding: 30px 20px;
	}
	.shuttle__info, .shuttle__head {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.shuttle__head .shuttle__item:nth-of-type(2) {
		display: none;
	}
}

.panel {
	display: none;
	width: 100% !important;
	margin: auto;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

/*=========接駁展開=======*/
.expand {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.expand__item {
	width: 100%;
	display: none;
}

input[type=checkbox].css-checkbox {
	display: none;
}

input[type=checkbox].css-checkbox + label.css-label.pickup {
	width: 150px;
	padding: 0 15px 0 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	line-height: 40px;
	background-repeat: no-repeat;
	background-position: 8px 7px;
	border-radius: 3px;
	font-size: 18px;
	color: #fff;
	font-weight: 700;
	vertical-align: middle;
	cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label.pickup {
	background-position: 8px -44px;
	background-color: #119E5F;
}

label.css-label.pickup {
	background: #4AC172 url(../png/csscheckbox-s.png);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	height: 40px;
	overflow: hidden;
	margin-left: 10px;
}

label:hover.css-label.pickup {
	background: #119E5F url(../png/csscheckbox-s.png);
}

.agree-icon {
	display: inline-block;
	margin: 20px 0;
}

.agree-icon input[type=checkbox].css-checkbox {
	display: none;
}

.agree-icon input[type=checkbox].css-checkbox + label.css-label.agree {
	padding-left: 45px;
	display: inline-block;
	line-height: 30px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 20px;
	vertical-align: middle;
	cursor: pointer;
}

.agree-icon input[type=checkbox].css-checkbox:checked + label.css-label.agree {
	background-position: 0 -60px;
}

.agree-icon label.css-label.agree {
	background-image: url(../png/csscheckbox.png);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	height: 30px;
	overflow: hidden;
}

/* ===========表頭購物車icon自己寫的=========== */
.header-navmain {
	width: calc(100% - 353px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
}

.header-ticket {
	display: block;
	position: relative;
	width: 110px;
	height: 90px;
	background: #343434 url(../svg/header-ticket.svg) 50% 28px no-repeat;
	-webkit-box-ordinal-group: 7;
	    -ms-flex-order: 6;
	        order: 6;
}

.header-ticket-num {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 37px;
	height: 37px;
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 15px;
	font-size: 0.938rem;
	line-height: 2.313rem;
	color: #fff;
	background: #36BE81;
	border-radius: 99rem;
}

.header-ticket a {
	display: block;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 1200px) {
	.header-ticket {
		width: 88px;
		height: 70px;
		background-size: 50px 30px;
	}
	.header-navmain {
		width: auto;
	}
}

/*============搜尋區塊=============*/
.search {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1280px;
	margin: -160px auto  auto;
}

.search__main {
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 5px;
	padding: 10px 30px 20px;
}

.search__title {
	display: block;
	position: relative;
	font-size: 26px;
	font-weight: 700;
	z-index: 4;
}

.search__title p {
	font-family: "Poppins";
	display: inline-block;
	font-size: 22px;
	font-style: italic;
	letter-spacing: 2px;
	color: #fff;
	text-shadow: 0.1em 0.1em 0.2em black;
}

@media only screen and (max-width: 1200px) {
	.search__title p {
		display: none;
	}
}

.search__title::before {
	display: inline-block;
	content: "▸ Book Tickets";
	width: 250px;
	padding-left: 45px;
	margin-right: 40px;
	margin-bottom: -2px;
	background: #fff;
	color: #449D44;
	font-size: 26px;
	font-size: 1.625rem;
	line-height: 3.125rem;
	font-weight: 700;
	border-radius: 5px 10px 0 0;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 -2px 3px;
	        box-shadow: rgba(0, 0, 0, 0.15) 0 -2px 3px;
}

@media only screen and (max-width: 1440px) {
	.search {
		margin: -5px auto auto;
	}
}

@media only screen and (max-width: 768px) {
	.search__main {
		padding: 20px 15px;
		border-radius: 0 20px 0 0;
	}
	.search__title p {
		font-size: 16px;
	}
}

@media only screen and (max-width: 640px) {
	.search__title p {
		display: none;
	}
}

/* ============首頁區-廣告============== */
.exposure {
	margin: 35px auto 95px;
}

.exposure .slick-slide {
	margin: 0 12px;
}

.exposure__item {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.exposure__item .more-icon {
	position: absolute;
	left: 0;
	bottom: 22px;
	color: #1492E6;
	font-weight: bold;
	background: #fff;
	padding: 10px;
	border-radius: 1px 4px 4px 1px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	pointer-events: none;
	-webkit-transform: translate(-100%, 0);
	    -ms-transform: translate(-100%, 0);
	        transform: translate(-100%, 0);
	-webkit-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1) 0.1s;
	-o-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1) 0.1s;
	transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1) 0.1s;
	z-index: 7;
}

.exposure__item .more-icon i {
	margin-left: 10px;
	color: #333;
	font-weight: normal;
}

.exposure__item a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
}

.exposure__item a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	margin: auto;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(30, 128, 30, 0.75)), to(rgba(22, 135, 186, 0.75)));
	background: -o-linear-gradient(top, rgba(30, 128, 30, 0.75) 0%, rgba(22, 135, 186, 0.75) 100%);
	background: linear-gradient(to bottom, rgba(30, 128, 30, 0.75) 0%, rgba(22, 135, 186, 0.75) 100%);
}

.exposure__item a::before {
	content: attr(title);
	width: 90%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin: auto;
	z-index: 3;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.625rem;
	text-align: center;
	font-weight: 500;
	color: #fff;
}

.exposure__item:hover {
	-webkit-transform: translate(0, 16px);
	    -ms-transform: translate(0, 16px);
	        transform: translate(0, 16px);
	-webkit-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.exposure__item:hover a::before {
	-webkit-transform: translate(0, -25%);
	    -ms-transform: translate(0, -25%);
	        transform: translate(0, -25%);
}

.exposure__item:hover .more-icon {
	-webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	        transform: translate(0, 0);
}

.exposure__img {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 40%;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.exposure__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.exposure .prev {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: -25px;
	top: 35%;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	border-radius: 50em;
	text-align: center;
	background: #fff;
	-webkit-box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
	        box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
}

.exposure .prev::after {
	content: "\e926";
	display: block;
	font-size: 42px;
	font-size: 2.625rem;
	line-height: 3.938rem;
	color: #000;
	font-family: 'icomoon' !important;
}

.exposure .next {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	right: -25px;
	top: 35%;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	border-radius: 50em;
	text-align: center;
	background: #fff;
	-webkit-box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
	        box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
}

.exposure .next::after {
	content: "\e927";
	font-size: 42px;
	font-size: 2.625rem;
	line-height: 3.938rem;
	color: #000;
	font-family: 'icomoon' !important;
}

.exposure .next:hover::after {
	color: #449D44;
}

/*===========首頁區-碼頭輪播============*/
.idx-destination {
	display: block;
	position: relative;
	background: url(../jpg/pic_03.jpg) 50% 50% fixed no-repeat;
	background-size: cover;
}

.idx-destination__txt {
	margin: 40px 0 70px;
}

.idx-destination ul {
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 30px 0;
	padding-top: 200px;
	padding-bottom: 100px;
}

.idx-destination ul li {
	color: #fff;
}

@media only screen and (max-width: 1024px) {
	.idx-destination__txt {
		margin: 15px;
	}
	.idx-destination ul {
		grid-template-columns: 100%;
	}
}

@media only screen and (max-width: 640px) {
	.idx-destination::before {
		display: none;
	}
	.idx-destination ul {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/*==========海浪=========*/
.waves {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px;
	min-height: 100px;
	max-height: 100px;
	-webkit-transform: scaleY(-1);
	    -ms-transform: scaleY(-1);
	        transform: scaleY(-1);
}

.parallax > use {
	-webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
	        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax > use:nth-child(1) {
	-webkit-animation-delay: -2s;
	        animation-delay: -2s;
	-webkit-animation-duration: 7s;
	        animation-duration: 7s;
}

.parallax > use:nth-child(2) {
	-webkit-animation-delay: -3s;
	        animation-delay: -3s;
	-webkit-animation-duration: 10s;
	        animation-duration: 10s;
}

.parallax > use:nth-child(3) {
	-webkit-animation-delay: -4s;
	        animation-delay: -4s;
	-webkit-animation-duration: 13s;
	        animation-duration: 13s;
}

.parallax > use:nth-child(4) {
	-webkit-animation-delay: -5s;
	        animation-delay: -5s;
	-webkit-animation-duration: 20s;
	        animation-duration: 20s;
}

@-webkit-keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		        transform: translate3d(-90px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(85px, 0, 0);
		        transform: translate3d(85px, 0, 0);
	}
}

@keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		        transform: translate3d(-90px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(85px, 0, 0);
		        transform: translate3d(85px, 0, 0);
	}
}

@media (max-width: 768px) {
	.waves {
		height: 40px;
		min-height: 40px;
	}
}

/*=========碼頭輪播============*/
.viewpoint {
	padding-left: 80px;
}

.viewpoint .slick-slide {
	margin: 0 20px;
}

.viewpoint__item {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	margin-bottom: 30px;
}

.viewpoint__item a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.viewpoint__item a::after {
	content: '';
	position: absolute;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	margin: auto;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 24, 67, 0)), to(#0668da));
	background: -o-linear-gradient(top, rgba(0, 24, 67, 0) 0%, #0668da 100%);
	background: linear-gradient(to bottom, rgba(0, 24, 67, 0) 0%, #0668da 100%);
}

.viewpoint__item:hover {
	-webkit-transform: translate(-15px, -15px);
	    -ms-transform: translate(-15px, -15px);
	        transform: translate(-15px, -15px);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
	        box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 8px;
}

.viewpoint__item:hover a::before, .viewpoint__item:hover a::after {
	opacity: 0;
}

.viewpoint__item:hover .viewpoint__title {
	-webkit-transform: translate(0, -80%);
	    -ms-transform: translate(0, -80%);
	        transform: translate(0, -80%);
	text-shadow: black 0.1em 0.1em 0.2em;
}

.viewpoint__item:hover .viewpoint__info {
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
}

.viewpoint__item:hover .viewpoint__icon {
	-webkit-transform: translateY(-40%);
	    -ms-transform: translateY(-40%);
	        transform: translateY(-40%);
	opacity: 1;
}

.viewpoint__icon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 90px;
	height: 90px;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	text-align: center;
	border-radius: 99rem;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(100%);
	    -ms-transform: translateY(100%);
	        transform: translateY(100%);
	-webkit-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	-o-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	z-index: 7;
	-webkit-box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
	        box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
}

.viewpoint__icon i {
	width: 100%;
	font-size: 38px;
	font-weight: bold;
	color: #449D44;
}

.viewpoint__title {
	display: block;
	margin: auto;
	position: relative;
	font-size: 26px;
	font-size: 1.625rem;
	line-height: 1.625rem;
	font-weight: 500;
	color: #fff;
	z-index: 3;
}

.viewpoint__title::before {
	content: '';
	display: block;
	width: 100%;
	height: 16px;
	background: url("../svg/star.svg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.viewpoint__info {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 15px 25px;
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, from(rgba(130, 190, 132, 0.8)), to(rgba(12, 76, 163, 0.8)));
	background: -o-linear-gradient(left, rgba(130, 190, 132, 0.8) 0%, rgba(12, 76, 163, 0.8) 100%);
	background: linear-gradient(to right, rgba(130, 190, 132, 0.8) 0%, rgba(12, 76, 163, 0.8) 100%);
	z-index: 3;
	-webkit-transition: .4s ease-in-out;
	-o-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
	-webkit-transform: translateY(100%);
	    -ms-transform: translateY(100%);
	        transform: translateY(100%);
}

.viewpoint__info p {
	overflow: hidden;
	display: -webkit-box;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.viewpoint__img {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 70%;
}

.viewpoint__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.viewpoint .prev {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: 25px;
	bottom: 150px;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	border-radius: 50em;
	text-align: center;
	border: 1px solid #fff;
}

.viewpoint .prev::after {
	content: "\e926";
	display: block;
	font-size: 42px;
	font-size: 2.625rem;
	line-height: 3.938rem;
	color: #fff;
	font-family: 'icomoon' !important;
}

.viewpoint .prev:hover {
	background: #fff;
}

.viewpoint .prev:hover::after {
	color: #23518F;
}

.viewpoint .next {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: 25px;
	bottom: 85px;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	border-radius: 50em;
	text-align: center;
	border: 1px solid #fff;
}

.viewpoint .next::after {
	content: "\e927";
	font-size: 42px;
	font-size: 2.625rem;
	line-height: 3.938rem;
	color: #fff;
	font-family: 'icomoon' !important;
}

.viewpoint .next:hover {
	background: #fff;
}

.viewpoint .next:hover::after {
	color: #23518F;
}

@media only screen and (max-width: 768px) {
	.viewpoint {
		padding-left: 0;
	}
	.viewpoint .slick-slide {
		margin: 0 10px;
	}
	.viewpoint__item {
		margin-bottom: 15px;
	}
	.viewpoint .prev {
		left: 0;
		top: 35%;
		bottom: inherit;
	}
	.viewpoint .next {
		left: inherit;
		right: 0;
		top: 35%;
		bottom: inherit;
	}
}

/*首頁about*/
.idx-about {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 30px 0;
}

.idx-about li {
	color: #333;
}

.idx-about__info {
	padding-right: 110px;
}

.idx-about__txt {
	margin-top: 40px;
}

.idx-about__img {
	display: block;
	position: relative;
	padding-bottom: 70%;
	width: 100%;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.idx-about__img::before {
	content: 'EKA JAYA  →';
	padding: 8px 30px;
	position: absolute;
	left: -30px;
	bottom: 60px;
	z-index: 3;
	font-size: 26px;
	color: #fff;
	background: #449D44;
	pointer-events: none;
}

.idx-about__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.idx-about__img:hover::before {
	background: #227422;
}

.idx-about__img:hover img {
	-webkit-transform: translate(30px, 0);
	    -ms-transform: translate(30px, 0);
	        transform: translate(30px, 0);
}

@media only screen and (max-width: 1024px) {
	.idx-about {
		grid-template-columns: 100%;
	}
	.idx-about__txt {
		margin: 15px;
	}
	.idx-about__info {
		padding-right: 0;
	}
}

/* ===========News=========== */
.news {
	display: grid;
	grid-template-columns: 20% 80%;
}

.news__item {
	border-top: 1px solid #DEDEDE;
}

.news__item:last-child {
	border-bottom: 1px solid #DEDEDE;
}

.news__item:hover {
	background: #E0F6F1;
	-webkit-transform: translate(-10px, -10px);
	    -ms-transform: translate(-10px, -10px);
	        transform: translate(-10px, -10px);
}

.news__img {
	width: 170px;
	height: 120px;
	margin: 10px 0 10px 10px;
}

.news__img img {
	display: block;
	width: 100%;
	height: auto;
}

.news__date {
	width: 70px;
	margin: 30px 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	color: #449D44;
	font-family: "Century Gothic";
	text-align: center;
	letter-spacing: 0;
}

.news__date .day {
	font-size: 48px;
	line-height: 36px;
	font-weight: bold;
	width: 100%;
}

.news__info {
	width: calc(100% - 190px - 130px);
}

.news__txt {
	overflow: hidden;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	padding-top: 8px;
}

@media only screen and (max-width: 1024px) {
	.news {
		grid-template-columns: 100%;
	}
}

@media only screen and (max-width: 768px) {
	.news__img {
		display: none;
	}
	.news__date {
		margin: 15px;
	}
	.news__info {
		padding: 15px;
		width: calc(100% - 130px);
	}
}

/*=============步驟==============*/
.step {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background: #E8E8E8;
	margin-bottom: 30px;
	border-radius: 5px;
}

.step p {
	padding: 0 55px 0 33px;
	font-size: 16px;
	font-size: 1rem;
	line-height: 2.5rem;
	color: #8D8D8D;
	position: relative;
}

.step p::after {
	content: '';
	position: absolute;
	right: 0;
	width: 20px;
	height: 40px;
	background: url("../svg/tria-icon.svg");
	background-position: right 50%;
	background-repeat: no-repeat;
}

.step p.on {
	color: #333;
}

.step p.on::before {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	right: 20px;
	width: 21px;
	height: 22px;
	background: url("../svg/icon_01.svg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

@media only screen and (max-width: 768px) {
	.step {
		display: none;
	}
}

/*=======購物車自己寫=========*/
.form-selection__text--btn {
	margin-left: 15px;
}

/* ===========購物車=========== */
.cart {
	margin-bottom: 20px;
	border-radius: 4px;
	overflow: hidden;
}

.cart__date {
	padding-left: 45px;
	line-height: 50px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.cart__time {
	position: relative;
}

.cart__time::after {
	content: '';
	position: absolute;
	top: 15px;
	width: 100%;
	height: 1px;
	background: #dedede;
	z-index: -1;
}

.cart__area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.cart__area p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	z-index: 3;
	font-weight: 700;
}

.cart__area p:nth-of-type(1)::after {
	content: '';
	margin: 0 10px;
	background: url("../svg/line.svg");
	background-position: left 50%;
	background-repeat: no-repeat;
	width: 50px;
	height: 10px;
}

.cart__img {
	display: block;
	position: relative;
	overflow: hidden;
	width: 25%;
	padding-bottom: 20%;
}

.cart__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.cart__info {
	width: 75%;
	padding: 10px 15px;
	z-index: 2;
}

@media only screen and (max-width: 640px) {
	.cart__date {
		padding-left: 28px;
	}
	.cart__img {
		width: 100%;
		padding-bottom: 40%;
	}
	.cart__info {
		width: 100%;
	}
}

/* ===========右側船票=========== */
.ticket__main {
	background: #449D44;
	border-radius: 8px;
	overflow: hidden;
}

.ticket__main::before {
	content: 'Tickets';
	display: block;
	color: #F7FF84;
	font-weight: 700;
	font-size: 26px;
	font-size: 1.625rem;
	line-height: 4.688rem;
	text-align: center;
	border-bottom: 4px solid #BBE6BB;
}

.ticket__info {
	padding: 25px;
	font-size: 16px;
	color: #fff;
	border-bottom: 3px dashed  #BCE0BC;
}

.ticket__info:last-child {
	border-bottom: none;
}

.ticket__info p.ticktxt {
	display: block;
}

.ticket__boat {
	margin-bottom: 8px;
}

.ticket__title {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
}

.ticket__title p {
	padding: 0 10px;
	z-index: 3;
	background: #449D44;
}

.ticket__title i {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 25px;
}

.ticket__title::before {
	content: '';
	position: absolute;
	top: 50%;
	width: 80%;
	margin: auto;
	height: 1px;
	background: #fff;
	z-index: 1;
}

.ticket__title::after {
	content: '';
	position: absolute;
	right: -40px;
	top: 0;
	width: 30px;
	height: 30px;
	background: #FBFBFB;
	border-radius: 30px 0 0 30px;
	z-index: 3;
}

.ticket__total {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 25px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	background: #0388C7;
}

.ticket__total::before {
	content: "Grand Total";
	font-size: 18px;
}

.ticket__discount {
	padding: 25px;
	background: #F7FF84;
}

.ticket__discount p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	color: #449D44;
	font-size: 18px;
}

.ticket__discount p::before {
	content: attr(title);
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

/*============相簿功能=============*/
/* ===========首頁大圖=========== */
.photo__item, .post__item {
	display: block;
	width: 100%;
}

.photo__item img, .post__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.photo .slick-arrow, .post .slick-arrow {
	width: 40px;
	height: 40px;
	margin: auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	cursor: pointer;
}

.photo .slick-arrow i, .post .slick-arrow i {
	font-size: 30px;
	line-height: 40px;
	color: #fff;
	opacity: 0.5;
}

.photo .slick-arrow:hover i, .post .slick-arrow:hover i {
	opacity: 1;
	-webkit-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}

.photo .prev, .post .prev {
	left: 0;
}

.photo .next, .post .next {
	right: 0;
}

/* ===========加減=========== */
.qry-contain {
	border: 1px solid #d4d9de;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 40px;
	text-align: center;
}

.qty {
	color: #4a4e5c;
	font-size: 20px;
	width: calc(100% - 35px * 2 - 2px);
	text-align: center;
	line-height: 40px;
	height: 39px;
	border: 1px solid #d4d9de;
	border-width: 0px 0 1px 0;
}

.qty-btn {
	cursor: pointer;
	font-weight: 900;
	line-height: 44px;
	display: table-cell;
	width: 35px;
}

.qty-btn.increase-btn {
	color: #ff5353;
	background: #fff;
	border-left: 1px solid #d4d9de;
}

.qty-btn.disabled {
	color: #aaa;
}

input.qtyplus {
	border: none;
}

input.qtyminus {
	border: none;
}

.qty-counter {
	border: 1px solid #d4d9de;
	border-radius: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 44px;
	text-align: center;
}

.qty-counter .qty-counter-btn {
	cursor: pointer;
	font-weight: 900;
	line-height: 44px;
	display: table-cell;
	width: 44px;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.qty-counter .qty-counter-btn.disabled {
	color: #aaa;
	background-color: #f0f0f0;
}

.qty-counter .qty-counter-btn.unselected.increase-btn {
	color: #ff5353;
}

.qty-counter .decrease-btn {
	color: #aaa;
	float: left;
}

.qty-counter .increase-btn {
	color: #ff5353;
	float: right;
}

.qty-counter .qty-number {
	display: inherit;
	border-right: 1px solid #d4d9de;
	border-left: 1px solid #d4d9de;
	width: calc(100% - 44px * 2 - 2px);
}

.qty-counter .qty-number-input {
	color: #4a4e5c;
	font-size: 20px;
	width: 100%;
	text-align: center;
	line-height: 43px;
	height: 43px;
	border: 1px solid #d4d9de;
	border-width: 0px 0 1px 0;
}

.qty-counter .qty-number-input::-webkit-inner-spin-button,
.qty-counter .qty-number-input ::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

@media only screen and (max-width: 768px) {
	.qry-contain {
		margin-top: 15px;
	}
}

/*=======四大張相簿=======*/
.agroup {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-template-areas: "a b c d" "e f g g" "h h i j" "k l m n" "o o p p";
	grid-gap: 10px;
}

.agroup img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
	opacity: 1;
}

.agroup-a, .agroup-b, .agroup-c, .agroup-d, .agroup-e, .agroup-f, .agroup-g, .agroup-h, .agroup-i, .agroup-j, .agroup-k, .agroup-l, .agroup-m, .agroup-n, .agroup-o, .agroup-p {
	background: #26B291;
}

.agroup-a:hover img, .agroup-b:hover img, .agroup-c:hover img, .agroup-d:hover img, .agroup-e:hover img, .agroup-f:hover img, .agroup-g:hover img, .agroup-h:hover img, .agroup-i:hover img, .agroup-j:hover img, .agroup-k:hover img, .agroup-l:hover img, .agroup-m:hover img, .agroup-n:hover img, .agroup-o:hover img, .agroup-p:hover img {
	opacity: 0.7;
	-webkit-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	        transform: scale(1.2);
}

.agroup-a {
	position: relative;
}

.agroup-a:hover::before {
	background: url("../svg/triangle-icon.svg");
	background-position: 60% top;
	background-repeat: no-repeat;
}

.agroup-a::before {
	content: 'Explore More ';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 3;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
	background: url("../svg/triangle-icon.svg");
	background-position: 50% top;
	background-repeat: no-repeat;
	width: 100%;
	padding-top: 70px;
	padding-bottom: 50px;
	-webkit-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	-o-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
}

.agroup-a::after {
	content: '\e97a';
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%);
	    -ms-transform: translate(-50%);
	        transform: translate(-50%);
	top: 57%;
	z-index: 10;
	font-weight: normal;
	font-family: 'icomoon' !important;
	font-size: 36px;
	color: #fff;
	text-align: center;
}

.agroup-a img {
	opacity: 0.2;
}

.agroup-g, .agroup-h, .agroup-o, .agroup-p {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 60%;
}

.agroup-a, .agroup-b, .agroup-c, .agroup-d, .agroup-e, .agroup-f, .agroup-i, .agroup-j, .agroup-k, .agroup-l, .agroup-m, .agroup-n {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 120%;
}

.agroup-a {
	grid-area: a;
}

.agroup-b {
	grid-area: b;
}

.agroup-c {
	grid-area: c;
}

.agroup-d {
	grid-area: d;
}

.agroup-e {
	grid-area: e;
}

.agroup-f {
	grid-area: f;
}

.agroup-g {
	grid-area: g;
}

.agroup-h {
	grid-area: h;
}

.agroup-i {
	grid-area: i;
}

.agroup-j {
	grid-area: j;
}

.agroup-k {
	grid-area: k;
}

.agroup-l {
	grid-area: l;
}

.agroup-m {
	grid-area: m;
}

.agroup-n {
	grid-area: n;
}

.agroup-o {
	grid-area: o;
}

.agroup-p {
	grid-area: p;
}

@media only screen and (max-width: 768px) {
	.agroup {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "a b c" "d e f " "g g g" "h i j" "k l m" "n o p";
	}
	.agroup-g {
		display: block;
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-bottom: 60%;
	}
	.agroup-a, .agroup-b, .agroup-c, .agroup-d, .agroup-e, .agroup-f, .agroup-h, .agroup-i, .agroup-j, .agroup-k, .agroup-l, .agroup-m, .agroup-n, .agroup-o, .agroup-p {
		display: block;
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-bottom: 120%;
	}
}

@media only screen and (max-width: 580px) {
	.agroup {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "a b" "c d" "e f" "g h" "i j" "k l" "m n" "o p";
	}
	.agroup-g {
		padding-bottom: 120%;
	}
}

/*==============船票時間============*/
.schedule {
	border: 1px solid #ddd;
	border-width: 0 0 0 0;
	margin-bottom: 20px;
}

.schedule__tip {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 10px 10px 10px 20px;
	margin: 15px auto;
	text-align: center;
	width: 100%;
	font-size: 18px;
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, from(#82be84), to(#0c4ca3));
	background: -o-linear-gradient(left, #82be84 0%, #0c4ca3 100%);
	background: linear-gradient(to right, #82be84 0%, #0c4ca3 100%);
	border-radius: 10px 10px 1px 1px;
}

.schedule__tip::before, .schedule__tip::after {
	content: '';
	width: 80px;
	height: 1px;
	background: #fff;
	margin: 0 15px;
}

.schedule__nav {
	width: 100%;
	margin: auto auto 60px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 15px;
}

.schedule__nav a {
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.5rem;
	padding: 8px 15px;
	color: #333;
	text-align: center;
	-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 4px;
}

.schedule__nav a:hover {
	background: #68A58B;
	color: #fff;
}

.schedule__img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.schedule__img img {
	display: block;
	width: 100%;
	height: auto;
}

.schedule__title, .schedule__mtitle {
	display: grid;
	grid-template-columns: 1fr 150px 150px 1fr 190px;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 2.813rem;
	font-weight: 500;
	background: #26B291;
	color: #fff;
}

.schedule__title p, .schedule__mtitle p {
	text-align: center;
}

.schedule ul {
	border-bottom: 1px dotted #868686;
	display: grid;
	grid-template-columns: 1fr 150px 150px 1fr 190px;
}

.schedule ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-right: 1px solid #e3e3e3;
}

.schedule ul li:last-child {
	border-right: none;
}

.schedule ul li:nth-of-type(2) p, .schedule ul li:nth-of-type(3) p, .schedule ul li:nth-of-type(5) p {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.schedule ul li i {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-weight: normal;
	width: 30px;
	height: 30px;
	font-size: 18px;
	margin-right: 5px;
	margin-left: 20px;
	color: #fff;
	background: #449D44;
	border-radius: 99rem;
}

.schedule ul li p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	padding: 5px 10px;
}

.schedule ul li.schedule--line p {
	border-bottom: 1px dashed #d8d8d8;
}

.schedule ul li.schedule--line p:last-child {
	border-bottom: none;
}

.schedule--bgreen {
	background: #F4F9F8;
}

.schedule--bgblue {
	background: #F4F9F8;
}

.schedule--bgyellow {
	background: #F4F9F8;
}

.schedule--bgred {
	background: #F4F9F8;
}

.schedule--bgolg {
	background: #F4F9F8;
}

.schedule-table {
	display: block;
	width: 100%;
	border: 1px solid #ddd;
	border-width: 0 0 0 0;
	margin-bottom: 50px;
}

.schedule-table table {
	display: table;
	width: 100%;
	border-left: 1px solid #e3e3e3;
}

.schedule-table thead td {
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 2.813rem;
	font-weight: 500;
	background: #26B291;
	color: #fff;
	text-align: center;
	border-right: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
}

.schedule-table tbody th {
	border-right: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
}

.schedule-table tbody th i {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-weight: normal;
	width: 30px;
	height: 30px;
	font-size: 18px;
	margin-right: 5px;
	margin-left: 20px;
	color: #fff;
	background: #449D44;
	border-radius: 99rem;
}

.schedule-table tbody th p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	padding: 5px 10px;
}

.schedule-table tbody td {
	border-right: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	text-align: center;
}

.schedule-table tbody td i {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-weight: normal;
	width: 30px;
	height: 30px;
	font-size: 18px;
	margin-right: 5px;
	margin-left: 20px;
	color: #fff;
	background: #449D44;
	border-radius: 99rem;
}

.schedule-table tbody td p {
	width: 100%;
	padding: 5px 10px;
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	.schedule {
		width: 100%;
		margin-bottom: 20px;
	}
	.schedule__title, .schedule__mtitle {
		display: grid !important;
		grid-template-columns: 170px 110px 110px 1fr 110px;
	}
	.schedule ul {
		grid-template-columns: 170px 110px 110px 1fr 110px;
	}
}

@media only screen and (max-width: 640px) {
	.schedule {
		overflow-x: scroll;
	}
	.schedule__nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.schedule__title, .schedule__mtitle {
		width: 700px;
	}
	.schedule ul {
		width: 700px;
	}
	.schedule ul li:nth-of-type(4) p, .schedule ul li:nth-of-type(5) p {
		min-height: 59px;
	}
}

@media only screen and (max-width: 700px) {
	.schedule-table {
		overflow-x: scroll;
	}
	.schedule-table table {
		width: 600px;
	}
}

/*=============destinations碼頭景點=============*/
.estinations {
	width: 100%;
	position: relative;
	margin-bottom: 200px;
}

.estinations__txt {
	padding: 40px 15px 40px 0;
	height: 600px;
	overflow-y: scroll;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.estinations__txt::-webkit-scrollbar-track {
	background: #449D44;
}

.estinations__txt::-webkit-scrollbar-thumb {
	background: #449D44;
	border-radius: 10px;
}

.estinations__txt::-webkit-scrollbar-track-piece {
	background: #fff;
}

.estinations__txt::-webkit-scrollbar {
	background: #449D44;
	width: 8px;
}

.estinations__icon {
	position: absolute;
	right: 0;
	bottom: -80px;
	width: 150px;
	color: #fff;
	background: #333;
}

.estinations__icon:hover {
	background: #449D44;
	border: 1px solid #449D44;
}

.estinations .page__basic {
	width: 70%;
	position: absolute;
	right: 100px;
	top: 100px;
	z-index: 5;
	padding: 40px 60px;
	margin-bottom: 0;
}

.estinations .page__formbasic {
	position: absolute;
	padding: 30px 10px 30px 30px;
	width: 30%;
	right: 100px;
	top: 100px;
	z-index: 5;
}

.estinations .view {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 60px 40px;
}

.estinations .viewpoint__item {
	margin-bottom: 0;
}

.estinations .pagination {
	padding: 60px 0 0;
}

.picture {
	width: 75%;
}

.picture__item {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 60%;
}

.picture__item img {
	-o-object-fit: cover;
	   object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.picture .slick-slide img {
	height: 100%;
}

.picture .slick-arrow {
	width: 40px;
	height: 40px;
	margin: auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	cursor: pointer;
}

.picture .slick-arrow i {
	font-size: 30px;
	line-height: 40px;
	color: #333;
}

.picture .slick-arrow:hover i {
	color: #fff;
	-webkit-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}

.picture .prev {
	width: 80px;
	height: 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: 20px;
	top: inherit;
	bottom: 40px;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	background: #fff;
	-webkit-box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
	        box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
}

.picture .prev:hover {
	background: #449D44;
}

.picture .prev:hover::after {
	color: #fff;
}

.picture .next {
	width: 80px;
	height: 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: 100px;
	top: inherit;
	bottom: 40px;
	position: absolute;
	z-index: 5;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	background: #fff;
	-webkit-box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
	        box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
}

.picture .next:hover {
	background: #449D44;
}

.picture .next:hover::after {
	color: #fff;
}

.picturedots {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 50px;
	margin: auto;
	text-align: center;
	z-index: 1000;
	width: auto;
	height: auto;
	font-size: 0;
}

.picturedots li {
	display: inline-block;
	margin: auto;
	text-align: center;
}

.picturedots li button {
	width: 10px;
	height: 10px;
	background: #fff;
	margin-right: 10px;
	border: none;
	cursor: pointer;
	border-radius: 30px;
}

.picturedots li.slick-active button {
	background: #449D44;
	width: 20px;
	height: 20px;
	border: 3px solid #fff;
}

@media only screen and (max-width: 1440px) {
	.picture {
		width: 80%;
	}
	.estinations .page__formbasic {
		width: 40%;
		right: 80px;
		top: 0;
	}
	.estinations__txt {
		height: 700px;
		padding-right: 15px;
		overflow-y: scroll;
	}
	.estinations__txt::-webkit-scrollbar-track {
		background: #449D44;
	}
	.estinations__txt::-webkit-scrollbar-thumb {
		background: #449D44;
		border-radius: 10px;
	}
	.estinations__txt::-webkit-scrollbar-track-piece {
		background: #fff;
	}
	.estinations__txt::-webkit-scrollbar {
		background: #449D44;
		width: 8px;
	}
}

@media only screen and (max-width: 1280px) {
	.estinations {
		margin-bottom: 0;
	}
	.estinations .page__basic {
		width: 95%;
		margin: auto;
		left: 0;
		right: 0;
		padding: 30px 20px;
	}
	.estinations .page__formbasic {
		width: 95%;
		height: inherit;
		position: inherit;
		right: inherit;
		top: inherit;
		z-index: 5;
		padding: 30px 20px;
		margin: 0 auto;
	}
	.estinations__txt {
		height: inherit;
		overflow-y: inherit;
		padding: 0;
	}
	.picture {
		width: 100%;
		margin-bottom: 50px;
	}
	.picture .next {
		width: 40px;
		height: 40px;
		left: 80px;
	}
	.picture .prev {
		width: 40px;
		height: 40px;
		left: 40px;
	}
}

@media only screen and (max-width: 768px) {
	.estinations .view {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.estinations .page__formbasic {
		margin-bottom: 100px;
	}
	.estinations__icon {
		right: 0;
	}
}

/*=============關於我們============*/
/*========vessels船型介紹=======*/
.vessels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
}

.vessels li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.vessels__tip {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	left: 0;
	top: 70%;
	width: 130px;
}

.vessels__tip p {
	font-size: 100px;
	line-height: 100px;
	font-family: "Roboto";
	color: #449D44;
}

.vessels__tip::before {
	content: 'Number';
	width: 100%;
	color: #fff;
	font-size: 15px;
	background: #449D44;
	text-align: center;
}

.vessels__img {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.vessels__img img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: .4s ease-in-out;
	-o-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

.vessels__img:hover img {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}

.vessels__info {
	position: relative;
	margin: -100px 0 0 0;
	padding: 20px 40px;
	background: #fff;
	border-radius: 20px 0 0 0;
	z-index: 5;
}

.vessels__info p {
	display: block;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.875rem;
}

.vessels__info p::before {
	content: attr(title);
	width: 130px;
	padding-left: 10px;
	margin-right: 10px;
	display: inline-block;
	color: #449D44;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.875rem;
	font-weight: bold;
	background: #E7F2E7;
}

.vessels__info p:nth-of-type(1), .vessels__info p:nth-of-type(1)::before {
	padding-top: 10px;
}

.vessels__info p:nth-of-type(13), .vessels__info p:nth-of-type(13)::before {
	padding-bottom: 10px;
}

.vessels__icon {
	position: absolute;
	width: 50px;
	height: 35px;
	right: 0;
	top: 0;
}

.vessels__icon img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 1024px) {
	.vessels {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/*==========聯絡我們===========*/
.form__label {
	font-weight: 700;
	color: #343436;
}

.contact__left {
	display: block;
	position: relative;
	height: auto;
}

.contact__left .social-icon {
	position: absolute;
	left: 0;
	right: 0;
	top: 70%;
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	width: 80%;
	padding: 10px 15px;
	background: #fff;
	border-radius: 8px;
}

.contact__left .social-icon img {
	width: 40px;
	height: auto;
}

.contact__left .social-icon a:hover img {
	-webkit-transform: scale(1.06);
	    -ms-transform: scale(1.06);
	        transform: scale(1.06);
}

.contact__info {
	display: grid;
	grid-template-columns: 195px 1fr 1fr 1fr;
	gap: 40px;
}

.contact__item {
	position: relative;
}

.contact__item::after {
	content: '';
	position: absolute;
	top: 0;
	right: -20px;
	border-right: 1px solid #DDDDDD;
	height: 100%;
}

.contact__item:last-child::after {
	border-right: none;
}

.contact__item .font--16 {
	padding: 0 0 10px 25px;
	line-height: 22px;
	display: block;
	position: relative;
}

.contact__item .font--16 i {
	position: absolute;
	left: 0;
	top: 4px;
}

.contact__tip {
	padding: 8px 0;
	width: 100%;
	text-align: center;
	font-weight: 700;
	color: #449D44;
	background: #C6E1C6;
	margin-bottom: 20px;
}

.contact__tip i {
	display: block;
	position: relative;
	font-size: 28px;
	margin-top: -30px;
}

.contact__form {
	display: grid;
	grid-template-columns: 35% 65%;
}

.contact__form .page__formbasic {
	margin-bottom: 0;
}

.contact__img {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	-o-object-fit: cover;
	   object-fit: cover;
}

.contact__img img {
	display: block;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 1024px) {
	.contact__info {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "X1 X1 X1" "Y1 Y2 Y3";
	}
	.contact__info .page__title {
		grid-area: X1;
		margin-bottom: 0 !important;
	}
	.contact__item:nth-of-type(1) {
		grid-area: Y1;
	}
	.contact__item:nth-of-type(2) {
		grid-area: Y2;
	}
	.contact__item:nth-of-type(3) {
		grid-area: Y3;
	}
}

@media only screen and (max-width: 768px) {
	.contact__form {
		grid-template-columns: 100%;
	}
	.contact__info {
		grid-template-columns: 1fr;
		grid-template-areas: "X1" "Y1" "Y2" "Y3";
	}
	.contact__img {
		display: block;
		width: 100%;
		padding-bottom: 50%;
		background: url("../jpg/pic_05.jpg");
		background-position: 50% 50% no-repeat;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.contact__img img {
		display: none;
	}
}

.accordion-list-item {
	margin-bottom: 10px;
}

.accordion-title {
	font-size: 17px;
	color: #555;
	background: #F3F3F3;
	padding: 8px 20px 8px 10px;
	cursor: pointer;
}

.accordion-desc {
	background: #F3F3F3;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.accordion-desc input, .accordion-desc .form__control {
	border: none !important;
}

.icon {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 25px;
	height: 25px;
	font-size: 13px;
	color: #fff;
	background: #0388C7;
	border-radius: 3px;
	margin-right: 15px;
}

/*===船票列印===*/
.boat-ticket {
	display: block;
	width: 800px;
	padding: 30px;
	font-size: 16px;
	vertical-align: text-top;
}

.boat-ticket p {
	display: inline-block;
}

.boat-ticket td {
	width: 50%;
	vertical-align: text-top;
}

.boat-ticket th {
	text-align: right;
	vertical-align: text-top;
}

.boat-ticket-txt {
	display: block;
	padding: 15px 0;
	margin: 15px 0;
	font-size: 14px;
	text-align: justify;
	text-justify: auto;
	border: 1px solid #000;
	border-width: 1px 0 1px 0;
}

/*======常見問題=====*/
.faq {
	display: block;
	width: 100%;
	margin-bottom: 50px;
}

.faqitem > .header {
	padding: 10px 15px;
	margin-top: 15px;
	background: #E0F6F1;
	color: #333;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-radius: 3px;
	cursor: pointer;
	z-index: 3;
	-webkit-transition: 0.1s;
	-o-transition: 0.1s;
	transition: 0.1s;
}

.faqitem > .header h4 {
	margin: 0;
}

.faqitem .header i {
	color: #449D44;
}

.faqitem:hover > .header {
	background: #449D44;
	color: #fff;
}

.faqitem:hover > .header i {
	color: #fff;
}

.faqitem .header .icon-minus {
	display: none;
}

.faqitem.jquery-accordion-active .icon-minus {
	display: block;
}

.faqitem.jquery-accordion-active .icon-plus {
	display: none;
}

.faqitem .content, .faqitem .content--open {
	padding: 20px 20px 40px;
	position: relative;
	border-radius: 0 0 3px 3px;
	background: #fff;
	-webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.faqitem .content p, .faqitem .content--open p {
	display: block;
}

.faqitem .content {
	display: none;
}

.faqitem .content--open {
	display: block;
}

@media only screen and (max-width: 640px) {
	.faqitem .content, .faqitem .content--open {
		padding: 20px 20px 55px;
	}
}

/*2025新增FQ分類*/
.faqitem-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	border-bottom: 3px solid #449D44;
	margin-bottom: 40px;
}

.faqitem-nav li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.faqitem-nav a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	padding: 10px 20px;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	border-radius: 5px 5px 1px 1px;
	margin-right: 1px;
}

.faqitem-nav a::after {
	content: '';
	width: 1px;
	height: 15px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	right: 0;
	background: #333;
}

.faqitem-nav a:hover {
	background: #222;
	color: #fff;
}

.faqitem-nav li.active a {
	background: #222;
	color: #fff;
}

/*2025新增FQ標題*/
.faq__title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	width: 100%;
	font-size: 24px;
	font-weight: 700;
}