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;}
a:hover{filter: brightness(1.1);}

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

/*.btn_sign{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.btn_sign a{
    background: url(../images/btn_sign.png)no-repeat;
    background-size: 100%;
    width: 20%;
    height: 7vw;
    margin: 0.7vw auto 0;
    display: block;
    overflow: hidden;
}

@keyframes sig{
    0%{filter: brightness(1);}
    50%{filter: brightness(1.1);}
    100%{filter: brightness(1);}
}
*/
.header{
    background: url(../images/header.png)top center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 42vw;
    overflow: hidden;
    position: relative;
}

.header span:nth-child(1){
    background: url(../images/header_d1.png)no-repeat;
    background-size: 100%;
    width: 16.7%;
    height: 16.7vw;
    position: absolute;
    top: 35.7%;
    right: 12.2%;
    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: 3.4%;
    height: 4.5vw;
    position: absolute;
    top: 11.2%;
    right: 48.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: 2.2%;
    height: 3vw;
    position: absolute;
    top: 17.2%;
    right: 45.7%;
    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: 2.9%;
    height: 3.6vw;
    position: absolute;
    top: 61.2%;
    right: 17.5%;
    display: block;
    animation: 1.2s d2 infinite ease;
}

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

.title_h{
    background: url(../images/title.png)no-repeat;
    background-size: 100%;
    width: 35%;
    height: 14vw;
    margin: 4.3vw auto 0 19.8vw;
    animation: .8s title ;
}

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

.btn_sign{
    background: url(../images/btn_sign2.png)no-repeat;
    background-size: 100%;
    width: 18.1%;
    height: 5vw;
    margin: 1vw auto 0 28vw;
    display: block;
    animation: 1.5s sig infinite ease;
}

.btn_sign::before{
    content: '';
    background: url(../images/point.png)no-repeat;
    background-size: 100%;
    position: absolute;
    right: -7%;
    bottom: -21%;
    width: 24%;
    height: 4.5vw;
    transform-origin: bottom right;
    animation: 1.5s btnc infinite;
}

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

.content{
    background: url(../images/content0.png)no-repeat;
    background-size: 100%;
    width: 48.8%;
    height: 12.5vw;
    margin: -9vw auto 0;
    overflow: hidden;
}

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


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

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

.main{
    background: url(../images/box_mid.png);
    background-size: 100%;
    width: 65.8%;
    position: relative;
    margin: 5vw auto 7vw;
    padding: 3.5vw 0 3.5vw 0 ;
}

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

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


.title{
    width: 23.6%;
    height: 5vw;
    margin: 0 auto 2%;
}

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

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

.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: 35.5%;
}

.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: 35.5%;
}

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

.pic_lv{
    background: url(../images/lv_pic.png)no-repeat;
    background-size: 100%;
    width: 89%;
    height: 24vw;
    margin: 0 auto 8%;
}


