select::-ms-expand { display: none;
}
select:focus::-ms-value {
    background: rgba(0, 0, 0, 0);
}
input,
textarea,
select,
form {
    outline: none;
}

div,p,span,ul,table {position: relative;z-index: 2;}

a{transition: .2s;}


.wrapper{
    width: 100%;
    background: url(../images/bg.jpg);
    background-size: 16.6%;
    position: relative;
    overflow: hidden;    
}

.btn_sign_m{
    background: url(../images/btn_sign_m.png)no-repeat;
    background-size: 100%;
    width: 64.6%;
    height: 24vw;
    display: block;
    position: fixed;
    bottom: 0;
    left: 17.7%;
    z-index: 999;
    animation: 1.5s sig infinite ease;
}

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

.btn_sign_m::before {
    content: '';
    background: url(../images/point.png)no-repeat;
    background-size: 100%;
    position: absolute;
    right: -8%;
    bottom: 4%;
    width: 22%;
    height: 15vw;
    transform-origin: bottom right;
    animation: 1.5s btnc infinite;
}


.header{
    background: url(../images/header_m.png)top center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 124vw;
    overflow: hidden;
}


.header span:nth-child(1){
    background: url(../images/header_d1.png)no-repeat;
    background-size: 100%;
    width: 39.1%;
    height: 39.7vw;
    position: absolute;
    top: 67%;
    right: 3.1%;
    display: block;
    animation: 1.2s d1 infinite ease;
    transform-origin: left bottom
}

@keyframes d1{
    0%{transform: rotate(0);}
    50%{transform: rotate(-2deg);}
    100%{transform: rotate(0);}
}

.header span:nth-child(2){
    background: url(../images/header_d2.png)no-repeat;
    background-size: 100%;
    width: 8.1%;
    height: 10.5vw;
    position: absolute;
    top: 47.2%;
    left: 4.3%;
    display: block;
    animation: 1s d2 infinite ease;
}

@keyframes d2{
    0%{transform: scale(1);}
    50%{transform: scale(0.7);}
    100%{transform: scale(1);}
}

.header span:nth-child(3){
    background: url(../images/header_d3.png)no-repeat;
    background-size: 100%;
    width: 5.3%;
    height: 7vw;
    position: absolute;
    top: 52.1%;
    left: 13.2%;
    display: block;
    animation: 1.2s d2 infinite ease;
}


.header span:nth-child(4){
    background: url(../images/header_d4.png)no-repeat;
    background-size: 100%;
    width: 6.7%;
    height: 9.6vw;
    position: absolute;
    top: 87.6%;
    right: 15.8%;
    display: block;
    animation: 1.2s d2 infinite ease;
}


.logo{
    background: url(../images/logo.png)no-repeat;
    background-size: 100%;
    width: 58.9%;
    height: 7vw;
    margin: 5% auto 0;
    display: block;
}

.title_h{
    background: url(../images/title_m.png)no-repeat;
    background-size: 100%;
    width: 92.1%;
    height: 40vw;
    margin: 4vw auto 0;
    animation: .8s title;
}

@keyframes title{
    0%{transform: translateY(5%);opacity: 0;}
    100%{transform:  translateY(0%);opacity: 1;}
}

.content{
    background: url(../images/content_m.png)no-repeat;
    background-size: 100%;
    width: 93.5%;
    height: 51vw;
    margin: 7vw auto;
    overflow: hidden;
}

.content p{
    width: 85%;
    text-align: center;
    font-size: 5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #15558b;
    margin: 7% auto;
    line-height: 9vw;
}

.content p span{
    color: #15558b;
    display: inline-flex;
}

.content p span::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 1vw;
    width: 100%;
    height: 2.5vw;
    background-color: #fff157; /* 螢光筆顏色 */
    z-index: -1;
}

.content p:nth-child(1){display: none;}

.conten_txt{
    background: url(../images/content_m_txt.png)no-repeat;
    background-size: 100%;
    width: 74.6%;
    height: 9.5vw;
    margin: 8% auto 3%;
}


