/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, 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: #333333; 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;
}

/*滑動留個高度*/
html, body {
  scroll-padding-top:10px;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--all-bk);
}

* {
	box-sizing: border-box;
}

header h1, h2 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
	width: 50px;
}




/*基本變數*/
:root {
	/*基本*/
	--white-color:#ffffff;
	--black-color:#333333;
	--all-bk:url(../images/body_all_bk.webp) repeat;
	--font-size-big:clamp(40px, 13vw, 75px);
	--line-height-big:clamp(50px, 14vw, 80px);
	--short-word: scaleX(0.9);
	--transition-speed: all 0.3s;

	/*框架大小*/
	--pc-box-gap:30px;
	--box-4-gap:calc( (100% - 90px) / 4 );
	--box-3-gap:calc( (100% - 60px) / 3 );
	--box-2-gap:calc( (100% - 30px) / 2 );
	--product-mobile-box-gap:20px;

	/*顏色*/
	--basic-red:#b72b2b;
	--basic-dark-red:#921919;
	--basic-light-red:#e48282;
	--basic-yellow:#ffc600;
	--basic-light-yellow:#fdf8ee;
	--basic-blue:#1c568d;
}


/*PC
-----------------------------------------------------------------*/


/*通用框架*/
.container {
	width:100%;
	margin: auto;
	font-family: 'Microsoft JhengHei',verdana;
	background:url(../images/main_bk.webp) no-repeat center top;
	min-height: 1000px;
}

.container * {
	transition: var(--transition-speed);
}

.block-center {
	width: 100%;
	clear: both;
	max-width: 1500px;
	margin: 0 auto;
}

#tkt .block-center {
	background: var(--all-bk);
	width: 95%;
	display: flow-root;
}

.block-product {
	width: 100%;
	clear: both;
	padding: 90px 0;
}

#tkt.block-product {
	background: url(../images/tkt_all_bk.webp) repeat center;
}

#ticket.block-product {
	background: var(--basic-red);
}



/*導覽列*/
.block-menu {
	width: 100%;
	clear: both;
	background: var(--basic-red);
	position: fixed;
	top: 40px;
	display:flex;
	justify-content: center;
    align-items: center;
	z-index: 3;
	box-shadow: -2px 0px 8px #3333334f;
}

/* 清除 ul 預設的樣式（圓點與內外距）並讓選單橫向排列 */
.nav-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}

/* 主選單的每一個項目 */
.nav-list > li {
	position: relative; /* 關鍵：做為下拉選單定位的基準點 */
	max-width: 90px;
	width: 100%;
}

/* 連結基本樣式 */
.nav-link {
	display: inline-flex;
    text-decoration: none;
    color: var(--white-color);
    min-height: 70px;
    align-items: center;
    padding: 0 10px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.2em;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    align-content: center;
}

.nav-link span {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: var(--basic-light-red);
	letter-spacing: 0;
}

/* 滑過主按鈕時的背景色變化 (可選) */
#mainNav .nav-link:hover {
	background:var(--basic-dark-red);
}

#mainNav .nav-list > li:hover > a.nav-link ,#mainNav a.active {
	background:var(--basic-dark-red);
}

#mainNav .nav-link:hover span ,#mainNav .nav-list > li:hover > a.nav-link span ,#mainNav a.active {
	color: var(--basic-yellow);
}

#mainNav .nav-link:hover::after ,#mainNav .nav-list > li:hover > a.nav-link::after ,#mainNav a.active::after {
	position: absolute;
	bottom: -13px;
	width: 100%;
	left: 0px;
	background: var(--basic-dark-red);
	height: 13px;
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	content: '';
}

/* --- 下拉選單核心邏輯 --- */

/* 預設隱藏下拉選單 */
.dropdown-menu {
	display: none; 
	position: absolute;
	top: 100%; /* 讓下拉選單貼著主按鈕的底部 */
	left: 0;   /* 對齊主按鈕的左側 */

	/* 下拉選單的美化設定 */
	background:var(--basic-dark-red);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: calc(100% - 1px);
}

