html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure, mark ,main {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
a img {border: none;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: var(--black-color); text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}

h1, h2, h3, h4, h5 {
	text-decoration: inherit;
	font: inherit;
	font-weight: inherit;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

:root {
	--hotel-wrap-gap:10px;
	--all-width:1200px;
	--black-color:#333333;
	--white-color:#ffffff;
	--blue-color:#1c6da6;
	--blue-dark-color:#125585;
	--org-color:#ef6c37;
	--org-dark-color:#cc3e3e;
	--yellow-bk-basic:#ffc96e;
	--yellow-bk-light:#ffd997;
	--noto-fonts:"Noto Sans TC", verdana;
}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

body {   
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
	background-color: #e6f3f6;
}

#web-outer{	
	clear: both;
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

.header-content{
	height: 700px;
	background: url("images/header_bg.webp") top no-repeat;
	position: relative;
	overflow: hidden;
}

.header-copyright {
	position: absolute;
	left: 4%;
	bottom: 4%;
	color: var(--white-color);
	font-size: 15px;
	text-shadow: 0 0 5px #025d89;
    letter-spacing: 1px;
}

.header-content .header-title{max-width: 756px;position: absolute;left: 4%;top: 0%;}
.header-content .logo{position: absolute;right: 0%;top: 0%;}
.header-content .note{max-width: 208px;position: absolute;right: 1%;bottom: 1%;}
.header-content .mobile{display: none;}


.bg-01{background: url("images/bg_01.webp") top no-repeat;}
.bg-02{background: url("images/bg_02.webp") top no-repeat;}

.spot-wrap{max-width: 1500px;margin: 80px auto;clear: both;overflow: hidden;}
.spot-box{background-color: var(--white-color);border-radius: 50px 50px 10px 10px;padding-bottom: 30px;margin: 0 10px;}
.spot-box img{border-radius: 50px 50px 0 0;}

.spot-box h2{
	font: 700 25px var(--noto-fonts);
	line-height: 1.8em;
	color: var(--blue-color);
	width: 130px;
	text-align: center;
	margin: 10px auto;
	position: relative;
	z-index: 1;
	letter-spacing: 1px;
}

.spot-box h2::after {
	content: '';
	width: 100%;
	height: 15px;
	background: #d8f2f8;
	position: absolute;
	bottom: 5px;
    left: 0px;
    z-index: -1;
}

.spot-box p{width: 90%;min-height: 130px; margin: 0 auto;font: 600 15px "微軟正黑體";line-height: 1.8em;color: #262626;}

.city-space {
	width: 100%;
	max-width: var(--all-width);
	display: flex;
	gap: 20px;
	margin: 0 auto;
}

#pkg .city-space {
	margin: 20px auto 40px auto;
}

#pkg .city-wrap {
	margin: 0 auto;
}

.city-wrap{
	width: calc((100% - 20px) / 2);
	border-radius: 25px;
	margin: 5% auto;
	background-color: var(--white-color);	
	/* box-shadow: rgba(227, 242, 247, 0.9) 0px 5px 30px; */
	padding: 20px 0;
	text-align: center;
}

.city-wrap h2{
	max-width: 730px;
    padding: 0px 10px 20px 10px;
    background: url(images/city_top.webp) center bottom no-repeat;
    margin: 0 auto;
    font: 800 40px var(--noto-fonts);
    line-height: 45px;
    color: var(--blue-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.city-wrap h2 span{
    height: 75px;
    background: url(images/city_top2.webp) center no-repeat;
    font: 600 33px var(--noto-fonts);
    padding: 20px 35px;
    color: var(--white-color);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 -13px;
    transform: scale(0.8);
}

.city-wrap h3{
	max-width: 730px;	
	padding: 0px 10px;
	margin: 0 auto;	
	font: 800 30px var(--noto-fonts);	
	line-height: 40px;	
	color: var(--black-color);
	text-align: center;
}

.city-wrap .info{
	width: 95%;
	margin: 0 auto;
	padding: 15px 0 0px 0;
	font: 800 20px var(--noto-fonts);
    line-height: 30px;
	color: var(--blue-color);
	text-align: center;
}

.city-wrap .info strong ,.info-list strong{color: var(--org-dark-color);}

.info-list{width: 95%;margin: 0 auto;}
.info-note {
	font: 600 20px var(--noto-fonts);
	line-height: 2em;
	color: var(--black-color);
	background-color: var(--yellow-bk-basic);
	border-radius: 25px;
	display: inline-block;
	padding: 0px 20px;
	margin: 10px auto 0 auto;
}
a.info-note:hover {
	background-color: var(--yellow-bk-light);
}

.info-list ul{margin: 0 5%;}
.info-list ul li{list-style-type:decimal;font: 600 15px "微軟正黑體";color: #262626;line-height: 1.8em;margin: 5px 5px 0 15px;}
.info-list ul li a{color: var(--blue-color);}
.info-list ul li a:hover{text-decoration: none;}
.info-text {
	color: var(--black-color);
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    margin: 5px 0;
    font-weight: 500;
}

.top-content{max-width: var(--all-width); margin: 0 auto;}
.top-content h3{max-width: 500px;height: 120px;margin: 30px auto 0 auto;font: 600 40px var(--noto-fonts);color: var(--white-color);text-align: center;padding-top: 30px;}
.top-content p{font:700 25px var(--noto-fonts);line-height: 1.8em;color: #262626;text-align: center;margin-top: 10px;}
.top-content p span{ background-image: linear-gradient(0,var(--white-color) 40%,transparent 40%);padding-right: 10px;padding-left: 10px;}
.top-content p strong{color: var(--org-dark-color);}
.big-title01{background: url("images/big_title01.webp") top no-repeat;}
.big-title02{background: url("images/big_title02.webp") top no-repeat;}
.big-title03{background: url("images/big_title03.webp") top no-repeat;}

.pkg-wrap {
	max-width: var(--all-width);
	margin:0 auto;
	clear:both;
	text-align: center;
	display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    justify-content: center;
}


.pkg-box {
	display: inline-block; vertical-align: top;position: relative;
	width: calc((100% - 60px) / 4);
}

.pkg-box a{
	text-decoration: none;
}

.pkg-pic {
	width: 100%;
	position: relative;
}

.pkg-pic .area {
	display: inline-block;
	position: absolute;
	font: 600 18px "微軟正黑體";
	color: var(--white-color);
	border-radius: 25px;
	padding: 5px 8px;
	left: 10px;
	top: 10px;
	z-index: 1;	
	background-color: #2e82bd;	
}

.pkg-pic img {
	border-radius: 20px;
}

.pkg-txt {
	width: 95%;
	margin: 0 auto;
    box-sizing: border-box;
	border-radius: 20px;
	padding: 15px;
	position: relative;
	bottom: 30px;
	background: var(--white-color);
	/* border: 1px #b4e0ee solid; */
}

.pkg-txt h4 {
    text-align: center;	
    width: 100%;
	color:#2e82bd;
    font: 600 18px "微軟正黑體";
	line-height: 24px;
}

ul.pkg-product-list {
	width: 100%;
	text-align: left;
}
ul.pkg-product-list li {
	list-style-type:circle;
	font: 600 15px "微軟正黑體";
	color: var(--black-color);
	line-height: 20px;
	margin: 5px 5px 0 15px; 
}

.pkg-product-price {
	color: var(--org-dark-color);
	text-align: center;
	font: 600 15px "微軟正黑體";	
	width: 100%;
	margin-top: 10px;
}
.pkg-product-price strong {
	margin: 0 2px;
	display: inline-block;
	color:var(--org-dark-color);
	font: 600 20px "Anton", sans-serif;	
	letter-spacing:1px;
}

.product-go-space {
	width: 100%;
    /* position: sticky;
    top: 40px; */
    background: #e6f3f6;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--hotel-wrap-gap);
    padding: 15px 0;
    box-sizing: border-box;
	max-width: var(--all-width);
	margin: 0 auto;
	z-index: 3;
}

.product-go-space a {
	display: inline-flex;
    padding: 2px 15px;
    border-radius: 50px;
    background: var(--yellow-bk-basic);
    color: var(--black-color);
    font-size: 20px;
    font-family: var(--noto-fonts);
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    text-decoration: unset;
    min-width: 120px;
    align-items: center;
	justify-content: center;
}

.product-go-space a:hover {
	background: var(--yellow-bk-light);
}

.product-go-space a img {
	display: inline-block;
	max-width: 50px;
}

.product-go-title {
	width: 100%;
	text-align: left;
	padding: 20px 0 0 0;
	scroll-margin-top: 110px;
}

.product-go-title h2 {
	display: inline-block;
	box-sizing: border-box;
	font-style:normal;
	font: 600 20px "微軟正黑體";
	color:var(--white-color);
	border-radius: 25px;
	padding: 8px 15px;
	margin-right: 5px;
	background: var(--org-color);
}

.product-go-area {
	width: 100%;
	text-align: left;
}

.product-go-area h2 {
	display: inline-block;
	box-sizing: border-box;
	font: 600 20px "微軟正黑體";
	color: var(--black-color);
	border-left: 5px solid var(--org-color);
	line-height: 28px;
	margin: 10px 0 0 0;
	padding: 2px 10px;
}


.product-list{
	width: 100%;
	max-width: var(--all-width);
	margin:0 auto 40px auto;
	padding: 20px 30px;
    background: var(--white-color);
    border-radius: 20px;
}

.product-list ul{
	margin: 0 0 40px 0;
}

.product-list li{
	border-bottom: 1px solid #dee1e2;
	padding:10px 0;
	font: 600 18px "微軟正黑體";
	line-height: 2.2em;
}

.product-list .name-l{display: inline-block;line-height: 26px;}
.product-list .name-l em { font-style:normal;font: 600 18px "微軟正黑體";color:var(--white-color); border-radius: 25px;padding: 5px 8px; margin-right: 5px;}
.box-color-01{background-color: var(--blue-color);}
.box-color-02{background-color: #f6966f;}
.product-list .name-l strong { font-style:normal;font: 600 15px "微軟正黑體";border-radius: 15px;margin-left: 3px;display: inline-block;}
.color-01{color:var(--blue-color);}
.color-02{color:var(--org-color);}


.product-list .price-r{font: 600 15px "微軟正黑體";color:var(--org-dark-color);line-height:1;text-align: center;}
.product-list .price-r strong{	
	color:var(--org-dark-color);
	font: 600 20px "Anton", sans-serif;	
	letter-spacing:1px;
	margin: 0 2px;	
}

.product-list li a{	
	color:#262626;
	text-decoration:none;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
}

.product-more{font: 600 18px "微軟正黑體";color:#262626;text-align: right;margin: 20px 0;}
.product-more a{color:#262626; border-radius: 25px;padding: 5px 10px;border: 3px #f0c3b0 solid;text-decoration: none;}

#hotel{}

.hotel-wrap{
	max-width:var(--all-width);
	margin:20px auto;
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
	gap: var(--hotel-wrap-gap);
}

.hotel-box {	
	width: calc( (100% - ( var(--hotel-wrap-gap) *4 ) ) / 4);
	position: relative;
    background: #1684a1;
	border-radius: 50px;
	overflow: hidden;
	max-width: 500px;
	min-height: 120px;
}

.hotel-box a {
    line-height: 0;
    display: inline-flex;
    width: 100%;
    height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hotel-box a img {
    opacity: 0.5;
	display: inline-block;
}

.hotel-box a h4{
    text-shadow: 0 0 5px #1684a1;
    color: var(--white-color);
	display: inline-flex;
	font-family: var(--noto-fonts);
	font-weight: 500;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
	background: #1683a1a6;
	justify-content: center;
    align-items: center;
	width: 100%;
}

.hotel-box a:hover h4 {
	background: #1683a1e0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.block-first{padding: 50px 0;}
.block-first:last-child {padding: 50px 0 150px 0;}

/*導覽列*/
#mainNav {
	position: sticky;
	top: 40px;
	width: 100%;
	z-index: 3;
	background: var(--blue-color);
	text-align: center;
}

.nav-link {
	display: inline-block;
	margin: 0 5px;
	padding: 20px;
	text-align: center;
	color: var(--white-color);
	font-family: var(--noto-fonts);
	font-weight: 600;
    font-size: 23px;
    letter-spacing: 0.5px;
    line-height: 28px;
}

.nav-link:hover ,.nav-link.active {
	background: var(--blue-dark-color);
	color: var(--yellow-bk-light);
}





/*------media query----------*/

@media only screen and ( max-width:1600px){
	.header-content .header-title{max-width: inherit; width: 60%; left: 0;top: 40px;}
}	

@media only screen and ( max-width:1250px){	
.spot-wrap{max-width: inherit;width: 90%;}	
.city-space {width: 90%;}
.top-content{max-width: inherit;width: 90%;}
.pkg-wrap{width:90%}
.pkg-box {
	width: calc((100% - 40px) / 3);
}
	
}
@media only screen and ( max-width:1000px) {	
	.product-list{width: 90%;}
	.product-list .price-r{display: flex;align-items:center;flex: 0 0 auto;}
	.left { float: inherit;}
	.right { float: inherit;}
	
	.hotel-wrap{max-width: inherit;width: 90%;}

	.hotel-box {width: calc( (100% - ( var(--hotel-wrap-gap) *3 ) ) / 3);}
	
}
@media only screen and ( max-width:959px) {
.header-content .header-title{display: none;}
.header-content .logo{display: none;}
.header-content .note{display: none;}		
.header-content .mobile{display: block;}
.header-content {
		height: inherit;
		background: none;
		margin: 40px 0 0 0;
	}
.pkg-box{width:46%;}
.header-copyright {
	font-size: 13px;
}

.pkg-box {
	width: calc((100% - 20px) / 2);
}

}
/*---平板-----*/
@media only screen and ( max-width:768px)	
{
	#mainNav {display: none;}
	.info-list{width: 90%;}
	.pkg-box{width:90%;margin: 0;}
	.product-go-space {
    	padding: 10px 0;
	}

	.hotel-box {width: calc( (100% - ( var(--hotel-wrap-gap) *2 ) ) / 2);}

	.product-go-space a {
		padding: 8px 15px;
	}

	.product-go-space a img {display: none;}

	.product-list li a {
		gap: 5px;
	}

	.hotel-box a h4 {
		top: 45px;
	}

	.pkg-wrap {
		width: 100%;
	}

	.city-wrap h2 {
		flex-wrap: wrap;
	}

	.city-wrap h2 span {
		width: 100%;
		margin: 0;
	}
}

@media only screen and ( max-width:600px)	
{
	.city-wrap h2{		
		padding: 0px 10px 20px 10px;	
		font: 800 35px var(--noto-fonts);
		line-height: unset;
	}

	.city-wrap {
		margin: 0 auto;
		width: 100%;
	}

	.city-space {
		flex-wrap: wrap;
	}

	.product-go-title {
		scroll-margin-top: 88px;
	}

	.block-first {
		scroll-margin-top: 40px;
	}

	.city-wrap h2 span{
		height: inherit;
		background: none;
		font: 800 25px var(--noto-fonts);
		padding: 0;
		color: var(--org-dark-color);
		text-align: left;
		width: 100px;
		display: inline-block;
		transform: scale(1);
		margin-left: unset;
		margin: 0 0 0 5px;
	}
	
	.top-content h3{
		max-width: 260px;
		height: inherit;
		margin: 30px auto 10px auto;
		padding-top: 0;
		padding-top: 5px;
		font: 600 30px var(--noto-fonts);
	}		

	.big-title01{
		background: inherit;
		background-color: #2e82bd;
		border-radius: 25px;
		padding: 10px;
	}
	
	.big-title02{
	background: inherit;
	background-color: #f6966f;
	border-radius: 25px;
	padding: 10px;
	}
		
	.big-title03{
	background: inherit;
	background-color: #789d4d;
	border-radius: 25px;
	padding: 10px;
	}	
	
	.city-wrap .info{font:800 18px var(--noto-fonts);padding: 5px 0;}	
	.top-content p{font: 700 18px var(--noto-fonts);}	
	.product-list li a{flex-direction:column;align-items: flex-start;}
	.product-list .price-r{align-self: flex-end;}

	.hotel-box {width: 100%;}
	
}

/*---手機版-----*/
@media only screen and (max-width:480px) 
{
	.info-note{
		display: block;
        max-width: 150px;
        text-align: center;
        margin: 0 auto;
        line-height: 25px;
        padding: 5px;
	}
	.product-more{text-align: center;}
	.spot-wrap {
		margin: 40px auto;
	}

	.block-first{padding: 20px 0;}
	.block-first:last-child {padding: 20px 0 40px 0;}

}