@media screen and (max-width: 1023px) {

    /******************** |  | ********************/
    .spicalHeaderTop iframe {
        width: 100%;
        max-width: 1366px;
        max-height: 45px;
        min-height: 45px;
    }
    
    
    header {
        padding-bottom: 0px;
    }

        header.open-menu {
            padding-bottom: 0;
        }

        header menu {
            display: none;
        }

        header.open-menu [das] {
            display: none;
        }

        header.open-menu nav ul.announcements {
            display: none;
        }

        header.open-menu menu {
            display: block;
            position: fixed;
            top: 50px;
            right: 0;
            width: 100vw;
            height: calc(100vh - 50px);
            z-index: 2;
            background: #222;
        }

            header.open-menu menu > ul {
                flex-direction: column;
                gap: 10px;
                /*                width: 33vw;
*/
                max-width: 33vw;
                height: calc(100vh - 100px);
                margin: 0;
                background: rgba(0, 0, 0, 0.2);
                position: relative;
                overflow: auto;
                direction: ltr;
                text-align: right;
            }

        header menu ul li a {
            white-space: wrap;
        }

        header.open-menu menu > ul > li a {
            font-size: 12px;
        }

        header.open-menu menu > ul > li:hover > sub {
            position: fixed;
            top: 50px;
            right: 33vw;
            width: 67vw;
            height: calc(100vh - 100px);
            overflow-y: auto;
            flex-direction: column;
            box-shadow: none;
            padding: 0;
            z-index: 99999;
        }

        header.open-menu menu > ul > li {
            padding: 0;
        }

        header.open-menu nav {
            background: #111;
            padding: 0 10px;
            width: 100vw;
            max-width: none;
            position: fixed;
            top: 0;
        }

        header nav ul.setting {
            flex-grow: unset;
        }

        header nav {
            padding: 0 10px;
            /*width: 100vw;*/
            max-width: none;
        }

    #menu_toggle_icon {
        display: block;
    }

    header nav ul {
        gap: 10px;
    }

        header nav ul li.logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
        }

        header nav ul.announcements {
            position: absolute;
            top: 100%;
            right: 0;
            width: 100vw;
            background: #222;
            padding: 5px 10px;
            max-width: 100%;
        }

    ul.social-icons {
        display: none;
    }

    .open-menu ul.social-icons {
        display: flex;
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100vw;
        gap: 10px;
        justify-content: flex-end;
        padding: 10px;
    }

        .open-menu ul.social-icons li.icon_btn.ico a {
            width: 30px;
        }

        .open-menu ul.social-icons li.icon_btn.ico:hover a {
            padding: 2px;
            filter: none;
        }

    li.icon_btn.user {
        display: none;
    }

    .open-menu li.icon_btn.user {
        display: flex;
        position: fixed;
        left: 5px;
        bottom: 0;
    }

    header nav ul.setting li.icon_btn.user a {
        font-size: 8px;
    }


    header menu > ul > li > sub ul {
        display: block;
        max-height: none;
        padding: 0 15px;
    }

        header menu > ul > li > sub ul li {
            width: 100%;
        }

    footer section {
        flex-direction: column;
        gap: 15px;
    }

    main > aside {
        display: none;
    }



    article .article-body .article-content iframe {
        max-width: 100%;
    }


    article .article-body {
       /* display: flex;
        flex-direction: column-reverse;*/
        margin-bottom: 0;
    }

        article .article-body .readMore {
            max-width: 100%;
            margin: 15px 0 0;
            padding-bottom: 20px;
        }

    .leagueMenu .leagueTitle {
        min-width: 100%;
    }

    .atags {
        padding-top: 5px;
    }
}



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

    main,
    .main,
    .leagueMenu,
    main > section,
    main > aside,
    .card, .cards .card {
        margin: 0;
         max-width: 100%;
        width: 100%;
        border-radius: 0;
    }
}

@media screen and (max-width: 450px) {
}