.index入學資訊9 {
    
}

.index入學資訊9 .ptStyle107 {
    --content-width: 1200px;
    --gap-width: 2em;
    --font-color: #000000;
    --block-bg-color: #FFFFFF;
    /*background-image: url(https://picsum.photos/id/797/2000/1000);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3em 1em;
    color: var(--font-color);
}

.index入學資訊9 .ptStyle107 .theGrid {
    display: grid;
    column-gap: var(--gap-width);
    row-gap: var(--gap-width);
    max-width: var(--content-width);
    margin: 0 auto;
}

.index入學資訊9 .ptStyle107 .block {
    padding: 1em;
    background-color: var(--block-bg-color);
    text-align: center;
}

.index入學資訊9 .ptStyle107 .pic {
    max-width: 100%;
}

.index入學資訊9 .ptStyle107 .more {
    color: var(--font-color);
}

@media (max-width: 767px) {
    .index入學資訊9 .ptStyle107 .theGrid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
}

@media (min-width: 768px) and (max-width:1199px) {
    .index入學資訊9 .ptStyle107 .theGrid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
}

@media (min-width: 1200px) {
    .index入學資訊9 .ptStyle107 .theGrid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
    }
}




/* --- 全局容器設定 --- */
.ptStyle107 .theGrid {
    display: grid;
    /* 自動適應列寬，最小260px，最大平均分配 */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    padding: 20px;
    background: #f8f9fa; /* 淺灰背景襯托卡片 */
}

/* --- 卡片基礎樣式 --- */
.ptStyle107 .block {
    background: #ffffff;
    border-radius: 16px; /* 更現代的大圓角 */
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* 柔和的陰影 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 內容預設居中 */
    text-align: center;
    transition: transform 0.3s ease;
}

.ptStyle107 .block:hover {
    transform: translateY(-5px); /* 微浮動效果 */
}

.ptStyle107 h2 {
    font-size: 1.3rem;
    color: #004a95; /* 校徽藍 */
    margin-bottom: 20px;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
    font-weight: 600;
}

/* --- 圖片通用設定 --- */
.ptStyle107 .pic {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
/* 左側 Banner 圖片增加一點陰影 */
.main-banner {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/* --- [重點修訂] 微信 QR Code 專區 --- */
.wechat-qr-section {
    width: 100%; /* 區塊佔滿卡片寬度 */
    background: #f0f7ee; /* 微帶綠色的背景強調微信 */
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.wechat-qr-section p {
    color: #07c160; /* 微信標準綠色 */
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1rem;
}

/* QR Code 連結包覆器 - 控制最大寬度並居中 */
.qr-link-wrapper {
    display: block;
    width: 100%;
    max-width: 280px; /* 限制最大寬度，防止在電腦版過大，280px 非常適合掃描 */
    margin: 0 auto;   /* 居中對齊 */
}

/* QR Code 圖片本體 - 核心修復代碼 */
.qr-code-img {
    width: 100% !important;    /* 強制填滿 wrapper 的寬度 */
    height: auto !important;   /* 高度自動，根據寬度調整 */
    aspect-ratio: 1 / 1;       /* 【關鍵】強制保持正方形比例，防止變形 */
    object-fit: contain;       /* 確保圖片內容完整顯示 */
    
    /* 美化樣式 */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(7, 193, 96, 0.2); /* 帶綠色調的陰影 */
    border: 5px solid #fff;    /* 白色邊框增加層次 */
    background: #fff;
    transition: transform 0.3s;
}
.qr-code-img:hover {
    transform: scale(1.05); /* 懸停時輕微放大 */
}


/* --- 其他元素優化 --- */
.social-divider {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
}
/* 增加分隔線效果 */
.social-divider::before, .social-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #eee;
}
.social-divider::before { left: 0; }
.social-divider::after { right: 0; }


.social-icons-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}
.social-icons-row .icon {
    width: 45px !important; /* 稍微調大圖示 */
    height: 45px !important;
    transition: opacity 0.2s;
}
.social-icons-row .icon:hover { opacity: 0.8; }

/* 入學申請按鈕列表 */
.admission-links { width: 100%; }
.btn-link {
    display: block;
    background: #f4f8fb;
    color: #333;
    padding: 14px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-decoration: none;
    text-align: left;
    font-weight: 500;
    border-left: 4px solid #004a95;
    transition: all 0.2s;
}
.btn-link:hover {
    background: #004a95;
    color: #fff;
    padding-left: 20px;
}

/* 頁腳榮譽標章 */
.award-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
    width: 100%;
}
.award-footer img {
    height: 55px !important; /* 統一高度 */
    width: auto !important;
    object-fit: contain;
}