.feature{
    width: 92%;
    height: auto;
    margin: 2% 3.5% 8%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.feature li{
    background: #e3f3f8;
    width: 49%;
    height: 11vw;
    margin: 0 0.5% 1%;
    display: inline-flex;
    align-items: center;
    border-radius: 1vw;
}

.feature li p{
    width: 63%;
    font-size: 1.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #15558b;
}

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

.feature_sbt{
    width: fit-content;
    color: #fff !important;
    background: #15558b;
    border-radius: 100em;
    padding: 0.1vw 1vw;
    display: block;
    margin-bottom: 0.3vw;
}

.feature li>span{
    width: 27%;
    height: 9vw;
    display: block;
    margin: 0 4% 0 4%;
}

.feature li:nth-child(1) > span{
    background: url(../images/f_01.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(2) > span{
    background: url(../images/f_02.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(3) > span{
    background: url(../images/f_03.png)no-repeat;
    background-size: 100%;
}
.feature li:nth-child(4) > span{
    background: url(../images/f_04.png)no-repeat;
    background-size: 100%;
}

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


.member p:nth-child(1){
    font-size: 1.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #185285;
    line-height: 10.5vw;
    margin: 0% auto -5%;
}

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

.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: 38.1%;
    height: 2.5vw;
    margin: 0 auto 2%; 
}

.btn_class{
    background: url(../images/btn_class.png)no-repeat;
    background-size: 100%;
    width: 30.5%;
    height: 9vw;
    display: block;
    margin: 0 auto 8%;
    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: 5vw;
    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_top.png)no-repeat;
    background-size: 100%;
    width: 85.6%;
    height: 32vw;
    margin: 0 auto 8%;
    position: relative;
}

.teacher p{
    width: 49%;
    font-size: 1.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #15558b;
    position: absolute;
    top: 41%;
    left: 45%;
    line-height: 3vw;
}

.teacher p span{color: #09bac7}

.detail{
    width: 60%;
    height: auto;
    margin: 0 auto 8%;
}

.detail li{
    width: 100%;
    height: auto;
    margin: 0 auto 6%;
    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: 18.6%;
    height: 7.5vw;
    display: block;
}

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

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

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

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

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

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

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


.signup , .signup2 {
    width: 66.5%;
    height: auto;
    margin: 3% auto 8% 19%;
}

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

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

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

.signup li>p>span{
    font-size: 0.9vw;
}
.signup li:last-child{background: unset;}
.signup li:last-child > p{margin-bottom: 0;}

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

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

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

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




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

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

.fee_bar{
    width: 44.7%;
    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: 9%;
}

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

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

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

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


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

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

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

.tips{
    font-size: 1vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    text-align: center;
    color: #7aa2c6;
    margin-bottom: 2%;
}

.faq{
    width: 61.2%;
    height: auto;
    margin: 0 auto 8%;
}

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

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

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

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

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

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

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

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


.answer span{
    background: url(../images/icon_a.png)no-repeat;
    background-size: 100%;
    width: 5.4%;
    height: 2vw;
    display: block;
    margin-left: 1vw;
    margin-right: 0.5vw;
}

.answer p{
    font-size: 1.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #52b3b9;
    width: 89%;
}



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

.btn_sign2{
    background: url(../images/btn_sign2.png)no-repeat;
    background-size: 100%;
    width: 35.1%;
    height: 5vw;
    margin: 30% auto 0;
    display: block;
    animation: 1.5s sig infinite ease;   
}

.btn_sign2::before{
    content: '';
    background: url(../images/point.png)no-repeat;
    background-size: 100%;
    position: absolute;
    right: -7%;
    bottom: -21%;
    width: 24%;
    height: 4.5vw;
    transform-origin: bottom right;
    animation: 1.5s btnc infinite;
}


.deco01{
    background: url(../images/deco_01.png)no-repeat;
    background-size: 100%;
    width: 17.7%;
    height: 27vw;
    position: absolute;
    top: 47%;
    left: 0%;
    z-index: 1;
}

.deco02{
    background: url(../images/deco_02.png)no-repeat;
    background-size: 100%;
    width: 17.8%;
    height: 23vw;
    position: absolute;
    top: 56.4%;
    right: 1.3%;
    z-index: 1;
}

.deco03{
    background: url(../images/deco_03.png)no-repeat;
    background-size: 100%;
    width: 28.2%;
    height: 24vw;
    position: absolute;
    top: 67.8%;
    left: 0;
    z-index: 1;
}

.deco04{
    background: url(../images/deco_04.png)no-repeat;
    background-size: 100%;
    width: 26.6%;
    height: 23vw;
    position: absolute;
    top: 30%;
    right: 0;
    z-index: 1;
}

.deco05{
    background: url(../images/deco_05.png)no-repeat;
    background-size: 100%;
    width: 17.3%;
    height: 21vw;
    position: absolute;
    top: 19.5%;
    left: 0%;
    z-index: 1;
}

.pop{
    width: 62.5% !important;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    max-width: unset !important;
}

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

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

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

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



/* 基礎表格樣式設定 */
.schedule-table {
    width: 92%;
    margin: 0 3.5% 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: 0.4vw;
    font-size: 1vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #6394bd; 
}

/* 表頭樣式 (第一天 星期六) */
.schedule-table thead .main-title {
    background-color: #3B6B9D;
    color: white;
    font-size: 1.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: 1.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: 1vw;
    list-style-type: decimal;
}

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

.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: 4%;
    height: 4.5vw;
    display: block;
    z-index: 99;
    bottom: 4%;
    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: 0.9vw;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    padding: 2vw 0 2vw;
}