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_m.jpg);
    background-size: 100%;
    position: relative;
    overflow: hidden;    
}

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

.btn_sign a{
    background: url(../images/btn_sign_m.png)no-repeat;
    background-size: 100%;
    width: 87.8%;
    height: 24vw;
    margin: 0vw auto 2vw;
    display: block;
    overflow: hidden;
    animation: .8s sig infinite;
}

@keyframes sig{
    0%{filter: brightness(1);}
    50%{filter: brightness(1.1);}
    100%{filter: brightness(1);}
}


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

.logo{
    background: url(../images/logo_m.png)no-repeat;
    background-size: 100%;
    width: 79.5%;
    height: 17vw;
    margin: 0 auto 0;
}

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

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

.title_h span{
    background: url(../images/title_deco_2.png)no-repeat;
    background-size: 100%;
    width: 20%;
    height: 24vw;
    position: absolute;
    bottom: 13%;
    right: 4%;
    display: block;
    animation: .8s th infinite;
}
/*
.title_h span{
    background: url(../images/title_deco_2.png)no-repeat;
    background-size: 100%;
    width: 27%;
    height: 21vw;
    position: absolute;
    bottom: 11%;
    right: 0%;
    display: block;
    animation: .8s th infinite;
}
*/

@keyframes th{
    0%{transform: scale(1);}
    50%{transform: scale(0.93);}
    100%{transform: scale(1);}
}

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

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

.content p span{
    color: #ee003e;
    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;
}


.main{
    background: #f5f3e6;
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 10vw auto 32vw;
    padding: 5vw 0;
}

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

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


.title{
    width: 70.3%;
    height: 23vw;
    margin: 0 auto 2%;
}

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

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

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

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

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

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

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


.feature{
    width: 82.3%;
    height: auto;
    margin: 4% 8.85% 10%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.feature li{
    background: url(../images/f_box.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 27vw;
    margin: 0 0 3% 0;
    display: inline-flex;
    align-items: center;
}

.feature li p{
    width: 41%;
    font-size: 4.2vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    color: #745a31;
}

.feature li p span{color: #de970e;}

.feature li>span{
    width: 32.6%;
    height: 21vw;
    display: block;
    margin: 0 11% 0 7%;
}

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

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


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

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

.member p a{
    color: #ee003e;
    text-decoration-line: underline;
}

.schedule{
    width: 90%;
    height: auto;
    margin: 0% auto 15%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.schedule thead , .schedule tbody {
    width: 100%;
    height: auto;
    text-align: center;
}

.schedule tr td{
    width: 50%;
    font-size: 4.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    text-align: center;
    color: #745a31;
    border: 2px solid #745a31;
    padding: 1.5vw 0;
}

.schedule thead{
    background: #745a31;
}

.schedule thead td{
    color: #f5f3e6;
}

.schedule tbody td{
    background: #f5f3e6;
}

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

/*
.teacher span:nth-child(1){
    background: url(../images/teacher_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 26vw;
    display: block;
    margin: 0 auto;
}
*/

.teacher span:nth-child(2){
    background: url(../images/teacher_mid.png)no-repeat;
    background-size: 100%;
    width: 28%;
    height: 28vw;
    position: absolute;
    left: 8%;
    top: 76%;
    display: block;
    z-index: 3;
    animation: 3s tch infinite;
    transform-origin: center bottom;
}

@keyframes tch{
    0%{transform: rotate(-36deg);}
    25%{transform: rotate(-33deg);}
    50%{transform: rotate(-36deg);}
    100%{transform: rotate(-36deg);}
}
/*
.teacher span:nth-child(3){
    background: url(../images/teacher_bot.png)no-repeat;
    background-size: 100%;
    width: 25.8%;
    height: 8.7vw;
    position: absolute;
    right: 0;
    bottom: 9.4%;
    display: block;
    z-index: 2;
}
*/

.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: #745a31;
    color: #f5f3e6;
    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: #745a31;
}

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

.signup{
    width: 90%;
    height: auto;
    margin: 6% 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{
    width: 6vw;
    height: 6vw;
    font-size: 4.5vw;
    font-weight: 500;
    color: #f5f3e6;
    background: #745a31;
    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: #745a31;
    margin-bottom: 4%;
}

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

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

.fee{
    background: url(../images/money_m.png)no-repeat;
    background-size: 100%;
    width: 85.9%;
    height: 32vw;
    margin: 0 auto 6%;
}

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

.fee p span{
    font-size: 12vw;
    color: #de970e;
    padding: 0 1.5%;
}

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

.slogan{
    background: url(../images/bot_txt_m.png)no-repeat;
    background-size: 100%;
    width: 66.5%;
    height: 7vw;
    margin: 0 auto 5%;
}

.arrow{
    background: url(../images/arrow_m.png)no-repeat;
    background-size: 100%;
    width: 22.9%;
    height: 12.2vw;
    margin: 0 auto 8%;
    display: block;
    animation: 1.2s arrow1 infinite;
}

@keyframes arrow1{
    0%{transform: translateY(0);}
    50%{transform: translateY(20%);}
    100%{transform: translateY(0);}
}


.txt_bot{
    width: 80%;
    font-size: 4.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    text-align: center;
    color: #745a31;
    line-height: 6vw;
    margin: 0% auto 0;
}

.deco_line{
    background: #cec5af;
    width: 80%;
    height: 0.12vw;
    margin: 10% auto;
    display: block;
}

.logo_s{
    width: 100%;
    height: auto;
    margin: 0 auto 3%;
    display: inline-flex;
    justify-content: center;
}


.logo_s li{
    width: 29.2%;
    margin: 0 5%;
}

.logo_s li p{
    font-size: 3.8vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #745a31;
    margin: 0% auto 0; 
}

.logo_s1{
    background: url(../images/logo_01.png)no-repeat;
    background-size: 100%;
    width: 90.9%;
    height: 8vw;
    display: block;
    margin: 2% 0 0 0;
}

.logo_s2{
    background: url(../images/logo_02.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6vw;
    display: block;
    margin: 5% 0 0 0;
}

.deco01{
    background: url(../images/deco01_m.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 34vw;
    position: absolute;
    top: 24.5%;
    left: 0;
    z-index: 1;
}

.deco02{
    background: url(../images/deco02_m.jpg)no-repeat;
    background-size: 100%;
    width: 94%;
    height: 31vw;
    position: absolute;
    top: 45.4%;
    right: 3.4%;
    z-index: 1;
}

.deco03{
    background: url(../images/deco03_m.jpg)no-repeat;
    background-size: 100%;
    width: 18.2%;
    height: 34vw;
    position: absolute;
    top: 69.8%;
    right: 2.1%;
    z-index: 1;
}

.deco04{
    background: url(../images/deco04_m.jpg)no-repeat;
    background-size: 100%;
    width: 16.8%;
    height: 31vw;
    position: absolute;
    top: 89.3%;
    left: 3.1%;
    z-index: 1;
}