@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

#top10_wrap {
    clear:both;
    display:block;
    width:286px;
}

#top10_wrap .genre_title{
    /*영어 타이틀*/
    display:block;
    font-size:16px;        
    font-family: 'Raleway', sans-serif;
    letter-spacing: 1px;
    padding:10px 0;
    text-align:right;
}

#top10_wrap .genre_title div{
    /*한글 서브 타이틀*/
    font-size:12px;                
    font-family:  'Malgun Gothic', 'Nanum Gothic', 'Century Gothic';        
    color:gray;
    letter-spacing: 0px;
    padding:5px 0;        
}


.top10_tab > span {
    /*탭 타이틀 */
    display:inline-block;
    position:relative;            
    padding:10px 5px;
    width:84px;
    margin-left:1px;
    margin-bottom:10px;
    text-align:right;
    font-family: 'Century Gothic', Tahoma, 'Malgun Gothic', 'Nanum Gothic';
    font-size:10px !important;
    letter-spacing: 2px;
    color:white;
    cursor:pointer;        
}
    .top10_tab > span:hover {
        opacity:1.0
    }

/*---------------------- */    

.top10_body {            
    font-family: 'Nanum Gothic', Tahoma, 'Malgun Gothic';
    cursor:pointer;
}
    .top10_body > div {
        display:block;
        height:90px;
    }
    .top10_body > div > span:first-child {
        position:relative;
        float:left;
        /* display:inline-block;         */
        padding:0 5px;
        text-align:center;                
    }
    .top10_body > div > span > img {
        display:inline-block;
        height:80px;
        width:80px;
        border:1px solid lightgray;            
}
    
/*---------------------- */

.top10_content{
    position:relative;
    float:left;
    top:-5px;
    width:180px;
    height:80px;
    padding:5px;
    border-bottom: 1px dotted lightgray;
    transition: background 0.5s ease-in-out;
    border-radius: 5px;
}

    .top10_content:hover {
        background:#f6f0f0;        
    }

    .top10_content > span {
        display: inline-block;
        width:180px;    
        font-family: 'Didact Gothic', 'Nanum Gothic', sans-serif;    
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
    }

.top10_title {
    display:inline-block;        
    font-size:11px;
    letter-spacing: 0.5px;
}

.top10_singer {        
    color: gray;
}

.top10_origin {
    color:darkgray;
}

.top10_price {            
    font-size: 11px;

}

.top10_content .top10_preorder {    
    position: relative;    
    display: inline-block;    
    font-size:8px;    
    color:white;
    letter-spacing: 1px;    
    background:darkgray;  
    padding: 1px 4px 1px 3px;  
    margin: 0;
    border-radius: 2px;
}

/*---------------------- */

.top_artist {
    display:inline-block;
    width:180px;    
    padding: 0;
    position:relative;
    top:0px;
    left:5px;
}

    .top_artist b:hover{
        text-decoration: underline;
    }
    
.top_artist_pic{
    width:80px;
    height:80px;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:0.8;
    -moz-filter: grayscale(100%); 
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(100%); 
    -o-transition: .5s ease-in-out;
    -webkit-filter: grayscale(100%);filter: gray;
    -webkit-transition: .5s ease-in-out;
}

    .top_artist_pic:hover{
        opacity: 1.0;
        -moz-filter: grayscale(0%);
        -moz-transition: .5s ease-in-out;
        -o-filter: grayscale(0%);
        -o-transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
        -webkit-filter: grayscale(0%);filter: none;    
    }

.tab_selected {        
    color:yellow;           
}

.sale_tag {
    position:relative;        
    bottom:3px;
    color:crimson;        
    font-size:9px;        
    font-family:Tahoma, Verdana,'Nanum Gothic', sans-serif;
    letter-spacing:1.5px;
    text-decoration:underline;
    font-style:italic;
}
         
.top-artist-name {
    display:inline-block;
    margin-left: 4px;
    font-family: 'Didact Gothic', 'Nanum Gothic', sans-serif;
    font-size:11px;
    letter-spacing:0.7px;
    text-transform:uppercase;
    line-height: 1.5em; 
    padding-bottom: 3px;    
}

.top-artist-name:hover{
    color: blue;
}

.go_to_page{
    display: inline-block;
    width: 100%;
    position:relative;
    font-size:10px;
    font-family: 'Nanum Gothic', 'Didact Gothic', sans-serif;    
    color:gray;
    border-top: 1px solid lightgray;
    padding: 5px;
    letter-spacing:0.7px;
}