body {

    font-family: "Noto Sans TC", sans-serif;

    margin: 0;

    height: 100vh;

    background-image: url(https://www.easywin.com.tw/ad/113/opsp/img/bg-2.png);

    background-repeat: repeat;

    background-size: auto;

}



/*--------------pt1---------------*/

.title1,

.title2 {

    display: flex;

    justify-content: center;

    align-items:flex-start;

    flex-wrap: wrap;

    margin-top: 5vh;

}



#sa .img-title,

#pt2 .img-title {

  width: 12vw!important;

  height: auto;

}

#sa ul,#pt2 ul { 

    text-align: left;

    font-size: 0.8em;

    font-weight: 300;

    

}

.title1 h3,

.title2 h3,

.title3 h3 {

    margin-left: 2vw;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.2rem;

    font-weight: 700;

    color: #003DA0;

}



.table1,

.table2 {

    width: 95%;

    margin: 0 auto;

    border-collapse: collapse;

    font-weight: 500;

    font-size: 1.25rem;

    text-align: center;

    background-color: #fff;

}



td {

    padding: 0.5rem;

}



.td1,

.td4 {

    border: 2px solid #003DA0;

    color: #003DA0;

    font-weight: 700;

    font-size: 1.5rem;

    width: 20%;

}



.tr1 {

    background-color:#a7efff;

    border: 2px solid#a7efff;

}



.tr2,

.td2,

.td3 {

    border: 2px solid#a7efff;

}



.tick {

    font-size: 2rem;

}



.price {

    color: #FF4DA6;

    font-size: 2rem;

    font-weight: 900;

}



.td3 {

    background-color: azure;

}



/*--------------#pt1---------------*/



/*--------------pt2---------------*/

.tr3 {

    background-color: #bc93ff;

    border: 2px solid #e2d0ff;

}



.td4 {

    border: 2px solid #2e0083;

    color: #2e0083;

}



.title2 h3 {

    color: #2e0083;

}



.td5,

.td6 {

    border: 2px solid #e2d0ff;

}



.td6 {

    background-color: rgb(244, 240, 255);

}



/*--------------#pt2---------------*/



/*--------------pt3---------------*/

.pt3 {

    background-color: #ffffff7a;

    margin-top: 10vh;

    padding: 7vh 0;

    border: 5px solid #003DA0;

    border-radius: 20px;

}



.title3 h3 {

    margin: 0;

}



.star,

.star2 {

    font-size: 2.2rem;

}



.text-3 {

    font-size: 5.5rem;

}



.subtitle {

    margin-top: 0;

}



.pt3-content {

    display: flex;

    justify-content: center;

}



.studyup,

.classup,

.serveup {

    margin: 0 1vw;

    width: 32%;

}



.pt3-s-title {

    font-size: 1.5rem;

    text-align: center;

    margin: 0;

    padding: 2vh 0vw;

    color: #ffffff;

    border-radius: 20px 20px 0 0;

    margin: 0 0.5vw;

}



.studyup h4 {

    background-color: #3c70ff;

}



.studyup-t,

.studyup-t-5,

