:root{
    --blue-100: #edf7fb;
    --blue-200: #b9d7f1;
    --blue-250: #cfe9e6;
    --blue-300: #7faaba;
    --blue-350: #86d2f4;
    --blue-450: #3e9dd8;
    --blue-500: #5d9ad3;
    --blue-600: #1073bb;
    --blue-700: #4379ff;
    --blue-800: #1b6aa5;
    --blue:#004097;

    --green-100: #d0e396;
    --green-300: #6fc3b0;
    --green-400: #47b454;
    --green-500: #36a55f;
    --green-600: #3fa351;
    

    --yellow-050: #fef8e7;
    --yellow-100: #fbf3c9;
    --yellow-200: #f6ebc7;
    --yellow-300: #fff095;
    --yellow-400: #ffe572;
    --yellow-500: #f6e469;
    --yellow-600: #ffff00;

    --orange-200: #ff931e;
    --orange-300: #e8961d;
    --orange-700: #af4422;

    --red-400: #c63838;
    --red-500: #e50012; 
    --red-600: #de0515;
    --red-700: #cf121b;
    --red-800: #ad2424;

    --brown-200: #865624;
    --brown-300: #885931;
    --brown-500: #551d11;

    --pink-100: #fadff1;
    --pink-300: #f0bdca;
    --pink-500: #e776aa;
    --pink-700: #e8546d;
    --pink-800: #e61d55;

    --gray-350: #dbdcdc;
    --gray-400: #b5b5b6;
    --gray-800: #828282;
    --gray-900: #231815;

    --font-xs:0.75rem;
    --font-sm:0.875rem;
    --font-base:1rem;
    --font-md: 1.125rem;
    --font-lg: 1.25rem;
    --font-llg: 1.375rem;
    --font-xl: 1.5rem;
    --font-2xl: 1.75rem;
    --font-3xl: 2rem;
    --font-35xl: 2.5rem;
    --font-4xl: 3rem;
}

.red-400{
    color:var(--red-400);
}

.red-500{
    color:var(--red-500);
}

.red-800{
    color:var(--red-800);
}

.orange-300{
    color:var(--orange-300);
}

.pink-700{
    color:var(--pink-700);
}

.gray-900{
    color:var(--gray-900);
}

.blue-500{
    color:var(--blue-500);
}

.btn-red-600{
    background:var(--red-600);
}

.w-90{
    width:90%;
}

p{
    font-size:var(--font-base);
}

section[id] {
    scroll-margin-top: 30px; 
}

/* 廣告 */
#AD2026{    
    position:relative;
}

.FooterPresent2024{
    background:var(--gray-350);
}

/* Navbar2026 */
#navbar2026{
    position:relative;
    background: black;
    display:flex;
    justify-content:center;
    padding-bottom: 0.5rem;
    overflow:hidden;
    z-index:9;
}

#navbar2026 ul{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    width:70%;
    margin:1rem 0 .8rem 0;
    padding: 0;
    z-index:5;
}

#navbar2026 ul li{
    font-family:"Noto Sans TC", sans-serif;
    list-style:none;
    text-align:center;
    width:calc(100% / 6);
}

#navbar2026 ul li a{
    position:relative;
    font-size:1.125rem;
    font-weight:600;
    color:var(--white);
    text-decoration: none;
    padding:0;
    z-index:9;
}

#navbar2026 ul li a:hover{
    background: var(--white);
    color:var(--black);
    border-radius:5rem;
    padding: .3rem 1rem .5rem 1rem;
}

#navbar2026 .bg{
    opacity: 60%;
    top:0;
    left:0;
    z-index:-1;
}

