img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section{
	position: relative;
	padding: 2rem 0 5rem;
}
body{
	font-family: Microsoft JhengHei;
	background-color: #65e9fd;
	background: url(../images/bg.jpg?v20250617);
	background-size: contain;
	box-sizing: content-box;
}
@font-face {
	font-family: SweiSpringCJKtc-Regular;
	src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringCJKtc-Regular.woff2) format("woff2")
	, url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringCJKtc-Regular.woff) format("woff");
}
.desktop{
	display: block;
	position: relative;
}
.kv_title{
	position: absolute;
	width: 30%;
	left: 30%;
	margin-top: 5.5vw;
	height: auto;
	z-index: 1;
	animation: slideUp 1s ease forwards;
	opacity: 0;
}
.kv{
	position: absolute;
	width: 80%;
	left: 10%;
	margin-top: 1.2vw;
	height: auto;
	z-index: 1;
	animation: floating 3s ease-in-out infinite;
}
@keyframes slideUp {
	0% {
		transform: translateY(50%);
		opacity: 0;
	}
	50% {
		transform: translateY(-8%);
		opacity: 1;
	}
	65% {
		transform: translateY(4%);
		opacity: 1;
	}
	80% {
		transform: translateY(-4%);
		opacity: 1;
	}
	95% {
		transform: translateY(2%);
		opacity: 1;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}
@keyframes floating {
	0% {
		transform: translate(0, 0px);
	}
	50% {
		transform: translate(0, 15px);
	}
	100% {
		transform: translate(0, -0px);
	}
}
.mobile{
	display: none;
}
.section_title {
	width: 80%;
	margin: 3rem auto;
	overflow: hidden;
}
.section_title h1{
	font-family: 'SweiSpringCJKtc-Regular';
	font-weight: 600;
	letter-spacing: 0;
	font-size: 3.8rem;
	text-align: center; 
}
.section_title span{
    position: relative;
    letter-spacing: 1px;
    border-radius: 5rem;
    font-size: 1.3rem;
    display: inline-block;
    width: fit-content;
    padding: 10px 30px;
}
.section_title span::before {
	content: '';
	top: 20px;
	left: -100%;
	position: absolute;
	border: #050974 1px solid;
	width: 100%;
}
.section_title span::after {
	content: '';
	top: 20px;
	right: -100%;
	position: absolute;
	border: #050974 1px solid;
	width: 100%;
}
.travel-fashion-block .section_title h1, .travel-luggage-block .section_title h1, .travel-camera-block .section_title h1, .travel-essentials-block .section_title h1,  .travel-audio-block .section_title h1, .popular-picks-block .section_title h1, .refreshing-bodycare-block .section_title h1 {
	color: #050974;
}
.travel-fashion-block .section_title span, .travel-luggage-block .section_title span, .travel-camera-block .section_title span, .travel-essentials-block .section_title span, .travel-audio-block .section_title span, .popular-picks-block .section_title span, .refreshing-bodycare-block .section_title span {
	background-color: #050974;
	color: #fff;
}
.travel-essentials-block .appliance-banners {
	display: flex;
	gap: 20px; /* 設置兩個橫幅之間的間距 */
	margin-top: 20px;
	width: 100%;
  }
  
.travel-essentials-block .banner-item {
	border: 2px solid #000;
	flex: 1; /* 讓兩個橫幅平均分配寬度 */
	height: auto;
}
.travel-essentials-block .banner-item img {
	width: 100%;
	object-fit: cover; /* 確保圖片填滿容器且不變形 */
}
.shadowFx{
	box-shadow: 12px 12px 0 0 rgba(0, 0, 0, 0.15);
}
.boxFx {
	filter: contrast(98%);
	transition: all 0.3s;
	background-color: #fff;
}
.boxFx:hover {
	filter: contrast(110%);
	transition: all 0.1s;
}
.Box_bg{
	background-size: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: bottom;
}
.discount-offer-block{
	z-index: 1;
	padding-top: 33%;
}
.discount-offer-block .title{
	font-family: SweiSpringCJKtc-Regular;
	font-weight: bolder;
	font-size: 1.7rem;
	letter-spacing: 0;
	background-image: url(../images/first_title_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 1.8rem 0 1rem;
	border-bottom: 1px solid #000;
	text-align: center;
	color: #fff;
}
.discount-offer-block p{
    margin: 1.6rem auto 1.2rem;
    line-height: 2.3rem;
    text-align: center;
    font-weight: bolder;
    font-size: 1.65rem;
}
.discount-offer-block p a{
	color: #000;
	text-decoration: underline;
}
.discount-offer-block i{
	font-size: 1rem;
}
.discount-offer-block span{
	font-family: 'SweiSpringCJKtc-Regular';
	color: #df7100;
	font-size: 2rem;
	font-weight: bolder;
	margin: 0 0.2rem;
}
.add-to-cart-info {
    position: relative; /* 確保父元素為relative，以便子元素的absolute定位 */
}
.add-to-cart-info::after {
    position: absolute;
    content: '(限於購物車頁面加購)';
    text-align: center;
    display: block;
    font-size: 0.6rem;
    color: #df7100;
    top: 85%; /* 將其放置在父元素的底部 */
    left: 50%; /* 水平置中 */
	width: 100%;
    transform: translate(-50%, 0); /* 垂直置中 */
}
.discount-offer-block .flexBox{
	padding-bottom: 1.3rem;
	margin: 0.75rem;
	border: #000 solid 1px;
	border-radius: 50px;
	overflow: hidden;
}
.discount-offer-block .shopNow {
	border-radius: 100px;
	overflow: hidden;
}
.discount-offer-block .dashed{
	position: relative;
	bottom: -12%;
	width: 100%;
	color: #000;
	border-bottom: #000 dashed 1px;
}
.accessories-section {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 四個欄位等寬 */
	height: 100%;
	border: 1px solid #000; /* 與男士區塊的間隔線 */
}

.popular-section {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; /* 女士區塊內的三欄等寬 */
	grid-template-rows: repeat(3, 1fr); /* 三列 */
	grid-column: 1 / span 3; /* 占據前3個欄位 */
}

.popular-item1 {
	grid-column: 1; /* 佔據第一欄 */
	grid-row: span 3; /* 占据三列 */
	display: grid;
	grid-template-rows: repeat(3, 1fr); /* 切割為三列 */
}
.popular-item1-1, .popular-item1-2, .popular-item1-3 {
	background-color: #f0f0f0; /* 背景色區分每個區塊 */
	border: 1px solid #000; /* 加入1px的間隔線 */
}

.popular-item2, .popular-item3, .popular-item4 {
	background-color: #f0f0f0;
	display: flex;
	border: 1px solid #000; /* 加入1px的間隔線 */
}
.popular-item2 {
	grid-column: 2; /* 占据第二欄 */
	grid-row: 1 / span 2; /* 占据第一列及第二列 */
}
.popular-item3 {
	grid-column: 2; /* 占据第二欄 */
	grid-row: 3; /* 占据第三列 */
}
.popular-item4 {
	grid-column: 3; /* 占据第三欄 */
	grid-row: span 3; /* 占据1列至3列 */
}
.supplementary-section {
	display: grid;
	grid-template-rows: repeat(3, 1fr); /* 一欄三列 */
	grid-column: 4; /* 占據第4個欄位 */
	position: relative; /* 相對定位，方便放置圖標 */
}
.supplementary-item1, .supplementary-item2, .supplementary-item3 {
	background-color: #f0f0f0;
	border: 1px solid #000; /* 加入1px的間隔線 */
}
/* 確保圖片等比縮放且不扭曲 */
.item img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 等比縮放，不裁切或扭曲 */
}
.travel-luggage-block .grid-container {
	border: #000 1px solid;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0;
	align-items: stretch; /* 讓列高度相等，並以最高者為基準 */
}
.left-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
}
.right-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
}
.suitcase-item {
    background-color: #f2f2f2;
    border: 1px solid #000;
    text-align: center;
}
.suitcase-1 { grid-area: 1 / 1 / 4 / 2; }  /* 商品1: 占滿第一欄的所有三列 */
.suitcase-2 { grid-area: 1 / 2 / 2 / 4; }  /* 商品2: 占滿第二、第三欄的第一列 */
.suitcase-3 { grid-area: 2 / 2 / 3 / 3; }  /* 商品3: 第二欄的第二列 */
.suitcase-4 { grid-area: 2 / 3 / 3 / 4; }  /* 商品4: 第三欄的第二列 */
.suitcase-5 { grid-area: 3 / 2 / 4 / 3; }  /* 商品5: 第二欄的第三列 */
.suitcase-6 { grid-area: 3 / 3 / 4 / 4; }  /* 商品6: 第三欄的第三列 */
.suitcase-7 { grid-area: 1 / 1 / 2 / 2; }  /* 商品7: 右邊第一欄第一列 */
.suitcase-8 { grid-area: 1 / 2 / 2 / 3; }  /* 商品8: 右邊第二欄第一列 */
.suitcase-9 { grid-area: 2 / 1 / 3 / 2; }  /* 商品9: 右邊第一欄第二列 */
.suitcase-10 { grid-area: 2 / 2 / 3 / 3; } /* 商品10: 右邊第二欄第二列 */
.travel-essentials-block .slogan{
	display: flex;
	width: fit-content;
	margin: 0 auto;
}
.travel-essentials-block .slogan img{
	padding: 3rem 2rem 0;
}
.camera-sale-container {
	width: 100%;
	margin: auto;
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    justify-content: space-between; /* 使空間均勻分配 */
    background-image: url(../images/cameraSale_bg.png); /* 替換為你的底圖 */
    background-size: contain; /* 確保背景圖片不被裁切 */
    background-repeat: no-repeat; /* 不重複背景 */
    background-position: center; /* 讓圖片居中 */
    padding: 10vw; /* 避免商品與邊緣貼合 */
}
.camera {
    flex: 0 1 calc(33.33% - 1vw); /* 每個商品佔據三分之一的寬度，減去隙縫 */
    box-sizing: border-box; /* 包含 padding 和 border */
    padding: 1vw;
    text-align: center;
}

