@charset "utf-8";
/*-----------------------------------------------
 * 01. First view
 * 02. Top contents
 * 03. News
 * 04. Account
 * 05. Artist
 * 06. Cast / Staff
 * 07. Streaming
-------------------------------------------------*/
.topMain{
    width: 100%;
}
@media screen and (max-width:768px){
	.topMain{
		margin: 0;
	}
}
/*-----------------------------------------------
 * 01. First view
-------------------------------------------------*/
.mainLists{
    width: 100%;
    margin-top: 128px;
    overflow: hidden;
}
.mainLists__item{
    position: relative;
    overflow: hidden;
}
.mainLists__item:nth-child(1) {
    width: 66.7%;
    padding-top: 37.5%;
    float: left;
}
.mainLists__item:nth-child(n+2){
    width: 33.3%;
    padding-top: 18.75%;
    float: left;
}
.mainLists__item a{
    display: block;
    text-decoration: none;
    transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.mainLists__item a:hover .mainLists__title{
    color: #c83c34;
}
.mainLists__item a:hover .News__lists__thumb{
    transform: scale(1.1);
}
.mainLists__txt{
    width: 100%;
    height: 200px;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 88px 40px 24px;
    background-image: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,.8), rgba(0,0,0,0));
    z-index: 1;
}
.mainLists__dateWrap{
    height: 24px;
    display: flex;
    align-items: center;
}
.mainLists__dateWrap:after{
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.4);
    display: flex;
    align-items: center;
}
.mainLists__date{
    height: 100%;
    font-size: 16px;
    color: #fff;
    margin: 0 16px 0 0;
    display: flex;
    align-items: center;
}
.articleMain .mainLists__dateWrap{
    margin-top: 44px;
}
.articleMain .mainLists__dateWrap:after{
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,1);
    display: flex;
    align-items: center;
}
.articleMain .mainLists__date{
    height: 24px;
    font-size: 16px;
    color: #000;
    margin: 0 16px 0 0;
}
.articleMain .post-categories li{
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 12px;
    margin: 0 0 0 16px;
    background: #c83c34;
    white-space: nowrap;
}
.articleMain .post-categories li a{
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 0 6px;
    border: #c83c34 2px solid;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}
.articleMain .post-categories li a:hover{
    height: 100%;
    width: 100%;
    padding: 0 6px;
    color: #fff;
    background: #8e2a24;
    border: #8e2a24 2px solid;
    box-sizing: border-box;
    opacity: 1;
}
.articleMain .post-categories :after{
    content: none;
}
.topNews__lists__tagLists{
    height: 100%;
    display: flex;
    margin-left: auto;
    order: 1;
}
.topNews__lists__tagLists li{
    width: 100%;
    height: 100%;
    color: #000;
    font-size: 12px;
    white-space: nowrap;
}

.post-categories{
    height: 100%;
    display: flex;
    order: 1;
    padding: 0 !important;
    background: none !important;
}
.post-categories li {
    background: #fff;
    margin-left: 16px;
}

.topNews__lists__tagLists li a{
    height: 100%;
    width: 100%;
    padding: 0 8px;
    transition: all .3s ease-in-out;
}
.topNews__lists__tagLists li a:hover{
    height: 100%;
    width: 100%;
    padding: 0 8px;
    color: #fff;
    background: #c83c34;
}
.mainLists__title{
    height: 64px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease-in-out;
}
.News__lists__thumb{
    width: 100%;
    height: 100%;
    background: #444 no-repeat center top / cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width:768px){
    .mainLists{
        margin-top: 48px;
    }
    .mainLists__item:nth-child(1) {
        width: 100%;
        padding-top: 56.25%;
    }
    .mainLists__item:nth-child(n+2){
        width: 100%;
        padding-top: 56.25%;
    }
    .mainLists__txt{
        height: 144px;
        padding: 44px 24px 24px;
    }
    .mainLists__date{
        font-size: 12px;
        margin-right: 12px;
    }
    .mainLists__dateWrap{
        height: 24px;
    }
    .mainLists__date{
        font-size: 12px;
        margin-right: 12px;
    }
    .topNews__lists__tagLists li{
        display: flex;
        align-items: center;
    }
    .mainLists__date{
        font-size: 12px;
        margin-right: 12px;
    }
    .articleMain .post-categories li{
        font-size: 12px;
        margin-left: 12px;
    }
    .topNews__lists__tagLists li a{
        height: 24px;
        padding: 0 8px;
    }
    .topNews__lists__tagLists li a:hover{
        height: 24px;
        padding: 0 8px;
    }
    .mainLists__title{
        height: 48px;
        margin-top: 8px;
        font-size: 12px;
    }
}
/*-----------------------------------------------
 * 02. Ranking
-------------------------------------------------*/
.topRanking{
    margin-top: 74px;
}
.topNews{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.topNews__item{
    width: 33.3%;
    padding-top: 18.75%;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.topNews__item:nth-child(3n+2){
    width: 33.4%;
}
.topNews__item a{
    display: block;
    text-decoration: none;
    transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.topNews__item a:hover .mainLists__title{
    color: #c83c34;
}
.topNews__item a:hover .News__lists__thumb{
    transform: scale(1.1);
}
.rank:before{
    pointer-events: none;
}
.rank:nth-child(1):before{
    content: "01";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(200,60,52,.9);
    background: linear-gradient(-45deg, transparent 16px, rgba(200,60,52,.9) 0) bottom right;
    background-repeat: no-repeat;
}
.rank:nth-child(2):before{
    content: "02";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(200,60,52,.9);
    background: linear-gradient(-45deg, transparent 16px, rgba(200,60,52,.9) 0) bottom right;
    background-repeat: no-repeat;
}
.rank:nth-child(3):before{
    content: "03";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(200,60,52,.9);
    background: linear-gradient(-45deg, transparent 16px, rgba(200,60,52,.9) 0) bottom right;
    background-repeat: no-repeat;
}
.rank:nth-child(4):before{
    content: "04";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(0,0,0,.8);
    background: linear-gradient(-45deg, transparent 16px, rgba(0,0,0,.8) 0) bottom right;
    background-repeat: no-repeat;
}
.rank:nth-child(5):before{
    content: "05";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(0,0,0,.8);
    background: linear-gradient(-45deg, transparent 16px, rgba(0,0,0,.8) 0) bottom right;
    background-repeat: no-repeat;
}
.rank:nth-child(6):before{
    content: "06";
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-family: 'DIN Condensed', sans-serif;
    color: #fff;
    background: rgba(0,0,0,.8);
    background: linear-gradient(-45deg, transparent 16px, rgba(0,0,0,.8) 0) bottom right;
    background-repeat: no-repeat;
}
@media screen and (max-width:768px){
    .topRanking{
        margin-top:  48px;
    }
    .topNews__item{
        width: 100%;
        padding-top: 56.25%;
    }
    .topNews__item:nth-child(3n+2){
        width: 100%;
    }
    .rank:before{
        transform: scale(0.6);
        margin: -16px 0 0 -16px;
    }
}
/*-----------------------------------------------
 * 03. Pickup
-------------------------------------------------*/
.topPickup{
    margin-top: 74px;
}
@media screen and (max-width:768px){
    .topPickup{
        margin-top: 48px;
    }
}
/*-----------------------------------------------
 * 04. Recent
-------------------------------------------------*/
.topRecent{
    margin-top: 74px;
}
.moreLinks {
    margin: 40px 80px 0;
    font-size: 16px;
}
.moreLinks a{
    width: 100%;
    height: 64px;
    text-decoration: none;
    color: #fff;
    background: #c83c34;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
}
.moreLinks a:hover{
    background: #8e2a24;
}
.moreLinks a span{
    height: 24px;
    width: 24px;
    background: url(../img/common/icon_logo.svg) no-repeat left center / 24px 24px;
    filter: invert(1);
    margin-left: 16px;
    transition: all .3s ease-in-out;
}
.moreLinks a:hover span{
    filter: invert(1);
}
@media screen and (max-width:768px){
    .topRecent{
        margin-top: 48px;
    }
    .moreLinks {
        margin: 24px 24px 0;
    }
}