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

.btn_sign{
    /*background: rgba(25,12,0,0.5);*/
    width: 100%;
    /*height: 8vw;*/
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.btn_sign a{
    background: url(../images/btn_sign.png)no-repeat;
    background-size: 100%;
    width: 24.7%;
    height: 7vw;
    margin: 0.7vw auto 0;
    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.png)top center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 46vw;
    overflow: hidden;
}

.logo{
    background: url(../images/logo.png)no-repeat;
    background-size: 100%;
    width: 26%;
    height: 3.1vw;
    margin: 4vw auto 0 50vw;
}

.title_h{
    background: url(../images/title.png)no-repeat;
    background-size: 100%;
    width: 56.9%;
    height: 24vw;
    margin: 1.8vw auto 0 36vw;
    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: 12%;
    height: 8vw;
    position: absolute;
    bottom: 7%;
    right: 8%;
    display: block;
    animation: .8s th infinite;
}

/*.title_h span{
    background: url(../images/title_deco_2.png)no-repeat;
    background-size: 100%;
    width: 15.8%;
    height: 7vw;
    position: absolute;
    bottom: 7%;
    right: 4%;
    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/content0.png)no-repeat;
    background-size: 100%;
    width: 52.6%;
    height: 15.5vw;
    margin: -13.3vw 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: #745a31;
    margin: 7% auto;
    line-height: 2.5vw;
}

.content p span{
    color: #ee003e;
}

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


.main{
    background: url(../images/box_mid.png);
    background-size: 100%;
    width: 66.5%;
    position: relative;
    margin: 8vw auto 13vw;
}

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

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


.title{
    width: 32.3%;
    height: 7vw;
    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: 84%;
    height: auto;
    margin: 2% 8% 8%;
    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: 49%;
    height: 9.2vw;
    margin: 0 0.5% 1%;
    display: inline-flex;
    align-items: center;
}

.feature li p{
    width: 41%;
    font-size: 1.3vw;
    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: 7vw;
    display: block;
    margin: 0 12% 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: 36.1%;
    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: #745a31;
    line-height: 5.5vw;
    margin: 0% auto 3%;
}

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

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

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

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

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

.schedule thead{
    background: #745a31;
}

.schedule thead td{
    color: #f5f3e6;
}

.schedule tbody td{
    background: #f5f3e6;
}

.teacher{
    /*background: url(../images/teacher.png)no-repeat;
    background-size: 100%;*/
    width: 90.4%;
    height: 26vw;
    margin: 0 auto 8%;
}

.teacher span:nth-child(1){
    background: url(../images/teacher_top.png)no-repeat;
    background-size: 100%;
    width: 82.6%;
    height: 26vw;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    z-index: 4;
}

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

@keyframes tch{
    0%{transform: rotate(3deg);}
    25%{transform: rotate(-1deg);}
    50%{transform: rotate(3deg);}
    100%{transform: rotate(3deg);}
}

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

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

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

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

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

.fee{
    background: url(../images/money.png)no-repeat;
    background-size: 100%;
    width: 36%;
    height: 9vw;
    margin: 0 auto 3%;
}

.fee p:nth-child(1){
    font-size: 1.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: 3%;
}

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

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

.slogan{
    background: url(../images/bot_txt.png)no-repeat;
    background-size: 100%;
    width: 25%;
    height: 2vw;
    margin: 0 auto 0;
}

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

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


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

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

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


.logo_s li{
    width: 23.4%;
    margin: 0 2%;
}

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

.logo_s1{
    background: url(../images/logo_01.png)no-repeat;
    background-size: 100%;
    width: 56.6%;
    height: 3vw;
    display: block;
    margin: 1% 0 0 33%;
}

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

.deco01{
    background: url(../images/deco01.jpg)no-repeat;
    background-size: 100%;
    width: 26.6%;
    height: 26vw;
    position: absolute;
    top: 14%;
    left: 2.1%;
    z-index: 1;
}

.deco02{
    background: url(../images/deco02.jpg)no-repeat;
    background-size: 100%;
    width: 17.5%;
    height: 11vw;
    position: absolute;
    top: 9.4%;
    right: 5.4%;
    z-index: 1;
}

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

.deco04{
    background: url(../images/deco04.jpg)no-repeat;
    background-size: 100%;
    width: 15.8%;
    height: 11vw;
    position: absolute;
    top: 30%;
    left: 2.1%;
    z-index: 1;
}

.deco05{
    background: url(../images/deco05.jpg)no-repeat;
    background-size: 100%;
    width: 25.7%;
    height: 9vw;
    position: absolute;
    top: 42.5%;
    left: 2.1%;
    z-index: 1;
}

.deco06{
    background: url(../images/deco06.jpg)no-repeat;
    background-size: 100%;
    width: 24.9%;
    height: 25vw;
    position: absolute;
    top: 56.5%;
    right: 2.1%;
    z-index: 1;
}

.deco07{
    background: url(../images/deco07.jpg)no-repeat;
    background-size: 100%;
    width: 17.6%;
    height: 11vw;
    position: absolute;
    top: 69.5%;
    left: 4.1%;
    z-index: 1;
}

.deco08{
    background: url(../images/deco08.jpg)no-repeat;
    background-size: 100%;
    width: 27.8%;
    height: 28vw;
    position: absolute;
    top: 77.5%;
    left: 2.1%;
    z-index: 1;
}

.deco09{
    background: url(../images/deco07.jpg)no-repeat;
    background-size: 100%;
    width: 17.6%;
    height: 11vw;
    position: absolute;
    top: 81.5%;
    right: 6.1%;
    z-index: 1;
}

.deco10{
    background: url(../images/deco10.jpg)no-repeat;
    background-size: 100%;
    width: 26.8%;
    height: 30vw;
    position: absolute;
    top: 86.5%;
    right: 2.1%;
    z-index: 1;
}