.dropdown-menu::after {
	position: absolute;
	bottom: -12px;
	width: 100%;
	left: 0px;
	background: var(--basic-dark-red);
	height: 13px;
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	content: '';
}

/* 讓第二層的選項垂直排列 */
.dropdown-menu li {
	width: 100%;
}

.dropdown-menu a {
	display: inline-block;
    padding: 10px;
    width: 100%;
    color: var(--white-color);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2rem;
    border-top: 1px dashed var(--basic-red);
}

.dropdown-menu a:hover {
	color: var(--basic-yellow);
}

/* 關鍵觸發動作：當滑鼠 hover 到父層 .dropdown 時，顯示裡面的 .dropdown-menu */
.dropdown:hover .dropdown-menu {
	display: block; 
}

/*主視覺*/
.main-pc-header {
	width: 100%;
	text-align: center;
	padding: 200px 0 0 0;
}

.main-pc-header picture {
	display: inline-block;
	width: 100%;
}

.block-main {
	min-height: 950px;
}

.block-main img {
	display: inline-block;
}

.main-pc-scroll {
	display: inline-block;
	clear: both;
	position: relative;
	text-align: center;
	color: var(--basic-red);
	font-weight: bold;
    font-size: 21px;
    font-family: Times New Roman;
	margin: 0 auto;
	font-style: italic;
}

.main-pc-scroll::after {
	position: absolute;
    bottom: -25px;
    left: 50%; /* 步驟一：先把左邊緣推到正中間 */
    width: 26px;
    height: 13px;
    background: url(../images/scroll_arrow.webp) no-repeat center;
    content: '';
    
    /* 步驟二：呼叫動畫。1.5秒做完一次，無限循環，而且動作要平滑 (ease-in-out) */
    animation: floatArrow 1.5s infinite ease-in-out;
}

@keyframes floatArrow {
    0%, 100% {
        /* 起點和終點：保持置中，高度在原位 */
        transform: translateX(-50%) translateY(0);
    }
    50% {
        /* 動作到一半時：保持置中，同時稍微往上飄 5px */
        /* 如果覺得動太小，可以把 -5px 改成 -10px 試試看！ */
        transform: translateX(-50%) translateY(-5px);
    }
}

/*各大商品區塊*/
.product-big-title {
	width: 100%;
	text-align: center;
	padding: 30px 0;
}

/*自由行*/
.product-pkg-space {
	display: flex;
	gap: 40px;
	justify-content: center;
    align-items: flex-start;
}

.product-pkg-area {
	width: 100%;
	margin: 0 0 60px 0;
}

.product-pkg-pic {
	flex: 1;
	max-width: 554px;
	position: relative;
}

.product-pkg-pic-float {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}

.product-pkg-pic-inside {
	border: 1px solid var(--basic-red);
	padding: 10px;
	border-radius: 500%;
}

.product-pkg-pic-inside figure {
	border: 2px solid var(--basic-red);
	padding: 10px;
	border-radius: 500%;
}

.product-pkg-pic-inside img {
	border: 2px solid var(--basic-red);
	border-radius: 500%;
}

.product-pkg-main {
	flex: 1;
	text-align: left;
}

.product-pkg-area-title {
	text-align: left;
	position: relative;
	margin: 20px 0 15px 0;
}

.product-pkg-area-title.usa::before {
	position: absolute;
	left: -25px;
	top: -25px;
	width: 60px;
	height: 57px;
	background: url(../images/pkg_area_bk1.webp) no-repeat center;
	content: '';
}

.product-pkg-area-title.canada::before {
	position: absolute;
	left: -25px;
	top: -25px;
	width: 60px;
	height: 57px;
	background: url(../images/pkg_area_bk2.webp) no-repeat center;
	content: '';
}

