/*===== [서브] 축제 순위 =====*/
#event-container{
    display:flex;
    flex-wrap:wrap;
    margin:0 -1rem;
    flex-direction:column;
}
#event-content{
    flex:0 0 auto;
    width:100%;
    padding:0 1rem;
}
#event-content #event-header{
    display:flex;
    justify-content:space-between;
}
#event-content #event-header .header-title{
    font-size:1.2rem;
    padding-top:.5rem;
}
#event-content #event-header .header-title .dropdown{
    margin-left:.5rem;
    vertical-align:middle;
}
#event-content #event-header .header-title .dropdown > a{
    display:inline-block;
}
#event-content #event-header .header-title .dropdown > a i{
    font-size:1.5rem;
    color:#C2C2C2;
}
#event-content #event-header .header-title .dropdown .dropdown-content .dropdown-header .header-title{
    padding:0;
    font-size:1rem;
}
#event-content .dropdown-guide-event{
    white-space:nowrap;
}

/*===== [서브] 축제 순위 리스트 =====*/
.event-table-list .table-list-header .table-row{
    border:0 none;
    border-top:2px solid #333;
    border-bottom:1px solid rgba(51, 51, 51, 0.4);
}
.event-table-list .table-list-body .table-row{
    border:0 none;
    border-bottom:1px solid #F1f1f1;
    flex-direction:row;
}
.event-table-list .table-row .table-th,
.event-table-list .table-row .table-td{
    text-align:center;
    font-size:.85rem;
}
.event-table-list .table-row .table-th:first-child,
.event-table-list .table-row .table-td:first-child{
	text-align:left;
}
.event-table-list .table-row .table-th:nth-child(2),
.event-table-list .table-row .table-td:nth-child(2){
	width:150px;
    min-width:150px;
    flex:0 0 auto;
}
.event-table-list .table-row .table-th:nth-child(3),
.event-table-list .table-row .table-td:nth-child(3){
    text-align:center;
    width:100px;
    min-width:100px;
    flex:0 0 auto;
}
.event-table-list .table-row .table-th:nth-child(4),
.event-table-list .table-row .table-td:nth-child(4){
    text-align:center;
    width:80px;
    min-width:80px;
    flex:0 0 auto;
}

/*===== [서브] 축제 순위 리스트 : 1 =====*/
.event-table-list .table-row .table-td .td-item{
    display:flex;
    flex-direction:column;
}
.event-table-list .table-row .table-td .td-item .rank-num{
    flex:0 0 25px;
    font-size:.85rem;
    font-weight:600;
    text-align:center;
}
.event-table-list .table-row .table-td .td-item .rank-change{
    text-align:center;
    flex:0 0 auto;
    min-width:35px;
    white-space:nowrap;
}
.td-item .rank-change .change-box > span.change-state{
    display:none;
}
.td-item .rank-change .change-box em{
    display:inline-block;
    font-size:12px;
    color:#757271;
    vertical-align:middle;
    font-style:normal;
}
.td-item .rank-change .change-box .change-arrow{
    display:inline-block;
    vertical-align:middle;
}
.td-item .rank-change .change-box.up .change-arrow{
    display:inline-block;
    font-family:boxicons !important;
    font-weight:400;
    font-style:normal;
    font-variant:normal;
    line-height:1;
}
.td-item .rank-change .change-box.up .change-arrow::before{
    content:"\ec5d";
    display:inline-block;
    font-size:16px;
    color:#FF564C;
}
.td-item .rank-change .change-box.up > em{
    display:inline-block;
    margin-top:1px;
    font-weight:700;
    color:#FF564C;
    line-height:18px;
}
.td-item .rank-change .change-box.down .change-arrow{
    display:inline-block;
    font-family:boxicons !important;
    font-weight:400;
    font-style:normal;
    font-variant:normal;
    line-height:1;
}
.td-item .rank-change .change-box.down .change-arrow::before{
    content:"\eab7";
    display:inline-block;
    font-size:16px;
}
.td-item .rank-change .change-box.down > em{
    display:inline-block;
    margin-top:1px;
    font-weight:700;
    line-height:18px;
}
.td-item .rank-change .change-box.none em{
    height:2px;
    width:6px;
    text-indent:-1000em;
    background-color:#9C9A9A;
}

