@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css");

/*  */
#me_10_1, #me_10_2 { height: 218px; }



/* 湲덉＜�� 異붿쿇 �낅낫 > �섎떒 �щ씪�대뱶 */
#recommandList { padding: 10px 15px; box-sizing: border-box; width: 766px; height: 94px; background: url(https://www.pianoheart.co.kr/home/img/index_newbg_tx.jpg); }
#recommandList * { box-sizing: border-box; }
/*  */
#recommandList .swiper { width: 100%; height: 100%; }
#recommandList .swiper-slide { text-align: center; font-size: 18px; display: flex; align-items: center; gap: 5px; transition: all .3s; width: 242px; }
#recommandList .swiper-slide:hover { text-decoration: none; }
#recommandList .swiper-slide .thumb { width: 118px; }													
#recommandList .swiper-slide .detailInfo { flex-grow:1; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#recommandList .swiper-slide .detailInfo .title { font-size: 11px; color: white; font-weight: 700; height: 26px; overflow: hidden; }
#recommandList .swiper-slide .detailInfo .artist { font-size: 11px; color: #bcbcbc; font-weight :400; height: 13px; overflow: hidden; }
#recommandList .swiper-slide .detailInfo .date { font-size: 11px; color: #7d7d7d; }

/* #recommandList .swiper { width: 100%; height: 100%; } */
#recommandList:hover .swiper-slide { opacity: 0.3; }
#recommandList:hover .swiper-slide:hover { opacity: 1; }





/* �λⅤ蹂� �낅낫 �щ씪�대뱶 */

#genreList { box-sizing: border-box; background-color: #e5e6eb; height: 293px; border: 1px solid #a4a7b0; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 15px; }
#genreList * { box-sizing: border-box; font-family: 'Pretendard'; }
#genreList .genreNav { display: flex; flex-direction: row; height: 20px; align-items: center; justify-content: flex-start; gap: 15px; }
#genreList .genreNav .navTitle { color: #0e446f; font-size: 16px; font-weight: bold; width: 75px; }
#genreList .genreNav .navWrap { display: flex; flex-direction: row; height: 20px; align-items: center; justify-content: flex-start; gap: 8px; flex-grow: 1; }
#genreList .genreNav .navWrap .navItem { color: #333; font-weight: 500; }
#genreList .genreNav .navWrap .navItem:hover { text-decoration: none; }
#genreList .genreNav .navWrap .navItem.on { font-weight: bold; color: black; }
#genreList .genreNav .navButtons { display: flex; flex-direction: row; height: 20px; align-items: center; justify-content: flex-end; gap: 8px; width: 50px; }
#genreList .genreNav .navButtons .btn { cursor: pointer; }


#genreList .genreBody { width: 736px; display: flex; flex-direction: row;  }
#genreList .genreBody .btn { height: 236px; width: 50px; font-family: "Font Awesome 6 Free"; display: flex; align-items: center; justify-content: center; font-size: 40px; padding-bottom: 48px; color: #333; }
#genreList .genreBody .btn:hover { text-decoration: none;}
#genreList .genreBody .btn * { font-family: "Font Awesome 6 Free"; }
#genreList .genreBody .swiper { width: 730px; height: 100%; }
#genreList .genreBody .swiper-slide { text-align: center; font-size: 18px; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .3s; width: 190px; }
#genreList .genreBody .swiper-slide:hover { text-decoration: none; }
#genreList .genreBody .swiper-slide .thumb { width: 190px; height: 190px; object-fit: cover; }
#genreList .genreBody .swiper-slide .detailInfo { text-align: center; display: flex; flex-direction: column; gap: 5px; width: 100%; }
#genreList .genreBody .swiper-slide .detailInfo .title { text-align: center; font-size: 16px; color: black; height: 20px; font-weight: 700; overflow: hidden; }
#genreList .genreBody .swiper-slide .detailInfo .artist { text-align: center; font-size: 13px; color: #808080; height: 16px; font-weight: 300; overflow: hidden; }
#genreList .genreBody .swiper:hover .swiper-slide { opacity: 0.3; }
#genreList .genreBody .swiper:hover .swiper-slide:hover { opacity: 1; }
#genreSample { display: none; }




/* �� �곗＜ �щ━湲� �곸뿭 */
#myPlaying { display: flex; flex-direction: row; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; margin-bottom: 20px; }
#myPlaying .leftAdArea { width: 242px; border-right: 1px solid #d7d7d7; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
#myPlaying .myPlayingBody { padding: 10px; width: 495px; display: flex; flex-direction: column; gap: 10px; flex-wrap: wrap; }
#myPlaying .myPlayingBody .myPlayingTitle { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
#myPlaying .myPlayingBody .myPlayingWrap { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }
#myPlaying .myPlayingBody .myPlayingWrap .myPlayingItem { display: flex; flex-direction: column; gap: 2px; width: 158px; }
#myPlaying .myPlayingBody .myPlayingWrap .myPlayingItem:hover { color: #666; }
#myPlaying .myPlayingBody .myPlayingWrap .myPlayingItem .thumb { width: 158px; height: 78px; object-fit: cover; }
#myPlaying .myPlayingBody .myPlayingWrap .myPlayingItem .name { height: 14px; overflow: hidden; }
#myPlaying .myPlayingBody .myPlayingWrap .myPlayingItem .title { height: 14px; overflow: hidden; font-weight: bold; color: #333; }
#myPlaying .rightAdArea { width: 242px; border-left: 1px solid #d7d7d7; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }





/* �꾩껜怨� 蹂닿린 �곸뿭 */
#allSongs { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; width: 100%; border: 1px solid #d3d3d3; background-color: #f3f3f3; box-sizing: border-box; padding: 20px; gap: 3px 20px; margin-bottom: 50px; }
#allSongs .allSongItem { display: block; width: 306px; padding: 5px; box-sizing: border-box; color: #666; }
#allSongs .allSongItem:hover { color: #999; }