.product-pkg-area-title strong ,.product-pkg-area-title span {
	position:relative;
	z-index: 1;
}

.product-pkg-area-title strong {
    font-weight: bold;
    font-size:40px;
	line-height: 1.2em;
	font-family: NSimSun;
    text-shadow: 0.5px 0px 0px currentColor, 0px 0.5px 0px currentColor;
	color: var(--basic-blue);
}

.product-pkg-area-title span {
	display: inline-block;
	color: var(--basic-red);
	margin: 0 0 0 3px;
	font-weight: bold;
	font-size: 15px;
	font-family: Times New Roman;
}

a.product-pkg-list-box {
	display: inline-flex;
	width: 100%;
	gap: 10px;
	padding: 15px 5px;
	border-bottom: 1px solid #eadfca;
	font-size: 18px;
	line-height: 1.4em;
}

a.product-pkg-list-box:hover {
	background: var(--white-color);
	border-bottom: 1px solid var(--basic-red);
}

a.product-pkg-list-box:hover .product-pkg-list-name {
	color: var(--basic-red);
}

.product-pkg-list-name {
	flex: 3;
	color: var(--black-color);
	font-weight: bold;
}

.product-pkg-list-price {
	flex: 1;
	min-width: 170px;
	text-align: right;
	color: var(--black-color);
}

.product-pkg-list-price strong {
	font-weight: bold;
	display: inline-block;
	margin: 0 3px 0 0;
	font-family: verdana;
	color: var(--basic-red);
}

.product-pkg-more-space {
	width: 100%;
	text-align: center;
}

.pkg-more-title {
	display: inline-flex;
	text-align: center;
	font-size: 30px;
	line-height: 1.3px;
	color: var(--basic-red);
	font-family: NSimSun;
    font-weight: bold;
    text-shadow: 0.5px 0px 0px currentColor, 0px 0.5px 0px currentColor;
	background: url(../images/pkg_more_bk.webp) no-repeat center;
	align-items: center;
    justify-content: center;
	min-height: 25px;
	width: 100%;
	margin: 0 0 20px 0;
}

.pkg-more-link-space {
	display: flex;
	width: 100%;
	gap: 10px 20px;
	align-items: center;
    justify-content: center;
	flex-wrap: wrap;
}

.pkg-more-link-box {
	display: inline-block;
	border-radius: 500%;
	border: 1px solid var(--basic-red);
	padding: 2px;
}

.pkg-more-link-box h3 {
	display: inline-block;
	border-radius: 500%;
	border: 2px solid var(--basic-red);
	padding:13px 12px;
	color: var(--basic-red);
	min-width: 120px;
}

.pkg-more-link-box strong ,.pkg-more-link-box span {
	display: inline-block;
	width: 100%;
	text-align: center;
}

.pkg-more-link-box strong:empty ,.pkg-more-link-box span:empty {
	display: none;
}

.pkg-more-link-box strong {
	font-size: 20px;
	line-height: 1.3em;
}

.pkg-more-link-box span {
	font-size: 12px;
}

.pkg-more-link-box:hover h3 {
	background: var(--basic-red);
	color: var(--white-color);
}

/*機票*/
.product-tkt-map-space {
	background: url(../images/tkt_map_bk.webp) no-repeat center top;
	min-height: 730px;
	width: 100%;
	position: relative;
}

.product-tkt-map-link {
	position: absolute;
	display: inline-block;
	text-align: center;
}

.product-tkt-map-link figure {
	max-width: 210px;
	overflow: hidden;
	border-radius: 500%;
	border: 1px solid var(--basic-red);
	width: 100%;
	background: var(--basic-dark-red);
	display: inline-block;
}

.product-tkt-map-link figure img {
	display: inline-block;
}

.product-tkt-map-link:hover img {
	opacity: .9;
}

