/*------------------------------------------ 
Color Setting
--------------------------------------------*/ :root, [data-bs-theme=light] {
		/* Custom */
		--red: #cc0000; /*--- Red --*/
		--red-rgb: 204, 0, 0;
		--gray-lighter: #fbfbfb; /*--- Lighter Gray --*/
		--gray-lighter-rgb: 251, 251, 251;
		--gray-light: #F3F3F3; /*--- Light Gray --*/
		--gray-light-rgb: 243, 243, 243;
		--gray: #DEDEDF; /*--- Gray --*/
		--gray-rgb: 222, 222, 223;
		--gray-dark: #c9c9c9; /*--- Dark Gray --*/
		--gray-dark-rgb: 201, 201, 201;
		--gray-heavy: #707070; /*--- Heavy Gray --*/
		--gray-heavy-rgb: 112, 112, 112;
		--white: #FFFFFF; /*--- White --*/
		--white-rgb: 255, 255, 255;
		--black: #010000; /*--- Black --*/
		--black-rgb: 1, 0, 0;
		--black-light: #3D3D3D; /*--- Light Black --*/
		--black-light-rgb: 61, 61, 61;
}
/*------------------------------------------ 
Basic
--------------------------------------------*/
body {
		background-color: var(--black) !important;
		color: var(--black);
}
a.basic, a {
		color: var(--gray-dark);
}
a.basic:hover, a:hover {
		color: var(--white);
}
a.basic:focus {
		color: var(--white);
}
.text-transparent {
		color: transparent;
}
.text-shadow-lg {
		text-shadow: 0 .25rem .75rem RGBA(var(--black-rgb), .35);
}
.text-shadow {
		text-shadow: 0 0 4px RGBA(var(--black-rgb), 1);
}
.text-shadow-w {
		text-shadow: 0 .125rem .75rem RGBA(var(--white-rgb), 1);
}
/*------------------------------------------ 
Button
--------------------------------------------*/
.btn-yes {
		background-color: var(--black-light);
		color: var(--white) !important;
}
.btn-yes:focus, .btn-yes:hover {
		background-color: var(--black) !important;
		color: var(--white);
}
.btn-leave {
		background-color: var(--gray);
		color: var(--black) !important;
}
.btn-leave:focus, .btn-leave:hover {
		background-color: var(--gray-dark) !important;
		color: var(--black);
}
/*------------------------------------------ 
Main NAV
--------------------------------------------*/
.mainnav .navbar-nav .nav-link {
		color: var(--gray-dark);
}
.mainnav .navbar-nav .active .nav-link, .mainnav .navbar-nav .nav-link:hover, .mainnav .navbar-nav .nav-link:focus {
		color: var(--white);
}
.navbar .offcanvas {
		background-color: var(--black);
}
/*------------------------------------------ 
Modal
--------------------------------------------*/
.info-card-remark .modal-header .btn-close {
		background-color: var(--white);
}
.info-card-nav .btn-close {
		background-color: var(--black);
}
.modal-detail .modal-content {
		background-color: transparent;
		color: var(--white);
}
.modal-backdrop.show {
		opacity: .95 !important;
}
/*------------------------------------------ 
MTR Card
--------------------------------------------*/
.mtr-card {
		background-color: RGBA(var(--white-rgb), .9);
}
.mtr-block.has-slider .slick-next::after, .mtr-block.has-slider .slick-prev::after {
		background-color: RGBA(var(--white-rgb), .85);
}
.mtr-block.has-slider .slick-dots li button:before {
		color: RGBA(var(--white-rgb), .65);
		opacity: 1;
}
.mtr-block.has-slider .slick-dots li.slick-active button:hover:before, .mtr-block.has-slider .slick-dots li.slick-active button:before {
		color: RGBA(var(--white-rgb), 1);
}
.mtr-block.has-slider .slick-next::before, .mtr-block.has-slider .slick-prev::before {
		color: var(--black);
}
.mtr-card:hover {
		background-color: RGBA(var(--white-rgb), .95);
		box-shadow: 0 .25rem 1rem RGBA(var(--black-rgb), .45);
}
/*------------------------------------------ 
MTR Note
--------------------------------------------*/
.mtr-note, .mtr-note .card-head {
		background-color: #f1f1f1;
}
.mtr-note .card-body {
		background-color: var(--white);
}
.modal-mtr .modal-body {
		background-color: #333333;
}
.mtr-note .card-body a {
		color: #333333;
}
.mtr-note .card-body a:hover {
		color: var(--red);
}
/*------------------------------------------ 
Basic Footer
--------------------------------------------*/
.bot-nav li a {
		color: var(--white);
}
.bot-nav li a:hover {
		color: var(--gray-dark);
}
.bot-nav li::after {
		background-color: var(--gray-dark);
}
/*------------------------------------------ 
Color Name - red
--------------------------------------------*/
.bg-red {
		background-color: var(--red) !important;
}
.text-red {
		color: var(--red) !important;
}
.border-red {
		border-color: var(--red) !important;
}
/*------------------------------------------ 
Color Name - gray-lighter
--------------------------------------------*/
.bg-gray-lighter {
		background-color: var(--gray-lighter) !important;
}
.text-gray-lighter {
		color: var(--gray-lighter) !important;
}
.border-gray-lighter {
		border-color: var(--gray-lighter) !important;
}
/*------------------------------------------ 
Color Name - gray-light
--------------------------------------------*/
.bg-gray-light {
		background-color: var(--gray-light) !important;
}
.text-gray-light {
		color: var(--gray-light) !important;
}
.border-gray-light {
		border-color: var(--gray-light) !important;
}
/*------------------------------------------ 
Color Name - gray
--------------------------------------------*/
.bg-gray {
		background-color: var(--gray) !important;
}
.text-gray {
		color: var(--gray) !important;
}
.border-gray {
		border-color: var(--gray) !important;
}
/*------------------------------------------ 
Color Name - gray-dark
--------------------------------------------*/
.bg-gray-dark {
		background-color: var(--gray-dark) !important;
}
.text-gray-dark {
		color: var(--gray-dark) !important;
}
.border-gray-dark {
		border-color: var(--gray-dark) !important;
}
/*------------------------------------------ 
Color Name - gray-heavy
--------------------------------------------*/
.bg-gray-heavy {
		background-color: var(--gray-heavy) !important;
}
.text-gray-heavy {
		color: var(--gray-heavy) !important;
}
.border-gray-heavy {
		border-color: var(--gray-heavy) !important;
}
/*------------------------------------------ 
Color Name - white
--------------------------------------------*/
.bg-white {
		background-color: var(--white) !important;
}
.text-white {
		color: var(--white) !important;
}
.border-white {
		border-color: var(--white) !important;
}
/*------------------------------------------ 
Color Name - black
--------------------------------------------*/
.bg-black {
		background-color: var(--black) !important;
}
.text-black {
		color: var(--black) !important;
}
.border-black {
		border-color: var(--black) !important;
}
/*------------------------------------------ 
Color Name - black light
--------------------------------------------*/
.bg-black-light {
		background-color: var(--black-light) !important;
}
.text-black-light {
		color: var(--black-light) !important;
}
.border-black-light {
		border-color: var(--black-light) !important;
}
/*------------------------------------------ 
Section 
--------------------------------------------*/
.section.gift .has-light {
		box-shadow: 0 0 1rem RGBA(var(--white-rgb), .85);
}
.section.gift .has-border {
		border-image-source: linear-gradient(to left, #737373, #ebebeb, #737373);
}
.section.offer .info-block,
.section.mileage .card-top .info-block {
		background-color: RGBA(var(--white-rgb), .9);
}
.section.mileage .card-right::after, .section.mileage .card-left::after {
		background-color: RGBA(var(--black-rgb), .75);
}
.section.offer .point-block {
		background-color: RGBA(var(--black-rgb), .75);
}
.section.mileage .card-right::before {
		background-color: var(--white) !important;
}
.section.offer .card-item .info::before {
		background-color: var(--white) !important;
}
.section .card-item .info::after {
		background-color: RGBA(var(--black-rgb), .65)
}
.section .card-item .info:hover::after {
		background-color: RGBA(var(--black-rgb), .95)
}
.section .card-item .info:hover {
		background-color: RGBA(var(--black-rgb), .95)
}
.section.life .card-item .info:hover {
		background-color: RGBA(var(--white-rgb), .125)
}
.section.life {
		border-top-color: var(--white) !important;
}
.section.detail .table > :not(caption) > * > * {
		background-color: transparent;
		color: var(--white);
}
.section.detail .info::after {
		background: linear-gradient(to bottom, RGBA(var(--black-rgb), .75) 0%, RGBA(var(--black-rgb), .6) 80%, RGBA(var(--black-rgb), .3) 100%);
}
.section.detail .info .sub-title::after {
		background-color: RGBA(var(--black-rgb), .95)
}
@media (max-width: 575.98px) and (orientation:portrait) {
		.section.detail .info .sub-title::after {
				background-color: RGBA(var(--white-rgb), .125);
		}
}
/*------------------------------------------ 
Val Block
--------------------------------------------*/
.val-block {
		color: var(--white) !important;
		border-color: var(--white) !important;
		background-color: RGBA(var(--white-rgb), .15)
}
/*------------------------------------------ 
Btn More 
--------------------------------------------*/
.btn-more:focus, .btn-more:hover, .btn-more {
		background-color: var(--red) !important;
		box-shadow: 0 .5rem .75rem RGBA(var(--black-rgb), .35) !important;
		color: var(--white) !important;
}
.btn-more::after, .btn-more::before {
		background: linear-gradient(to right, RGBA(var(--white-rgb), .5) 0%, RGBA(var(--white-rgb), 0) 100%);
		opacity: .5;
}
.btn-more::after {
		opacity: 0;
}
.btn-more:hover, .btn-more:focus {
		box-shadow: 0 .1rem .25rem RGBA(var(--red-rgb), .15) !important;
}
.btn-enter.sp:hover, .btn-enter.sp:focus {
		color: var(--white) !important;
		background-color: var(--red) !important;
}
/*------------------------------------------ 
Footer
--------------------------------------------*/
footer .title {
		color: var(--gray);
}
footer a, footer .nav .nav-item .nav-link {
		color: var(--gray-dark);
}
footer a:hover, footer .nav .nav-item .nav-link:hover {
		color: var(--white);
}
footer a:focus, footer .nav .nav-item .nav-link:focus {
		color: var(--white);
}
/*------------------------------------------ 
首刷禮 / 續卡禮
--------------------------------------------*/
.main-container-TWE { 
    padding: 40px 20px; /* 整體容器的內邊距 */
}

/* cards-section 現在只負責背景和邊框，不處理內部布局 */
.cards-section {
    position: relative; /* 確保內部元素的定位基準 */
    /* 移除所有 d-flex, flex-column, flex-lg-row 等布局相關的 CSS，讓內部 .cards-content-wrapper 處理 */
    display: block; /* 或者你可以不設定，讓它保持 block 預設行為 */
    width: 100%; /* 確保佔滿可用寬度 */
}

/* 新增的內部容器，用於管理標題和卡片的布局 */
.cards-content-wrapper {
    display: flex;
    flex-direction: column; /* 確保標題和卡片總是以垂直堆疊 */
    justify-content: center;
    align-items: center;
    padding-top: 20px; /* 根據需要調整內部填充 */
    padding-bottom: 20px;
    width: 100%; /* 佔滿父容器 */
    position: relative; /* 確保 h3 的偽元素定位 */
}

/* 標題本身的樣式，確保置中和間距 */
.cards-content-wrapper h3 { /* 選擇器變為 .cards-content-wrapper h3 */
    text-align: center;
    margin-bottom: 30px; /* 標題下方與第一張卡片的間距 */
    padding-top: 30px; /* 為標題上方的線留出空間 */
    padding-bottom: 30px; /* 為標題下方的線留出空間 */
    position: relative; /* 確保 h3 自身的偽元素可以相對於它定位 */
    max-width: 90%; /* 限制標題寬度 */
    width: fit-content; /* 讓寬度適應內容 */
}

/* 標題下方的水平漸層線 - 行動裝置預設 */
.cards-content-wrapper h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 0px); /* 行動裝置 (MB) 的寬度設定 */
	/* max-width: 800px; 也可以根據 PC 顯示效果再調整，或移除 */
    height: 3px;
    background: linear-gradient(to right, #737373, #ebebeb, #737373);
    z-index: 1; /* 確保線條在卡片上方 */
}

