@charset "utf-8";
/* CSS Document */

ul.curriculum-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 25px;
    @media (width <= 999px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    li {
        list-style-type: none!important;
        margin: 0!important;
        a {
            background: var(--color-blue);
            border-radius: 10px;
            padding: 20px 25px 30px 25px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            display: block;
            color: #fff;
            position: relative;
            @media (width <= 999px) {
                padding: 10px 10px 20px 10px;
                font-size: 1.2rem;
            }
            &:hover {
                background: var(--color-blue-deep);
            }
            &::after {
                width: calc(100% - 50px);
                font-family: var(--fa);
                font-weight: 900;
                content: "\f107";
                text-align: center;
                display: block;
                position: absolute;
                @media (width <= 999px) {
                    width: calc(100% - 20px);
                }
            }
        }
    }
}
.curriculum-box {
    margin-bottom: 50px;
}
.tagBox {
    .grade-tab_menu {
        /*display: flex;*/
        display: none;
        li {
            background: #f5f5f5;
            list-style-type: none!important;
            border-radius: 5px;
            width: calc((100% - 30px) / 4);
            height: 100%;
            margin: 0 10px 10px 0;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            text-decoration: none;
            color: #000;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            @media (width <= 999px) {
                font-size: 1.4rem;
            }
            &:hover {
                background: var(--color-blue-light);
                cursor: pointer;
            }
            &:nth-of-type(4n) {
                margin-right: 0;
            }
            &.active {
                background: var(--color-blue);
                color: #fff;
            }
        }
    }
}
.grade-tab_content {
    /*display: none;
    &.active {
        display: block;
    }*/
    .grade-tab_content-subjects {
        div {
            .subjects-title {
                background: var(--color-main);
                padding: 14px 20px 15px 20px;
                font-size: 1.8rem;
                font-weight: bold;
                text-align: center;
                color: #fff;
                line-height: 1;
                position: relative;
                @media (width <= 999px) {
                    padding: 12px 18px 13px 18px;
                    font-size: 1.6rem;
                }
            }
            .subjects-content {
                border: 1px solid #ccc;
                padding: 20px;
                @media (width <= 999px) {
                    padding: 10px 15px;
                }
                .subjects-sub_title {
                    border-bottom: 2px dotted #666;
                    margin-bottom: 10px;
                    padding-bottom: 5px;
                    font-size: 1.7rem;
                    font-weight: bold;
                    @media (width <= 999px) {
                        font-size: 1.5rem;
                    }
                }
                ul {
                    @media (width <= 999px) {
                        margin-bottom: 10px!important;
                        font-size: 1.4rem;
                    }
                    li {
                        margin-bottom: 0;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
            /*&:nth-child(2) {
                .subjects-title {
                    background: var(--color-green);
                }
            }
            &:nth-child(3) {
                .subjects-title {
                    background: #333;
                }
            }*/
        }
    }
}