.product-tkt-map-link h3 {
	display: inline-block;
	max-width: 148px;
	width: 100%;
	height: 38px;
	font-size: 20px;
	font-weight: bold;
	color: var(--white-color);
	line-height: 38px;
	text-align: center;
	clip-path: polygon(
		10px 0%, calc(100% - 10px) 0%, 
		100% 10px, 100% calc(100% - 10px), 
		calc(100% - 10px) 100%, 10px 100%, 
		0% calc(100% - 10px), 0% 10px
	);
	background: var(--basic-red);
	margin: -10px auto 0 auto;
}

.product-tkt-map-link:hover h3 {
	background: var(--basic-dark-red);
}

.tkt-link1 {/*溫哥華*/
	left: 307px;
    top: 0px;
}

.tkt-link2 {/*舊金山*/
	left: 85px;
    top: 90px
}

.tkt-link3 {/*洛杉磯*/
	left: 85px;
    top: 298px;
}

.tkt-link4 {/*夏威夷*/
	left: 133px;
    bottom: 34px;
}

.tkt-link5 {/*多倫多*/
	right: 96px;
    top: 245px;
}

.tkt-link6 {/*紐約*/
	right: 96px;
    bottom: 68px;
}

.product-tkt-more-space {
	width: 100%;
	text-align: center;
	margin: 30px auto;
}

.product-tkt-more-space a {
	max-width: 252px;
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	display: inline-block;
	color: var(--white-color);
	font-size: 20px;
	font-weight: bold;
	background: url(../images/tkt_more_bk_a.webp) no-repeat center;
}

.product-tkt-more-space a:hover {
	background: url(../images/tkt_more_bk_b.webp) no-repeat center;
}

/*飯店*/
.tab-container {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

/* 頁籤選單區塊 */
.tab-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
    justify-content: center;
    gap: 20px;
	flex-wrap: wrap;
}

.tab-menu a {
	display: flex;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	border-radius: 200px;
	border: 1px solid var(--basic-red);
	font-size: 20px;
	line-height: 1.3em;
	color: var(--basic-red);
	position: relative;
	overflow: hidden;
	justify-content: space-between;
	align-items: center;
}

.tab-menu a figure {
	display: flex;
}

.tab-menu a h3 {
	flex: 1;
	padding: 0 0 5px 15px;
}

.tab-menu a h3 span ,.tab-menu a h3 strong {
	display: inline-block;
	width: 100%;
}

.tab-menu a h3 span {
	font-size: 15px;
	line-height: 1.2em;
	font-weight: normal;
}

.tab-menu a.active ,.tab-menu a:hover {
	background: var(--basic-red);
	color:var(--white-color);
}

.tab-menu a.active {
	background: var(--basic-red);
	color:var(--white-color);
}

.tab-menu a.active figure {
	background: var(--basic-red);
	position: relative;
}

.tab-menu a.active figure::before {
	content: '';
	width: 22px;
	height: 24px;
	background: url(../images/hotel_tab_arrow.webp) no-repeat center;
	position: absolute;
	top: 16px;
    right: 20px;
	z-index: 1;
}

.tab-menu a.active figure img {
	opacity: .6;
}

/* 內容區塊 */
.tab-panel {
	display: none; /* 預設全部藏起來 */
}