/* 活動辦法 */
#ActionWrap2026{
    position:relative;
    background:white
    padding: 4rem 0 0 0;
    overflow:hidden;
    z-index:1;

    .title-wrap{
        position:relative;
        z-index:3;

        .titleAction{
            margin-top:4rem;

            img{
                display:block;
                width:52%;
                margin:0 auto;
            }

            h2{
                font-size:var(--font-35xl);
                margin-bottom: 5rem;
            }

            /* 預約體驗課程 加碼送 雙重好禮 */
            .subtitle{
                margin-bottom:5rem;

                h2{
                    line-height:1;
                    margin-bottom:0;
                }
            }

            /* 活動辦法 */
            .titleSeason{
                width:fit-content;
                padding:0 clamp(3rem, 6vw, 5rem);

                h1{
                    font-size:clamp(1.6rem, 4.5vw, 2.8rem);
                    color:var(--red-500);
                    margin-bottom:0;                   
                }
            }

            .title{
                width:25%;

                h3{
                    background:var(--red-500);
                    font-size:var(--font-35xl);
                    width: 100%;
                    padding:.45rem 0;           
                }

                img{
                    &:first-child{
                        width:16%;
                    }

                    &:last-child{
                        width:16.5%;
                    }
                }                
            }
        }

        .con{
            width:fit-content;

            .con-wrap{ 
                width:100%;

                h3{
                    color:var(--pink-700);
                    font-size: var(--font-xl);
                    width:fit-content;
                    text-align:center;
                    padding:1.5rem 2rem;
                }              


                .txt-con{
                    width:100%;

                    ul{
                        width:100%;
                        display:grid;
                        grid-template-columns:repeat(2, 1fr);
                        gap:0.5rem 1rem;
                        padding-inline-start:0;
                        margin-bottom:0;

                        li{
                            position:relative;
                            background:var(--blue-100);
                            font-size:var(--font-md);
                            color:var(--black);
                            list-style:none;
                            line-height:2.4rem;
                            width:100%;
                            padding:0 1rem 0 2.2rem;

                            &:before{
                                position:absolute;
                                content:"◆";
                                font-size:0.65em;
                                top:0;
                                left:1rem;
                            }
                    
                        }
                    }

                    h2{
                        font-size:var(--font-2xl);width:fit-content;
                        font-weight:900;
                        letter-spacing: .2rem;
                    }

                    .action{

                        ul{
                            width:fit-content;
                            padding-inline-start: 0;

                            li{
                                font-size:var(--font-md);
                                color:var(--black);
                                list-style:none;
                                line-height:2.4rem;

                                /* 只有含「加碼抽」的那幾行要白外框 */
                                &:has(.plus){
                                    -webkit-text-stroke:.1em var(--white);
                                    paint-order:stroke fill;
                                }

                                span{
                                    background:var(--pink-700);
                                    font-size:var(--font-sm);
                                    color:var(--white);
                                    border-radius:50%;
                                    margin: 0 .3rem;
                                    padding: .2rem .2rem;

                                    &:last-child{
                                        background:transparent;
                                        font-size:var(--font-md);
                                        color:var(--pink-700);
                                        margin-left:.1rem;
                                    }

                                    /* 加碼抽：多字用膠囊，不能用 50% */
                                    &.plus{
                                        background:var(--blue-450);
                                        color:var(--yellow-600);
                                        font-weight:700;
                                        border-radius:1em;
                                        padding:.2rem .6rem;
                                        white-space:nowrap;
                                        /* 取消由 li 繼承下來的文字白描邊 */
                                        -webkit-text-stroke-width:0;
                                    }
                                }
                            }
                        }                        
                    }
                }

            }
        }  
        
        .action-group{
            width:65%;
            justify-content:space-between;
            align-items:flex-start;
            margin-left: auto;
            margin-right:auto;

            .photo{
                width:22%;
                 aspect-ratio:314 / 332;
                display:flex;
                flex-wrap:wrap;
                align-items:start;
                justify-content:center; 

                img{
                    height:100%;
                    width:auto;
                    max-width:none;
                    margin-bottom: 0.3rem;
                }

                p{
                    font-size:var(--font-base);
                    text-align:center;
                    color:var(--red-500);
                }
            }
        }       
    } 

    .action-time{
        background:var(--red-500);
        padding: 2rem 0;

        h3{
            font-size:var(--font-35xl);
        }

        p {
            font-size:var(--font-md);
        }
    }
}

/* 預約試讀填寫 */
#Reservation2026{
    background: var(--blue-500);
    padding:6rem 0;
    overflow:hidden;
    z-index:1;

    .ReservationWrap{
        position:relative;
        z-index:3;        

        .con{
            display:block;
            width:900px;
            margin:0 auto;
            padding:0 5rem 0 3rem;

            .title{
                width:60%;

                h3{
                    background:var(--red-500);
                    font-size:var(--font-35xl);
                    color:var(--white);
                    width:85%;
                    padding:.45rem 0;
                }

                img{

                    &:first-child{
                        width:12.5%;
                    }

                    &:last-child{
                        width:13%;
                    }
                }
            }
        }
    }

    .ReservationWrap .ReservationWrap-group{
        display:block;
        width:60%;
        margin:0 auto;
    }

    .ReservationWrap .Reservation-bg{
        background: var(--white);
        border-radius:5rem;
        margin-bottom:5rem;
        padding:1.2rem;
    }

    .ReservationWrap .Reservation-bg .bgWhite {
        background: var(--white);
        border:10px solid var(--red-500);
        border-radius:4.5rem;
        padding:3rem 1rem;
    }
    
}

#Reservation2026 .ReservationWrap .title p{
    font-size:1.25rem;
    color:var(--red-500);
    margin-bottom:.5rem;
}

#Reservation2026 .ReservationWrap .title p.note{
    font-size:1rem;
    color:var(--black);
    padding-bottom: .6rem;
}

#Reservation2026 .ReservationWrap .form-group{
    font-family:'Roboto', 'Noto Sans TC', Verdana, Arial, Helvetica, sans-serif;
    font-size:1.125rem;
    font-weight:500;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:center;
    color:var(--black);
    padding:.8rem 0;
}

#Reservation2026 .ReservationWrap .form-control{
    background:var(--gray-200);
    font-size:1.2rem;
    font-weight:400;
    color:var(--black);
    border:1px solid var(--gray-200);
}

#Reservation2026 .ReservationWrap .form-group input:focus, 
#Reservation2026 .ReservationWrap .form-group select:focus{
    background:var(--white);
    border:0;
    box-shadow:3px 3px 3px var(--gray-300);
}

#Reservation2026 .ReservationWrap .form-group select{
    background:var(--gray-200);
    border-radius:.375rem;
    border:0;
    color:var(--black);
    line-height:1.5;
    padding:.375rem .75rem;
}

#Reservation2026 .ReservationWrap .form-group select option{
    background:var(--white);
}

#Reservation2026 .ReservationWrap .form-group button{
    background:var(--pink-700);
    font-size:1.125rem;
    color:var(--white);
    border-radius:2rem;
    border:0;
    padding:.2rem 1rem;
}

#Reservation2026 .ReservationWrap .form-group span.text,
#Reservation2026 .ReservationWrap p.warn,
#Reservation2026 .ReservationWrap p.warn a{
    font-size:.9rem;
}

#Reservation2026 .ReservationWrap p.warn a{
    color: var(--blue-700);
    text-decoration: none;
}

#Reservation2026 .ReservationWrap p.warn a:hover{
    color: var(--pink-700);
}

#Reservation2026 .bottom{
    position:relative;
    z-index:9;
}

