/* RWD 增強設計 for #indexContent and #slide */

/* Desktop 基本設定 (1200px+) - 覆蓋原有樣式 */
#indexContent {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    width: 990px;
    max-width: 95%;
    height: auto !important;
    margin: 15px auto;
    padding: 10px;
    gap: 15px;
}

#indexNews {
    flex: 1;
    min-width: 300px;
    max-width: 610px;
    width: 610px !important;
    height: 490px !important;
    margin-right: 0 !important;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7) !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

#indexAir {
    flex: 0 0 360px;
    width: 360px !important;
    height: 490px !important;
    margin-left: 0 !important;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7) !important;
    float: none !important;
}

#slide {
    display: block !important;
    width: 990px;
    max-width: 95%;
    margin: 35px auto;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* Tablet 設計 (768px - 1199px) */
@media screen and (max-width: 1199px) {
    #indexContent {
        flex-direction: column !important;
        width: 90% !important;
        max-width: 800px;
        align-items: center;
        height: auto !important;
    }
    
    #indexNews {
        width: 100% !important;
        max-width: 750px;
        height: auto !important;
        max-height: 400px !important;
        margin-bottom: 15px;
        margin-right: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .tabcontent {
        height: 400px !important;
        overflow-y: auto !important;
    }
    
    #newsReleaseList,
    #clarificationList,
    #newsSimenviList {
        height: 380px !important;
        overflow-y: auto !important;
    }
    
    #indexAir {
        width: 100% !important;
        max-width: 750px;
        height: auto !important;
        min-height: 490px;
        margin-left: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .indexAirPic {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    .indexAirPic img {
        max-width: 80% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    #slide {
        display: block !important;
        width: 90% !important;
        max-width: 800px;
        margin: 20px auto;
        order: 2;
    }
    
    .swiper-slide {
        width: 250px !important;
        height: 150px !important;
    }
    
    .swiper-slide img {
        width: 250px;
        height: 150px;
    }
    
    .swiper-txt {
        font-size: 22px;
    }
}

/* Mobile 設計 (480px - 767px) */
@media screen and (max-width: 767px) {
    #indexContent {
        width: 95% !important;
        padding: 5px;
        gap: 10px;
        flex-direction: column !important;
    }
    
    #indexNews {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        padding: 8px;
        font-size: 14px;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #indexNews li {
        min-height: 30px;
        line-height: 18px;
        margin-left: 10px;
    }
    
    #indexNews li a {
        font-size: 14px;
        width: 100%;
        max-width: none;
    }
    
    .tab button {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    #indexAir {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        padding: 8px;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .indexAirPic {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    .indexAirPic img {
        max-width: 75% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    #slide {
        display: block !important;
        width: 95% !important;
        margin: 15px auto;
        padding: 8px;
        order: 2;
    }
    
    .swiper-slide {
        width: 200px !important;
        height: 240px !important;
    }
    
    .swiper-slide img {
        width: 200px;
        height: 240px;
    }
    
    .swiper-txt {
        font-size: 20px;
        line-height: 1.1;
        text-shadow: 3px 3px 3px rgb(255, 255, 255),  0 0 1.2em rgb(245, 242, 242),  0 0 0.4em rgb(133, 136, 136);
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px;
    }
}

/* Small Mobile 設計 (320px - 479px) */
@media screen and (max-width: 479px) {
    #indexContent {
        width: 98% !important;
        padding: 3px;
        gap: 8px;
        flex-direction: column !important;
    }
    
    #indexNews {
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
        padding: 6px;
        font-size: 13px;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #indexNews li {
        min-height: 25px;
        line-height: 16px;
        margin-left: 8px;
    }
    
    #indexNews li a {
        font-size: 13px;
    }
    
    .tab button {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    #indexAir {
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
        padding: 6px;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .indexAirPic {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    .indexAirPic img {
        max-width: 70% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    #slide {
        display: block !important;
        width: 98% !important;
        margin: 10px auto;
        padding: 6px;
        order: 2;
    }
    
    .swiper-slide {
        width: 180px !important;
        height: 100px !important;
    }
    
    .swiper-slide img {
        width: 180px;
        height: 100px;
    }
    
    .swiper-txt {
        font-size: 19px;
        line-height: 1.0;
        color:darkblue;
        text-shadow: 4px 4px 4px rgb(255, 255, 255),  0 0 2em rgb(245, 242, 242),  0 0 0.4em rgb(133, 136, 136);
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 25px;
        height: 25px;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 14px;
    }
    
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
}

/* 針對新聞標籤的響應式優化 */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
    
    .tab {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .tabcontent {
        width: 100%;
        max-height: 250px;
        overflow-y: auto;
    }
    
    .tabcontent ul {
        padding: 0;
        margin: 0;
    }
    
    .tabcontent li {
        padding: 5px 0;
        border-bottom: 1px solid #eee;
    }
}

/* 確保圖片在所有設備上都能正確顯示 */
@media screen and (max-width: 1199px) {
    .indexAirPic img {
        object-fit: contain;
        max-height: 437px;
    }
}

/* 針對 Swiper 的額外優化 */
@media screen and (max-width: 767px) {
    .swiper {
        padding-bottom: 30px;
    }
    
    .swiper-pagination {
        bottom: 0;
    }
}

/* 確保在極小螢幕上的可用性 */
@media screen and (max-width: 320px) {
    #indexContent {
        width: 100% !important;
        margin: 10px 0;
        flex-direction: column !important;
    }
    
    #indexNews,
    #indexAir {
        width: 100% !important;
        height: auto !important;
        margin: 5px 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #slide {
        display: block !important;
        width: 100% !important;
        margin: 10px 0;
    }
}

/* 額外的覆蓋樣式確保 RWD 正常運作 */
@media screen and (max-width: 1199px) {
    body {
        background: url(../images/bg_sky_index3.jpg) top center !important;
        background-size: cover !important;
    }
    
    #main_index {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .ilogoBar {
        width: 95% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
    
    #ilogoImg {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
    }
    
    #ilogoImg img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
    }
    
    #mobileFooter {
        display: block !important;
        margin-top: 20px !important;
        position: relative !important;
        bottom: auto !important;
        order: 3;
        background: #1d2087 !important;
    }
}

@media screen and (max-width: 767px) {
    /* #ilogoImg img {
        max-width: 300px !important;
    } */
    #ilogoImg img { width: 50% !important; height: auto; position: absolute; top: 5px; left:72px;} 
}

@media screen and (max-width: 479px) {
    /* #ilogoImg img {
        max-width: 280px !important;
    } */
    #ilogoImg img { width: 85% !important; height: auto; position: absolute; top: 12px; left:50px;}  
}

/* 確保 Swiper 在所有設備上正常顯示 */
.swiper {
    width: 100% !important;
    height: auto !important;
}

.swiper-wrapper {
    height: auto !important;
}

/* 確保圖片響應式 */
.indexAirPic img {
    object-fit: contain !important;
    max-width: 100% !important;
}

/* 886x1080 設備特殊調整 */
@media screen and (width: 886px) and (height: 1080px) {
    #indexNews {
        height: 490px !important;
        max-height: 490px !important;
    }
    
    #indexAir {
        height: 490px !important;
        max-height: 490px !important;
    }
}

/* 新聞區域的響應式優化 */
@media screen and (max-width: 767px) {
    #indexNews .container {
        width: 100% !important;
        padding: 0 !important;
    }
    
    #indexNews .tab {
        flex-wrap: wrap !important;
        justify-content: space-around !important;
    }
    
    #indexNews .tabcontent {
        max-height: 300px !important;
        overflow-y: auto !important;
    }
}
}