/* 被啟動的內容才會顯示 */
.tab-panel.active {
	display: block;
	animation: fadeIn 0.4s ease; /* 加個淡入小動畫更有質感 */
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

.hotel-more-space {
	width: 100%;
	margin: 40px 0 0 0;
	text-align: center;
}

.hotel-more-space a {
	display: inline-block;
	text-align: center;
	border-radius: 150px;
	border: 1px solid var(--basic-red);
	color: var(--basic-red);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3em;
	padding: 8px 40px 8px 20px;
	position: relative;
}

.hotel-more-space a::after {
	content: '';
	width: 11px;
	height: 12px;
	background: url(../images/hotel_more_arrow.webp) no-repeat center;
	position: absolute;
	right: 20px;
	top: 16px;
}

.hotel-more-space a:hover {
	transform: translateY(-5px);
}

.hotel-product-space {
	width: 100%;
	gap: 15px;
	justify-content: center;
    margin: 20px 0 0 0;
	display:grid;
	height: 450px;
    overflow: hidden;
	grid-template-columns: repeat(3, 1fr);
}

.hotel-product-box {
	padding: 350px 20px 20px 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	flex: 1;
	background: var(--basic-red);
	align-items: center;
	justify-content: center;
}

.hotel-product-box:hover {
	padding: 305px 20px 30px 20px;
}

.hotel-product-pic {
	width: 110%;
    position: absolute;
    bottom: 110px;
    text-align: center;
    left: -24px;
}

.hotel-product-pic img {
	display: inline-block;
	border-radius: 0 0 100% 100%;
}

.hotel-product-box:hover {
	background: var(--basic-dark-red);
}

.hotel-product-box:hover .hotel-product-pic {
	bottom: 180px;
}

.hotel-product-infor {
	color: var(--white-color);
}

.hotel-product-name {
	width: 100%;
	font-size: 24px;
	line-height: 1.3em;
	font-weight: bold;
	text-align: center;
}

.hotel-product-name span {
	font-size: 15px;
	display: inline-block;
	width: 100%;
	font-weight: normal;
	line-height: 1.3em;
}

.hotel-product-name span:empty {
	display: none;
}

.hotel-product-name::after {
	display: none;
}

.hotel-product-box:hover .hotel-product-name::after {
	content: '';
	width: 100%;
	height: 7px;
	background: url(../images/hotel_line.webp) no-repeat center;
	display: block;
	margin: 10px 0;
}

.hotel-product-box:hover .hotel-product-text {
	font-size: 18px;
	line-height: 1.2em;
	text-align: center;
	color: var(--white-color);
	display: block;
}

.hotel-product-text {
	display: none;
	font-size: 18px;
	line-height: 1.2em;
}

.hotel-product-price {
	display: inline-block;
	width: 100%;
	text-align: center;
	color: var(--white-color);
	margin: 5px 0 0 0;
}

.hotel-product-price strong {
	font-weight: bold;
	display: inline-block;
	margin: 0 3px 0 0;
	font-family: verdana;
	color: var(--basic-yellow);
}

/*票券*/
/* 滿版 100% 畫面的主容器 */
.ticket-gallery {
	display: flex;
	width: 100vw;
	height: 60vh;
	background-color: var(--basic-red);
	gap: 4px;
}

/* 個別區塊 */
.gallery-item {
	flex: 1; /* 預設均分寬度 */
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: block;
	transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 滑鼠 Hover 展開效果 */
.gallery-item:hover {
	flex: 1.4;
}

/* 背景圖片 */
.gallery-item img.bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: .5;
}

.gallery-item:hover img.bg-img {
	transform: scale(1.05);
	opacity: 1;
}

/* 底部漸層遮罩 */
.gallery-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
	pointer-events: none;
}

/* --------------------------------- */
/* 按鈕樣式：初始分離，Hover 滑入 */
/* --------------------------------- */
.btn-label-group {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	z-index: 10;
	width: max-content;
}

/* 白色/米白色膠囊 (只有文字) */
.pill {
	background-color: var(--basic-light-yellow);
	color: var(--black-color);
	border-radius: 22px;
	padding: 13px 25px;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 20px;
	font-weight: bold;
}