.main{
    background: url(../images/box_mid_m.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 10vw auto 18vw;
    padding: 8vw 0 4vw;
}

.main::before{
    background: url(../images/box_top_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 10vw;
    content: " ";
    display: block;
    position: absolute;
    top: -9vw;
}

.main::after{
    background: url(../images/box_bot_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 9vw;
    content: " ";
    display: block;
    position: absolute;
    bottom: -8vw;
}

.main_box{
    width: 95%;
    margin: 0 auto 0 1.7%;
    height: auto;
}


.title{
    width: 49.1%;
    height: 14vw;
    margin: 0 auto 7%;
}


.f1{
    background: url(../images/sub_title01.png)no-repeat;
    background-size: 100%;
    width: 87.8%;
}

.f2{
    background: url(../images/sub_title02.png)no-repeat;
    background-size: 100%;
    width: 68.4%;
}

.f3{
    background: url(../images/sub_title03.png)no-repeat;
    background-size: 100%;
    margin-bottom: 1%;
}

.f4{
    background: url(../images/sub_title04.png)no-repeat;
    background-size: 100%;
}

.f5{
    background: url(../images/sub_title05.png)no-repeat;
    background-size: 100%;
    margin-bottom: 0;
}

.f6{
    background: url(../images/sub_title06.png)no-repeat;
    background-size: 100%;
    width: 74%;
}

.f7{
    background: url(../images/sub_title07.png)no-repeat;
    background-size: 100%;
}

.f8{
    background: url(../images/sub_title08.png)no-repeat;
    background-size: 100%;
    width: 74%;
}

.f9{
    background: url(../images/sub_title09.png)no-repeat;
    background-size: 100%;
}

.pic_lv{
    background: url(../images/lv_pic_m.png)no-repeat;
    background-size: 100%;
    width: 85.1%;
    height: 167vw;
    margin: 0 auto 15%;
}

.feature{
    width: 98%;
    height: auto;
    margin: 0% 1% 10%;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.feature li{
    background: #e3f3f8;
    width: 47%;
    height: auto;
    margin: 0 1% 3% 1%;
    display: inline-flex;
    border-radius: 4vw;
    flex-wrap: wrap;
}

.feature li p{
    width: 86%;
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #15558b;
    margin: 0 auto 10%;
}

.feature li p span , 
.signup2 li p:nth-child(2) span {color: #09bac7;}

.feature_sbt{
    width: 100%;
    color: #fff !important;
    background: #15558b;
    border-radius: 100em;
    display: block;
    margin: 0 auto 2vw;
    text-align: center;
    line-height: 8vw;
    font-size: 5vw;
}

.feature li>span{
    width: 84%;
    height: 28vw;
    display: block;
    margin: 7% auto 5%;
}



.feature li:nth-child(1) > span{
    background: url(../images/f_01_m.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(2) > span{
    background: url(../images/f_02_m.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(3) > span{
    background: url(../images/f_03_m.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(4) > span{
    background: url(../images/f_04_m.png)no-repeat;
    background-size: 100%;
}

.member{
    background: url(../images/member.png)no-repeat;
    background-size: 100%;
    width: 81.5%;
    height: auto;
    margin: 0 auto 15%;
    overflow: hidden;
}


.member p:nth-child(1){
    font-size: 6vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #15558b;
    line-height: 20vw;
    margin: 8% auto 3%;
}

.member p:nth-child(2){
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #15558b;
}

.member p a , .de_box p a , .lice p a{
    color: #ff8421;
    text-decoration-line: underline;
}


.class_txt{
    background: url(../images/class_txt.png)no-repeat;
    background-size: 100%;
    width: 79.2%;
    height: 6.5vw;
    margin: 0 auto 4%; 
}

.btn_class{
    background: url(../images/btn_class.png)no-repeat;
    background-size: 100%;
    width: 70%;
    height: 28vw;
    display: block;
    margin: 0 auto 15%;
    position: relative;
}

.btn_class::before {
    content: '';
    background: url(../images/point.png)no-repeat;
    background-size: 100%;
    position: absolute;
    right: -10%;
    bottom: 4%;
    width: 26%;
    height: 17vw;
    transform-origin: bottom right;
    animation: 1.2s btnc infinite;
}

@keyframes btnc{
    0%{transform: rotate(0);}
    50%{transform: rotate(-5deg);}
    100%{transform: rotate(0);}
}


.teacher{
    background: url(../images/teacher_m.png)no-repeat;
    background-size: 100%;
    width: 94%;
    height: 137vw;
    margin: 2% auto 10% 4%;
}

.teacher p{
    width: 76%;
    font-size: 4.6vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #15558b;
    position: absolute;
    top: 52.2%;
    left: 11.5%;
    line-height: 7.9vw;
}

.teacher p span{color: #09bac7}


.detail{
    width: 83.4%;
    height: auto;
    margin: 6% auto 15%;
}

.detail li{
    width: 100%;
    height: auto;
    margin: 0 auto 10%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

.detail li:last-child{
    margin-bottom: 0;
}

.time{
    background: url(../images/icon_time.png)no-repeat;
    background-size: 100%;
    width: 30%;
    height: 25vw;
    display: block;
}

.location{
    background: url(../images/icon_location.png)no-repeat;
    background-size: 100%;
    width: 30%;
    height: 25vw;
    display: block;
}

.de_box{
    width: 65%;
    height: auto;
}

.de_box p:nth-child(1){
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    background: #15558b;
    color: #fff;
    border-radius: 100em;
    width: fit-content;
    padding: 0 3vw;
    margin-bottom: 2%;
}

.de_box p:nth-child(2){
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #15558b;
}

.de_box p:nth-child(2) span{
    font-size: 3.5vw;
    display: block;
}

.txt_f6{
    font-size: 3.8vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #bbb19c;
    text-align: center;
    margin-top: -2%;
}

.subt{
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    background: #15558b;
    color: #fff;
    border-radius: 100em;
    width: fit-content;
    padding: 0 3vw 0.2vw;
    margin-bottom: 4%;
}

.signup, .signup2 {
    width: 90%;
    height: auto;
    margin: 6% auto 7%;
}

.signup2{margin: 0% auto 15%;}

.signup li{
    width: 100%;
    background: url(../images/line.png)repeat-y;
    background-size: 23%;
    height: auto;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}

.signup li>span , .money span{
    width: 6vw;
    height: 6vw;
    font-size: 4.5vw;
    font-weight: 500;
    color: #fff;
    background: #15558b;
    border-radius: 100em;
    line-height: 6vw;
    text-align: center;
    display: block;
}

.signup li>p{
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    width: 90%;
    color: #15558b;
    margin-bottom: 4%;
}

.signup li>p>span{
    font-size: 3.5vw;
}

.signup li:last-child{background: unset;}
.signup li:last-child > p{margin-bottom: 0;}

.signup2 li{
    width: 100%;
    height: auto;
    background: #e3f3f8;
    border-radius: 4vw;
    margin-bottom: 1vw;
    padding-bottom: 5%;
}
.money{
    font-size: 6vw;
    font-family: "Noto Sans TC", sans-serif;
    color: #15558b;
    font-weight: bold;
    margin-bottom: 4%;
    display: inline-flex;
    align-items: center;
    margin: 2vw 4vw;
}

.money span{margin-right: 0.5vw;}

.signup2 li>p:nth-child(2){
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #15558b;
    width: 90%;
    margin: 0 auto 4%;
}

.signup2 li>p:nth-child(3){
    font-size: 3.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #15558b;
    width: 90%;
    margin: 0 auto 0%;
}


.fee{
    width: 100%;
    height: auto;
    margin: 0 auto 5%;
}

.fee>p:nth-child(1){
    font-size: 5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #15558b;    /* line-height: 6.5vw; */
    margin: 0% auto 6%;
}

.fee_bar{
    width: 89.4%;
    height: auto;
    margin: 0 auto 0;  
}

.fee_bar li{
    background: url(../images/money.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 11%;
}

.fee_bar li:last-child{margin-bottom: 0;}

.off10{
    background: url(../images/price_02.png)no-repeat;
    background-size: 100%;
    width: 13.9%;
    height: 11.5vw;
    position: absolute;
    top: -7vw;
    left: -3vw;
}

.off20{
    background: url(../images/price_03.png)no-repeat;
    background-size: 100%;
    width: 13.9%;
    height: 11.5vw;
    position: absolute;
    top: -7vw;
    left: -3vw;
}

.fee_bar li > p:nth-child(2){
    font-size: 8vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: left;
    color: #fff;
    margin: 0% 6% 0 5%;
    line-height: 17vw;
    width: 32%;
    float: left;
}

.fee_bar li > p:nth-child(3){
    font-size: 8vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: left;
    color: #f7a500;
    margin: 0;
    line-height: 17vw;
}

.lice{
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.lice>p:nth-child(1){
    background: #7aa2c6;
    border-radius: 100em;
    width: fit-content;
    padding: 0vw 2vw 0.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 4vw;
    margin-right: 1vw;
}

.lice>p:nth-child(2){
    border-radius: 100em;
    width: 84%;
    padding: 1vw 0;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #7aa2c6;
    font-size: 4vw;
}

.tips{
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    text-align: left;
    color: #7aa2c6;
    width: 89%;
    margin: 6% auto 15%;
}

.faq{
    width: 91%;
    height: auto;
    margin: 0 auto 15% 4%;
}

.faq li{
    width: 100%;
    height: auto;
    border: 2px solid #15558b;
    margin-bottom: 2%;
}

.quest{
    width: 100%;
    background: #b0e0e3;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding: 2vw 0vw;
    cursor: pointer;
}

.quest>span:nth-child(1){
    background: url(../images/icon_q.png)no-repeat;
    background-size: 100%;
    width: 7.3%;
    height: 5.5vw;
    display: block;
    margin: 0 2vw 0 3vw;
}

.quest span:last-of-type{
    background: url(../images/arrow.png)no-repeat;
    background-size: 100%;
    width: 4.5%;
    height: 3vw;
    display: inline-block;
    position: absolute;
    right: 3vw;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.quest.active span:last-of-type {
    transform: rotate(0deg);
}

.quest p{
    font-size: 4.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #15558b;
    line-height: 5vw;
}

.answer-wrap {
    display: none; 
    overflow: hidden;
}

.answer{
    display: inline-flex;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding: 2vw 0vw;
}


.answer span{
    background: url(../images/icon_a.png)no-repeat;
    background-size: 100%;
    width: 7.3%;
    height: 5.5vw;
    display: block;
    margin: 0.5vw 2vw 0 3vw;
}

.answer p{
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #52b3b9;
    width: 86%;
    line-height: 7vw;
}

.slogan{
    background: url(../images/plan_m.png)no-repeat;
    background-size: 100%;
    width: 97%;
    height: 79vw;
    margin: 0 auto 0;
    overflow: hidden;
}



.pop{
    width: 100% !important;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

.pop_mid{
    background: url(../images/box_mid_m.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 5vw auto 13vw;
}

.pop_mid::before{
    background: url(../images/box_top_m2.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 7vw;
    content: " ";
    display: block;
    position: absolute;
    top: -4vw;
}

.pop_mid::after{
    background: url(../images/box_bot_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 7vw;
    content: " ";
    display: block;
    position: absolute;
    bottom: -6vw;
}

.btn_close{
    background: url(../images/btn_close.png)no-repeat;
    background-size: 100%;
    width: 10vw;
    height: 10vw;
    display: block;
    position: absolute;
    top: -8.5vw;
    right: -1.5vw;
}



/* 基礎表格樣式設定 */
.schedule-table {
    width: 88%;
    margin: 0 4.9% 0;
    border-collapse: collapse;
    border-spacing: 0px;
    font-family: "Noto Sans TC", sans-serif;
    text-align: center;
}

.schedule-table th, .schedule-table td {
    border: 2px solid #6394bd;
    padding: 1.5vw;
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #6394bd; 
}

/* 表頭樣式 (第一天 星期六) */
.schedule-table thead .main-title {
    background-color: #3B6B9D;
    color: white;
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    border-color: #3B6B9D;
}

/* 欄位標題樣式 (時間、課程題目...) */
.schedule-table thead .sub-title {
    background-color: #6394bd;
    color: white;
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: center;
}

/* 針對第三欄 (課程內容細項) 設定靠左對齊 */
.schedule-table tbody td:last-child {
    text-align: left;
    padding-left: 1vw;
}

/* 調整列表的間距，讓排版更貼近圖片 */
.schedule-table ol {
    margin: 0;
    padding-left: 6vw;
    list-style-type: decimal;
}

.schedule-table ol li {
    margin-bottom: 1vw;
}

.schedule-table ol li :last-child {margin-bottom: 0;}

.tb1{margin-bottom: 4%;}

/*.tt1{width: 20%;}*/
.tt2{width: 25%;}
/*.tt3{width: 55%;}*/

.btn_top{
    background: url(../images/btn_top.png)no-repeat;
    background-size: 100%;
    width: 15%;
    height: 17vw;
    display: block;
    z-index: 99;
    bottom: 24vw;
    right: 2%;
    position: fixed;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.btn_top.show {
    opacity: 1;
}

.copyright{
    width: 100%;
    height: auto;
    background: #a6dcea;
}

.copyright p{
    color: #15558b;
    font-size: 3.5vw;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    padding: 7vw 0;
}