/*===== [서브] 축제 순위 리스트 : 2 =====*/
.event-table-list .table-row .table-td .rank-title > a{
    display:flex;
    flex-direction:column;
    align-items:left;
	font-size: 1.2rem;
	padding: 10px;
}
.event-table-list .table-row .table-td .rank-title > a .rank-thumb{
    overflow:hidden;
    text-align:center;
    position:relative;
    border-radius:3px;
    width:65px; height:85px;
    margin-bottom:.65rem;
    border:1px solid rgba(51, 51, 51, .05);
}
.event-table-list .table-row .table-td .rank-title > a .rank-thumb img{
    position:absolute;
    top:50%; left:50%; right:auto; bottom:auto;
    transform:translate(-50%, -50%);
    max-height:none;
    max-width:none;
    margin:auto;
    width:100%; min-height:100%;
    object-fit:cover;
}
.event-table-list .table-row .table-td .rank-title > a .rank-title{
    font-size:.85rem;
    font-weight:600;
}
.event-table-list .table-row .table-td .rank-title > a:hover .rank-title{
    text-decoration:underline;
}

/*===== [서브] 축제 순위 리스트 : 2 =====*/
.event-table-list .table-row .table-td .rank-title > a{
    display:flex;
    flex-direction:column;
    align-items:left;
}
.event-table-list .table-row .table-td .rank-title > a .rank-thumb{
    overflow:hidden;
    text-align:center;
    position:relative;
    border-radius:3px;
    width:200px; height:85px;
    margin-bottom:.65rem;
    border:1px solid rgba(51, 51, 51, .05);
}
.event-table-list .table-row .table-td .rank-title > a .rank-thumb img{
    position:absolute;
    top:50%; left:50%; right:auto; bottom:auto;
    transform:translate(-50%, -50%);
    max-height:none;
    max-width:none;
    margin:auto;
    width:100%; min-height:100%;
    object-fit:cover;
}
.event-table-list .table-row .table-td .rank-title > a .rank-title{
    font-size:.85rem;
    font-weight:600;
}
.event-table-list .table-row .table-td .rank-title > a:hover .rank-title{
    text-decoration:underline;
}

/*===== [서브] aside : 기타컨텐츠 =====*/
.aside-content .aside-item{
    margin-bottom:1rem;
}
.aside-content .aside-item .aside-header{
    display:flex;
    padding:1rem 1rem 0;
}
.aside-content .aside-item .aside-header .header-title{
    font-size:1rem;
    font-weight:600;
    flex-grow:1;
}
.aside-content .aside-item .aside-header .header-btn{
    display:flex;
    gap:.5rem;
}
.aside-content .aside-item .aside-header .header-btn a,
.aside-content .aside-item .aside-header .header-btn button{
    display: flex;
    cursor: pointer;
    color: #333;
    padding-top: 0px;
    align-items: center;
}
.aside-content .aside-item .aside-header .header-btn a i,
.aside-content .aside-item .aside-header .header-btn button i{
    vertical-align: -3px;
}
.aside-content .aside-item .aside-header .header-btn a:hover,
.aside-content .aside-item .aside-header .header-btn button:hover{
    filter:brightness(1.2);
}
.aside-content .aside-item .aside-body{
    padding:1rem;
}

