.sub-tab-menu {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(98, 134, 254, 0.4);
    height: 46px;
    > ul {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        > li {
            position: relative;
            max-width: 25%;
            > a {
                color: #fff;
                font-size: 1.3rem;
                font-weight: 400;
                display: block;
                padding: 15px 50px 15px 25px;
                width: 180px;
                border-right: 1px solid rgba(255, 255, 255, 0.2);
                transition: background 0.3s ease;
                text-align: left;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-weight: 500;
                max-width: 100%;
                &:hover {
                    background: rgba(98, 134, 254, 0.4);
                }
            }
            &:first-child > a {
                padding: 23px 25px;
                border-left: 1px solid rgba(255, 255, 255, 0.1);
                position: relative;
                top: -2px;
                width: auto;
                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 23px;
                    height: 20px;
                }
            }
            &:hover > ul.depth03 {
                opacity: 1;
                z-index: 1;
            }
            > ul.depth03 {
                position: absolute;
                top: 100%;
                left: 0;
                background: rgba(0, 0, 0, 0.7);
                width: 100%;
                opacity: 0;
                z-index: -2;
                > li {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                    > a {
                        color: #fff;
                        display: block;
                        padding: 15px 25px;
                        transition: background 0.3s ease;
                        &:hover {
                            background: rgba(98, 134, 254, 0.4);
                        }
                    }
                }
            }

            img.arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}

@media (max-width: 1200px) {
    .sub-tab-menu {
        > ul {
            width: 100%;
        }
    }
}

@media (max-width: 768px) {
    .sub-tab-menu {
        > ul {
            > li {
                flex: 1;
                &:first-child {
                    display: none;
                }
                > a {
                    width: auto;
                }
            }
        }
    }
}

@media (max-width: 500px) {
    .sub-tab-menu {
        > ul {
            > li {
                max-width: 100%;
                width: 100%;
                &:nth-child(n):not(:nth-last-child(-n + 3)) {
                    display: none;
                }
                > a {
                    font-size: 1.2rem;
                    padding: 15px 25px 15px 12px;
                }
                > ul.depth03 {
                    > li {
                        > a {
                            padding: 10px 20px;
                        }
                    }
                }
                img.arrow {
                    width: 17px;
                    height: 17px;
                    right: 5px;
                }
            }
        }
    }
}