.studyup-t-8 {

    /* font-size: 2rem; */

    text-align: left;

    background-color:#35354b;

    color: #fff;

    border-radius: 10px;

    padding: 1vh 2vw;

    height: 80%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.studyup-t-2 {

    text-align: center;

    color: rgb(255, 251, 0);

    font-weight: 700;

    padding-top: 2vh;

    margin-bottom: 2vh;

    margin-top: 0;

}



.studyup-t-3,

.studyup-t-4 {

    margin: 0 0 1vh 0;

    padding: 0 0 1vh 0;

    border-bottom: 2px dotted #b5d3ff;

    font-size: 1.25rem;

}



.tick2 {

    color: rgb(255, 251, 0);

}



.remark {

    font-size: 1rem;

}



.classup h4 {

    background-color: #663cff;

}



.studyup-t-6,

.studyup-t-7 {

    margin: 0;

    padding: 2vh 0;

    border-bottom: 2px dotted #c3bcff;

    font-size: 1.5rem;

}



.studyup-t-7,

.studyup-t-10 {

    margin: 0;

}



.serveup h4 {

    background-color: #6e39af;

}



.studyup-t-9,

.studyup-t-10 {

    margin: 1vh 0;

    padding: 2vh 0;

    border-bottom: 2px dotted #f2bcff;

    font-size: 1.5rem;

}



.studyup-t-4,

.studyup-t-7,

.studyup-t-10 {

    border-bottom: 0px dotted #d6d6d6;

}



.remark2 {

    text-align: center;

    margin: 5vh 0 0 0;

}



/*--------------#pt3---------------*/



/*--------------pt4---------------*/

.pt4 {

    margin-top: 10vh;

    padding-bottom: 8vh;

}



.pt4 h3 {

    padding-top: 5vh;

    text-align: center;

    font-size: 2.2rem;

    color: #003DA0;

}



.table3,

.table4 {

    width:100%;

    margin: 0 auto;

    border-collapse: collapse;

    font-weight: 500;

    font-size: 1.5rem;

    text-align: center;

    background-color: #fff;

}



.table4 {

    margin: 5vh auto;

}



.tr4 {

    background-color: #468dff;

    border: 2px solid #468dff;

}



.tr6 {

    background-color: #003DA0;

    border: 2px solid #003DA0;

}



.td7,

.td10 {

    border: 2px solid #003DA0;

    color: #fff;

    font-weight: 700;

    font-size: 1.5rem;

}



.td8,

.td9 {

    border: 2px solid #003DA0;

    width: 33%;

}



.td9 {

    background-color: azure;

}



.td10 {

    color: rgb(255, 251, 0);

}



.date {

    font-size: 2.2.2rem;

    color: #FF4DA6;

    font-weight: 900;

}



.teacher-n {

    font-size: 1rem;

}



@media (max-width: 1024px) {



    .img-title {

        height: 14vh;

    }



    .td1,

    .td4 {

        font-size: 2rem;

    }



    .table1,

    .table2 {

        font-size: 1.25rem;

    }



    /*--------------pt3---------------*/

    .pt3 {

        padding: 5vh 0;

        margin-top: 5vh;

    }



    .pt3-content {

        flex-direction: column;

        align-items: center;

    }



    .studyup,

    .classup,

    .serveup {

        margin: 1.5vh 1vw;

        width: 90%;

    }



    .pt3-s-title {

        font-size: 2.5rem;

    }



    .studyup-t-2 {

        margin-bottom: 0;

        font-size: 2.5rem;

    }



    .studyup-t-3,

    .studyup-t-4,

    .studyup-t-6,

    .studyup-t-7,

    .studyup-t-9,

    .studyup-t-10 {

        padding: 1vh 0;

        text-align: center;

        font-size: 1rem;

        margin: 0;

    }



    .studyup-t,

    .studyup-t-5,

    .studyup-t-8 {

        padding: 1vh 5vw;

    }



    .remark2 {

        margin: 3vh 0 0 0;

    }



    /*--------------#pt3---------------*/



    /*--------------pt4---------------*/

    .pt4 {

        margin-top: 5vh;

        padding-bottom: 8vh;

    }

}



@media (max-width: 480px) {



    #sa .img-title,

    #pt2 .img-title {

      width: 32vw!important;

      height: auto;

      text-align: center;

    }

    #sa ul,#pt2 ul { 

        text-align: left;

        font-size: 0.68em;

        font-weight: 300;

        

    }

    .teacher-n {

        display: block;

    }

}

    .table1,

    .table2 {

        width: 100%;

        font-size: 1.2.2rem;

    }

    .table1 td:nth-child(2),.table1 td:nth-child(3),

    .table2 td:nth-child(2),.table1 td:nth-child(3){

        display: none;

    

    }

    .td1,

    .td4 {

        font-size: 1.5rem;

    }



    .price {

        font-size: 1.5rem;

    }



    .title1 h3,

    .title2 h3,

    .title3 h3{

        font-size: 2rem;

    }



    .title3 h3 {

        font-size: 1.2rem;

    }



    /*--------------pt3---------------*/

    .star {

        display: none;

    }



    .text-3 {

        font-size: 2rem;

    }



    .pt3-s-title {

        font-size: 2rem;

    }



    .studyup-t-2 {

        font-size: 1.5rem;

    }



    .studyup-t-3,

    .studyup-t-4,

    .studyup-t-6,

    .studyup-t-7,

    .studyup-t-9,

    .studyup-t-10 {

        padding: 1vh 0;

        font-size: 1.5rem;

        margin: 0;

    }



    .remark2 {

        margin: 1vh 0 0 0;

    }



    /*--------------#pt3---------------*/



    /*--------------pt4---------------*/

    .pt4 h3 {

        padding-top: 3vh;

        font-size: 2.2rem;

    }



    .star2 {

        font-size: 2.2rem;

    }



    .table3,.table4 {

        width: 100%;

        font-size: 1.25rem;

    }



    .td7 {

        font-size: 1.5rem;

    }



    .date {

        font-size: 2rem;

    }



    /*--------------#pt4---------------*/



@media (max-width: 390px) {



    td {

        padding: 5px;

    }



    /*--------------pt3---------------*/

    .title3 h3 {

        font-size: 1.25rem;

    }



    /*--------------#pt3---------------*/



    /*--------------pt4---------------*/

    .table3,.table4 {

        width: 100%;

        font-size: 1.2.2rem;

    }



    .date {

        font-size: 1.5rem;

    }



    /*--------------#pt4---------------*/



}