/* poi-theme.css 202602 POI標籤主題頁(P02) */

/* banner title */
.ph-banner-position .ph-top-banner:after {
    content: "";
    background: rgba(0,0,0,0.3); /* 直接添加遮罩 */
    width: 100%;
    height: 450px;
    position: absolute;
    left: 0;
    top: 0;
}
.ph-banner-position .ph-top-title {
    display: flex;
    flex-direction: column-reverse;
}
.ph-banner-position .ph-top-title p {
    border-bottom: 0;
    border-top: 2px solid #fff;
    padding-top: 13px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.ph-banner-position .ph-top-title p a,
.ph-banner-position .ph-top-title p span {
    font-size: 20px; /* 字數上限 50 中字 */
}
.ph-banner-position .ph-top-title h1 {
    margin-bottom: 4px;
}
/* 暫時蓋寫超連結樣式(之後可移除) */
.ph-banner-position .ph-top-title p a:hover,
.ph-banner-position .ph-top-title p a:active,
.ph-banner-position .ph-top-title p a:focus {
    text-decoration: none;
    cursor: unset;
}

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

    .ph-banner-position .ph-top-banner {
        height: 365px;
        background-size: cover;
        background-position: center center;
    }
    .ph-banner-position .ph-top-banner.bg-blur {
        height: 365px;
    }
    .ph-banner-position .ph-top-banner.bg-overlay {
        height: 365px;
    }
    .ph-banner-position .ph-top-title p a,
    .ph-banner-position .ph-top-title p span {
        font-size: 16px; /* 字數上限 50 中字 */
    }
    .ph-banner-position .ph-top-title h1 {
        margin-bottom: 8px;
    }

}

/* 第二層選單 行動版左右箭頭導航 */
* {
    touch-action: manipulation; /* 阻止雙擊放大觸發 */
}
.poi-secmenu-arrow-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
    background: #0054a4;
    box-shadow: 2px 5px 5px 0 rgba(0, 0, 0, .1);
}
.poi-secmenu-arrow-wrap .poi-group-SecMenu {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* PC 版 >= 768px 保留卷軸，方便滑鼠拖曳卷軸與內容；僅 M 版於下方 media 隱藏 */
    box-shadow: none;
}
.poi-secmenu-arrow-btn {
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #0054a4;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.poi-secmenu-arrow-btn svg {
    width: 18px;
    height: 18px;
}
.poi-secmenu-arrow-wrap .poi-secmenu-arrow-btn:first-child {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
}
.poi-secmenu-arrow-wrap .poi-secmenu-arrow-btn:last-child {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
}
.poi-secmenu-arrow-btn:hover {
    background: rgba(0, 0, 0, 0.4);
}
.poi-secmenu-arrow-btn:active {
    background: rgba(0, 0, 0, 0.5);
}
.poi-secmenu-arrow-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

/* PC版自訂卷軸樣式 */
@media screen and (min-width: 768px) {

    .poi-secmenu-arrow-wrap .poi-group-SecMenu {
        /* scrollbar-color: rgba(0, 0, 0, 0.25) transparent; */
    }
    /* 設定捲軸整體粗細 */
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar {
        height: 6px;
    }
    /* 隱藏卷軸左右兩端箭頭（Windows Chrome 相容寫法） */
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-button:start:decrement,
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-button:end:increment,
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-button:start:increment,
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-button:end:decrement {
        width: 0;
        height: 0;
        display: none;
    }
    /* 捲軸軌道（背景） */
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }
    /* 捲軸拇指（滑動區塊） */
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }
    /* 捲軸拇指滑動時的樣式 */
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-thumb:hover,
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar-thumb:active {
        background: rgba(0, 0, 0, 0.45);
    }

}

/* mobile 版隱藏 scrollbar；PC 版 >= 768px 保留卷軸（滑鼠可拖曳卷軸與內容） */
@media screen and (max-width: 767px) {

    .poi-secmenu-arrow-wrap .poi-group-SecMenu {
        -ms-overflow-style: none; /* IE/Edge */
    }
    .poi-secmenu-arrow-wrap .poi-group-SecMenu::-webkit-scrollbar {
        display: none;
    }

}

/* 改為用 JS 判斷箭頭隱藏顯示 */
/* @media (min-width: 768px) {

    .poi-secmenu-arrow-wrap .poi-secmenu-arrow-btn {
        display: none;
    }

} */

/* 通用 M版容器間距 */
@media screen and (max-width: 767px) {

    .poi-flightstyle-CI .container {
        padding: 0 25px 0 15px;
    }

}

/* 通用 模組大標題與內容間距 */
.poi-group-textGroup {
    margin: 0 10px 40px 10px;
}
.poi-group-textGroup .poi-group-productSubTitle {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}
.poi-group-textGroup .poi-group-text {
    font-size: 16px;
}
.poi-group-productTitle {
    margin: 60px 0 0 0;
    padding: 0 10px;
}

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

    .poi-group-textGroup {
        margin: 0 0 40px 10px;
    }
    .poi-group-productTitle {
        margin-bottom: 2px;
        padding: 0 0 0 10px;
    }
    .container:not(:first-of-type) > .poi-group-productTitle {
        margin-top: 40px;
    }
    .ph-group .ph-group-content-text .ph-group-content-text-detail {
        margin-bottom: 0;
    }
    .poi-flightstyle-CI .ph-group {
        padding-bottom: 0;
    }

}

