/* 基礎重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

body {
    position: relative;
    min-height: 100vh;
    display: flex;
    font-family: "Zen Maru Gothic", "PingFang TC", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
    flex-direction: column;
    overflow-x: hidden;
    background: url(../Images/so-white.png);
    justify-content: space-between;
}

/* 1. 旋轉放射狀背景 */
.sunburst-bg {
    position: fixed; /* 改成 fixed，固定在視窗，不影響網頁整體長度 */
    inset: -100%;
    z-index: -1; /* 建議設為負數，確保放在最底層 */
    opacity: .9;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg, #ffffff00 0deg 12deg, #ffeb8a 12deg 24deg);
    -webkit-mask-image: radial-gradient(circle at center, transparent 15%, black 45%);
    mask-image: radial-gradient(circle at center, transparent 15%, black 45%);
    animation: rotateRays 120s linear infinite;
}

@keyframes rotateRays {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icons{
    position:absolute;
    width:80px;
    height:80px;
}
.icon1 {
    right: 21%;
    top: 12%;
    animation: floatUpAndDown 3s ease-in-out infinite;
}

.icon2 {
    right: 9%;
    top: 24%;
    animation: floatUpAndDown2 3s ease-in-out infinite;
}

.icon3 {
    right: 15%;
    top: 41%;
    animation: floatUpAndDown 3s ease-in-out infinite;
}

.icon4 {
    right: 9%;
    top: 60%;
    animation: floatUpAndDown2 3s ease-in-out infinite;
}
.icon5 {
    left: 19%;
    top: 12%;
    width: 70px;
    height: 70px;
    animation: floatUpAndDown2 3s ease-in-out infinite;
}
.icon6 {
    left: 9%;
    top: 26%;
    animation: floatUpAndDown 3s ease-in-out infinite;
}
.icon7 {
    left: 14%;
    top: 46%;
    animation: floatUpAndDown2 3s ease-in-out infinite;
}
.icon8 {
    left: 6%;
    top: 65%;
    animation: floatUpAndDown 3s ease-in-out infinite;
}
@keyframes floatUpAndDown {
    0%, 100% {
        transform: translateY(0); 
    }

    50% {
        transform: translateY(-10px); 
    }
}
@keyframes floatUpAndDown2 {
    0%, 100% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0);
    }
}
/* 主容器 */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 80px;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 頂部 Logo (假圖示意) */
.logo {
    width: 250px;
    margin-bottom: 10px;
}