.button-group .btn{
    font-family:'Roboto', 'Noto Sans TC', Verdana, Arial, Helvetica, sans-serif;
    font-size:1.25rem;
    font-weight:500;
    background:var(--red-500);
    border-radius:10rem;
    color:var(--white);
    letter-spacing: .2rem;
    padding:.375rem 3.5rem;
}

.button-group .btn:hover{
    background:var(--pink-700);
    color:var(--white);
    border:1px var(--pink-700);;
}

/* 選擇分校 */
#show_branch{    
    width:100%;
}

#show_branch table{
    font-weight:400;
    border:1px solid var(--gray-300);
    margin-top: 1rem;
}

#show_branch table thead tr{
    background:var(--orange-500);
    font-weight:500;
    vertical-align: middle;
    color:var(--white);
}

#show_branch table thead tr th:first-child{
    width:15%;
}

/* 隱私權說明 */
#Reservation2026 .ReservationWrap .modal p{
    font-size:1.2rem; 
    font-weight:400;
}

/* 課程內容 */
#CourseWrap2026{
    position:relative;
    background: var(--yellow-100);
    padding:6rem 0 12rem 0;
    z-index:10;

    .title{
        width:25%;
        z-index:5;

        h3{
            background:var(--red-500);
            font-size:var(--font-35xl);
            color:var(--white);
            width:100%;
            padding:.4rem 0;
        }

        img
        {

            &:first-child{
                width:15.8%;
            }
            
            &:last-child{
                width:16.5%;
            }
        }
    }

    h3{
        &.titleClass{
            text-align:left;
            width:65%;
            z-index:5;
        }
    }

    .con-img{
        position:relative;
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        width:70%;
        overflow:hidden;
        margin:0 auto;
        z-index:9;

        .img-group{            

            .title{
                width:40%;

                h3{
                    font-size:var(--font-3xl);
                    width:100%;
                    padding:.45rem 0;
                }

                img
                {

                    &:first-child{
                        width:16.6%;
                    }
                    
                    &:last-child{
                        width:16.6%;
                    }
                }                
            }

            &:first-child{
                .title{
                    h3{
                        background:rgba(255,147,35,0.6);
                        color:var(--blue-700);
                    }
                }
            }

            &:nth-child(2){
                .title{
                    h3{
                        background:rgba(179,179,179,0.6);
                        color:black;
                    }
                }
            }

            &:nth-child(3){
                .title{
                    h3{
                        background:rgba(16,115,187,0.6);
                        color:white;
                    }
                }
            }

             &:nth-child(4){
                .title{
                    h3{
                        background:rgba(187,213,79,0.6);
                        color:var(--green-500);
                    }
                }
            }
        }
        
    }

}

/* 注意事項 */
#NoticeWrap2026{
    position:relative;
    background: var(--red-600);
    padding:4.5% 0 5rem 0;
    overflow:visible;
    z-index:11;

    .note-title{
        position:absolute;
        top:0;
        left:0;
        right:0;
        width:40%;
        margin:0 auto;
        transform:translateY(-71%);
        z-index:10;

        h3{
            position:absolute;
            bottom:1.2rem;
            left:0;
            right:0;
            margin:0;
            font-size:var(--font-3xl);
            color:black;
            text-align:center;
        }

        img{
            width:60%;
        }
    }

    .con{
        position:relative;
        display:block;
        width:80%;
        margin:0 auto;
        background:transparent;
    }

    .con-group{
        position:relative;
        display:block;
        margin-top:0;
        z-index:7;

        .note-con{
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            display:grid;
            grid-template-columns:3.222% 1fr 4.337%;
            grid-template-rows:auto 1fr auto;
            pointer-events:none;
            z-index:4;

            /* 只有四片筆觸圍出來的中間格子鋪白底，外框以外維持紅色。
               grid 欄寬是百分比，接縫會落在半個 px 上而透出紅底，所以用負 margin
               讓白底往左右壓進切片裡。這裡用百分比而非 px，讓它在任何螢幕寬度都剛好
               停在黑色框線的內緣（原圖：左框線 0.60%~1.54%、右框線 98.76%~99.88%，
               左欄從 3.222% 起、右欄從 95.663% 起），壓進去的部分被切片的白色蓋住。 */
            &:before{
                content:"";
                grid-area:2 / 2 / 3 / 3;
                margin:-1px -3% -1px -1.6%;
                background:var(--white);
            }

            img{
                display:block;
                width:100%;
            }
        }

        .con-top{
            grid-area:1 / 1 / 2 / 4;
        }

        .con-bottom{
            grid-area:3 / 1 / 4 / 4;
        }

        /* 左右兩片已加 preserveAspectRatio="none"，高度隨中段拉伸 */
        .con-left{
            grid-area:2 / 1 / 3 / 2;

            img{ height:100%; }
        }

        .con-right{
            grid-area:2 / 3 / 3 / 4;

            img{ height:100%; }
        }

        .con-list{
            position:relative;
            width:100%;
            /* 上下左右讓開筆觸厚度（換算為容器寬度的百分比）再加緩衝 */
            padding:9% 6.5% 16% 5.5%;
            z-index:5;
        }
    }
    
}


#NoticeWrap2026 .con-table{
   border:2px solid black;
   border-radius:0; 
   margin:0 auto 1rem;
   overflow-x:auto;
}

#NoticeWrap2026 .con-table table{
    border-radius:0; 
    border:0;    
    margin-bottom: 0;
    width:100%;
    table-layout:fixed;
}

#NoticeWrap2026 .con-table table tr td{
    background:var(--whitle);
    font-size:var(--font-base);
    padding:.3rem .25rem;
    text-align:center;
    vertical-align:middle;
}

#NoticeWrap2026 .con-table table thead{
    background:black;
    font-weight:600;
    color:var(--white);
}

