/* ===== 2025 Main Section 幾何背景裝飾樣式 ===== */

/* ===== 桌面版樣式 (Desktop Styles) ===== */

/* Main Section 基礎設定 */
.main {
    position: relative;
    overflow: hidden;
    background-image: url(../../img/2025/terms_background.jpg)
}

.geometric-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.main>* {
    /*position: relative;*/
    z-index: 2;
}

.shape {
    position: absolute;
    border-radius: 50%;
}

/* 幾何裝飾元素 - 桌面版 */
/* 橙色圓形 (左上角) */
.shape-circle-orange {
    width: 70px;
    height: 70px;
    background-color: #ff8c5a;
    top: 50px;
    left: 120px;
    z-index: 3;
}

/* 深藍色大圓形 (左上角) */
.shape-circle-navy {
    width: 180px;
    height: 180px;
    background-color: #343579;
    top: -60px;
    left: 150px;
}

/* 黃色圓形 (右上角) */
.shape-circle-yellow-1 {
    width: 60px;
    height: 60px;
    background-color: #E7EC97;
    top: 80px;
    right: 100px;
}

/* 檸檬黃圓形 (左下角) */
.shape-circle-lime {
    width: 60px;
    height: 60px;
    background-color: #e7ec97;
    bottom: 200px;
    left: 50px;
}

/* 大檸檬黃圓形 (左下角) */
.shape-circle-lime-large {
    width: 300px;
    height: 300px;
    background-color: #e7ec97;
    bottom: -150px;
    left: -150px;
}

/* 小黃色圓形 (右邊中間) */
.shape-circle-yellow-2 {
    width: 60px;
    height: 60px;
    background-color: #f6e05e;
    bottom: 180px;
    right: 80px;
}

/* 橙色三角形 (右下角) */
.shape-triangle-orange {
    width: 0;
    height: 0;
    border-radius: 0;
    border-left: 300px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 750px solid #FF8F60;
    bottom: 0;
    right: 0;
}

/* 橙色三角形 (左邊中間) */
.shape-triangle-left {
    width: 0;
    height: 0;
    border-radius: 0;
    border-top: 110px solid transparent;
    border-bottom: 110px solid transparent;
    border-left: 100px solid #FF8F60;
    top: 30%;
    left: 0;
}

/* 黃色方形 (右邊中間) */
.shape-square-yellow {
    width: 300px;
    height: 300px;
    background-color: #E7EC97;
    border-radius: 0;
    bottom: -110px;
    right: 5%;
    transform: rotate(25deg);
}

/* Getty 背景圖片區塊 */
.main-getty-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../img/2025/getty.png);
    background-position: left bottom;
    z-index: 1;
    opacity: 0.3;
}

/* Main Icon3 人物圖片 */
.main-icon3-image {
    position: absolute;
    right: 0%;
    top: 46%;
    width: 450px;
    height: 504px;
    background-image: url('../../img/2025/main_icon3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
}

/* Main Icon1 人物圖片 - 桌面版預設隱藏 */
.main-icon1-image {
    display: none;
}

/* Main Tag 圖示裝飾 */
.main_tag::after {
    content: '';
    position: absolute;
    left: -151px;
    top: -51%;
    transform: translateY(-50%);
    width: 250px;
    height: 250px;
    background-image: url('../../img/2025/main_icon1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

/* ===== 平板版樣式 (Tablet Styles) ===== */
@media (max-width: 768px) {

    /* 幾何裝飾元素調整 - 平板版 */
    .shape-circle-navy {
        width: 120px;
        height: 120px;
        left: 100px;
    }

    .shape-circle-orange {
        width: 50px;
        height: 50px;
        left: 80px;
    }

    .shape-circle-yellow-1 {
        width: 60px;
        height: 60px;
        right: 50px;
    }

    .shape-triangle-orange {
        border-left: 182px solid transparent;
        border-bottom: 450px solid #FF8F60;
    }

    .shape-triangle-left {
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid #FF8F60;
        top: 50%;
    }

    .shape-square-yellow {
        width: 200px;
        height: 200px;
        right: 80px;
        bottom: -7%;
    }

    .shape-circle-lime-large {
        width: 200px;
        height: 200px;
        bottom: -100px;
        left: -100px;
    }

    /* Getty 背景 - 平板版 */
    .main-getty-bg {
        width: 100%;
        height: 100%;
    }

    /* Main Icon3 - 平板版 */
    .main-icon3-image {
        right: -8%;
        top: 63%;
        width: 280px;
        height: 300px;
    }

    /* Main Tag 圖示 - 平板版隱藏 */
    .main_tag::after {
        display: none;
    }
}

/* ===== 手機版樣式 (Mobile Styles) ===== */
@media (max-width: 480px) {

    /* 幾何裝飾元素調整 - 手機版 */
    .shape-circle-navy {
        width: 80px;
        height: 80px;
    }

    .shape-circle-yellow-1 {
        display: none;
    }

    .shape-circle-orange {
        width: 30px;
        height: 30px;
    }

    .shape-triangle-orange {
        border-left: 90px solid transparent;
        border-bottom: 450px solid #FF8F60;
        bottom: -45px;
    }

    .shape-triangle-left {
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid #FF8F60;
        top: 50%;
    }

    .shape-circle-lime-large {
        width: 150px;
        height: 150px;
        bottom: -75px;
        left: -75px;
    }

    .shape-circle-yellow-2 {
        width: 25px;
        height: 25px;
        bottom: 100px;
        left: 145px;
    }

    .shape-square-yellow {
        width: 150px;
        height: 150px;
        right: 80px;
        bottom: -7%;
    }

    .main h1 {
        font-size: 36px;
    }

    .main h2 {
        font-size: 36px;
    }

    /* Getty 背景 - 手機版 */
    .main-getty-bg {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
    }

    /* Main Icon3 - 手機版 */
    .main-icon3-image {
        right: -8%;
        top: 69%;
        width: 280px;
        height: 250px;
    }

    /* Main Icon1 - 手機版顯示 */
    .main-icon1-image {
        display: block;
        position: absolute;
        right: 47%;
        top: 77%;
        width: 227px;
        height: 235px;
        background-image: url('../../img/2025/main_icon1.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 4;
    }

    /* Main Tag 圖示 - 手機版隱藏 */
    .main_tag::after {
        display: none;
    }
}