/*===== MEDIA QUERIES : DESKTOP =====*/
@media screen and (min-width:768px){
    /*===== [서브] 축제 순위 =====*/  
    #event-content{
        width:100%;
    }
    #event-content #event-header .header-title{
        font-size:1.5rem;
    }

    /*===== [서브] 축제 순위 리스트 =====*/
    .event-table-list .table-list-body .table-row{
        flex-direction:row;
    }
    .event-table-list .table-row .table-th,
    .event-table-list .table-row .table-td{
        text-align:left;
        font-size:1rem;
        word-break:keep-all;
    }
    .event-table-list .table-row .table-th:first-child,
    .event-table-list .table-row .table-td:first-child{
		text-align:left;
    }
    .event-table-list .table-row .table-th:nth-child(2),
    .event-table-list .table-row .table-td:nth-child(2){
		text-align:center;
		width:150px;
        min-width:150px;
        flex:0 0 auto;
    }
    .event-table-list .table-row .table-th:nth-child(3),
    .event-table-list .table-row .table-td:nth-child(3){
        text-align:center;
        width:100px;
        min-width:100px;
        flex:0 0 auto;
    }
    .event-table-list .table-row .table-th:nth-child(4),
    .event-table-list .table-row .table-td:nth-child(4){
        text-align:center;
        width:90px;
        min-width:90px;
        flex:0 0 auto;
    }

    /*===== [서브] 축제 순위 리스트 : 1 =====*/
    .event-table-list .table-row .table-td .td-item{
        flex-direction:row;
    }
    .event-table-list .table-row .table-td .td-item .rank-num{
        flex:0 0 34px;
        padding-right:.5rem;
        font-size:1rem;
        text-align:center;
    }
    /*===== [서브] 축제 순위 리스트 : 2 =====*/
    .event-table-list .table-row .table-td .rank-title > a{
        display:flex;
        flex-direction:row;
        align-items:center;
    }
    .event-table-list .table-row .table-td .rank-title > a .rank-thumb{
        margin-right:1rem;
        width:150px; height:95px;
        margin-bottom:0;
    }
    .event-table-list .table-row .table-td .rank-title > a .rank-title{
        font-size:1rem;
    }
}

/*===== MEDIA QUERIES : WIDE DESKTOP =====*/
@media screen and (min-width:992px){
    /*===== SUB SECTION =====*/
    .sub-section{
        margin-bottom:3.5rem;
    }
    .sub-section-header{
        margin-bottom:2rem;
    }
    .sub-section .section-item{
        margin-bottom:3.5rem;
    }
    .sub-section .section-item .item-header{
        font-size:1.2rem;
    }
	
    /*===== [서브] 축제 순위 =====*/    
    #event-container{
        flex-direction:row;
    }
    #event-content{
        flex:0 0 auto;
        width:80%;
        padding:0 1rem;
    }

    /*===== [서브] 축제 순위 리스트 =====*/
    .event-table-list .table-row .table-th:first-child,
    .event-table-list .table-row .table-td:first-child{
    }
	.event-table-list .table-row .table-th:nth-child(2),
    .event-table-list .table-row .table-td:nth-child(2){
		width:150px;
        min-width:150px;
        flex:0 0 auto;
    }
    .event-table-list .table-row .table-th:nth-child(3),
    .event-table-list .table-row .table-td:nth-child(3){
        width:100px;
        min-width:100px;
        flex:0 0 auto;
    }
    .event-table-list .table-row .table-th:nth-child(4),
    .event-table-list .table-row .table-td:nth-child(4){
        width:100px;
        min-width:100px;
        flex:0 0 auto;
    }

    /*===== [서브] 축제 순위 리스트 : 2 =====*/
    .event-table-list .table-row .table-td .rank-title > a .rank-thumb{
        width:250px; height:105px;
    }
    .event-table-list .table-row .table-td .rank-title > a .rank-title{
        font-size:1rem;
    }

    /*===== [서브] aside : 기타컨텐츠 =====*/
    .aside-content .aside-item .aside-header{
        padding:2rem 1.5rem 0;
    }
    .aside-content .aside-item .aside-header .header-title{
        font-size:1.2rem;
    }
    .aside-content .aside-item .aside-body{
        padding:1.8rem 1.5rem;
    }
}