#NoticeWrap2026 .con-table table tbody tr + td{
    border:0;
    border-top:1px solid black;
}

#NoticeWrap2026 .con-table table tbody tr:last-child td{
    border-bottom:0;
}

#NoticeWrap2026 .con-table table td + td{
    
    border-left:1px solid black;
}

#NoticeWrap2026 .con-table table tbody td{
    background:var(--white);
    color:black;
}

#NoticeWrap2026 .con-group ol{
    margin-bottom:0;
    padding-left:1.5rem;
}

#NoticeWrap2026 .con-group ol li{
    font-size:var(--font-base);
    color:black;
    line-height:2rem;
}

/* 預約試讀 */
.iconReserve2025{
    position:relative;
    z-index:99;
}

.iconReserve2025 .icon-wrap{
    position:fixed;
    flex-direction:column;
    top:40%;
    right:1rem;
}

.iconReserve2025 .icon-wrap a{
    width:100%;
}

.iconReserve2025 .icon-wrap a img{
    position:relative;
    display:block;
    transform: rotate(0);
    width:10vw;
    margin:0 auto;
    z-index:20;
}


.iconReserve2025 .icon-wrap p{
    position:absolute;
    display:flex;
    justify-content: center;
    align-items:center;
    font-family:'Roboto', 'AwkwardBlack', Verdana, Arial, Helvetica, sans-serif;
    font-size:1.2rem;
    color:var(--black);
    line-height:1.6rem;
    top:.3rem;
    left:3.2rem;
    z-index:11;
}

.iconReserve2025 .icon-wrap a{
    display:block;
    color:var(--white);
    text-decoration: none;
    transition-timing-function: ease-in-out;
    margin:0 auto;
}

.iconReserve2025 .icon-wrap a:hover img{
    transform: rotate(-10deg);
    margin:0 auto;
}

.iconReserve2025 .icon-wrap a:hover p{
    color:var(--red-700);
    text-shadow: 3px 3px 3px var(--gray-300);
}

/* 中獎公告 */
#WinnerWrap2026{
    position:relative;
    background: white;
    padding:3rem 0 3rem 0;
    z-index:9;
}

#WinnerWrap2026 .title{
    position:relative;

    img{
        display:block;
        width:11%;
        margin:0 auto;
    }

    h3{
        background:var(--red-500);
        color:var(--white);
        width:fit-content;
        padding:.5rem 2rem;
    }
    
}

#WinnerWrap2026 .title p{
    position:relative;
    background:var(--blue-200);
    color:var(--white);
    font-size:var(--font-3xl);
    text-align:center;
    width:fit-content;
}

#WinnerWrap2026 .subtitle p{
    color:var(--black);
    font-size:1.8rem;
    font-weight:900; 
    width:100%;
    text-align:center;
    margin-top:5rem;
}

#WinnerWrap2026 .con-img img:last-child{
    margin-top: -4.5%;
}

#WinnerWrap2026 .con-group{
    display:block;
    width:85%;
    z-index:9;
    margin:0 auto;    
}

#WinnerWrap2026 .bg-winning{
    top:0;
    left:0;
    z-index:-1;
}

#WinnerWrap2026 .con-table{
   margin-bottom: 1rem;
}

#WinnerWrap2026 .con-table table{
    background:white;
    font-size:1.1rem;
    border:0;    
    margin-bottom: 0;
}

#WinnerWrap2026 .con-table table tr td{
    font-family: Arial, "Noto Sans TC", sans-serif;
    font-weight:400;
    padding:.5rem 0;
}

#WinnerWrap2026 .con-table table thead{
    background:black;
    color:var(--white);
}

#WinnerWrap2026 .con-table table thead td{
    font-weight:700;
}

#WinnerWrap2026 .con-table table tbody td.bg{
    background:#ffe300;
}


#WinnerWrap2026 .con-table table tbody tr + tr{
    border:0;
    border-top:1px solid var(--pink-300);
}

/* #WinnerWrap2026 .con-table table tbody tr:last-child td{
    border-bottom:0;
} */

#WinnerWrap2026 .con-table table td + td{
    border-left:1px solid #ffe300;
}

#WinnerWrap2026 .con-table table tbody td{
    border:1px solid #ffe300;
    color:var(--black);
}

#WinnerWrap2026 .hide-row, #WinnerWrap2026 .hide-row2, #WinnerWrap2026 .hide-row3, #WinnerWrap2026 .hide-row4,
#WinnerWrap2026 .hide-row5, #WinnerWrap2026 .hide-row6, #WinnerWrap2026 .hide-row7, #WinnerWrap2026 .hide-row8, #WinnerWrap2026 .hide-row9, #WinnerWrap2026 .hide-row10,
#WinnerWrap2026 .hide-row11, #WinnerWrap2026 .hide-row12, #WinnerWrap2026 .hide-row13, #WinnerWrap2026 .hide-row14, #WinnerWrap2026 .hide-row15, #WinnerWrap2026 .hide-row16, #WinnerWrap2026 .hide-row17, #WinnerWrap2026 .hide-row18, #WinnerWrap2026 .hide-row19,#WinnerWrap2026 .hide-row20, #WinnerWrap2026 .hide-row21, #WinnerWrap2026 .hide-row22,
#WinnerWrap2026 .hide-row23, #WinnerWrap2026 .hide-row24, #WinnerWrap2026 .hide-row25,
#WinnerWrap2026 .hide-row26, #WinnerWrap2026 .hide-row27, #WinnerWrap2026 .hide-row28, #WinnerWrap2026 .hide-row29, #WinnerWrap2026 .hide-row30, #WinnerWrap2026 .hide-row31,
#WinnerWrap2026 .hide-row32, #WinnerWrap2026 .hide-row33, #WinnerWrap2026 .hide-row34, #WinnerWrap2026 .hide-row35, #WinnerWrap2026 .hide-row36, #WinnerWrap2026 .hide-row37, #WinnerWrap2026 .hide-row38, #WinnerWrap2026 .hide-row39,
#WinnerWrap2026 .hide-row40, #WinnerWrap2026 .hide-row41
{
    display:none;
}

