body {

    background: url(../img/bodybg2.jpg) #00b8ee;

    background-size: cover;

    background-position: top center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



header>img {

    width: 70%;

}



#accclass h2>span,

#learn>h2>span,

#ttteach h2>span,

.message-h2,

#newop>h2>span,

#activity>h2>span {

    color: #0245C9;

    text-shadow: 0.05em -0.03em 0 #fff, 0.05em 0.005em 0 #fff, 0em 0.08em 0 #fff, 0.05em 0.08em 0 #fff, 0px -0.03em 0 #fff, -0.03em -0.03em 0 #fff, -0.03em 0.08em 0 #fff, -0.03em 0 0 #fff;

}



.activity-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    /* background-color: rgba(160, 216, 253, 0.8); */

    /* padding: 2vh 0; */

}



.activity-table {

    text-align: center;

    width: 80vw;

    margin: 2vh auto;

    border-radius: 15px;

}



.activity-table tr,

.activity-table td {

    border: 3px solid #8cbaff;

    font-size: 1.2em;

    padding: 1vh;

}



#bookkeeper,

#cpa {

    background-color: #0245C9;

    color: #fff;

    font-size: 1.8em;

    font-weight: bold;

}



.bookkeeper-tr,

.cpa-tr {

    background-color: #ffffff;

}



#bookkeeper-td1,

#cpa-td1 {

    background-color: #4998ff;

    color: #fff;

    font-size: 1.5em;

    font-weight: bold;

    width: 25%;

}



.price {

    font-size: 1.3em;

    color: red;

    font-weight: 900;

}







@media (max-width: 1024px) and (min-width: 768px) {

    header img {

        width: 85%;

    }



    header {

        padding: 8vh 0 0 0;

    }



    .activity-table {

        width: 90%;

    }



    #bookkeeper,

    #cpa {

        font-size: 1.5em;

    }



    #bookkeeper-td1,

    #cpa-td1 {

        font-size: 1.3em;

    }



    .activity-table tr,

    .activity-table td {

        font-size: 1.1em;

        padding: 1vh;

    }



}



@media (max-width: 768px) {

    header {

        padding: 4vh 0 4vh 0;

    }



    .activity-table {

        width: 90%;

    }



    #bookkeeper,

    #cpa {

        font-size: 1.5em;

    }



    #bookkeeper-td1,

    #cpa-td1 {

        font-size: 1.3em;

    }



    .activity-table tr,

    .activity-table td {

        font-size: 1.1em;

        padding: 1vh;

    }

}



@media (max-width: 550px) {

    header>img {

        width: 80%;

    }



    #bookkeeper,

    #cpa {

        font-size: 1.2em;

    }



    #bookkeeper-td1,

    #cpa-td1 {

        font-size: 1em;

    }



    .activity-table tr,

    .activity-table td {

        border: 2px solid #8cbaff;

        font-size: 1em;

    }



    .price {

        font-size: 1.2em;

    }



    .activity-table {

        margin: .5vh auto;

    }

}



#newop table tr th {

    font-size: 1.5em;

    padding: 1.5vh 0;

    color: #fff;

    border-bottom: 3px solid #8cbaff;

    border-right: 3px solid #8cbaff;

    border-left: 3px solid #8cbaff;

    border-top: 3px solid #8cbaff;

    background: #0245C9;

    font-weight: bold;

}



#newop table tr td {

    width: 33%;

    border-bottom: 3px solid #8cbaff;

    border-right: 3px solid #8cbaff;

    border-left: 3px solid #8cbaff;

    border-top: 3px solid #8cbaff;

    padding: 1.5vh 0;

    font-size: 1.25em;

    text-align: center;

    font-weight: 400;

    letter-spacing: 1px;

}



#newop table tr:nth-child(2) td:first-child,

#newop table tr:nth-child(4) td:first-child,

#newop table tr:nth-child(6) td:first-child,

#newop table tr:nth-child(8) td:first-child {

    color: #0245C9;

    font-size: 1.5em;

    font-weight: bold;

}



#activity h2 img {

    margin: 0 1vw;

    width: 50px;

}



#activity h2>span {

    font-size: 1.6em;

    font-weight: 600;

}



#activity h2 {

    text-align: center;

    letter-spacing: 1px;

}



#activity h2>span strong {

    font-size: 1.2em;

}



@media (max-width: 1024px) and (min-width: 768px) {

    #activity h2 img {

        margin: 0 1vw;

        width: 30px;

    }



    #activity h2>span {

        font-size: 1.5em;

        font-weight: 600;

    }



    #activity h2 {

        letter-spacing: 1.2px;

    }



    #activity h2>span strong {

        font-size: 1em;

    }

}



@media (max-width: 550px) {

    #activity h2 img {

        margin: 0 1vw;

        width: 30px;

    }



    #activity h2>span {

        font-size: 1em;

        font-weight: 600;

    }



    #activity h2 {

        letter-spacing: 1px;

    }



    #activity h2>span strong {

        font-size: .8em;

    }

}



@media (max-width: 360px) {

    #activity h2 img {

        margin: 0 1vw;

        width: 20px;

    }



    #activity h2>span {

        font-size: .8em;

        font-weight: 600;

    }



    #activity h2 {

        letter-spacing: 1px;

    }



    #activity h2>span strong {

        font-size: 1em;

    }

}



#accclass {

    width: 85vw;

}



.wrapper {

    position: relative;

    z-index: 5;

    margin: 0 auto;

    padding: 3vh 2vw 3vh 2vw;

    background-color: #50B4FF;

}



#ttteach {

    margin: 4vh auto 0;

    width: 100vw;

}



.ttt_a {

    display: flex;

    flex-wrap: nowrap;

    justify-content: center;

}



#ttteach .ttt_a {

    width: 100vw;

}



#ttteach .ttt_a>div img {

    width: 300px;

}



@media (max-width: 1024px) and (min-width: 768px) {

    #ttteach {

        margin: 4vh auto 0;

        width: 100vw;

    }



    #ttteach .ttt_a>div img {

        width: 230px;

    }

}



@media (max-width: 768px) {

    #ttteach {

        margin: 4vh auto 0;

        width: 100vw;

    }



    #ttteach .ttt_a>div img {

        width: 180px;

    }

}



#accclass {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



#accclass ul {

    margin: 0;

    justify-content: space-evenly;

}



@media (max-width: 767px) {

    #accclass ul li h3 {

        width: 90px;

    }

}