/* 紅色圓圈和箭頭容器 */
.circle-group {
	position: relative;
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 紅色小圈圈 (深紅色) */
.btn-circle {
	width: 34px;
	height: 34px;
	background-color: var(--basic-red);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 白色箭頭 */
.btn-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	object-fit: contain;
}

/* --------------------------------- */
/* Hover 狀態：圓圈和箭頭滑入白色膠囊區域 */
/* --------------------------------- */
.gallery-item:hover .circle-group {
	margin-left: -40px;
}

.gallery-item:hover .pill {
	padding-right: 48px; 
}




/*中間調度區
-----------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	html,
    body {
        width: 100%;
        min-height: 100%;
	}

	.block-center {
		padding:0 3%;
	}

	.product-tkt-map-space {
		background:transparent;
		min-height: unset;
		display: flex;
		justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
	}

	.product-tkt-map-link {
		position: unset;
		left: unset;
		top: unset;
		right: unset;
		bottom: unset;
		width: 100%;
        max-width: 230px;
	}

	.ticket-gallery {
		height: 50vh;
	}

	.pill {
		font-size: 18px;
		letter-spacing: 0;
		padding: 14px 10px;
	}

}

@media screen and (max-width: 1200px) {
	.product-pkg-main {
		flex: 2;
	}

	a.product-pkg-list-box {
		flex-wrap: wrap;
	}

	.product-pkg-list-name ,.product-pkg-list-price {
		width: 100%;
		flex: auto;
	}

	.product-pkg-pic-float {
		max-width: 100px;
	}

	.hotel-product-space {
		display: flex;
		flex-wrap: wrap;
		height: unset;
	}

	.hotel-product-box {
		gap: 10px;
		justify-content: flex-start;
	}

	.hotel-product-box ,.hotel-product-box:hover {
		width: calc(50% - 20px);
        flex-wrap: wrap;
		padding: 0 0 20px 0;
		flex-direction: column;
		flex: unset;
	}

	.hotel-product-name::after {
		content: '';
		width: 100%;
		height: 7px;
		background: url(../images/hotel_line.webp) no-repeat center;
		display: block;
		margin: 10px 0;
	}

	.hotel-product-box .hotel-product-text {
		text-align: center;
		color: var(--white-color);
		display: block;
	}

	.hotel-product-box .hotel-product-pic {
		bottom:unset;
		position: unset;
		width: 100%;
	}

	.hotel-product-box:hover .hotel-product-pic {
		bottom:unset;
		position: unset;
	}

	.hotel-product-pic img {
		border-radius: unset;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		max-height: 300px;
	}

	.hotel-product-name {
		font-size: 22px;
	}

	
}

@media screen and (max-width:960px) {
	.main-pc-header {
		padding: 108px 0 0 0;
	}
	.container {
		background: transparent;
	}
	.block-main {
		height: auto;
		min-height: unset;
	}
}
@media screen and (max-width:1000px) {
	.tab-menu a figure {
		display: none;
	}

	.tab-menu a h3 {
		padding: 0 10px 5px 10px;
	}

	.tab-menu {
		gap: 10px;
	}

	.ticket-gallery {
		height: unset;
	}

	.ticket-gallery {
      flex-wrap: wrap; /* 允許換行 */
    }
    /* 前 3 個：減去 gap (2 個 4px = 8px) 後除以 3 */
    .gallery-item:nth-child(-n+3) {
      flex: 1 1 calc((100% - 8px) / 3);
    }
    /* 後 2 個：減去 gap (1 個 4px = 4px) 後除以 2 */
    .gallery-item:nth-child(n+4) {
      flex: 1 1 calc((100% - 4px) / 2);
    }
    /* Hover 依然保留微放大的比例 */
    .gallery-item:hover {
      flex-grow: 1.3;
    }
}


/*平板
-----------------------------------------------------------------*/

@media screen and (max-width: 768px) {
	html {
		scroll-behavior: smooth;
	}

	.main-pc-header {
		padding: 40px 0 0 0;
	}

	.block-product {
		padding: 30px 0;
	}

	#pkg .product-big-title {
		padding: 30px 0 0 0;
	}

	.hotel-product-box, .hotel-product-box:hover {
		width: 100%;
		padding: 0;
		flex-wrap: unset;
        flex-direction: row;
	}

	.hotel-product-box .hotel-product-pic, .hotel-product-box:hover .hotel-product-pic {
		position: unset;
        width: 35%;
		line-height: 0;
		height: 100%;
		flex: 1;
	}

	.hotel-product-infor {
		padding: 20px;
		flex: 1;
	}

	.hotel-product-name span {
		display: inline-block;
	}

	.product-tkt-map-link {
		width: 45%;
	}

	.hotel-product-box {
		gap: 0;
	}

	/*消失*/
	.block-menu ,.product-pkg-pic {
		display: none;
	}

	
}


