@charset "utf-8";
.Content-wrap.selected { min-height:0;}
.Content-wrap .Content .main-container {}

/* --- 上方 Tabs 區域 --- */
.Content-wrap .Content .tabs-container {
	width:100%;
    display: flex;
    gap: 15px;
    padding: 15px 0;
	padding-top:0px;
    position: relative;
    z-index: 10;
}

.Content-wrap .Content .tab-item {
	width:calc( 33.33% - 7.5px );
	display:block;
    background: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.3s ease;
    border-top: 4px solid transparent; /* 預設無顏色 */
    opacity: 0.7;
}

.Content-wrap .Content .tab-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.Content-wrap .Content .tab-item.active {
    opacity: 1;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 定義不同 Tab 啟用時的頂部顏色 */
.Content-wrap .Content .tab-item[data-color="red"].active { border-top-color: #e60012; }
.Content-wrap .Content .tab-item[data-color="gold"].active { border-top-color: #c5a065; }
.Content-wrap .Content .tab-item[data-color="purple"].active { border-top-color: #6a1b9a; }
.Content-wrap .Content .tab-item[data-color="brown"].active { border-top-color: #A52A2A; }

.Content-wrap .Content .tab-item .icon {
    font-size: 24px;
    color: #666;
}

.Content-wrap .Content .tab-text h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #333;
}

.Content-wrap .Content .tab-text p {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

/* --- 下方內容區域 --- */
.Content-wrap .Content .content-container {
	background:rgba(255,255,255,0.8);
	padding:40px;
    border-radius: 30px;
    overflow: hidden;
}
.Content-wrap .Content .content-container.def-btn a + .text a { color:#333;}
.Content-wrap .Content .content-container .def-btn-link { display:none;}
.Content-wrap .Content .content-container1,
.Content-wrap .Content .content-container2,
.Content-wrap .Content .content-container3,
.Content-wrap .Content .content-container4{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0;}
.Content-wrap .Content .content-container1:before { content:'機場接送專屬禮遇'; width:100%; font-size:24px; font-weight:bold; float:left; display:block; order:1;}
.Content-wrap .Content .content-container1:after { content:'持以下信用卡預約機場接送服務'; width:100%; font-size:14px; margin-bottom:20px; float:left; display:block; order:2;}
.Content-wrap .Content .content-container2:before { content:'理財貴賓戶專屬禮遇'; width:100%; font-size:24px; font-weight:bold; float:left; display:block; order:1;}
.Content-wrap .Content .content-container2:after { content:'適用翡翠會員、金鑽會員，可享免費機場接送服務'; width:100%; font-size:14px; margin-bottom:20px; float:left; display:block; order:2;}
.Content-wrap .Content .content-container3:before { content:'累積消費兌換'; width:100%; font-size:24px; font-weight:bold; float:left; display:block; order:1;}
.Content-wrap .Content .content-container3:after { content:''; width:100%; font-size:14px; margin-bottom:20px; float:left; display:block; order:2;}
.Content-wrap .Content .content-container4:before { content:'序號兌換'; width:100%; font-size:24px; font-weight:bold; float:left; display:block; order:1;}
.Content-wrap .Content .content-container4:after { content:''; width:100%; font-size:14px; margin-bottom:20px; float:left; display:block; order:2;}
.Content-wrap .Content .content-container1 .def-btn-link:nth-child(1),
.Content-wrap .Content .content-container1 .def-btn-link:nth-child(2),
.Content-wrap .Content .content-container1 .def-btn-link:nth-child(3) { display:block;  order:3;}
.Content-wrap .Content .content-container2 .def-btn-link:nth-child(5) { display:block;  order:3;}
.Content-wrap .Content .content-container3 .def-btn-link:nth-child(4) { display:block;  order:3;}
.Content-wrap .Content .content-container4 .def-btn-link:nth-child(6) { display:block;  order:3;}

@media only screen and (min-width:0px) and (max-width:768px) {
	.Content-wrap .Content .content-container { padding:35px 25px;}
}

@media only screen and (min-width:0px) and (max-width:630px) {
	.Content-wrap .Content .tabs-container { overflow-x:auto; justify-content:flex-start; flex-wrap: nowrap; flex-direction:row;}
	.Content-wrap .Content .tab-item { width:180px; float:left; flex-shrink: 0;}
	.Content-wrap .Content .content-container { padding:30px 20px;}
}

@media only screen and (min-width:0px) and (max-width:512px) {
	.Content-wrap .Content .tabs-container { gap:5px;}
	.Content-wrap .Content .tab-item .icon { display:none;}
	.Content-wrap .Content .tab-item { width:160px;}
	.Content-wrap .Content .content-container { padding:25px 15px;}
}