/* 第五區 比較表 */
/* =========================================
   基本設定
========================================= */

* {
    box-sizing: border-box;
}

.subsidyCompare {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 36px 20px 46px;
    font-family:
        "Noto Sans TC",
        "Microsoft JhengHei",
        "微軟正黑體",
        sans-serif;
    background:
        linear-gradient(
            180deg,
            #f7fcff 0%,
            #ffffff 40%,
            #f8fcfb 100%
        );
    background-image: url(../images/bg-5.png);
    background-size: cover;
}


/* 最大寬度 */
.compareContainer {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* =========================================
   山景背景裝飾
========================================= */

        .faqIcon-1{
            position: absolute;
            right: 100px;
            top: 350px;
            z-index: 9999;
        }
           .faqIcon-1 img{
            width: 250px;            
        }
             .faqIcon-2{
            position: absolute;
            right: 10px;
            top: 380px;
            z-index: 9998;
        }
           .faqIcon-2 img{
            width: 200px;            
        }
        @media(max-width:1640px){
           .faqIcon-1, .faqIcon-2{ 
            display: none;
        }
    }

/* .mountain {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}


.mountainOne {
    top: 20px;
    height: 230px;
    opacity: .2;
    background: #79c7cf;
    clip-path: polygon(
        0 30%,
        5% 10%,
        9% 30%,
        15% 8%,
        22% 31%,
        29% 14%,
        36% 33%,
        43% 12%,
        51% 29%,
        59% 10%,
        67% 30%,
        75% 7%,
        84% 31%,
        92% 12%,
        100% 30%,
        100% 100%,
        0 100%
    );
}


.mountainTwo {
    top: 100px;
    height: 230px;
    opacity: .13;
    background: #62a897;
    clip-path: polygon(
        0 35%,
        8% 15%,
        15% 42%,
        23% 17%,
        30% 40%,
        38% 12%,
        46% 42%,
        54% 18%,
        62% 39%,
        71% 14%,
        79% 40%,
        88% 16%,
        100% 36%,
        100% 100%,
        0 100%
    );
} */


/* =========================================
   主標題
========================================= */
.compareHeading {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
.compareMainTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.compareTravelIcon {
    font-size: 35px;
    line-height: 1;
}
.compareHeading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    color: #064b9a;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1px;
}
.compareHeading h2 strong {
    color: #ec2626;
    font-size: .95em;
    font-weight: 900;
}
.compareHeading > p {
    margin: 8px 0 0;
    color: #78828d;
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 600;
    letter-spacing: 1px;
}


/* =========================================
   兩欄比較
========================================= */
.compareGrid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.15fr);
    gap: 16px;
    width: 100%;
}


/* =========================================
   卡片
========================================= */
.compareCard {
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid rgba(210, 220, 228, .9);
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 8px 24px
        rgba(41, 83, 105, .11);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity .5s ease,
        transform .5s ease,
        box-shadow .25s ease;
}
.compareCard.show {
    opacity: 1;
    transform: translateY(0);
}
.compareCard:hover {
    box-shadow:
        0 13px 32px
        rgba(41, 83, 105, .16);
}


/* =========================================
   卡片表頭
========================================= */
.compareCardHeader {
    min-height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
}


/* 自己訂 */
.compareCardSelf
.compareCardHeader {
    background:
        linear-gradient(
            180deg,
            #a9b7c1 0%,
            #8697a4 100%
        );
}


/* 吉航 */
.compareCardJH
.compareCardHeader {
    background:
        linear-gradient(
            90deg,
            #ff981a 0%,
            #ff7715 100%
        );
}
.crownIcon {
    color: #ffe36d;
    font-size: 34px;
    line-height: 1;
}


/* =========================================
   比較列表
========================================= */

.compareList {
    width: 100%;
}


/* 每一列 */
.compareItem {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 4px;
    min-height: 59px;
    padding: 10px 18px;
    border-bottom:
        1px solid #e4e8eb;
}
.compareItem:last-child {
    border-bottom: 0;
}