/* 媒體查詢：PC (桌機) 寬度設定，覆蓋行動裝置的設定 */
@media (min-width: 992px) { /* 一般將 992px 設為 PC 的斷點，你可以根據需求調整 */
    .cards-content-wrapper h3::after {
        width: calc(175%); /* PC (桌機) 的寬度設定 */
        /* max-width 也可以根據 PC 顯示效果再調整，或移除 */
    }
}

/* 兩個卡片容器的樣式 */
.cards-wrapper {
    display: flex;
    flex-direction: column; /* 小螢幕預設垂直堆疊 */
    justify-content: center;
    align-items: center;
    width: 100%; /* 佔滿父容器寬度 */
    margin-top: 20px; /* 讓卡片區塊與標題下方的線有間隔 */
    position: relative; /* 為了卡片之間的垂直線，必須在這裡設定 */
}

/* 大螢幕垂直漸層線 (卡片之間) */
@media (min-width: 992px) {
    .cards-wrapper {
        flex-direction: row; /* 大螢幕並排 */
        /* position: relative; 已經在上面設定了 */
    }

    .cards-wrapper::before { /* 使用 ::before 創建垂直線 */
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3px; /* 漸層線的寬度 */
        height: calc(100% - 60px); /* 線條高度，考慮到上下各 30px 的間距 */
        background: linear-gradient(to bottom, #737373, #ebebeb, #737373); /* 垂直漸層 */
        display: block; /* 確保在大螢幕顯示 */
        z-index: 1; /* 確保線條在卡片上方 */
    }
    /* 調整卡片區間距 */
    .cards-wrapper > .col:first-child {
        padding-right: 30px; /* 為左側卡片留出右邊間距 */
    }
    .cards-wrapper > .col:last-child {
        padding-left: 30px; /* 為右側卡片留出左邊間距 */
    }
}

/* 小螢幕水平漸層線 (在兩個卡片之間) */
@media (max-width: 991.98px) {
    .cards-wrapper > .col:first-child {
        position: relative; /* 讓 ::after 可以相對於它定位 */
        padding-bottom: 60px; /* 增加底部內邊距，為水平線和其下方的第二個 card 留出空間 */
    }

    .cards-wrapper > .col:first-child::after {
        content: '';
        position: absolute;
        bottom: 30px; /* 放置在第一個 card 底部上方 30px */
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px); /* 線條長度，考慮容器左右 padding */
        max-width: 600px; /* 限制線條寬度 */
        height: 3px;
        background: linear-gradient(to right, #737373, #ebebeb, #737373); /* 水平漸層 */
        display: block; /* 確保在小螢幕顯示 */
        z-index: 1; /* 確保線條在卡片上方 */
    }
    /* 移除大螢幕的垂直線 */
    .cards-wrapper::before {
        display: none;
    }
}