/*中間調度區
-----------------------------------------------------------------*/

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

	.block-center {
        padding: 0 5%;
    }

	.product-tkt-map-link h3 {
		transform: scale(0.8);
	}

	.hotel-product-box ,.hotel-product-box:hover {
    	flex-wrap: wrap;
		flex-direction: column;
	}

	.hotel-product-box .hotel-product-pic, .hotel-product-box:hover .hotel-product-pic {
		position: unset;
		width: 100%;
		max-height: 200px;
	}

	.hotel-product-box, .hotel-product-box:hover {
		padding: 0px;
		width: 95%;
	}

    .gallery-item:nth-child(-n+4) ,.gallery-item:nth-child(5) {
      flex: 1 1 calc((100% - 4px) / 2) !important;
    }

    /* 稍微縮小按鈕與字體，避免在小螢幕被裁切 */
    .pill {
        font-size: 20px;
        padding: 0 25px;
        height: 40px;
    }
    .btn-circle {
      width: 40px;
      height: 40px;
    }
    .btn-arrow {
      width: 12px;
      height: 12px;
    }
    .gallery-item:hover .circle-group {
      margin-left: -35px; /* 滑入距離微調 */
    }

	.tab-container {
		overflow: unset;
	}

	.tab-menu {
		position: sticky;
		top: 40px;
		background: url(../images/body_all_bk.webp) no-repeat center;
		z-index: 2;
		padding: 8px 0;
	}

	.tab-menu a h3 {
		padding: 8px 10px;
	}

	.pkg-more-link-box strong {
		font-size: 18px;
    	line-height: 1em;
	}

	.pkg-more-link-box h3 {
		padding: 8px 4px;
	}

	.pkg-more-link-space {
		gap: 10px;
	}

	.product-pkg-area-title strong {
		font-size: 30px;
	}

	.product-pkg-area-title {
		margin: 20px 0 0px 0;
	}

	.tab-menu a {
		font-size: 18px;
    	line-height: 1.2em;
	}
	

	/*消失*/
	.product-pkg-area-title.usa::before ,.product-pkg-area-title.canada::before ,.tab-menu a h3 span {
		display: none;
	}

}


/*手機
-----------------------------------------------------------------*/

@media (max-width: 480px) {
	.ticket-gallery {
      flex-direction: column;
      flex-wrap: nowrap;
      height: 120vh; /* 增加整體高度，確保直排每個區塊比例好看 */
    }
    .gallery-item {
      flex: 1 1 auto !important;
    }
    /* 手機直排時，寬度已是 100%，取消 Hover 展開改變比例的動畫 */
    .gallery-item:hover {
      flex-grow: 1 !important; 
    }
    .btn-label-group {
      bottom: 25px;
    }

	.hotel-product-infor {
		padding: 13px;
	}

	.product-big-title {
		max-width: 300px;
		margin: 0 auto;
		padding: 20px;
	}

	#hotel .product-big-title {
		padding: 20px 0 0 0;
	}

	.hotel-product-name {
		padding: 0 0 10px 0;
		border-bottom: 1px solid var(--basic-light-red);
		margin: 0 0 10px 0;
	}

	.hotel-more-space {
		margin: 20px 0 0 0;
	}


	/*消失*/
	.hotel-product-name::after ,.hotel-product-box:hover .hotel-product-name::after {
		display: none;
	}
	
}


@media (max-width: 380px) {
	.hotel-product-box {
		flex-direction: column;
	}
}