/* 交錯底色 */
.compareItem:nth-child(odd) {
    background:
        rgba(255, 255, 255, .94);
}
.compareCardSelf
.compareItem:nth-child(even) {
    background:
        rgba(238, 241, 243, .72);
}
.compareCardJH
.compareItem:nth-child(even) {
    background:
        rgba(255, 243, 219, .62);
}


/* 文字 */
.compareItem p {
    margin: 0;
    color: #535b63;
    font-size: clamp(14px, 1.3vw, 19px);
    font-weight: 600;
    line-height: 1.55;
}
.compareCardJH
.compareItem p {
    color: #474d51;
    font-weight: 700;
}
.highlightText {
    font-weight: 800;
}


/* =========================================
   X / ✓ ICON
========================================= */

.statusIcon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    justify-self: center;
}


/* X */
.statusNo {
    color: #f22929;
    background: transparent;
    font-size: 37px;
}


/* ✓ */
.statusYes {
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #42bd62 0%,
            #20a749 100%
        );
    box-shadow:
        0 2px 6px
        rgba(34, 162, 70, .22);
}


/* =========================================
   右下文字
========================================= */
.compareSlogan {
    margin-top: 18px;
    text-align: right;
    color: #54739d;
    font-size: 18px;
    font-style: italic;
    transform: rotate(-3deg);
    opacity: .85;
}
.compareSlogan span,
.compareSlogan strong {
    display: block;
}
.compareSlogan strong {
    font-size: 24px;
}


/* =========================================
   平板
========================================= */

@media screen and (max-width: 992px) {
    .subsidyCompare {
        padding:
            30px 16px
            38px;
    }
    .compareGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .compareCardHeader {
        min-height: 60px;
        padding:
            10px 12px;
        font-size: 20px;
    }
    .compareItem {
        grid-template-columns:
            40px 1fr;
        padding:
            10px 12px;
    }
    .compareItem p {
        font-size: 14px;
    }
    .statusIcon {
        width: 28px;
        height: 28px;
        font-size: 21px;
    }
    .statusNo {
        font-size: 32px;
    }

}


/* =========================================
   手機
========================================= */

@media screen and (max-width: 768px) {
    .subsidyCompare {
        padding:
            24px 13px
            30px;
    }


    /* 主標 */
    .compareMainTitle {
        gap: 7px;
    }
    .compareTravelIcon {
        font-size: 26px;
    }
    .compareHeading h2 {
        gap: 7px;
        font-size: 25px;
    }
    .compareHeading > p {
        font-size: 12px;
    }


    /* 改上下排列 */
    .compareGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .compareCardHeader {
        min-height: 55px;
        font-size: 20px;
    }
    .compareItem {
        grid-template-columns:
            40px 1fr;
        min-height: auto;
        padding:
            12px 11px;
    }
    .compareItem p {
        font-size: 15px;
    }
    .compareSlogan {
        text-align: center;
        transform: none;
        font-size: 15px;
    }
    .compareSlogan strong {
        font-size: 19px;
    }

}


/* =========================================
   小手機
========================================= */

@media screen and (max-width: 480px) {
    .compareHeading h2 {
        font-size: 22px;
    }
    .compareTravelIcon {
        display: none;
    }
    .compareCard {
        border-radius: 13px;
    }
    .compareCardHeader {
        min-height: 52px;
        font-size: 18px;
    }
    .crownIcon {
        font-size: 26px;
    }
    .compareItem {
        grid-template-columns:
            34px 1fr;
        gap: 3px;
        padding:
            11px 9px;
    }
    .compareItem p {
        font-size: 14px;

        line-height: 1.5;
    }
    .statusIcon {
        width: 25px;
        height: 25px;
        font-size: 18px;
    }
    .statusNo {
        font-size: 29px;
    }
}