#WinnerWrap2026 .show-more-row{
    text-align:center;
}

#WinnerWrap2026 .show-more-row button{
    position:relative;
    background:#ffe300;
    font-weight:700;
    border:3px solid #ffe300;
    padding:.5rem 1rem;
}

#WinnerWrap2026 .show-more-row button:before{
    position:absolute;
    content:"+";
    font-size:2rem;
    font-weight:900;
    color:var(--red-500);
    top:-15%;
    left:54%;
    z-index:1;
}

#WinnerWrap2026 .show-more-row button:after{
    position:absolute;
    content:"";
    background:var(--white);
    display:block;
    width:2rem;
    height:2rem;
    border-radius:50%;
    margin:0 auto;
    top:10%;
    left:53.7%;
    z-index:0;
}

/* modal */
.modal-backdrop{
    /* opacity: .3 !important;
    z-index:5 !important; */
}

.modal-backdrop.show{
    opacity: .5 !important;
    z-index:10 !important;
}

.modal{
    z-index:99999 !important;
}

.modal.show .modal-dialog{
    transform: none;
}

/* footer */
footer{
    position:relative;
    background:white;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:1.2rem 0 1rem 0;
    z-index:30;
}

footer .FooterWrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:80%;
    z-index:30;
}

footer .FooterWrap p{
    font-size:var(--font-md);
    font-weight:500;
    color:var(--black);
    width:fit-content;
    text-align:center;
    margin-bottom: 0;
}

@media screen and (min-width:1920px){
    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        padding: .75rem 0;
                    }
                }

                img{
                    &:last-child{
                        width:15.9%;
                    }
                }
            }
        }
    }

    /* 活動內容 */
    #CourseWrap2026{
        
        .title{

            h3{
                padding:.78rem 0;
            }   

            img{
                &:last-child{
                    width:15%;
                }
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }
        
    }    

    /* 活動時間 */
    #NoticeWrap2026{

        .note-title{
            h3{
                bottom:1.7rem;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 20% 6%;
            }
        }
       
    }
}

@media screen and (min-width:1800px) and (max-width:1919px){
    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        padding: .6rem 0;
                    }
                }

                img{
                    &:last-child{
                        width:15.9%;
                    }
                }
            }
        }
    }

    /* 活動內容 */
    #CourseWrap2026{
        
        .title{

            h3{
                padding:.7rem 0;
            }   

            img{
                &:last-child{
                    width:15%;
                }
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }
        
    }    

    /* 活動時間 */
    #NoticeWrap2026{

        .note-title{
            h3{
                bottom:1.7rem;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 20% 6%;
            }
        }
       
    }
}

@media screen and (min-width:1600px) and (max-width:1799px){
    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        padding: .6rem 0;
                    }
                }

                img{
                    &:last-child{
                        width:15.9%;
                    }
                }
            }
        }
    }

    /* 活動內容 */
    #CourseWrap2026{        
        .title{

            h3{
                padding:.7rem 0;
            }   

            img{
                &:last-child{
                    width:15%;
                }
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }
        
    }    

    /* 活動時間 */
    #NoticeWrap2026{

        .note-title{
            h3{
                bottom:1.7rem;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 20% 6%;
            }
        }
       
    }
}