.playback-device-sale-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右兩個區塊 */
	border: #000 solid 1px;
}
.playback-device-sale-left,
.playback-device-sale-right {
    display: grid;
    grid-template-areas: 
        "device-1 device-1"
        "device-2 device-3";
}
.playback-device-sale-right {
    grid-template-areas: 
        "device-4 device-4"
        "device-5 device-6";
}
.playback-device-sale-item {
    border: 1px solid #000; /* 辨識邊框 */
    text-align: center;
}
.device-1 {
    grid-area: device-1; /* 第一個商品佔滿兩列 */
}
.device-2 {
    grid-area: device-2; /* 第二個商品 */
}
.device-3 {
    grid-area: device-3; /* 第三個商品 */
}
.device-4 {
    grid-area: device-4; /* 右側第一個商品佔滿兩列 */
}
.device-5 {
    grid-area: device-5; /* 右側第二個商品 */
}
.device-6 {
    grid-area: device-6; /* 右側第三個商品 */
}
.travel-essentials-block .flex-container, .travel-essentials-block .flexBox, .refreshing-bodycare-block .flex-container, .refreshing-bodycare-block .flexBox{
	border: #000 solid 1px;
}

.evnt24tp-container{
	width: 1380px;
	margin: 0 auto;
	padding: 0;
	align-content: center;
}
.flex-container{
	flex-direction: row;
	justify-content: center;
	display: flex;
	flex-flow: row;
}
.flexRow{
	display: flex;
	flex-wrap: wrap;
	flex-flow: row;
	justify-content: center;
}
.discount-offer-block .flexBox{
	min-width: 320px; 
	box-sizing: border-box;
}
.travel-essentials-block .flexBox{
	min-width: 320px; 
	box-sizing: border-box;
}
.popular-picks-block .fashion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
}


