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

@media only screen and (max-width: 1199px) {
    .recruit{
            top: 10%;
            right: 2%;
    }
    @media only screen and (orientation: portrait) {}
    @media only screen and (orientation: landscape) {}
}

@media only screen and (max-width: 991px) {
    .main-content .footer{
        background-image: url("../images/footer-mobile.png");
    }

    .background .footer {
        background-image: url("../images/index-bottom.png");
    }

    .background .index-top {
        position: absolute;
        top: 0;
    }

    .background .index-top img {
        width: 100%;
    }

    .main-content .footer{
        position: relative;
        height: 35em;
    }
    .background.index {
        display: block;
    }
    .background .footer {
        bottom: 45.6px;
    }

    .background .remarks {
        position: absolute;
        bottom: 0;
    }
    .footer-bottom {
        display: none;
    }
    #index_animation {
        display: none;
    }
    .recruit {
        right: 0;
        top:5%;
    }
    .run-infor {
        width: 100%;
    }

    .run-infor .col-time {
        width: 7em;
    }
    .news-group,
    .content-group{
        max-width: 95%;
        margin: 3em auto 50vw;
    }
    .footer img,
    .footer p {
        display: none;
    }
    .remarks {
        position: relative;
        text-align: center;
    }
    .vote-rank {
        position: fixed;
        display: none;
        background: #efefef;
        width: 40%;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 4em;
        z-index: 600;
        height: auto;
        overflow: scroll;
    }

    .vote-rank .content-mark {
        display: none;
    }

    .rank-close {
        display: block;
    }

    .rank-btn {
        display: block;
    }

    .content-title-1.rank-title {
        width: auto;
        float: right;
    }

    .video-group {
        width: 100%;
        padding: 1em;
    }

    .video-group > div > .video-div:nth-child(3n+1) {
        clear: left;
    }
    .video-div {
        width: calc(94%/3);
        margin: 0 1% 3em 1%;
    }
    .video-space {
        float: none;
        width: 100%;
        padding-top: 56.25%;
    }
    .video-intro {
        float: none;
        width: 100%;
    }

    .video-intro {
        margin-top: 10px;
        padding: 0;
    }

    .video-div .group-name,
    .video-div .rank-team {
        margin-left: 0;
    }
    @media only screen and (orientation: portrait) {}
    @media only screen and (orientation: landscape) {}
}