@media screen and (min-width:1400px) and (max-width:1599px){
    /* Navbar2026 */
    #navbar2026 ul{
        width:70%;
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        padding: .5rem 0;
                    }

                    img{
                        &:first-child{
                            width:17%;
                        }

                        &:last-child{
                            width:17.8%;
                        }
                    }
                }
            }

            .action-group{
                width:75%;
            }
        }
    }

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:70%;
            }
        } 

        .bg{
            img{
                &:last-child{
                    width:10%;
                    top:.3rem;
                    right:29%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{        
        .title{

            h3{
                padding:.7rem 0;
            }   

            img{
                &:first-child{
                    width:19%;
                }

                &:last-child{
                    width:19.5%;
                }
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }
        
    }    

    /* 活動時間 */
    #NoticeWrap2026{

        .note-title{
            h3{
                bottom:1.2rem;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }
}

@media screen and (min-width:1200px) and (max-width:1399px){
    /* Navbar2026 */
    #navbar2026 ul{
        width:70%;
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        font-size:var(--font-3xl);
                        padding: .5rem 0;
                    }

                    img{
                        &:first-child{
                            width:17%;
                        }

                        &:last-child{
                            width:17.8%;
                        }
                    }
                }
            }

            .action-group{
                width:90%;
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    } 

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{

            .con{
                .title{
                    h3{
                        font-size:var(--font-3xl);
                    }

                    img{
                        &:first-child{
                            width:10.8%;
                        }

                        &:last-child{
                            width:11%;
                        }
                    }
                }
            }


            .ReservationWrap-group{
                width:80%;
            }
        } 

        .bg{
            img{
                &:last-child{
                    width:10%;
                    top:.3rem;
                    right:29%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{        
        .title{

            h3{
                font-size:var(--font-3xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:18.3%;
                }

                &:last-child{
                    width:18.8%;
                }
            }
        }

        .con-img{
            .img-group{
                .title{
                    h3{
                        font-size:var(--font-2xl);
                    }

                    img{
                        &:first-child{
                            width:15.5%;
                        }

                        &:last-child{
                            width:15.2%;
                        }
                    }
                }
                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }
        
    }    

    /* 活動時間 */
    #NoticeWrap2026{

        .note-title{
            h3{
                bottom:.8rem;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }
}

@media screen and (min-width:1024px) and (max-width:1199px){
    /* navbar */
    #navbar2026 ul{
        width:85%;
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        font-size:var(--font-3xl);
                        padding: .5rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.8%;
                        }

                        &:last-child{
                            width:20.7%;
                        }
                    }
                }
            }

            .action-group{
                width:90%;
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    }

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{

            .con{
                .title{
                    h3{
                        font-size:var(--font-3xl);
                    }

                    img{
                        &:first-child{
                            width:10.8%;
                        }

                        &:last-child{
                            width:11%;
                        }
                    }
                }
            }


            .ReservationWrap-group{
                width:90%;
            }
        } 

        .bg{
            img{
                &:last-child{
                    width:10%;
                    top:.3rem;
                    right:29%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{        
        .title{

            h3{
                font-size:var(--font-3xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:21%;
                }

                &:last-child{
                    width:21.8%;
                }
            }
        }

        .con-img{
            .img-group{
                .title{
                    h3{
                        font-size:var(--font-2xl);
                    }

                    img{
                        &:first-child{
                            width:16.2%;
                        }

                        &:last-child{
                            width:16.8%;
                        }
                    }
                }
                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:85%;
        }

        .note-title{
            h3{
                font-size:var(--font-3xl);
                bottom:.8rem;
            }

            img{
                width:65%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:55%;
                }

                &:after{
                    left:54.5%;
                }
            }
        }
    }

    footer{
        .FooterWrap{
            .bg img{

                &:first-child{
                    top:-5.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀按鈕 */
    .iconReserve2025{
        .icon-wrap{
            a{
                img{
                    width:13vw;
                }
            }
        }
    }
}

@media screen and (min-width:992px) and (max-width:1023px){
    /* navbar */
    #navbar2026 ul{
        width:90%;
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    h3{
                        font-size:var(--font-3xl);
                        padding: .5rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.8%;
                        }

                        &:last-child{
                            width:20.7%;
                        }
                    }
                }
            }

            .action-group{
                width:90%;
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    }

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{

            .con{
                width:100%;
                padding:0 3rem;

                .title{
                    width: 70%;

                    h3{
                        font-size:var(--font-3xl);
                        padding:.45rem 0;
                    }

                    img{
                        &:first-child{
                            width:10.8%;
                        }

                        &:last-child{
                            width:11%;
                        }
                    }
                }
            }


            .ReservationWrap-group{
                width:90%;
            }
        } 

        .bg{
            img{
                &:last-child{
                    width:10%;
                    top:.3rem;
                    right:29%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{        
        .title{

            h3{
                font-size:var(--font-3xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:21.2%;
                }

                &:last-child{
                    width:22.5%;
                }
            }
        }

        .con-img{
            .img-group{
                .title{
                    h3{
                        font-size:var(--font-2xl);
                    }

                    img{
                        &:first-child{
                            width:17.2%;
                        }

                        &:last-child{
                            width:16.8%;
                        }
                    }
                }
                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:85%;
        }

        .note-title{
            h3{
                font-size:var(--font-3xl);
                bottom:.8rem;
            }

            img{
                width:65%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:55%;
                }

                &:after{
                    left:54.5%;
                }
            }
        }
    }

    footer{
        .FooterWrap{
            .bg img{

                &:first-child{
                    top:-5.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀按鈕 */
    .iconReserve2025{
        .icon-wrap{
            a{
                img{
                    width:13vw;
                }
            }
        }
    }
}

@media screen and (min-width:768px) and (max-width:991px){
    /* navbar */
    #navbar2026 ul{
        width:90%;

        li{
            width:30%;

            a{
                line-height:2.8rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 35%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .5rem 0;
                    }

                    img{
                        &:first-child{
                            width:17.8%;
                        }

                        &:last-child{
                            width:18.2%;
                        }
                    }
                }
            }

            .con{
                width: 80%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    }

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:85%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0 2rem 0 2rem;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-2xl);
                        }

                        img{
                            &:first-child{
                                width:9%;
                            }

                            &:last-child{
                                width:9.3%;
                            }
                        }
                    }
                }
            }
        }

        .bg{
            img{
                &:nth-child(2){
                    width:16%;
                    top:1rem;
                    left:18%;
                }

                &:last-child{
                    width:14%;
                    top:2.5rem;
                    right:22%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 6rem 10rem;

        .title{
            width:50%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:21.5%;
                }

                &:last-child{
                    width:23%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{
                    width:65%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:15.2%;
                        }

                        &:last-child{
                            width:15%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:85%;
        }

        .note-title{
            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:70%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:55%;
                }

                &:after{
                    left:54.5%;
                }
            }
        }
    }

    footer{
        .FooterWrap{
            .bg img{

                &:first-child{
                    top:-5.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀按鈕 */
    .iconReserve2025{
        .icon-wrap{
            a{
                img{
                    width:13vw;
                }
            }
        }
    }
}

@media screen and (min-width:648px) and (max-width:767px){   
    /* navbar */
    #navbar2026 ul{
        width:90%;

        li{
            width:30%;

            a{
                font-size:var(--font-base);
                line-height:2.6rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 35%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .45rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.2%;
                        }

                        &:last-child{
                            width:20.7%;
                        }
                    }
                }
            }

            .con{
                width: 90%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    }

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:90%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0 2rem 0 2rem;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-2xl);
                        }

                        img{
                            &:first-child{
                                width:11%;
                            }

                            &:last-child{
                                width:11%;
                            }
                        }
                    }
                }
            }
        }

        .bg{
            img{
                &:nth-child(2){
                    width:18%;
                    top:2rem;
                    left:14%;
                }

                &:last-child{
                    width:17%;
                    top:3.5rem;
                    right:16%;
                }
            }
            
        }
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 6rem 5rem;

        .title{
            width:55%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:18.5%;
                }

                &:last-child{
                    width:19.2%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{
                    width:60%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:15%;
                        }

                        &:last-child{
                            width:15%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:85%;
        }

        .note-title{
            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:80%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }

    /* footer */
    footer{
        .FooterWrap{
            p{
                font-size:var(--font-base);
            }

           .bg img{

                &:first-child{
                    top:-4.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀 */
    .iconReserve2025 .icon-wrap{
        right:1rem;
    }

    .iconReserve2025 .icon-wrap a img{
        width:16vw;
    }

    /* 中獎名單 */
     #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:58.2%;
                }

                &:after{
                    left:57.5%;
                }
            }
        }
    }
}

@media screen and (min-width:576px) and (max-width:647px){
    /* navbar */
    #navbar2026 ul{
        width:90%;

        li{
            width:30%;

            a{
                font-size:var(--font-base);
                line-height:2.6rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 40%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .45rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.5%;
                        }

                        &:last-child{
                            width:20%;
                        }
                    }
                }
            }

            .con{
                width: 90%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-3xl);
            }
        }
    }  

    /* 預約試讀填寫 */
    #Reservation2026{
        padding:5rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:90%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0 2rem 0 2rem;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-2xl);
                        }

                        img{
                            &:first-child{
                                width:12.5%;
                            }

                            &:last-child{
                                width:12.7%;
                            }
                        }
                    }
                }
            }
        }

        .bg{
            img{
                &:nth-child(2){
                    width:18%;
                    top:2rem;
                    left:14%;
                }

                &:last-child{
                    width:17%;
                    top:3.5rem;
                    right:16%;
                }
            }
            
        }
    }

    .button-group .btn{
        font-size:var(--font-base);
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 5rem 3rem;

        .title{
            width:55%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:19%;
                }

                &:last-child{
                    width:19.5%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{
                    width:60%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:15%;
                        }

                        &:last-child{
                            width:15%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:90%;
        }

        .note-title{
            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:90%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:9% 7% 18% 6%;
            }
        }
       
    }
    
    /* footer */
    footer{
        .FooterWrap{
            p{
                font-size:var(--font-sm);
            }

            .bg img{

                &:first-child{ 
                    width:24%;
                    top:-4.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀 */
    .iconReserve2025 .icon-wrap{
        right:1rem;
    }

    .iconReserve2025 .icon-wrap a img{
        width:18vw;
    }
    
    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:58.2%;
                }

                &:after{
                    left:57.5%;
                }
            }
        }
    }
}