.refreshing-bodycare-block .grid-item {
	color: #050974;
    text-align: center; /* 文字置中 */
}
.refreshing-bodycare-block .sub-title {
	grid-column: span 2;
	text-align: center;
	margin: 1rem auto;
}
.refreshing-bodycare-block .grid-item a {
	border: #000 1px solid;
}
.refreshing-bodycare-block .sub-title .date {
    font-size: 1.2rem; /* 增加字體大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 10px; /* 增加底部間距 */
    background-color: rgba(255, 255, 0, 0.5); /* 螢光黃色背景 */
    padding: 5px; /* 增加內邊距 */
    border-radius: 5px; /* 圓角效果 */
    display: inline-block; /* 使背景只包裹文字 */
}
.refreshing-bodycare-block .sub-title p {
    font-size: 2rem; /* 品牌名稱的字體大小 */
	font-weight: 600;
	font-family: 'SweiSpringCJKtc-Regular';
    margin-bottom: 5px; /* 增加底部間距 */
}
.refreshing-bodycare-block .sub-title p span {
    font-size: 2.2rem; /* 折扣的字體大小 */
    color: #df7100; /* 使用紅色來強調折扣 */
    font-weight: bold; /* 加粗 */
}
.refreshing-bodycare-block .grid-container {
    display: grid;
    grid-template-areas: 
        "title1 title1 title2 title2"
        "item1 item2 item3 item4";
    gap: 0; /* 調整欄位之間的間距 */
}