/* 通用 行銷機制文字 */
.ph-group .ph-group-content-text .ph-group-content-text-sale {
    color: #ed1556;
    font-weight: 500;
}

/* 通用 商品牌卡模組 slick 修正卡片等高問題 */
.poi-flightstyle-CI .ph-group.type-3-normal .ph-group-content, 
.poi-flightstyle-CI .ph-group.type-3-slick .ph-group-content, 
.poi-flightstyle-CI .ph-group.type-4-normal .ph-group-content, 
.poi-flightstyle-CI .ph-group.type-4-slick .ph-group-content {
    position: relative;
    height: 100%;
}
.poi-flightstyle-CI .ph-group.type-3-normal .ph-group-content .ph-group-content-text, 
.poi-flightstyle-CI .ph-group.type-3-slick .ph-group-content .ph-group-content-text, 
.poi-flightstyle-CI .ph-group.type-4-normal .ph-group-content .ph-group-content-text, 
.poi-flightstyle-CI .ph-group.type-4-slick .ph-group-content .ph-group-content-text {
    position: unset;
}
.poi-flightstyle-CI .ph-group.type-3-normal .ph-group-content .ph-group-content-text .ph-group-content-text-price, 
.poi-flightstyle-CI .ph-group.type-3-slick .ph-group-content .ph-group-content-text .ph-group-content-text-price, 
.poi-flightstyle-CI .ph-group.type-4-normal .ph-group-content .ph-group-content-text .ph-group-content-text-price, 
.poi-flightstyle-CI .ph-group.type-4-slick .ph-group-content .ph-group-content-text .ph-group-content-text-price {
    margin-bottom: 5px;
}
.poi-flightstyle-CI .ph-group.type-3-slick .slick-track,
.poi-flightstyle-CI .ph-group.type-4-slick .slick-track {
    display: flex !important;
}
.poi-flightstyle-CI .ph-group.type-3-slick .slick-slide,
.poi-flightstyle-CI .ph-group.type-4-slick .slick-slide {
    height: auto !important;
}
.poi-flightstyle-CI .ph-group.type-3-slick .slick-slide > div,
.poi-flightstyle-CI .ph-group.type-4-slick .slick-slide > div {
    height: 100%;
}

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

    .poi-flightstyle-CI .ph-group.type-3-slick .slick-list,
    .poi-flightstyle-CI .ph-group.type-4-slick .slick-list {
        margin-right: -25px;
    }
    .poi-flightstyle-CI .ph-group.type-3-slick .slick-list .slick-slide:last-child .ph-group-content, 
    .poi-flightstyle-CI .ph-group.type-4-slick .slick-list .slick-slide:last-child .ph-group-content {
        margin-right: 25px;
    }

}

/* 通用 商品牌卡模組 Tag */
.ph-group .ph-group-content-photo .ph-group-content-tag {
    padding: 8px 20px 5px 5px;   /* 右邊多留空間給三角形尖端 */
    background-color: #2d7cd1;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    /* 不需要設定 width 會依據內容自適應寬度 */
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); /* safari */
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.ph-group .ph-group-content-photo .ph-group-content-tag:after {
    content: none;
}

/* 常見問題模組 .type-introlist-left */
.poi-flightstyle-CI .ph-group.type-introlist-left .ph-group-content {
    margin: 0 auto 40px;
}
.poi-flightstyle-CI .ph-group.type-introlist-left .ph-group-content .ph-group-content-text {
    width: 100%;
    padding: 0;
}
.poi-flightstyle-CI .ph-group.type-introlist-left .ph-group-content:last-child {
    margin-bottom: 0;
}

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

    .poi-flightstyle-CI .ph-group.type-introlist-left {
        margin-left: 10px;
    }
    .poi-flightstyle-CI .ph-group.type-introlist-left .ph-group-content {
        margin: 0 auto 20px;
    }

}

/* 文壓圖模組 .type-texton-img (主題頁-客製化樣式) */
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content .ph-group-content-text .ph-group-content-text-detail {
    display: block;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 1px #333,0 0 3px #333,0 0 7px #333,0 0 40px #888;
}
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content .ph-group-content-text .ph-group-content-otherlink > a {
    margin: 0;
}
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content .ph-group-content-text .ph-group-content-otherlink > a:hover,
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content .ph-group-content-text .ph-group-content-otherlink > a:active,
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content .ph-group-content-text .ph-group-content-otherlink > a:focus {
    color: #fff;
}
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content:nth-child(1) .ph-group-content-photo:after {
    background: linear-gradient(182deg, rgba(196, 135, 50, 0.42) 40.29%, rgba(216, 158, 77, 0.00) 89.47%); /* 第一張 黃色 */
}
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content:nth-child(2) .ph-group-content-photo:after {
    background: linear-gradient(183deg, rgba(181, 100, 140, 0.42) 51.2%, rgba(233, 124, 177, 0.00) 98.86%); /* 第二張 粉色 */
}
.poi-flightstyle-CI .ph-group.type-texton-img .ph-group-content:nth-child(3) .ph-group-content-photo:after {
    background: linear-gradient(182deg, rgba(52, 116, 169, 0.42) 29.97%, rgba(124, 213, 233, 0.00) 99.27%); /* 第三張 藍色 */
}

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

    .poi-flightstyle-CI .ph-group.type-texton-img {
        margin-left: 10px;
    }

}