/* 標題區 */
.title-section {
    text-align: center;
    margin-bottom: 60px;
}

    .title-section h1 {
        color: #f16622;
        font-size: 3.8rem;
        line-height: 1.2;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

        .title-section h1 span {
            display: block;
            color: #f29300;
        }

    .title-section h2 {
        color: #f29300;
        font-size: 1.8rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

        /* 標題旁邊的直線 */
        .title-section h2::before,
        .title-section h2::after {
            content: "|";
            color: #f29300;
            font-weight: 300;
        }

/* 卡片容器 */
.cards-wrapper {
    display: flex;
    gap: 40px;
    width: 100%;
    justify-content: center;
}

/* 3. 卡片與緞帶設計 */
.card {
    position: relative;
    background: #ffffff;
    border-radius: 40px;
    width: 45%;
    max-width: 500px;
    padding: 40px 30px 60px; /* 底部留白給按鈕 */
    text-align: center;
    border: 2px solid;
    transition: background-position 0.2s ease-in;
}

    /* 粉紅卡片 (活動一) */
    .card.pink {
        border-color: #d6185e;
        background: linear-gradient(to top, #ffdbe7 0%, #fff 50%,#ffdbe7 100%);
        background-size: 100% 200%;
        background-position: bottom; /* 初始位置 */
    }

    /* 藍綠卡片 (活動二) */
    .card.teal {
        border-color: #008080;
        background: linear-gradient(to top, #ccf1f1 0%, #fff 50%,#ccf1f1 100%);
        background-size: 100% 200%;
        background-position: bottom; /* 初始位置 */
    }

    .card:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -3px;
        background: #fff;
        width: 35%;
        height: 5px;
        margin: 0 auto;
    }
/* 緞帶設計 */
.ribbon {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 2px;
    border-radius: 5px;
    z-index: 2;
}

    /* 緞帶左右的燕尾小裝飾 */
    .ribbon::before,
    .ribbon::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 28px;
    }

    .ribbon::before {
        left: -27px;
    }

    .ribbon::after {
        right: -27px;
    }

/* 粉紅緞帶配色 */
.card.pink .ribbon {
    background-color: #d6185e;
}

    .card.pink .ribbon::before {
        background: url(../Images/ribbon1-L.svg) no-repeat;
    }

    .card.pink .ribbon::after {
        background: url(../Images/ribbon1-R.svg) no-repeat;
    }
/* 藍綠緞帶配色 */
.card.teal .ribbon {
    background-color: #008080;
}

    .card.teal .ribbon::before {
        background: url(../Images/ribbon2-L.svg) no-repeat;
    }

    .card.teal .ribbon::after {
        background: url(../Images/ribbon2-R.svg) no-repeat;
    }


/* 卡片內容 */
.card h3 {
    font-size: 1.9rem;
    font-weight: bold;
}

.card.pink h3 {
    color: #d6185e;
}

.card.teal h3 {
    color: #008080;
}

.card p {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
    min-height: 75px;
}

    .card p span {
        display: block;
        font-family: "PingFang TC","Microsoft JhengHei", sans-serif;
        font-weight: 500;
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

.card.pink span {
    color: #df5e7c;
}

.card.teal span {
    color: #ab8600;
}


/* 標籤 (Pills) */
.tags {
    font-family: "PingFang TC","Microsoft JhengHei", sans-serif;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tag {
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 1.1rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid;
    transition:all 0.2s ease-in;
}

.card.pink .tag {
    border-color: #d6185e;
    color: #d6185e;
}

.card.teal .tag {
    border-color: #008080;
    color: #008080;
}

/* 按鈕設計 */
.btn {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 56px;
    border-radius: 50px;
    color: white;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
    white-space: nowrap;
}

    .btn:hover {
        transform: translateX(-50%) scale(1.05);
    }
.card.pink:has(.btn:hover), .card.teal:has(.btn:hover) {
    background-position: top; /* hover 時往上推 */
}

        .card.pink .btn {
            background-color: #d6185e;
        }

.card.pink:has(.btn:hover) .tag {
    border-color: #df5e7c;
    background: #df5e7c;
    color: #fff;
}
.card.teal:has(.btn:hover) .tag {
    border-color: #ab8600;
    background: #ab8600;
    color: #fff;
}
.card.teal .btn {
    background-color: #008080;
}

/* 頁尾 */
footer {
    background-color: #f16622;
    color: white;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-family: "PingFang TC","Microsoft JhengHei", sans-serif;
    z-index: 2;
    flex-direction: column;
}
.footer_info {
    display: flex;
    width: 1400px;
    align-items: center;
    border-bottom: 1px solid;
    padding-bottom: 15px;
    margin-bottom: 8px;
    justify-content: space-between;
}
.menu_more a {
    transition: all 0.2s ease-in;
    color: #f16622;
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
}
    .menu_more a:hover {
        color: #fff;
        background: #f16622;
    }
    .footer_more {
        display: flex;
    }
/* RWD 響應式設定 */
@media (max-width: 992px) {
    footer {
        padding: 20px 10px;
    }
    .footer_info {
        flex-direction: column;
        width: 100%;
    }
    .side-icons {
        display: none;
    }
    /* 螢幕過小時隱藏兩側裝飾圖 */
    .title-section h1 {
        font-size: 2.2rem;
    }

    .title-section h2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .cards-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 60px; /* 增加上下間距以容納按鈕 */
    }

    .card {
        width: 100%;
        max-width: none;
        padding: 40px 20px 60px;
        margin: 0 0 2rem 0;
    }
        .card p{
            font-size:1rem;
        }
        .card h3 {
            font-size: 1.7rem;
        }
        .card p span {
            line-height: 1.3;
            margin-bottom: 5px;
        }
        footer {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }
    .tags {
        flex-direction: column;
    }

    .title-section h1 {
        font-size: 2.2rem;
    }
    
    .title-section h2 {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 5px;
    }

        .title-section h2::before, .title-section h2::after {
            display: none;
        }
    /* 手機版隱藏直線 */
    .icons{
        display:none;
    }

}