@media screen and (min-width:425px) and (max-width:575px){
    /* navbar */
    #navbar2026 ul{
        width:100%;

        li{
            width:32%;

            a{
                font-size:var(--font-base);
                line-height:2.3rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 55%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .45rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.5%;
                        }

                        &:last-child{
                            width:20%;
                        }
                    }
                }
            }

            .con{
                width: 90%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-2xl);
            }
        }
    }   

    /* 預約試讀填寫 */
    #Reservation2026{
        margin-top:-.5rem;
        padding:4rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:90%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-2xl);
                        }

                        img{
                            &:first-child{
                                width:15.5%;
                            }

                            &:last-child{
                                width:15.7%;
                            }
                        }
                    }
                }
            }
        }

        .bg{
            img{
                &:nth-child(2){
                    width:21%;
                    top:2rem;
                    left:14%;
                }

                &:last-child{
                    width:20%;
                    top:.5rem;
                    right:16%;
                }
            }
            
        }
    }
    
    #Reservation2026 .ReservationWrap .form-control, #Reservation2026 .ReservationWrap .form-group, #Reservation2026 .ReservationWrap .form-group button{
        font-size:var(--font-base);
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 5rem 2rem;

        .title{
            width:75%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:19%;
                }

                &:last-child{
                    width:18.6%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{
                    width:85%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:14%;
                        }

                        &:last-child{
                            width:14%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:90%;
        }

        .note-title{
            width:50%;
            transform: translateY(-65%);

            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:90%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:12% 7% 16% 6%;
            }
        }

        .con-table{
            tr{
                td{
                    &:first-child{
                        width:15%;
                    }

                    &:last-child{
                        width:25%;
                    }
                }
            }
        }
       
    }

    /* footer */
    footer{
        .FooterWrap{
            p{
                font-size:var(--font-xs);
            }

            .bg img{

                &:first-child{ 
                    width:24%;
                    top:-3.3rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀 */
    .iconReserve2025 .icon-wrap{
        right:.5rem;
    }

    .iconReserve2025 .icon-wrap a img{
        width:20vw;
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:61.5%;
                }

                &:after{
                    left:60.5%;
                }
            }
        }
    }
}