@media only screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }
    
    .main-content .footer{
        background-image: url("../images/footer-mobile.png");
    }

    .background .footer {
        background-image: url("../images/index-bottom.png");
    }
    .main-content .footer{
        height: 90vw;
    }
    .logo-wrap .toNews {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 6em;
        height: 6em;
        z-index: 300;
    }

    .nav-mobile .recruit {
        position: relative;
        top: 69%;
        right: 0%;
        margin: 0 auto;
    }
    .nav-button {
        position: fixed;
        display: block;
        width: 4.5em;
        height: 4.5em;
        border-radius: 2.25em;
        top: 1.5em;
        left: 1.5em;
        z-index: 700;
    }
    
    .nav-button.open {
        background-color: rgba(255, 0, 255, 0);
    }
    .nav-mobile {
        position: fixed;
        z-index: 600;
        display: none;
        height: 100%;
    }
    .nav-mobile.open {
        display: block;
    }
    .nav-mobile .circle {
        position: fixed;
        display: block;
        right: -20%;
        bottom: 20%;
        width: 50em;
        height: 50em;
        border-radius: 525em;
        background-color: #214a6a;
        opacity: .8;
    }
    .nav-list {
        margin-top: 20%;
        height: auto;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0);
    }
    .nav-list li a{
        font-size: 1.6em;
    }
    .nav-list li {
        clear: left;
        width: 100%;
        margin-bottom: .6em;
    }
    .nav-list li:last-child {
        margin-left: 0;
    }
    .nav-list .nav-click,
    .nav-list .nav-hover {
        background-color: rgba(250, 250, 250, 0);
    }
    #siteNav .toFB {
        position: absolute;
        display: block;
        right: 1em;
        top: 1em;
        z-index: 700;
    }
    .news-group,
    .content-group{
        margin: 1.5em auto 40vw;
    }
    .news-title {
        font-size: 1.2em;
    }
    .news-list .news-content {
        display: none;
    }
    
    .content-wrap {
        padding: .6em 0;
    }
    .rule-wrap {
        padding: 1.25em 0 2em 0;
    }
    .part-wrap {
        width: 100%;
        margin: 0;
        float: none;
    }
    .part-wrap p {
        margin: .8em 0;
    }
    .table-wrap {
        overflow-x: scroll;
    }
    table.awards tbody td {
        text-align: center;
    }
    table.awards td{
        padding: .4em;
    }
    .content-title-3 {
        padding: 0 1em;
        margin: 1em 1% 0em 1%;
        border-radius: 20px;
        width: calc(94%/3);
        float: left;
    }
    .date-infor {
        font-size: 1.1em;
        text-align: center;
    }
    .tabs-wrap {
        text-align: center;
    }
    .tabs-container .tab .button-style-4 span {
        display: none;
    }
    .tab-content .part-wrap {
        width: 100%;
        margin: 0;
    }
    .nav-link {
        padding: .6rem .7rem;
    }
    table.date-infor .col-area {
        width: 4em;
    }
    table.date-infor .col-date {
        width: 5em;
    }
    table.date-infor.train .col-area{
        width: 5em;
    }
    .info2-wrap>div {
        float: none;
    }
    .info2-wrap .boon {
        margin-left: 0;
    }
    .rule-wrap ol{
        padding-left: 1.2em;
    }
    .awards .col-awards {
        width: 8em;
    }
    .share-group img {
        margin-left: .8em;
    }

    .vote-rank {
        width: 75%;
        right: 0;
        left: auto;
    }
    .video-group > div > .video-div:nth-child(3n+1) {
        clear: none;
    }
    .video-group > div > .video-div:nth-child(2n+1) {
        clear: left;
    }

    .video-div {
        width: 48%;
        margin: 0 1% 2.5em 1%;
    }

    .rank-btn {
        display: none;
    }

    .rank-btn.mobile {
        display: block;
    }

    .rank-close {
        position: absolute;
        top: 1.5em;
        right: 1.5em;
    }

    .vote-rank{
        padding-top: 1.5em;
    }

    .content-title-1.rank-title {
        float: left;
    }

    .member-modal {
        margin-top: 5em;
    }

    .modal-bottom {
        font-size: 1em;
        margin-top: 1em;
    }

    .table-style-1.prize .prize-name {
        width: 70%;
    }

    .table-style-1.prize img {
        width: 100%;
    }
    
    @media only screen and (orientation: portrait) {}
    @media only screen and (orientation: landscape) {
        .background .footer{
            display: none;
        }
        .logo{
            max-width: 70%;
            padding: 1em 0 0;

        }
        .nav-mobile .circle {
            right: -9%;
            bottom: 14%;
            width: 70em;
            height: 70em;
        }
        .nav-list {
            margin-top: 13%;
        }
        .main-content .footer {
            background-image: none;
            height: 20em;
        }
        .footer img{
            position: absolute;
            display: inline;
        }
    }
}

@media only screen and (max-width: 575px) {
    .news-group,
    .content-group{
        margin: 1.5em auto 60vw;
    }
    
    @media only screen and (orientation: portrait) {}
    @media only screen and (orientation: landscape) {}
}

@media(-webkit-min-device-pixel-ratio:1.5),
(min--moz-device-pixel-ratio:1.5),
(-o-min-device-pixel-ratio:3/2),
(min-resolution:1.5dppx),
(min-resolution: 192dpi) {}