.sub-visual{
    position: relative;
    width: 100%;
    height: 32rem;
    background-size: cover;
    background-color: #fafafa;
}
.sub-visual .container{
    text-align: center;
}
.sub-visual h3{
    font-size: 5rem;
    font-family: 'YanoljaYacheR';
    text-align: center;
    padding-top: 10rem;
}
.breadcrumb{margin-top: 3rem;}
.sub-menu-tab{
    height: 60px;
    margin-top: -60px;
    background: #fff;
    color: #7fb9f1;
    display: none;
}
.sub-menu-tab ul li{
    display: inline-block;
    font-size: 2.2rem;
    padding: 1.4rem 0;
}
.sub-menu-taboff{
    background: #e6edf4;
    color: #9e9e9e;
}

.sub-contents{
    margin: 30px auto;
    text-align: center;
}
.sub-contents .title h4{
    font-size: 4rem;
    font-family: 'YanoljaYacheR';
    margin-bottom: 3rem;
}

.sub-box{
    width: 82rem;
    margin: 6rem auto;
    background: #fafafa;
    border-radius: 1.5rem;
    padding: 5.5rem;
    text-align: left;
}
.sub01-box{
    background-image: url(../images/sub/sub01-box-bg.png);
    background-size: cover;
}
.text-box{
    margin-bottom: 3rem;
    position: relative;
}
.text-box:last-child{
    margin-bottom: 0;
}
.text-box div{
    display: inline-block;
    float: left;
    top: 0;
}
.text-box .number{
    margin-right: 1.2rem;
}
.text-box .number h6{
    font-size: 3rem;
    font-family: 'YanoljaYacheR';
}
.color-blue{ color: #65c7ff;}
.sub-box-text{ width: 77rem; word-break: keep-all;}
.text-box::after{
    display: block;
    content: '';
    clear: both;
}
.pc{width: 100%;}
.pc img{width: 100%;}
.mobile{display: none;}
.game-btn{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.game-btn div{
    width: 25%;
    padding: 0 1rem;
    box-sizing: border-box;
    /* display: inline-block; */
}
.game-btn div img {
    width: 100%;
}
.game03 div{
    padding-bottom: 2rem;
}
.sub-battle{
    text-align: left;
}
.sub-battle h5{
    font-size: 3rem;
    margin-bottom: 2rem;
    font-family: 'YanoljaYacheR';
}
.sub-battle p{
    margin-bottom: 1.5rem;
}
.sub-battle .ya{font-family: 'YanoljaYacheR'; font-size: 2.5rem; padding-left: 2rem; line-height: 4rem; margin-bottom: .5rem;}

.sub-battle div img{
    width: 25rem; padding-left: 2rem;
}
.sub-battle div{padding-bottom: 2rem;}
.sub-battle-person, .sub-battle-class{margin-top: 4rem;}

.video-wrap{
    margin:50px auto;
}

.video-wrap > video{
    width: 100%;
    height: auto;
}

.tab-menu{
    transform: translateY(-60px);
    width: 1140px;
    height: 60px;
    display: flex;
    margin:0 auto;
}

.tab-menu > li{
    flex: 1;
    line-height: 6rem;
    background: #d8e1eb;
    border-right: 1px solid #cad0d5;
}

.tab-menu > li:last-child{
    border-right: 0;
}

.tab-menu > li > a{
    text-align: center;
    color: #84888b;
}

.tab-menu > li.on{
    background: #fff;
}

.tab-menu > li.on > a{
    color: #65c7ff;
    font-weight: bold;
}



.tab-menu > li > a {
    display: block;
}
.sub-game{
    margin-bottom: 4rem;
}


.grid{position: relative; margin-bottom: 3rem;}

.grid h1{
    font-size: 5.5rem;
    line-height: 1.5em;
    font-family: 'YanoljaYacheR';
}
.grid__col{
    margin: 5rem 0;
    text-align: left;
    background: #fafafa;
    border-radius: 1.5rem;
    padding: 5rem;
    width: calc(50% - 11rem);
    float: left;
}
.grid__col:first-child h1{color: #91ec76;}
.grid__col:last-child h1{color: #f98262;}
.grid__col:first-child{
    margin-right: 2rem;
}
.grid__col ul li{
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 1rem;
    font-family: 'YanoljaYacheR';
    font-size: 2.7rem;
}
.grid::after{
    display: block;
    content: '';
    clear: both;
}
.grid__col ul li:last-child{
    border-bottom: 0;
    padding-bottom: 0;
}
.grid__col ul li .rank{
    margin-right: 2rem;
}
.grid__col ul li .name{
    margin-right: 2rem;
}
.sub-program{
    width: 100%;
    height: auto;
    padding-bottom: 50px;
}
.sub-program-box{
    display: block;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 40px;
}
.sub-program-box h5{
    font-size: 30px;
    font-family: 'YanoljaYacheR';
    color: tomato;
    margin-bottom: 10px;
}
.sub-program-box h6{
    font-size: 26px;
    font-family: 'YanoljaYacheR';
    padding-left: 15px;
    margin-top: 10px;
}
.sub-program-box .sub-program-detail{
    margin-top: 80px;
}
.sub-program-box p{
    word-break: keep-all;
    color: #333;
    font-size: 16px;
    line-height: 30px;
    padding-left: 30px;
}
.sub-program-box p span{
    display: block;
}
.sub-program-box .sub-program-dot{
    position: relative;
    padding-left: 30px;
}
.sub-program-box .sub-program-dot::before{
    position: absolute;
    content: '-';
    left: 20px;
}
.sub-program-list{
    height: auto;
}
.sub-program-box .sub-program-num{
    float: left;
    width: 30px;
}
.sub-program-box .sub-program-con{
    float: left;
    width: calc(100% - 50px);
    padding-left: 0;
    margin-top: 10px;
}
.sub-program-table{
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}
.sub-program-table tr th{
    height: 60px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
}
.sub-program-table tr th:last-child{
    border-right: 0;
}
.sub-program-table tr td{
    padding: 20px 10px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.sub-program-table tr td.left{
    text-align: left;
    padding-left: 20px;
}
.sub-program-table tr td:first-child{
    border-left: 0;
}
.sub-program-la img{
    width: 100%;
    margin-top: 20px;
}
.sub-program-box .sub-program-table p{
    padding-left: 0;
}
.sub-program-box .sub-program-table p.sub-program-dot{
    padding-left: 15px;
}
.sub-program-box .sub-program-table p.sub-program-dot::before{
    left: 0;
}
.sub-program-table tr td.border-left{
    border-left: 1px solid #ccc;
}
.thin{
    display: block;
    font-weight: 300;
}
.color-sub{
    color: #2dc9f3;
}
.sub-program-box span.sub-program-dot{
    padding-left: 20px;
}
.sub-program-box span.sub-program-dot::before{
    left: 10px;
}
/*221020추가 */
.sing-table{
    width: 100%;
    border-collapse: collapse;
}
.sing-table-01{
    margin-bottom: 70px;
}
.sing-table thead {
background-color: #f0fcff;
}
.sing-table thead th{
    border-top: 2px solid #2dc9f3;
    border-bottom: 1px solid #aaa;
}
.sing-table tbody td{
    border-bottom: 1px solid #eee;
}
.sing-table th,
.sing-table td{
    padding: 15px;
}
.table-tit{
    margin-bottom: 50px;
}
.scr-txt{
    display: none;
}
@media (max-width:768px){
    p{ font-size: 1.4rem; line-height: 2.2rem; word-break: keep-all;}
    .sub-visual{height: 16rem;background-position: center;}
    .sub-visual h3{ font-size: 3rem; padding-top: 4rem; line-height: 3.6rem;}
    .breadcrumb{font-size: 1.4rem; line-height: 2rem; margin-top: 2rem;}
    .sub-menu-tab{display: none;}
    .sub-contents{
        margin: 4rem auto;
        text-align: center;
    }
    .sub-contents .title h4{ font-size: 3.2rem; margin-bottom: 1.2rem;}
    .sub-box{
        width: 90%;
        margin: 2rem auto;
        padding: 2rem;
    }
    .sub01-box{
        background-image: none;
    }
    .text-box .number h6{ font-size: 2.5rem;}
    .sub-box-text{width: 88%;}
    .pc{display: none;}
    .mobile{
        display: block;
        width: 100%;
    }
    .mobile img{
        width: 100%;
    }
    .game-btn{width: 100%;}
    .game-btn div{float: none;}
    .game-btn div img{
        width: 100%;
    }

    .video-wrap{
        margin:50px auto;
    }

    .tab-menu {
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-top: 2rem;
        text-align: center;
        height: 4rem;
    }
    .tab-menu > li {
        flex: unset;
        width: 45%;
        display: inline-block;
        border-right: none;
        height: 4rem;
    }
    .tab-menu > li > a {
        display: block;
        font-size: 1.6rem;
        margin-top: -1rem;
    }
    .sub-battle{text-align: center;}
    .sub-battle h5{
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
    .sub-battle p{
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
    }
    .sub-battle .ya{text-align: center;}
    .sub-battle div img{text-align: center;margin: 0 auto;}

    .grid h1 {
        font-size: 4rem; word-break: keep-all; line-height: 4.5rem;}
    
    .grid{margin-bottom: 2rem;}
    .grid__col {
        padding: 2.5rem;
        width: auto;
        float: none;
    }
    .grid__col:first-child{
        margin-right: 0;
        margin-bottom: 2rem;
    }
    .grid__col ul{
    width: auto;
    }
    
    .cross-check-stage .grid__col ul li{margin-bottom: 1.2rem;}
    .m-scr{
        width: 100%;
        overflow-x: scroll;
    }
    .table-div{
        width: 800px;
    }
    .scr-txt{
        display: block;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .scr-txt::after{
        display: block;
        content: "";
        clear: both;
    }

    .scr-txt>*{
        float: left;
    }
    .scr-txt img{
        width: 30px;
    }
    .scr-txt p{
        margin-top: 8px;
        text-align: left;
        width: calc(100% - 50px);
        margin-left: 20px;
    }
}