@charset "utf-8";
/* CSS Document */


/* 仿宋體字體 */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/* 明體字體 */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);

.text-green {
    color: #006271;
}
.fw-7 {
    font-weight: 700;
}
.more-btn {
    display: inline-block;
    background: linear-gradient(134deg, #c8bc9f 79%, #c69d56 79%);
    color: white;
    text-decoration: none;
	padding: 10px 5px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, opacity 0.2s;
    text-align: center;
    min-width: 160px;
    max-width: 260px;
}

.more-btn:hover {	
    color: white;
    transform: translateY(-2px);
    opacity: 0.9;
}

.header-wrapper {
    display: flex;
    align-items: flex-start; /* 確保虛線對齊綠色區塊的最頂端 */
    width: 100%;
}

/* 左右兩側的虛線 */
.side-dashed-line {
    flex: 1;
    border-top: 1.5px dashed #a5c2bc;
    margin-top: 0; /* 確保沒有任何間距 */
}

/* 綠色標題主體 */
.header-banner {
    background-color: #005d53;
    color: #fff;
    display: flex;
    align-items: center;
    /* padding: 5px 0 0 0; */
    padding-top: 5px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin: 0; /* 確保不產生間隙 */
    min-width: max-content; /* 自動依文字長度撐開 */
    position: relative;
    top: -1px; /* 微調：消除某些瀏覽器下的 1px 渲染誤差 */
}

.header-banner p {
    font-size: 20px;
    margin: 0 2px;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
}

/* 標題內部的裝飾金線 */
.inner-line {
    flex: 1;
    min-width: 20px;
    height: 1px;
    background-color: #C9BC9C;
}

/* 產品區塊 */
.river-cruise-subtitle {
	color: #B28247;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 30px 0 0 0;
}
.ocean-cruise-subtitle {
	color: #014F8F;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 30px 0 0 0;
}
.river-cruise-container {
	width: 100%;
	display: flex;
	gap: 30px;
	align-items: stretch;
	padding: 50px 10px;
}

.cruise-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: transparent;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.river-cruise-container > a {
    flex: 1;
    display: flex;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}


.river-cruise-container > a > .cruise-card {
    flex: 1;
    width: 100%;
}

/* .river-cruise-container > a > .cruise-card:hover .title,
.river-cruise-container > a > .cruise-card:hover .ocean-cruise-title,
.river-cruise-container > a > .cruise-card:hover .subtitle,
.river-cruise-container > a > .cruise-card:hover .cruise-card-description,
.river-cruise-container > a > .cruise-card:hover .stat-value,
.river-cruise-container > a > .cruise-card:hover .stat-label {
    color: #7e7e7e;
} */

a:hover > .river-cruise-container .title,
a:hover > .river-cruise-container .ocean-cruise-title,
a:hover > .river-cruise-container .subtitle,
a:hover > .river-cruise-container .cruise-card-description,
a:hover > .river-cruise-container .stat-value,
a:hover > .river-cruise-container .stat-label {
    /* color: #0169be; */
    color: #7e7e7e;
}

/* 圖片外框 */
.image-box {
	width: 100%;
	margin-bottom: 25px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.image-box img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

/* 文字內容區塊：包含左側垂直線 */
.content-area {
	position: relative;
	padding-left: 25px;      /* 文字與線的距離 */
	border-left: 1px solid #b28c57; /* 金棕色垂直線 */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* 等腰三角形箭頭：對齊線的最上方 */
.content-area::before {
	content: '';
	position: absolute;
	top: 0;                 /* 貼齊邊線頂部 */
	left: -1px;             /* 覆蓋在 1px 的線上 */
	width: 0;
	height: 0;
	border-style: solid;
	/* 調整數值達成等腰：上下各16px(總高32)，左側18px(長度) */
	border-width: 16px 0 16px 18px; 
	border-color: transparent transparent transparent #b28c57;
}

/* 標題 */
.title {
	color: #006271;
	font-size: 24px;
	margin: 0;
	line-height: 1.1;
	font-weight: bold;
	letter-spacing: 0.5px;
}
.ocean-cruise-title {
	color: #014F8F;
	font-size: 24px;
	margin: 0;
	line-height: 1.1;
	font-weight: bold;
	letter-spacing: 0.5px;
}

/* 英文副標 */
.subtitle {
	color: #b28c57;
	font-size: 17px;
	font-weight: normal;
	margin: 8px 0 20px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* 描述內文 */
.cruise-card-description {
	font-size: 14.5px;
	line-height: 1.8;
	color: #014F8F;
	text-align: justify;
	margin: 0 0 40px 0;
	padding-right: 15px;
}

/* 數據欄位容器 */
.stats-grid {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	padding-bottom: 10px;
}
.stats-grid-1 {
	margin-top: 5px;
	display: flex;
	align-items: flex-end;
	padding-bottom: 10px;
}

/* 單個數據項 */
.stat-item {
	flex: 1;
	padding: 0 5px;
	border-left: 1px solid #b28c57;
	display: flex;
	flex-direction: column;
	line-height: 1;
}

/* 第一個數據項不需要左線，因為對齊主垂直線 */
.stat-item:first-child {
	border-left: none;
	padding-left: 0;
}

.stat-label {
	font-size: 0.75rem;
	color: #076658;
	margin-bottom: 5px;
	white-space: nowrap;
}

.stat-value {
	font-size: 18px;
	color: #006271;
	font-weight: 500;
	white-space: nowrap;
}

.stat-unit {
	font-size: 12px;
	margin-left: 2px;
}


.font-cv {
    font-family: 'Chetta Vissto', serif;
	font-size: 2.5rem;
	color: #076658;
	margin-bottom: 0;
}
.font-cv-lg {
    font-family: 'Chetta Vissto', serif;
	font-size: 3.5rem;
}

.cruise-title-line{
    font-size: 2rem;
    font-weight: 400;
    display: flex;
    align-items: center;
	justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.cruise-title-line::before {
    margin-right: 25px;
    content: "";
    flex: 1;
    height: 1px;
    background-color: #B28247;
	width: 240px;
}
.cruise-title-line::after {
    margin-left: 25px;
	content: "";
    flex: 1;
    height: 1px;
    background-color: #B28247;
    width: 240px;
}

.wave-top{
	position: absolute; 
	top: -15%; 
	z-index: 0; 
	width: 100%; 
	height: auto;
}
.wave-bottom-box{
	position: relative;
	height: 500px;
}
.wave-bottom{
	position: absolute;
	top: 0; 
	bottom: 0;
	z-index: 0; 
	width: 100%; 
	height: auto;
}

@media (max-width: 1440px) {
	.stat-value {
		font-size: 0.8rem;
		/* white-space: normal; */
	}
}
@media (max-width: 992px) {
    .cruise-card-description{
        margin: 0;
    }
    .header-banner p {
        font-size: 0.9rem;
    }
	.wave-top{
	top: -20px;
	}

	.wave-bottom-box{
		height: 150px;
	}

	.cruise-title-line{
		margin-bottom: 0;
	} 

	.cruise-title-line::before {
		flex: 0 0 auto;
		width: 60px;
	}
	.cruise-title-line::after {
		flex: 0 0 auto; 
		width: 60px;
	}

	.cruise-title-box {
		line-height: 1.2;
	}

	.river-cruise-subtitle, .ocean-cruise-subtitle{
		font-size: 1.2rem;
		margin-bottom: 0;
		line-height: 1.5;
	}
	.stats-grid, .stats-grid-1{
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.stat-item {
        flex: 0 0 25%;
        padding: 6px 4px;
		margin-bottom: 10px;
    }
	.stat-item:first-child {
		border-left: 1px solid #b28c57;
		padding: 6px 4px;
	}

	.stat-label {
        white-space: normal;
        font-size: 10px;
    }

	.stat-value {
		font-size: 0.8rem;
		white-space: normal;
	}

	.stat-unit {
		font-size: 0.8rem;
	}
	.river-cruise-container {
		flex-direction: column;
		padding: 15px 10px;
	}
	/* .cruise-card {
		margin-bottom: 60px;
	    align-items: center;
    } */
	.font-cv {
		font-size: 2rem;
		padding-bottom: 15px;
	}
	.font-cv-lg {
		font-size: 2rem;
	}
}


.river-cruise-bottom-img-section{
	position: relative;
	height: 100%;
    width: auto;
    background: url(../images/img/RiverCruise-area.png) top center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ocean-cruise-bottom-img-section{
	position: relative;
	height: 100%;
    width: auto;
    background: url(../images/img/OceanCruise-area.png) top center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 移動的半透明毛玻璃 */
.glass-square {
  position: absolute;
  background: rgba(255, 255, 255, 0.2); 
  /* backdrop-filter: blur(12px);  
  -webkit-backdrop-filter: blur(12px); */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  z-index: 5;
}

/* 定義漂浮動畫 */
@keyframes float-1 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(30px, -50px); }
  66%  { transform: translate(-20px, 20px); }
  100% { transform: translate(0, 0); }
}

@keyframes float-2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40px, 30px); }
  100% { transform: translate(0, 0); }
}

/* 給予每個正方形不同的位置、動畫與速度 */
.s1 {
  top: 20%; left: 30%;
  width: 250px; height: 250px;
  animation: float-1 12s infinite ease-in-out;
}

.s2 {
  top: 60%; right: 10%;
  width: 180px; height: 180px;
  animation: float-2 15s infinite ease-in-out;
  animation-delay: 2s;
}

.s3 {
  bottom: 10%; left: 30%;
  width: 280px; height: 280px;
  animation: float-2 18s infinite ease-in-out;
  animation-delay: -5s;
}

/* 電腦版尺寸 */
/* @media (min-width: 1024px) {
  .s1 {
    width: 250px;
    height: 250px;
    top: 10%;
    left: 10%;
  }
} */

/* 手機版尺寸 */
@media (max-width: 767px) {
  .s1 {
    width: 150px;
    height: 150px;
    top: 5%;
    left: 5%;
    border-radius: 12px;   }
}