@font-face{
    src: url("https://raw.githubusercontent.com/AonMao888/fontfiles/main/NamTeng%202022.ttf");
    font-family: namteng;
}
body{
    margin: 0;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
::-webkit-scrollbar{
    width: 8px;
}
::-webkit-scrollbar-thumb{
    border-radius: 15px;
    background: linear-gradient(159deg,teal,rgb(0, 212, 184));
}
nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 63px;
}
nav .left{
    display: flex;
    align-items: center;
    margin: 2px 9px;
}
nav .left i{
    font-size: 19px;
    margin: 2px 9px;
    color: teal;
    cursor: pointer;
}
nav .left a{
    display: flex;
    align-items: center;
    margin: 0 5px;
    text-decoration: none;
    user-select: none;
    object-fit: contain;
    object-position: center;
}
nav .left a img{
    height: 36px;
    width: 99px;
    margin-right: 5px;
}
nav .left a h1{
    margin: 5px;
    font-size: 27px;
    background: linear-gradient(159deg,rgb(73, 255, 73),rgb(0, 212, 184));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: namteng;
    align-items: center;
}
nav .left a h1 span{
    font-size: 23px;
    padding: 5px;
    background: gold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
nav .right{
    display: flex;
    align-items: center;
    margin: 1px 9px;
}
nav .right a{
    text-decoration: none;
    margin: 5px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: 0.5s;
}
nav .right a:hover p{
    color: gold;
}
nav .right a img{
    width: 27px;
    height: 27px;
}
nav .right a i{
    font-size: 19px;
    width: 27px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav .right a:nth-child(1){
    color: royalblue;
}
nav .right a:nth-child(2){
    color: royalblue;
}
nav .right a:nth-child(3){
    color: rgb(0, 177, 177);
}
nav .right a p{
    font-size: 18px;
    margin: 3px;
    color: dimgray;
    transition: 0.5s;
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
}
.container .left{
    min-width: 269px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container .left a{
    width: 91%;
    text-decoration: none;
    user-select: none;
    background: #fff;
    margin: 3px 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    transition: 0.5s;
}
.container .left a:hover{
    color: teal;
    letter-spacing: 1px;
}
.container .left a i{
    font-size: 19px;
}
.container .left a:nth-child(1){
    color: rgb(154, 3, 214);
}
.container .left a:nth-child(2){
    color: royalblue;
}
.container .left a:nth-child(3){
    color: teal;
}
.container .left a:nth-child(4){
    color: rgb(186, 214, 3);
}
.container .left a:nth-child(5){
    color: rgb(223, 135, 3);
}
.container .left a:nth-child(6){
    color: rgb(214, 45, 3);
}
.container .left a:nth-child(7){
    color: rgb(13, 0, 128);
}
.container .left a:nth-child(8){
    color: rgb(154, 3, 214);
}
.container .left a img{
    width: 27px;
    height: 27px;
}
.container .left a p{
    margin: 5px;
    font-size: 18px;
    color: dimgray;
}
.container .center{
    width: 100%;
    height: calc(100vh - 69px);
    min-height: calc(100vh - 69px);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container .right{
    min-width: 272px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    right: 0;
}
.container .right h3{
    width: 100%;
    font-size: 23px;
    margin: 5px;
    color: dimgray;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.container .right h3 i{
    font-size: 17px;
    margin: 5px;
    color: teal;
}
.head{
    width: 99%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.banner{
    width: 59%;
    background: yellow;
    height: 195px;
    border-radius: 8px;
    animation: banner 27s infinite step-end;
    transform: scale(1);
    transition: 0.5s;
}
.banner:hover{
    transform: scale(0.98);
}
@keyframes banner{
    0%{
        background: url("https://kinsta.com/wp-content/uploads/2020/05/mcdonalds-banner-example.png") no-repeat;
        background-size: cover;
        background-position: center;
    }
    25%{
        background: url("https://www.fivesquid.com/pics/t2/1599887397-150381-1-1.jpg") no-repeat;
        background-size: cover;
        background-position: center;
    }
    50%{
        background: url("https://adespresso.com/wp-content/uploads/2020/06/banner-ad-examples-1024x536.jpg") no-repeat;
        background-size: cover;
        background-position: center;
    }
    75%{
        background: url("https://adsterra.com/blog/wp-content/uploads/2021/06/how-banners-make-you-money.png") no-repeat;
        background-size: cover;
        background-position: center;
    }
}
.cate{
    width: 39%;
    display: flex;
}
.cate .l{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cate .l h3{
    margin: 5px;
    color: dimgray;
    font-size: 23px;
}
.c{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3px;
}
.c a{
    text-decoration: none;
    color: #fff;
    background: teal;
    text-align: center;
    padding: 7px 0;
    border-radius: 5px;
    transition: 0.5s;
    transform: scale(1);
    font-size: 17px;
}
.c a:hover{
    color: rgb(40, 40, 40);
    transform: scale(0.96);
}
.h{
    width: 100%;
    background: teal;
    display: none;
}
.h i{
    float: right;
    font-size: 23px;
    margin: 7px;
    color: #eee;
    cursor: pointer;
    outline: none;
}
.h h1{
    font-size: 23px;
    margin: 5px;
    color: #fff;
    margin-top: 51px;
}
.h p{
    margin: 5px;
    color: rgb(211, 211, 211);
    font-size: 15px;
}
.ani{
    width: 151px;
    height: 151px;
    background: url(/assets/gif/learning.gif) no-repeat;
    background-size: contain;
    background-position: center;
    display: none;
}
.li{
    width: 91%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.li a{
    background: #fff;
    width: 98%;
    padding: 9px;
    font-size: 17px;
    text-decoration: none;
    margin: 3px;
    border-radius: 4px;
    color: dimgray;
    background: #eee;
    transition: 0.5s;
}
.li a:hover{
    transform: translateX(-6px);
}
marquee{
    margin-top: 19px;
    font-size: 17px;
    color: royalblue;
    display: block;
}
.con{
    width: 100%;
    display: flex;
    justify-content: center;
}
.con .lefts{
    width: 63%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.con .lefts .top{
    width: 91%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: teal;
    padding: 5px 9px;
    border-radius: 5px;
}
.con .lefts .top h1{
    margin: 5px;
    font-size: 23px;
    color: #fff;
}
.con .lefts .top button{
    padding: 9px 15px;
    color: teal;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
    border: 2px solid teal;
}
.con .lefts .top button:hover{
    background: teal;
    color: #fff;
    border: 2px solid #fff;
}
.con .lefts h2{
    width: 96%;
    margin: 1px;
    margin-top: 19px;
    color: #000;
    font-size: 23px;
}
.con .lefts h2 b{
    color: dimgray;
    text-decoration: underline;
}
.con .lefts ul{
    width: 78%;
    list-style:disc;
}
.con .lefts ul li{
    font-size: 17px;
    background: linear-gradient(159deg,black,teal);
    width: max-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.con .lefts p{
    width: 96%;
    margin: 5px;
    color: #000;
    font-size: 19px;
}
.con .lefts p b{
    color: dimgray;
    text-decoration:underline;
}
.con .rights{
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.con .rights::-webkit-scrollbar{
    height: 9px;
}
.con .rights::-webkit-scrollbar-thumb{
    background: linear-gradient(159deg,rgb(65, 180, 225),blue);
}
.con .rights img{
    width: 100%;
    height: fit-content;
    object-fit: cover;
    object-position: center;
    margin: 5px;
    border: 3px solid teal;
    border-radius: 9px;
    user-select: none;
    cursor: pointer;
    max-height: 215px;
}
nav .menubtn{
    display: none;
}


@media(max-width:1179px){
    .cate{
        width: 36%;
    }
    .banner{
        height: 172px;
    }
    nav .left a h1{
        font-size: 24px;
    }
    nav .left a h1 span{
        font-size: 19px;
    }
}
@media(max-width:1068px){
    .container .left{
        min-width: 232px;
    }
    .container .left a{
        width: 88%;
    }
    .container .right{
        min-width: 232px;
    }
    .con .lefts ul{
        width: 88%;
    }
}
@media(max-width:1068px){
    .container .right{
        display: none;
    }
    .cate .l h3{
        font-size: 21px;
    }
    .c a{
        font-size: 16px;
    }
}
@media(max-width:767px){
    nav{
        justify-content: space-between;
    }
    nav .right a p{
        display: none;
    }
    .container .left{
        position: fixed;
        height: 100vh;
        top: 0;
        left: -369px;
        transition: 0.5s;
        background: #fff;
        z-index: 1;
        border-right: 1px solid rgb(231, 231, 231);
    }
    .h{
        display: block;
    }
    .cate .l h3{
        font-size: 19px;
    }
    .con .lefts .top h1{
        font-size: 19px;
    }
    nav .menubtn{
        display: block;
    }
}
@media(max-width:616px){
    nav .left a h1{
        display: none;
    }
    .banner{
        width: 96%;
        margin-top: 5px;
    }
    .cate{
        margin-top: 9px;
        width: 99%;
        justify-content: space-evenly;
    }
    .cate .l{
        width: 63%;
    }
    .ani{
        display: block;
    }
    .class .div .i{
        width: 93%;
    }
    .class .div .i img{
        height: 108px;
    }
    .class .div .i h1{
        font-size: 17px;
    }
    .class .div .i p{
        font-size: 15px;
    }
    .class .div .i a{
        font-size: 14px;
    }
    .cate .l h3{
        font-size: 17px;
    }
    .c a{
        font-size: 15px;
    }
    .con{
        flex-wrap: wrap;
    }
    .con .lefts{
        width: 96%;
    }
    .con .rights{
        overflow-x: scroll;
        width: 89%;
        flex-direction: row;
    }
    .con .rights img{
        width: 91%;
    }
    .con .lefts ul{
        width: 88%;
    }
    .con .lefts p{
        font-size: 17px;
    }
    .con .lefts .top h1{
        font-size: 15px;
    }
    .con .lefts .top button{
        font-size: 11px;
        padding: 6px 8px;
    }
    .con .lefts h2{
        font-size: 19px;
    }
    .con .lefts ul li{
        font-size: 14px;
    }
}