@media screen and (min-width:375px) and (max-width:424px){
    /* navbar */
    #navbar2026 ul{
        width:100%;

        li{
            width:45%;

            a{
                font-size:var(--font-base);
                line-height:2.3rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 55%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .45rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.5%;
                        }

                        &:last-child{
                            width:20%;
                        }
                    }
                }
            }

            .con{
                width: 90%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-2xl);
            }
        }
    } 

    /* 預約試讀填寫 */
    #Reservation2026{
        margin-top:-.5rem;
        padding:4rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:90%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-xl);
                        }

                        img{
                            &:first-child{
                                width:16.5%;
                            }

                            &:last-child{
                                width:17%;
                            }
                        }
                    }
                }
            }
        }
    }

    #Reservation2026 .ReservationWrap .form-control, #Reservation2026 .ReservationWrap .form-group, #Reservation2026 .ReservationWrap .form-group button{
        font-size:var(--font-base);
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 5rem 2rem;

        .title{
            width:83%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:19%;
                }

                &:last-child{
                    width:19.5%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{

                    width:90%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:15.5%;
                        }

                        &:last-child{
                            width:15.5%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:100%;
        }

        .note-title{
            width:50%;
            transform: translateY(-65%);

            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:90%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:12% 7% 16% 6%;
            }
        }

        .con-table{
            tr{
                td{
                    &:first-child{
                        width:15%;
                    }

                    &:last-child{
                        width:25%;
                    }
                }
            }
        }
       
    }

    /* footer */
    footer{
        .FooterWrap{
            p{
                font-size:var(--font-xs);
            }

            .bg img{

                &:first-child{ 
                    width:24%;
                    top:-3rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀 */
    .iconReserve2025 .icon-wrap{
        right:.5rem;
    }

    .iconReserve2025 .icon-wrap a img{
        width:20vw;
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:62.5%;
                }

                &:after{
                    left:61.5%;
                }
            }
        }
    }
}

@media screen and (min-width:200px) and (max-width:374px){
    /* navbar */
    #navbar2026 ul{
        width:100%;

        li{
            width:45%;

            a{
                font-size:var(--font-base);
                line-height:2.3rem;
            }
        }
    }

    /* 活動辦法 */
    #ActionWrap2026{
        .title-wrap{
            .titleAction{
                .title{
                    width: 74%;

                    h3{
                        font-size:var(--font-2xl);
                        padding: .45rem 0;
                    }

                    img{
                        &:first-child{
                            width:19.5%;
                        }

                        &:last-child{
                            width:20%;
                        }
                    }
                }
            }

            .con{
                width: 90%;

                .con-wrap{
                    .txt-con{
                        ul{
                            grid-template-columns: 1fr;

                            li{

                            }
                        }
                    }
                }
            }

            .action-group{
                width:90%;
                justify-content:center;
                align-items:center;
                margin-top:3rem;

                .photo{
                    width:70%;
                    margin-left:2.5rem;
                }
            }
        }
    }

    /* 活動時間 */
    #ActionWrap2026{
        .action-time{
            h3{
                font-size:var(--font-2xl);
            }
        }
    } 

    /* 預約試讀填寫 */
    #Reservation2026{
        margin-top:-.5rem;
        padding:4rem 0 0 0;

        .ReservationWrap{
            .ReservationWrap-group{
                width:90%;

                .title{
                    h2{
                        font-size:var(--font-xl);
                    }
                }
                
                .con{
                    width:100%;
                    padding:0;

                    .title{
                        width:100%;

                        h3{
                            width:100%;
                            font-size:var(--font-lg);
                        }

                        img{
                            &:first-child{
                                width:16.5%;
                            }

                            &:last-child{
                                width:17%;
                            }
                        }
                    }
                }
            }
        }
    }


    #Reservation2026 .ReservationWrap .form-control, #Reservation2026 .ReservationWrap .form-group, #Reservation2026 .ReservationWrap .form-group button{
        font-size:var(--font-base);
    }

    /* 活動內容 */
    #CourseWrap2026{       
        padding: 5rem 1rem;

        .title{
            width:94.2%;

            h3{
                font-size:var(--font-2xl);
                padding:.6rem 0;
            }   

            img{
                &:first-child{
                    width:19%;
                }

                &:last-child{
                    width:19.5%;
                }
            }
        }

        .con-img{
            width:100%;

            .img-group{
                .title{

                    width:90%;

                    h3{
                        font-size:var(--font-xl);
                    }

                    img{
                        &:first-child{
                            width:15.5%;
                        }

                        &:last-child{
                            width:15.5%;
                        }
                    }      
                }    

                
            }
        }

        .bg-course{
            img{
                &:nth-child(3){
                    left:43rem;
                }
            }
        }        
    } 

    /* 活動時間 */
    #NoticeWrap2026{

        .con{
            width:100%;
        }

        .note-title{
            width:50%;
            transform: translateY(-65%);

            h3{
                font-size:var(--font-2xl);
                bottom:.6rem;
            }

            img{
                width:90%;
            }
        }

        .con-group{

            .con-list{
                margin-bottom:2rem;
                padding:12% 7% 16% 6%;
            }
        }

        .con-table{
            tr{
                td{
                    &:first-child{
                        width:15%;
                    }

                    &:last-child{
                        width:25%;
                    }
                }
            }
        }
       
    }

    /* footer */
    footer{

        .FooterWrap{
            padding:0 1rem;

            p{
                font-size:var(--font-xs);
            }

            .bg img{

                &:first-child{ 
                    width:24%;
                    top:-2.5rem;
                    left:2rem;
                    z-index:1;
                }

                &:last-child(){
                    width:18%;
                    bottom:0;
                    right:0;
                    z-index:5;
                }
            }
        }
    }

    /* 預約試讀 */
    .iconReserve2025 .icon-wrap{
        right:.3rem;
    }

    .iconReserve2025 .icon-wrap a img{
        width:20vw;
    }

    /* 中獎名單 */
    #WinnerWrap2026{
        .show-more-row{
            button{
                &:before{
                    left:64.5%;
                }

                &:after{
                    left:63.5%;
                }
            }
        }
    }

}

/* 活動辦法條列：窄螢幕改為單欄 */
@media screen and (max-width:767px){
    #ActionWrap2026 .con .con-wrap .txt-con ul{
        width:100%;
        grid-template-columns:1fr;
    }
}