.grid-item.sub-title {
    grid-area: title1; /* 第一列的第一個標題 */
}

.grid-item.sub-title:nth-of-type(2) {
    grid-area: title2; /* 第一列的第二個標題 */
}

.grid-item:nth-of-type(3) {
    grid-area: item1; /* 第二列的第一個商品 */
}

.grid-item:nth-of-type(4) {
    grid-area: item2; /* 第二列的第二個商品 */
}

.grid-item:nth-of-type(5) {
    grid-area: item3; /* 第二列的第三個商品 */
}

.grid-item:nth-of-type(6) {
    grid-area: item4; /* 第二列的第四個商品 */
}
.fashion-grid {
	row-gap: 24px; /* 增加列之間的上下間距 */
    grid-template-areas:
        "item1 item2 item3 item4"
        "item5 item6 item7 item8"
        "item9 item10 item11 item12"
        "item13 item13 item14 item14";
}

/* 為每個item添加獨立的grid-area定義 */
.fashion-grid .item1 { grid-area: item1; }
.fashion-grid .item2 { grid-area: item2; }
.fashion-grid .item3 { grid-area: item3; }
.fashion-grid .item4 { grid-area: item4; }
.fashion-grid .item5 { grid-area: item5; }
.fashion-grid .item6 { grid-area: item6; }
.fashion-grid .item7 { grid-area: item7; }
.fashion-grid .item8 { grid-area: item8; }
.fashion-grid .item9 { grid-area: item9; }
.fashion-grid .item10 { grid-area: item10; }
.fashion-grid .item11 { grid-area: item11; }
.fashion-grid .item12 { grid-area: item12; }
.fashion-grid .item13 {
	border: 1px solid #000;
    grid-area: item13;
}
.fashion-grid .item14 {
	border: 1px solid #000;
    grid-area: item14;
}
.fashion-item {
	border: 1px solid #000;
    width: 100%;
    height: 100%;
}
.fashion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item {
	overflow: hidden;
	text-align: center;
}
.evnt24tp-content{
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;	
	align-items: center;
}
.actionBtn{
	text-decoration: none;
	filter: none;
	transform: scale(0.9);
	transition: all 0.3s;
}
.actionBtn:hover{
	filter: contrast(120%);
    transform: scale(0.95);
	transition: all 0.1s;
}
.boxShadow{
	box-shadow:0.75rem 0.75rem 0px rgba(0, 0, 0, 0.1);	
}
.event-info{
	font-size: 1rem;
	color: #333;
	font-weight: bold;
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* response */

@media (max-width: 1440px) {
	.section_title {
		margin: 3rem auto;
	}
	.evnt24tp-container{
		width: 90%;
	}
	.discount-offer-block .flex-container{
		flex-wrap: wrap;
	}
	.discount-offer-block .flexRow{
		width: 100%;
	}
	.discount-offer-block .flexBox{
		width: 50%;
	}
	.travel-essentials-block .flexBox{
		min-width: auto; 
	}
	.refreshing-bodycare-block .flexBox{
		min-width: auto; 
	}
	.camera-sale-container {
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.section_title {
		margin: 2rem auto;
	}
	.section_title h1{
		font-size: 3.6rem;
	}
	.travel-essentials-block .appliance-banners {
		flex-direction: column;
	  }
	.travel-essentials-block .banner-item {
		width: 100%;
	  }
	  .accessories-section {
		width: 100%;
		margin: auto;
		grid-template-columns: repeat(3, 1fr); 
	}
	.refreshing-bodycare-block .appliance-banners {
		flex-direction: column;
	  }
	  .refreshing-bodycare-block .banner-item {
		width: 100%;
	  }
	.supplementary-section {
		grid-template-columns: repeat(3, 1fr); /* 三欄 */
		grid-template-rows: 1fr; /* 一列 */
		grid-column: span 3; 
	}
	.travel-luggage-block .grid-container {
		width: 100%;
		margin: auto;
		display: grid;
		grid-template-columns: 3fr;
		gap: 0;
	}
	.popular-picks-block .fashion-grid {
		border: #000 1px solid;
		row-gap: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"item1 item2"
			"item3 item4"
			"item5 item6"
			"item7 item8"
			"item9 item10"
			"item11 item12"
			"item13 item13"
			"item14 item14";
	}
}

@media(max-width: 768px){
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
	section{
		padding: 2rem 0 2rem;
	}
	.section_title {
		margin: 1.2rem auto;
	}
	.section_title h1{
		font-size: 8vw;
		line-height: 1.2;
	}
	.section_title span{
		font-size: 3vw;
		padding: 1vw 4vw;
	}
	.section_title span::before, .section_title span::after {
		top: 40%;
	}
	.flexRow {
        width: 100%;
    }
	.discount-offer-block .flexBox{
		padding-bottom: 1rem;
		margin: 0;
		min-width: auto;
	}
	.discount-offer-block{
		margin-top: -5%;
		padding: 0;
	}
	.discount-offer-block .flexBox{
		min-width: auto;
		margin: 1vw;
	}
	.discount-offer-block .title{
		font-size: 1.5rem;
	}
	.discount-offer-block p{
		margin: 1rem 1rem 1.2rem;
		height: 5rem;
		font-size: 3.6vw;
		align-content: space-around;
	}
	.discount-offer-block .dashed{
		display: none;
	}
	.travel-essentials-block .flex-container{
		flex-wrap: wrap;
	}
	.camera-sale-container {
		background: #ffcfff;
		border-radius: 60px;
		padding: 25px; /* 避免商品與邊緣貼合 */
	}
	.camera {
		flex: 0 1 calc(50% - 1vw); /* 每個商品佔據三分之一的寬度，減去隙縫 */
		padding: 2vw;
	}
	.playback-device-sale-container {
		display: grid;
		grid-template-columns: 1fr; /* 左右兩個區塊 */
		border: #000 solid 1px;
	}
	.refreshing-bodycare-block .grid-container {
		display: grid;
		grid-template-areas: 
			"title1 title1"
			"item1 item2"
			"title2 title2"
			"item3 item4";
		gap: 0; /* 調整欄位之間的間距 */
	}
	.refreshing-bodycare-block .sub-title .date {
		font-size: 3.6vw; /* 增加字體大小 */
		margin-bottom: 2vw; /* 增加底部間距 */
	}
	.refreshing-bodycare-block .sub-title p {
		font-size: 5.5vw; /* 品牌名稱的字體大小 */
	}
	.refreshing-bodycare-block .sub-title p span {
		font-size: 6.5vw; /* 折扣的字體大小 */
	}
	
}

@media(max-width: 500px){
	section{
		padding: 0.5rem 0 2rem
	}
	.discount-offer-block{
		margin-top: -15%;
	}
	.discount-offer-block .flexBox{
		border-radius: 10vw;
	}
	.discount-offer-block .title{
		padding: 1.2rem 0 0.8rem;
		font-size: 4.6vw;
		letter-spacing: 0;
	}
	.discount-offer-block p {
        font-size: 4.2vw;
		margin: 3vw 1.2vw;
		line-height: 1.2;
    }
	.discount-offer-block span {
		font-size: 5.8vw;
		margin: 0 0.2vw;
	}
	.add-to-cart-info::after {
		font-size: 2.2vw;
		margin-top: 2vw;
	}
	.event-info {
		margin-top: 2vw;
		font-size: 3.6vw;
	}
	.actionBtn{
		width: 85%;
	}
}