/* 초기화 */ @import url('https://fonts.font.im/css?family=Roboto:400,500,700'); ::selection { background-color: #000; color: #fff; } ::-webkit-scrollbar{ width:4px;height:10px; border-radius:50px;} ::-webkit-scrollbar-track{border-radius:50px;} ::-webkit-scrollbar-thumb{background:#1E1E1E;border-radius:50px; } ::-webkit-scrollbar-thumb:hover{background:#1E1E1E;} ::-webkit-scrollbar-thumb:active{background:#1E1E1E;} ::-webkit-scrollbar-button { display: none; } input[type=text]:focus,input[type=password]:focus, textarea:focus ,textarea#wr_content:focus,input[type=search]:focus { outline: none !important;} @-webkit-keyframes loading { to { background-position-x: -3480px } } @keyframes loading { to { background-position-x: -3480px } } @-webkit-keyframes playing50 { 0% { background-position-x: 0 } to { background-position-x: -3000px } } @keyframes playing50 { 0% { background-position-x: 0 } to { background-position-x: -3000px } } table { border-collapse: collapse; } address, em { font-style: normal; } #bg_album { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 100vh; -webkit-filter: blur(100px); filter: blur(100px); background-repeat: no-repeat; background-position: 50%; background-size: 100%; opacity: .2; will-change: transform; } button#play-pause { width: 36px; } body { margin: 0; padding: 0; font-family: 'Pretendard',sans-serif; background-color: #000; } #music-player { z-index: 999999; position: fixed;height:70px; bottom: 0; width: 100%; background-color:#0e0e0e; color: white; padding: 10px 20px; justify-content: center; display: flex; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.5); } .player-controls { display: flex; align-items: center; position: absolute; } .player-controls button {display: flex ; background: none; border: none; color: white; font-size: 24px; cursor: pointer; margin: 0 10px; position: relative; align-items: center; justify-content: center;} .track-info { flex-grow: 1; text-align: center; display: flex; align-items: center; gap: 10px;} .track-info .track_info_txt { display: flex; min-width: 200px; text-align: left; flex-direction: column; justify-content: center;} .track-info img#album-art { width: 50px; height: 50px; } .track-info .track-title { font-size: 16px; font-size: 16px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; max-width: 100%; font-size: 14px; line-height: 16px; vertical-align: top; font-weight: 700;} .track-info .track-artist { font-size: 12px; color: gray; font-size: 16px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; max-width: 100%; font-size: 14px; line-height: 16px; vertical-align: top; font-weight: 700;} .progress-bar { display: flex; align-items: flex-start; width: 100%; position: absolute; top:0; left: 0; transition:all .3s;} .progress { width: 100%; height: 3px; cursor: pointer; position: relative; transition:all .3s; } .player-controls button#repeat-track >span { position: absolute; font-size: 12px; top: 13px; right: 0px; } .progress-bar:hover {background: #00000063; height: 20px;} .progress-bar:hover .progress{height:15px} .player-controls button#repeat-track.repeat-all:after { content: ""; display: inline-block; height: 22px; vertical-align: top; width: 22px; background-image: url(../img/play.svg);background-position: -64px -4px;} .player-controls button#repeat-track.repeat-one:after { content: ""; display: inline-block; height: 22px; vertical-align: top; width: 22px; background-image: url(../img/play.svg);background-position: -64px -30px;} .player-controls button#repeat-track.repeat-none:after { content: ""; display: inline-block; height: 22px; vertical-align: top; width: 22px; background-image: url(../img/play.svg);background-position: -64px -58px;} .player-controls button#shuffle-track:after { content: ""; display: inline-block; height: 22px; vertical-align: top; width: 22px; background-image: url(../img/play.svg);background-position: -94px -4px;} .player-controls button#shuffle-track.shuffle-on:after { background-position: -94px -30px;} .player-controls button#shuffle-track >span { position: absolute; font-size: 12px; top: 13px;right: -12px;} .progress-filled { background: #ff0066; height: 100%; width: 0; } .time { font-size: 12px; margin: 0 4px;position: relative; color: #c2c2c2;} span#current-time{color: #747474;} #play_view {display: flex;position: fixed; top: 0; right: 0; bottom: 81px; left: 0; z-index: 10200; visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: visibility .3s, -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: visibility .3s, -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: visibility .3s, transform .3s cubic-bezier(.4,0,.2,1); transition: visibility .3s, transform .3s cubic-bezier(.4,0,.2,1), -webkit-transform .3s cubic-bezier(.4,0,.2,1); -webkit-overflow-scrolling: touch;background: #111; } #play_view.active{visibility: visible; -webkit-transform: translateZ(0); transform: translateZ(0);} #play_view .album_img_show { width: 100%;display: flex; align-items: center; justify-content: center;z-index: 9; } #play_view .album_img_show img{width: 100%; max-width: 500px;border-radius: 10px;} #play_view ul#playlist { min-width: 350px; padding: 0; margin: 0;z-index: 9;overflow-x: hidden; height: 100%; padding-bottom: 40px;} #play_view #playlist li { padding: 8px 0; color: #fff; cursor: pointer; transition: background-color 0.3s;display: flex; align-items: center; justify-content: space-between; } #play_view #playlist li{} @media (max-width:600px){ #play_view .album_img_show{display: none;} .player-controls { margin-left: 75px;} .track-info .track_info_txt { min-width: auto; text-align: left; max-width: 120px; } } a{cursor: pointer !important;} .title_area { z-index: 9; } .title_area h2 { font-size: 16px; color: #ddd; padding: 12px 10px;} #play_view #playlist li .list_ab { display: flex; width:100%} #play_view #playlist li .list_ab .thumb{margin: 0 12px 0 20px;position: relative;} #play_view #playlist li .list_ab .thumb:before { display: none; background-color: rgba(0, 0, 0, .8); content: "";position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #play_view #playlist li .list_ab .thumb:after { visibility: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; } #play_view #playlist li.active .list_ab .thumb:before { display: block; } #play_view #playlist li.active .list_ab .thumb:after { visibility: visible; width: 50px; height: 50px; margin: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAF3AAAABkCAMAAADutJW8AAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMAIMDwoEAPkGCwMOBQ0HCABxUbmj1peSe5Le02illJqejOyNgs65XnAAAQSUlEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGD24EAAAAAAAMj/tRFUVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYU9OBAAAAAAAPJ/bQRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWHvXHfTBoIovCZgLjHgNQZDuSRpeP9n7E7qatS6gaj2MTvu+X5FSNEnY3t2LrsJIYQQQgghhBBzFItA5aBMZoGzg7IaBza5A6Hf1cERQgghhBBCCCHkgaRJoHC/Y7DPUE0CpSOEDJk8FdxvWAwm53Vghw2K61FgnzqlSAJpl46Xp8A375RyEqi6dIyuQuGU8yxQdu9IGp/bdBQOyXQZ+J46JOXPAQgh5L9CYzuOahEoHCGEEEIIiZahNKo/q89t9hlgDu0tvXqHZDYNnLgJMhp840Uv5BOPbS5dskCnt2jbCCbbVeDihC4bcW+pfpCfpoFZl479VfD6QfoyD+ycAwaT9G0ZmEId/irMoY7iKux7cIygjqQHh399CrxAHfluHcigDqcTKkuLbR+O+YfD/oLukwDbhxFzWAS8Q5JvxoGtAwBboxRcbFfurVH2vqt0PwqcHIT7OVzMQ5bP8nZrDkIIIX/CuBtLbcBGNR0BOh747G6eA++pa2Jrk/CvL2t4DUU66KBj+A74IEebMjCHJtW5zcXW/oKup2VwLLLAxf05FC4dkvT7MnByHZKnArbB6xeBCtuoPuj9gDkuq8AW6NChF9SxmwdegA49WQR1jJ8FD3Popomm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); background-size: 3000px 50px; -webkit-animation: playing50 2s steps(60) infinite; animation: playing50 2s steps(60) infinite; } #volume-slider { -webkit-appearance: none; /* 기본 스타일 없애기 */ width: 80px; height: 3px; background: #4b4b4b; border-radius: 5px; outline: none; transition: background 0.3s; /* 커서 */ cursor: pointer; } /* 슬라이더 바 (progress 부분 색) */ #volume-slider::-webkit-slider-runnable-track { height: 3px; background: #4b4b4b; border-radius: 5px; } /* 슬라이더 핸들 (동그란 버튼) */ #volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #ff0066; margin-top: -4px; /* 중앙 정렬 위해 */ transition: background 0.3s; } /* 마우스 올렸을 때 */ #volume-slider:hover::-webkit-slider-thumb { background: #cc0055; } /* Firefox 대응 */ #volume-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ff0066; border: none; } #volume-slider::-moz-range-track { height: 6px; background: #ddd; border-radius: 5px; } /* IE 대응 (거의 안 씀) */ #volume-slider::-ms-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ff0066; border: none; } #volume-slider::-ms-track { height: 6px; background: transparent; border-color: transparent; color: transparent; } #play_view #playlist li .list_ab .thumb img{width: 50px;} #play_view #playlist li .list_ab .info{display: flex; flex-direction: column;max-width: 220px;} #play_view #playlist li .list_ab .info em{ font-style: normal;overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; height: 22px; line-height: 22px; color: #dfdfdf;} #play_view #playlist li .list_ab .info span{overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; height: 17px; font-size: 13px; line-height: 17px; color: #737373;} #play_view #playlist li.active { background-color:hsla(0,0%,100%,.07); color: white; } #play_view #playlist li:hover { background-color:hsla(0,0%,100%,.07); } html *{user-select: none;} html.body-lock { overflow: hidden; height: 100%; -webkit-overflow-scrolling: auto; } .volume-control { display: flex; align-items: center; margin-left: 10px; } .volume-control input { width: 100px; margin-left: 5px; height: 3px; } .play_list_onoff { display: flex; align-items: center; } button#play_onoff { background: none; border: none; color: white; font-size: 24px; cursor: pointer; margin: 0 10px;display: flex; } button#play_onoff:after { background-position: -4px -30px; content: ""; display: inline-block; height: 24px; vertical-align: middle; width: 24px; background-image: url(../img/play.svg); margin-top: 1px;} #playlist button#play_onoff:hover:after{ background-position: -4px -58px; } #playlist button.delete-button { background: none; border: 0; font-size: 20px; color: #fff; border-radius: 5px; margin-right: 10px; width: 30px; height: 30px;} #playlist button.delete-button:after { width: 30px; height: 30px; background-image: url(../img/play.svg); background-position: -160px -0px; content: ""; display: inline-block;opacity: .3; } li:hover button.delete-button:after{opacity:1} #playlist button.drag-handle{background: none;display:none; border: 0; font-size: 20px; color: #fff; border-radius: 5px; margin-right: 20px; width: 30px; height: 30px;} #playlist button.drag-handle:after { content: ""; background-image: url(../img/play.svg); background-position: -198px 7px; display: inline-block; height: 30px; vertical-align: top; width: 30px; } .now:after { display: inline-block; margin: 0 2px; font-weight: 700; color: #747474; content: "/"; position: absolute; right: -10px; top: 0px; } .body-lock button#play_onoff:after { background-position: -4px -4px; } @media (max-width:600px){ .volume-control,.timer ,img#album-art,button#repeat-track,button#shuffle-track {display:none} .title_area { width: 100%;} #playlist button.drag-handle{display:block} } /* .warp{ background: #000; color: #fff;display: flex; } .warp .nav_get{border-right: 1px solid #242424;height: 100vh;position: fixed;} .warp .nav_get nav{width: 230px; box-sizing: border-box;} .warp .nav_get nav ul{display: flex;flex-direction: column;gap: 10px;} .warp .nav_get nav ul li{} .warp .nav_get nav ul li a{ color: #fff;display: flex; align-items: center;padding: 4px 0;font-size: 16px;} */ .warp .content{width:calc(100% - 237px ) ; margin-left: 237px;padding:0 20px;} @media (min-width: 1921px){ .warp .content { max-width: 1920px; margin: 0 auto; } .warp { padding-left: 220px;} } .warp .content div#content-section { position: relative;width: auto; margin: 0 75px; padding-bottom: 75px;} .head_title{padding: 50px 0 40px;border-bottom: 1px solid hsla(0, 0%, 100%, .1);} .btn_play_now.on:hover:after, .btn_play_now:after, .info .rank .down, .info .rank .up, .btn_add_my:after, .ly_option .ly_item.edt:before, .slick-next:after, .slick-prev:after, .ly_option .ly_item.delt:before, .ly_option .ly_item.add:before, .list_item .dropdown_wrap .btn_option_now:after, .ly_option .ly_item.hot:before, .sort_order .item_wrap .item:before, .sort_order .item[aria-checked=true]:before { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px } .VueCarousel-navigation-prev:after { background-position: -785px -448px; width: 10px; height: 14px; position: absolute; top: 50%; right: 18px; margin-top: -7px; content: ""; } .VueCarousel-navigation-next:after { background-position: -785px -404px; width: 10px; height: 14px; position: absolute; top: 50%; left: 18px; margin-top: -7px; content: ""; } .blind { overflow: hidden; position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; } .slick-track { display: flex!important ; gap: 20px; } /* 이미지 배경 */ .track_section .select_all .check_area .input_check, .track_section .select_all.selected .check_area .input_check, .tracklist .download .btn_download:after, .tracklist .lyrics .btn_lyrics:after, .tracklist .mp3 .link_buy_mp3:after, .tracklist .only_streaming .input_check, .tracklist .rank .down, .tracklist .rank .up, .tracklist .select .input_check, .tracklist tbody tr.selected .input_check { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)), url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent, transparent), url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px; } .arrange_order .btn_arrange:after, .arrange_order .ly_item.checked:after, .badge_19:after, .badge_hit:after, .badge_title:after, .floating_play_with_mp3 .btn_add.on:before, .floating_play_with_mp3 .btn_add:before, .floating_play_with_mp3 .btn_like.on:before, .floating_play_with_mp3 .btn_like:before, .floating_play_with_mp3 .btn_play:before, .floating_play_with_mp3 .btn_shuffle:before, .floating_play_with_mp3.disabled .more_option .btn_add.on:before, .floating_play_with_mp3.disabled .more_option .btn_add:before, .floating_play_with_mp3.disabled .more_option .btn_like.on:before, .floating_play_with_mp3.disabled .more_option .btn_like:before, .floating_play_with_mp3.disabled .more_option .btn_option:before, .icon_naverplus:after, .icon_naverplus:before, .library_menu .VueCarousel-navigation-next:after, .library_menu .VueCarousel-navigation-prev:after, .ly_popup .ly_close:after, .num .icon_play:after, .option_area .btn_add.on:before, .option_area .btn_add:before, .option_area .btn_like.dark.on:after, .option_area .btn_like.dark:after, .option_area .btn_like.on:after, .option_area .btn_like:after, .option_area .btn_play:before, .option_area .btn_shuffle:before, .page_default .btn_add:before, .page_default .text.album:before, .page_default .text.basis:before, .page_default .text.playlist:before, .page_default .text.track:before, .play_control_area .btn_play_last:before, .play_control_area .btn_play_next:before, .play_with_mp3 .btn_add.on:before, .play_with_mp3 .btn_add:before, .play_with_mp3 .btn_like.on:before, .play_with_mp3 .btn_like:before, .play_with_mp3 .btn_play:before, .play_with_mp3 .btn_shuffle:before, .play_with_mp3.disabled .more_option .btn_add.on:before, .play_with_mp3.disabled .more_option .btn_add:before, .play_with_mp3.disabled .more_option .btn_like.on:before, .play_with_mp3.disabled .more_option .btn_like:before, .play_with_mp3.disabled .more_option .btn_option:before, .section_title.billboard:before, .section_title.billboard_korea:before, .section_title.with_year:after, .sort_order .item[aria-checked=true]:before, .sort_order input:checked+.item:before, .thumb .icon_play:after, .thumb~.icon_play:after, .tooltip .btn_close:before, .tooltip:after, .top_wrap .search_area:before, .window_popup .ly_close:after, html .num .icon_play.on:hover:after, html .thumb .icon_play.on:hover:after, html .thumb~.icon_play.on:hover:after { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)), url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent, transparent), url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px; } .menu_area .btn_close:after,.menu_area .link_about.on:before,.menu_area .link_about:before,.menu_area .link_audio.on:before,.menu_area .link_audio:before,.menu_area .link_chart.on:before,.menu_area .link_chart:before,.menu_area .link_dj.on:before,.menu_area .link_dj:before,.menu_area .link_library.on:before,.menu_area .link_library:before,.menu_area .link_mag.on:before,.menu_area .link_mag:before,.menu_area .link_monthly.on:before,.menu_area .link_monthly:before,.menu_area .link_newalbum.on:before,.menu_area .link_newalbum:before,.menu_area .link_onstage.on:before,.menu_area .link_onstage:before,.menu_area .link_today.on:before,.menu_area .link_today:before,.menu_area .link_wheresmymoney.on:before,.menu_area .link_wheresmymoney .text,.menu_area .link_wheresmymoney:before,.menu_area .membership_mobile .link_nuclearinsider:before,.menu_area .membership_mobile .link_subscribe:before,.menu_area .membership_mobile .membership_desc.no_login:before,.menu_area .membership_mobile .membership_desc.subscribe:before,.menu_area .membership_mobile .membership_desc.unsubscribe:before,.menu_area.on .menu_list .link_about.on:before,.menu_area.on .menu_list .link_about:before,.menu_area.on .menu_list .link_account:before,.menu_area.on .menu_list .link_audio.on:before,.menu_area.on .menu_list .link_audio:before,.menu_area.on .menu_list .link_chart.on:before,.menu_area.on .menu_list .link_chart:before,.menu_area.on .menu_list .link_dj.on:before,.menu_area.on .menu_list .link_dj:before,.menu_area.on .menu_list .link_library.on:before,.menu_area.on .menu_list .link_library:before,.menu_area.on .menu_list .link_login:before,.menu_area.on .menu_list .link_logout:before,.menu_area.on .menu_list .link_mag.on:before,.menu_area.on .menu_list .link_mag:before,.menu_area.on .menu_list .link_monthly.on:before,.menu_area.on .menu_list .link_monthly:before,.menu_area.on .menu_list .link_newalbum.on:before,.menu_area.on .menu_list .link_newalbum:before,.menu_area.on .menu_list .link_notice:before,.menu_area.on .menu_list .link_onstage.on:before,.menu_area.on .menu_list .link_onstage:before,.menu_area.on .menu_list .link_today.on:before,.menu_area.on .menu_list .link_today:before,.menu_area.on .menu_list .link_wheresmymoney.on:before,.menu_area.on .menu_list .link_wheresmymoney:before,.menu_area .profile_mobile .img_wrap .default_thumb,.menu_area .profile_mobile .link_login:before,.white_theme .menu_area,.white_theme .profile_mobile .img_wrap .default_thumb { background-image: url(../img/sp_topbar.4a489408.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_topbar.abb84804.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_topbar.abb84804.svg); background-size: 667px 630px } .option .btn_like:after, .option .btn_option:after { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)), url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent, transparent), url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px; } .menu_area .btn_close:after { display: inline-block; vertical-align: top; content: ""; } .menu_area .menu_list{margin: 24px 0; display: flex ; flex-direction: column;gap: 2px;padding-right:25px; } @media (max-width:767px){.menu_area .menu_list{margin:24px 34px 14px} }.menu_area .menu_item+.menu_item{} .menu_area .menu_item+.menu_item.menu_about{margin-top:24px;padding-top:24px;border-top:1px solid hsla(0,0%,100%,.1)} .menu_area .menu_notice .menu_mobile{display:none} @media (max-width:767px){.menu_area .menu_notice .menu_mobile{display:block} }.menu_area .menu_notice{margin-top:14px;padding-top:26px;border-top:1px solid hsla(0,0%,100%,.1)} .menu_area .menu_item_mobile{} .menu_area .menu_item_mobile+.menu_item_mobile{margin-top:17px} .menu_area ul li a{font-size: 20px;font-weight:bold; line-height: 20px;padding:10px !important;display:flex !important;gap: 8px; align-items: center;} .menu_area ul li a:before{display:none!important} .menu_area .mb_login a{font-size: 20px;font-weight:bold; line-height: 20px;padding:10px !important;display:flex !important;gap: 8px; align-items: center;} .menu_area .link_today{display:block;} .menu_area .link_today:before{background-position:-284px -606px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_today:before{margin-right:10px} } .menu_area .link_today.on:before{background-position:-312px -606px;width:20px;height:20px;opacity:1} html .menu_area .link_today.on:hover{opacity:.8} .menu_area .link_today:hover .text,.menu_area .link_today:hover:before{opacity:1} .menu_area .link_chart{display:block;padding:6px} .menu_area .link_chart:before{background-position:-353px -509px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_chart:before{margin-right:10px} } .menu_area .link_chart.on:before{background-position:-381px -509px;width:20px;height:20px;opacity:1} html .menu_area .link_chart.on:hover{opacity:.8} .menu_area .link_chart:hover .text,.menu_area .link_chart:hover:before{opacity:1} .menu_area .link_newalbum{display:block;padding:6px} .menu_area .link_newalbum:before{background-position:-561px -570px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_newalbum:before{margin-right:10px} } .menu_area .link_newalbum.on:before{background-position:-589px -570px;width:20px;height:20px;opacity:1} html .menu_area .link_newalbum.on:hover{opacity:.8} .menu_area .link_newalbum:hover .text,.menu_area .link_newalbum:hover:before{opacity:1} .menu_area .link_dj{display:block;padding:6px} .menu_area .link_dj:before{background-position:-409px -509px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_dj:before{margin-right:10px} } .menu_area .link_dj.on:before{background-position:-437px -509px;width:20px;height:20px;opacity:1} html .menu_area .link_dj.on:hover{opacity:.8} .menu_area .link_dj:hover .text,.menu_area .link_dj:hover:before{opacity:1} .menu_area .link_mag{display:block;padding:6px} .menu_area .link_mag:before{background-position:-549px -509px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_mag:before{margin-right:10px} } .menu_area .link_mag.on:before{background-position:-577px -509px;width:20px;height:20px;opacity:1} html .menu_area .link_mag.on:hover{opacity:.8} .menu_area .link_mag:hover .text,.menu_area .link_mag:hover:before{opacity:1} .menu_area .link_monthly{display:block;padding:6px} .menu_area .link_monthly:before{background-position:-590px -538px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_monthly:before{margin-right:10px} } .menu_area .link_monthly.on:before{background-position:-533px -570px;width:20px;height:20px;opacity:1} html .menu_area .link_monthly.on:hover{opacity:.8} .menu_area .link_monthly:hover .text,.menu_area .link_monthly:hover:before{opacity:1} .menu_area .link_library{display:flex;padding:6px;align-items: center;} .menu_area .link_library:before{background-position:-493px -509px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_library:before{margin-right:10px} } .menu_area .link_library.on:before{background-position:-521px -509px;width:20px;height:20px;opacity:1} html .menu_area .link_library.on:hover{opacity:.8} .menu_area .link_library:hover .text,.menu_area .link_library:hover:before{opacity:1} .menu_area .link_about{display:block;padding:6px} .menu_area .link_about:before{background-position:-393px -279px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_about:before{margin-right:10px} } .menu_area .link_about.on:before{background-position:-387px -319px;width:20px;height:20px;opacity:1} html .menu_area .link_about.on:hover{opacity:.8} .menu_area .link_about:hover .text,.menu_area .link_about:hover:before{opacity:1} .menu_area .link_wheresmymoney{display:block;padding:6px} .menu_area .link_wheresmymoney:before{background-position:-340px -606px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_wheresmymoney:before{margin-right:10px} } .menu_area .link_wheresmymoney.on:before{background-position:-368px -606px;width:20px;height:20px;opacity:1} html .menu_area .link_wheresmymoney.on:hover{opacity:.8} .menu_area .link_wheresmymoney:hover .text,.menu_area .link_wheresmymoney:hover:before{opacity:1} .menu_area .link_onstage{display:block;padding:6px} .menu_area .link_onstage:before{background-position:-32px -606px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_onstage:before{margin-right:10px} } .menu_area .link_onstage.on:before{background-position:-60px -606px;width:20px;height:20px;opacity:1} html .menu_area .link_onstage.on:hover{opacity:.8} .menu_area .link_onstage:hover .text,.menu_area .link_onstage:hover:before{opacity:1} .menu_area .link_audio{display:block;padding:6px} .menu_area .link_audio:before{background-position:-488px -480px;width:20px;height:20px;display:inline-block;margin-right:9px;opacity:.8;vertical-align:top;content:""} @media (max-width:767px){.menu_area .link_audio:before{margin-right:10px} } .menu_area .link_audio.on:before{background-position:-325px -509px;width:20px;height:20px;opacity:1} html .menu_area .link_audio.on:hover{opacity:.8} .menu_area .link_audio:hover .text,.menu_area .link_audio:hover:before{opacity:1} .menu_area .link_givegift{display:block;padding:6px} .menu_area .link_givegift:hover .icon_givegift{color:#fff} .menu_area .link_givegift .icon_givegift_mobile{display:none} .menu_area .link_givegift.on .icon_givegift,.menu_area .link_givegift.on .icon_givegift_mobile{color:#ff0050} .menu_area .link_onstage .text{margin-top:2px} .menu_area .btn_close{display:none;position:absolute;top:0;right:0;width:66px;height:66px;text-align:center} .menu_area .btn_close:after{background-position:-627px -4px;width:36px;height:36px;margin-top:20px} @media (max-width:374px){.menu_area .btn_close:after{margin-top:12px} }.menu_area.on .profile_mobile{display:block} .menu_area.on .menu_area{height:auto;margin:0 34px} .menu_area.on .membership_mobile,.menu_area.on .menu_list{display:block} .menu_area.on .menu_item+.menu_item{} .menu_area.on .menu_item+.menu_item.menu_about{margin-top:26px;padding-top:26px} .menu_area.on .menu_item_mobile{display:block} .menu_area .menu_item{border-radius: 5px; transition: all .3s;} .menu_area .menu_item{ border-radius: 5px; color:#fe1d67;opacity:.9;-webkit-transition: all .2s linear; transition: all .2s linear;} .menu_area .menu_item svg{color:#fff;opacity:.9;-webkit-transition: all .2s linear; transition: all .2s linear;} .menu_area .menu_item .blind{color:#fff;opacity:.9;-webkit-transition: all .2s linear; transition: all .2s linear;} .menu_area .menu_item:hover{background-color: #ffffff1a} .menu_area .menu_item:hover svg{opacity:1} .menu_area .menu_item:hover .blind{opacity:1} .menu_area .menu_item.on{background-color: #ffffff1a; border-radius: 5px; color:#fe1d67;opacity:1} .menu_area .menu_item.on svg{color:#ff0050;opacity:1} .menu_area .menu_item.on .blind{color:#ff0050;opacity:1} .menu_area.on .menu_list .link_today .text{background-position:-408px -538px;width:56px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_today.on .text{background-position:-472px -538px;width:56px;height:24px} .menu_area.on .menu_list .link_today:before{background-position:-627px -564px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_today.on:before{background-position:-384px -162px;width:24px;height:24px} .menu_area.on .menu_list .link_chart .text{background-position:-189px -178px;width:39px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_chart.on .text{background-position:-276px -570px;width:39px;height:24px} .menu_area.on .menu_list .link_chart:before{background-position:-627px -180px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_chart.on:before{background-position:-627px -212px;width:24px;height:24px} .menu_area.on .menu_list .link_newalbum .text{background-position:-536px -315px;width:74px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_newalbum.on .text{background-position:-536px -347px;width:74px;height:24px} .menu_area.on .menu_list .link_newalbum:before{background-position:-627px -500px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_newalbum.on:before{background-position:-627px -532px;width:24px;height:24px} .menu_area.on .menu_list .link_dj .text{background-position:-4px -392px;width:106px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_dj.on .text{background-position:-118px -392px;width:106px;height:24px} .menu_area.on .menu_list .link_dj:before{background-position:-627px -244px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_dj.on:before{background-position:-627px -276px;width:24px;height:24px} .menu_area.on .menu_list .link_mag .text{background-position:-426px -4px;width:102px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_mag.on .text{background-position:-426px -36px;width:102px;height:24px} .menu_area.on .menu_list .link_mag:before{background-position:-627px -372px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_mag.on:before{background-position:-627px -404px;width:24px;height:24px} .menu_area.on .menu_list .link_monthly .text{background-position:-426px -198px;width:98px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_monthly.on .text{background-position:-426px -230px;width:98px;height:24px} .menu_area.on .menu_list .link_monthly:before{background-position:-627px -436px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_monthly.on:before{background-position:-627px -468px;width:24px;height:24px} .menu_area.on .menu_list .link_library .text{background-position:-276px -538px;width:58px;height:24px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_library.on .text{background-position:-342px -538px;width:58px;height:24px} .menu_area.on .menu_list .link_library:before{background-position:-627px -308px;width:24px;height:24px;opacity:1} .menu_area.on .menu_list .link_library.on:before{background-position:-627px -340px;width:24px;height:24px} .menu_area.on .menu_list .link_about .text{background-position:-426px -142px;width:99px;height:20px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_about.on .text{background-position:-426px -170px;width:99px;height:20px} .menu_area.on .menu_list .link_about:before{background-position:-209px -28px;width:22px;height:22px;opacity:1} .menu_area.on .menu_list .link_about.on:before{background-position:-209px -80px;width:22px;height:22px} .menu_area.on .menu_list .link_wheresmymoney .text{background-position:-536px -379px;width:74px;height:20px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_wheresmymoney.on .text{background-position:-536px -407px;width:74px;height:20px} .menu_area.on .menu_list .link_wheresmymoney:before{background-position:-473px -570px;width:22px;height:22px;opacity:1} .menu_area.on .menu_list .link_wheresmymoney.on:before{background-position:-503px -570px;width:22px;height:22px} .menu_area.on .menu_list .link_onstage .text{background-position:-426px -92px;width:100px;height:17px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_onstage.on .text{background-position:-426px -117px;width:100px;height:17px} .menu_area.on .menu_list .link_onstage:before{background-position:-413px -570px;width:22px;height:22px;opacity:1} .menu_area.on .menu_list .link_onstage.on:before{background-position:-443px -570px;width:22px;height:22px} .menu_area.on .menu_list .link_audio .text{background-position:-122px -364px;width:108px;height:20px;margin-top:0;opacity:1} .menu_area.on .menu_list .link_audio.on .text{background-position:-238px -364px;width:108px;height:20px} .menu_area.on .menu_list .link_audio:before{background-position:-323px -570px;width:22px;height:22px;opacity:1} .menu_area.on .menu_list .link_audio.on:before{background-position:-353px -570px;width:22px;height:22px} .menu_area.on .menu_list .link_notice{padding:3px 0} .menu_area.on .menu_list .link_notice:before{display:inline-block;vertical-align:top;content:"";background-position:-74px -509px;width:62px;height:21px} .menu_area.on .menu_list .link_account{padding:3px 0} .menu_area.on .menu_list .link_account:before{display:inline-block;vertical-align:top;content:"";background-position:-144px -509px;width:61px;height:21px} .menu_area.on .menu_list .link_login{padding:3px 0} .menu_area.on .menu_list .link_login:before{display:inline-block;vertical-align:top;content:"";background-position:-536px -538px;width:46px;height:21px} .menu_area.on .menu_list .link_logout{padding:3px 0} .menu_area.on .menu_list .link_logout:before{display:inline-block;vertical-align:top;content:"";background-position:-4px -509px;width:62px;height:21px} .menu_area.on .menu_list .link_givegift .icon_givegift{display:none} .menu_area.on .menu_list .link_givegift .icon_givegift_mobile{display:block} .menu_area.on .menu_list .link_onstage .text{margin-top:2px} .menu_area.on .btn_close{display:block} .white_theme .menu_area,.white_theme .profile_mobile .img_wrap .default_thumb{background-position:-72px -538px;width:60px;height:60px} .menu_area a span.text {height: 19px;display: flex;align-items: center;} a.menu-item .blind{position: relative; margin: 0; height: 19px; display: inline-block; width: auto;opacity:.8} .subend_section > .title { display: flex; gap: 20px; } /* 트래커 리스트 */ .track_section { padding-top: 21px; border-top: 1px solid hsla(0, 0%, 100%, .1); } .track_section .select_all { display: table; margin-left: 20px;} .track_section .select_all .check_area { display: table-cell; width: 36px; font-size: 0; vertical-align: middle;} .track_section .select_all .check_area .input_check { background-position: -460px -757px; width: 16px; height: 16px; display: inline-block; border: 0; border-radius: 0; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .album_end .track_section .select_all { margin-left: 0px !important; } .icon_play, .icon_play:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0;cursor:pointer; } .icon_play:before { display: none; background-color: rgba(0, 0, 0, .8); content: ""; } .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .thumb .icon_play.on:before, html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .thumb .icon_play:after { display: block; } .icon_play:after { visibility: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; } .thumb .icon_play:after, .thumb~.icon_play:after { background-position: -439px -757px; width: 13px; height: 16px; visibility: hidden; } .option .btn_option:after { background-position: -424px -729px; width: 20px; height: 20px; margin-top: 15px; } .track_section.album_end{padding-top:21px} @media (max-width:1599px){.track_section.album_end{padding-top:24px} }@media (max-width:1279px){.track_section.album_end{padding-top:18px} }.track_section.album_end .select{width:20px} .track_section.album_end .all{padding-left:15px} .track_section.album_end .artist{width:612px;max-width:612px;padding-left:20px} @media (max-width:900px){.track_section.album_end .artist{width:258px;max-width:258px;padding-left:25px} }.track_section.album_end .mp3{width:68px;padding-left:0} @media (max-width:1599px){.track_section.album_end .mp3{display:table-cell;padding-left:5px} } @media (max-width:1279px){.track_section.album_end .mp3{display:none} } .track_section.album_end .lyrics{width:70px} @media (max-width:1599px){.track_section.album_end .lyrics{display:table-cell} } @media (max-width:1279px){.track_section.album_end .lyrics{display:none} } .track_section.album_end .option{padding-left:10px} @media (max-width:1279px){.track_section.album_end .option{width:64px;padding-left:0} } @media (max-width:593px){.track_section.album_end .option{width:44px} } .track_section.chart_video .thumb{padding:12px 10px 12px 20px} .track_section.chart_video .thumb .img_thumb,.track_section.chart_video .thumb .inner{width:75px;height:42px} .track_section.chart_video .option{padding-left:40px} @media (max-width:1279px){.track_section.chart_video .option{padding-left:0} } .track_section.chart_video .option .inner{width:40px} @media (max-width:1279px){.track_section.chart_video .option .inner{width:50px} } .new_release .tracklist{margin:0 -20px 0 -8px} .new_release .tracklist td:first-of-type{padding-left:8px} .tracklist{position:relative;color:#fff;} .tracklist table{width:100%;text-align:left;border:0} .tracklist th{border:0;padding:0!important} .tracklist td{padding:5px 0 5px;border:0} .tracklist td:first-of-type{padding-left:20px} .tracklist td:last-of-type{padding-right:20px} .tracklist .select{width:66px;font-size:0} .tracklist .select .input_check{background-position:-460px -757px;width:16px;height:16px;display:inline-block;border:0;border-radius:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none} .tracklist .select .input_check::-ms-check{display:none} .tracklist .select .input_check[type="checkbox"]:checked, .track_section .select_all .check_area .input_check[type="checkbox"]:checked { background-position: -532px -757px; width: 16px; height: 16px; } .tracklist .thumb{width:50px;padding:8px 10px 8px 0} .tracklist .thumb .inner{position:relative;width:50px;height:50px} .tracklist .thumb .img_thumb{width:50px;height:50px} .tracklist .num{width:41px;text-align:center} .tracklist .num+.song{padding-left:3px} .tracklist .num .inner{position:relative;height:50px} .tracklist .num .text{display:inline-block;height:50px;font-size:16px;font-weight:600;line-height:50px;vertical-align:top} @media (max-width:593px){.tracklist .num .text{font-size:17px;line-height:50px} .track_section .select_all { margin-left: 0; } .tracklist td:first-of-type { padding-left: 0; } .tracklist .select { width: 26px;} }.tracklist .rank{width:49px ; } @media (max-width:1279px){.tracklist .rank{width:29px;padding:8px 0;vertical-align:top;text-align:center} }.tracklist .rank+.song{padding-left:5px} @media (max-width:1279px){.tracklist .rank+.song{padding-left:10px} }.tracklist .rank .text{display:inline-block;width:31px;font-size:17px;font-weight:600;line-height:50px;vertical-align:middle;text-align:center} @media (max-width:1279px){.tracklist .rank .text{display:block;width:100%;padding-top:4px;font-size:17px;line-height:20px} }.tracklist .rank .up{background-position:-434px -299px;width:8px;height:5px;display:inline-block;margin:0 5px;vertical-align:middle} @media (max-width:1279px){.tracklist .rank .up{margin:7px 0 0} }.tracklist .rank .down{background-position:-418px -299px;width:8px;height:5px;display:inline-block;margin:0 5px;vertical-align:middle} @media (max-width:1279px){.tracklist .rank .down{margin:7px 0 0} }.tracklist .song{padding-left:8px} .tracklist .song .inner_cell{display:table-cell;vertical-align:middle} .tracklist .song .link_text{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box;height:24px;font-size:16px;line-height:24px;letter-spacing:-.1px;color:#fff;cursor:pointer} @media (max-width:1279px){.tracklist .song .link_text{height:20px;font-size:17px;line-height:20px} }.tracklist .song .link_artist{color:#888} .tracklist .title_badge_wrap{display:table} .tracklist .title_badge_wrap .badge_title:after{margin-top:0} .tracklist .artist_sub{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:none;height:23px;font-size:15px;line-height:23px;letter-spacing:-.1px;color:#888} @media (max-width:1279px){.tracklist .artist_sub{display:block;height:19px;margin-top:3px;line-height:19px} }.tracklist .artist_sub .artist_sub_inner{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} .tracklist .sender{font-size:15px;line-height:19px;color:#888} @media (max-width:1279px){.tracklist .sender{display:none} }@media (max-width:1273px){.tracklist .sender .nickname{display:inline-block;max-width:110px;overflow:hidden;vertical-align:bottom;text-overflow:ellipsis;white-space:nowrap;word-break:break-all} }@media (max-width:992px){.tracklist .sender .nickname{max-width:80px} }@media (max-width:767px){.tracklist .sender .nickname{max-width:135px} }.tracklist .artist{width:323px;max-width:323px;padding-left:25px} @media (max-width:1919px){.tracklist .artist{width:223px;max-width:223px} }@media (max-width:1599px){.tracklist .artist{width:179px;max-width:179px} }@media (max-width:1279px){.tracklist .artist{display:none} }.tracklist .artist .inner{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;vertical-align:top;color:#888} .tracklist .artist .link_artist{font-size:15px;letter-spacing:-.1px;color:#888} .tracklist .album{width:323px;max-width:323px;padding-left:25px} @media (max-width:1919px){.tracklist .album{width:223px;max-width:223px} }@media (max-width:1599px){.tracklist .album{width:179px;max-width:179px;padding-left:25px} }@media (max-width:1279px){.tracklist .album{display:none} }.tracklist .album .link,.tracklist .album .text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;font-size:15px;line-height:40px;letter-spacing:-.1px;color:#888} @media (max-width:1273px){.tracklist .album .link,.tracklist .album .text{line-height:18px} }.tracklist .album .link{cursor:pointer} .tracklist .mp3{width:78px;padding-left:25px} @media (max-width:1599px){.tracklist .mp3{display:none} }.tracklist .mp3.disabled{opacity:.3} .tracklist .mp3.disabled .link_buy_mp3{cursor:default} .tracklist .mp3 .link_buy_mp3{display:block;text-align:center} .tracklist .mp3 .link_buy_mp3:after{display:inline-block;vertical-align:top;content:"";background-position:-687px -577px;width:28px;height:20px} .tracklist .date_and_terms{width:92px;padding-left:25px;font-size:13px;line-height:19px;color:#888} @media (max-width:1279px){.tracklist .date_and_terms{display:none} }.tracklist .date_and_terms .terms_warn{color:#ff0050} .tracklist .date_and_terms .terms_end{color:#444} .tracklist .download{width:70px} @media (max-width:1599px){.tracklist .download{display:none} }.tracklist .download.disabled{opacity:.3} .tracklist .download.disabled .btn_download{cursor:default} .tracklist .download .btn_download{display:block;height:40px;text-align:center} .tracklist .download .btn_download:after{display:inline-block;vertical-align:top;content:"";background-position:-387px -699px;width:20px;height:20px;margin-top:10px} .tracklist .lyrics{width:60px} @media (max-width:1599px){.tracklist .lyrics{display:none} }.tracklist .lyrics.disabled{opacity:.3} .tracklist .lyrics.disabled .btn_lyrics{cursor:default} .tracklist .lyrics .btn_lyrics{display:block;height:40px;text-align:center} @media (max-width:1273px){.tracklist .lyrics .btn_lyrics{width:60px;margin-left:auto} }.tracklist .lyrics .btn_lyrics:after{display:inline-block;vertical-align:top;content:"";background-position:-396px -729px;width:20px;height:20px;margin-top:10px} .tracklist .option{width:40px;padding-left:15px} @media (max-width:1599px){.tracklist .option{padding-left:40px} }@media (max-width:1279px){.tracklist .option{width:50px;padding-left:0;text-align:right} }.tracklist .option .inner{position:relative;height:50px} @media (max-width:1599px){.tracklist.my_mp3 .option{padding-left:15px} }@media (max-width:1279px){.tracklist.my_mp3 .option{padding-left:10px} }@media (max-width:593px){.tracklist.my_mp3 .option{width:40px;padding-left:0} } html .tracklist tbody tr{transition: all .3s;} html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover{background-color:hsla(0,0%,100%,.07)} html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .num .text{visibility:hidden} html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .num .icon_play:after{visibility:visible} html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .thumb .icon_play.on:before,html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .thumb .icon_play:before{display:block} html .tracklist tbody tr:not(.selected):not(.no_right):not(.only_download):hover .thumb .icon_play:after{visibility:visible} .tracklist tbody tr.selected{background-color:hsla(0,0%,100%,.07)} .tracklist tbody tr.selected .input_check{background-position:-532px -757px;width:16px;height:16px} .tracklist .no_right{cursor:default} .tracklist .no_right a:not(.btn_like){pointer-events:none} .tracklist .no_right td{opacity:.3} .tracklist .no_right td a{cursor:auto} .tracklist .no_right td a:hover{text-decoration:none!important} .tracklist .only_download td:not(.date_and_terms):not(.download){opacity:.3} .tracklist .only_download td:not(.date_and_terms):not(.download) a{cursor:auto} .tracklist .only_download td:not(.date_and_terms):not(.download) a:hover{text-decoration:none!important} .tracklist .only_streaming .input_check{background-position:-508px -757px;width:16px;height:16px} .tracklist .only_streaming .date_and_terms{opacity:.3} .tracklist .only_streaming .terms{display:none} .tracklist .only_streaming .terms_end{display:inline} .tracklist .only_streaming .btn_download{display:none} .tracklist .no_streaming .thumb{opacity:.3} .tracklist .no_streaming .thumb .icon_play{cursor:default} .content .subend_section { position: relative; margin:0 0 70px;} .subend_title { font-size: 38px; line-height: 45px; letter-spacing: -.5px; color: #fff } @media (max-width: 1279px) { .subend_title { font-size:30px; line-height: 31px; letter-spacing: -.39px } } @media (max-width: 593px) { .subend_title { font-size:27px; line-height: 28px; letter-spacing: -.3px } } .floating_play_with_mp3 .btn_mp3, .floating_play_with_mp3 .btn_play, .floating_play_with_mp3 .btn_shuffle, .play_with_mp3 .btn_mp3, .play_with_mp3 .btn_play, .play_with_mp3 .btn_shuffle { display: inline-block; border-radius: 4px; font-size: 15px; line-height: 40px; vertical-align: top; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .play_with_mp3{position:relative;margin:30px 0 40px} .summary .play_with_mp3{position:relative;margin:30px 0 0;display: flex;} @media (max-width:1279px){.play_with_mp3{margin:30px 0} }.play_with_mp3 .area_inner{position:relative} .play_with_mp3 .more_option{display:inline-block;vertical-align:top;margin:0 0 0 14px} @media (max-width:593px){.play_with_mp3 .more_option{position:absolute;top:-95px;right:0;margin-top:0}} .btn_play,.btn_shuffle{width:134px} .btn_play .del,.btn_shuffle .del{display:inline} @media (max-width:593px){.btn_play .del,.btn_shuffle .del{display:none} } .btn_mp3{width:100px} .splugin_panel .btn_setup:before,.splugin_panel .btn_setup[aria-expanded=true]:before{background-image:url(data:image/png;base64,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);background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_splugin.e3b78a48.svg);background-image:linear-gradient(transparent,transparent),url(../img/sp_splugin.e3b78a48.svg);background-size:111px 85px} .floating_select .btn_close:after,.floating_select .btn_play_select:before,.floating_select .input_check,.floating_select .input_check.checked,.floating_select .play_option_area .btn_add_playlist:before,.floating_select .play_option_area .btn_delete_playlist:before,.floating_select .play_option_area .btn_download:before,.floating_select .play_option_area .btn_play_last:before,.floating_select .play_option_area .btn_play_next:before,.floating_select .play_option_area .btn_purchase:before,.floating_select .VueCarousel-navigation-next:after,.floating_select .VueCarousel-navigation-prev:after{background-image:url(../img/sp_vibe.00b4ef4d.png);background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg);background-image:linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg);background-size:805px 798px} .spi_default{z-index:20000!important} ._spi_release_cont:before{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.6);content:""} html[data-platform*=mobile] ._spi_release_cont:before{display:none} ._spi_release_ly,._spi_release_pad_ly,.spi_ly_pop,.spi_message{position:fixed!important;top:50%!important;left:50%!important;-webkit-transform:translate(-50%,-50%)!important;transform:translate(-50%,-50%)!important} .splugin_panel{margin:14px 21px 0;border-top:1px solid #dedede;text-align:center} .splugin_panel .text_blind{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden} .splugin_panel .btn_setup{display:inline-block;margin-top:17px;padding:0 10px;vertical-align:top} .splugin_panel .btn_setup:before{background-position:-4px -4px;width:68px;height:17px;display:inline-block;vertical-align:top;content:""} .splugin_panel .btn_setup[aria-expanded=true]:before{background-position:-4px -29px;width:68px;height:17px} .splugin_panel .btn_setup[aria-expanded=true]+.setup_area{display:block} .splugin_panel .setup_area{display:none;position:relative;margin-top:17px;text-align:left} .splugin_panel .setup_row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .splugin_panel .setup_row+.setup_row{margin-top:8px} .splugin_panel .setup_term{-ms-flex-negative:0;flex-shrink:0;width:34px;text-align:left;font-size:13px;line-height:42px;letter-spacing:-.5px;color:#000} .splugin_panel .setup_code,.splugin_panel .setup_desc{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1} .splugin_panel .setup_code{display:-webkit-box;display:-ms-flexbox;display:flex} .splugin_panel .input_code,.splugin_panel .setup_size{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 7px;height:42px;border:1px solid #e6e6ea;border-radius:9px;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:13px;line-height:40px;color:#888c90;text-align:left} .splugin_panel .input_code{border-radius:9px 0 0 9px;border-right:none} .splugin_panel .btn_copy{border:1px solid #e6e6ea;border-radius:9px;border-radius:0 9px 9px 0} .splugin_panel .btn_copy,.splugin_panel .btn_sample{display:block;-ms-flex-negative:0;flex-shrink:0;min-width:41px;height:42px;padding:0 4px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f4f4f5;font-size:13px;line-height:40px;color:#767678;text-align:center} .splugin_panel .btn_sample{border:1px solid #e6e6ea;border-radius:9px;margin-top:9px} .splugin_audio_share{margin:14px 21px 0;border-top:1px solid #dedede} .splugin_audio_share .share_title{display:block;margin-top:15px;font-size:15px;font-weight:700;line-height:25px;letter-spacing:-.5px;text-align:left} .splugin_audio_share .input_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px} .splugin_audio_share .input_code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 7px;border:1px solid #e6e6ea;border-radius:9px;background-color:#fff;color:#888c90;text-align:left;border-radius:9px 0 0 9px;border-right:none;color:#2196f3} .splugin_audio_share .btn_copy,.splugin_audio_share .input_code{display:block;height:42px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:13px;line-height:40px} .splugin_audio_share .btn_copy{-ms-flex-negative:0;flex-shrink:0;min-width:41px;padding:0 4px;border:1px solid #e6e6ea;border-radius:9px;background-color:#f4f4f5;color:#767678;text-align:center;border-radius:0 9px 9px 0} .floating_select{display:none;position:fixed;top:0;right:0;left:225px;z-index:999;background-color:#000;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.07);box-shadow:0 2px 4px 0 rgba(0,0,0,.07)} @media (max-width:1919px){.floating_select{right:0;left:245px;padding:0 75px} }@media (max-width:1279px){.floating_select{left:225px;padding:0 43px} }@media (max-width:767px){.floating_select{top:67px;left:0} }@media (max-width:593px){.floating_select{top:64px;padding:0 20px} }.floating_select.on{display:block} .floating_select .bar_inner{position:relative;width:1525px;margin:0 auto} @media (max-width:1919px){.floating_select .bar_inner{width:auto} }.floating_select .select_info_area{padding:27px 0 20px} @media (max-width:593px){.floating_select .select_info_area{padding:22px 0 24px} }.floating_select .input_check{background-position:-460px -757px;width:16px;height:16px;display:inline-block;margin:1px 10px 0 0;vertical-align:top;border:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none} @media (max-width:593px){.floating_select .input_check{margin-right:9px} }.floating_select .input_check::-ms-check{display:none} .floating_select .input_check[type="checkbox"]:checked{background-position:-532px -757px;width:16px;height:16px} .floating_select .label_check{display:inline-block;padding-right:9px;font-size:15px;line-height:18px;letter-spacing:-.3px;color:#fff;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} @media (max-width:593px){.floating_select .label_check{padding-right:7px;font-size:17px} }.floating_select .count_track{display:inline-block;font-size:15px;line-height:18px;letter-spacing:-.3px;font-weight:700;color:#ff0050;vertical-align:top} @media (max-width:593px){.floating_select .count_track{font-size:17px} }.floating_select .play_option_area{position:relative;padding-bottom:24px} .floating_select .play_option_area:after{display:block;content:"";clear:both} @media (max-width:593px){.floating_select .play_option_area{padding-bottom:10px} }.floating_select .play_option_area .scroll_wrap{overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;position:absolute;right:140px;top:0;left:0;padding-right:16px;white-space:nowrap} .floating_select .play_option_area .scroll_wrap::-webkit-scrollbar{display:none} @media (max-width:1279px){.floating_select .play_option_area .scroll_wrap{right:83px} }@media (max-width:593px){.floating_select .play_option_area .scroll_wrap{right:60px;padding:0 21px 0 2px} }.floating_select .play_option_area .scroll_wrap .btn_add_playlist,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist,.floating_select .play_option_area .scroll_wrap .btn_download,.floating_select .play_option_area .scroll_wrap .btn_play_last,.floating_select .play_option_area .scroll_wrap .btn_play_next,.floating_select .play_option_area .scroll_wrap .btn_purchase{display:inline-block;padding:12px 0 11px;border-radius:4px;background-color:#2a2a2a;font-size:15px;line-height:19px;color:#fff;text-align:center;vertical-align:top} @media (max-width:1279px){.floating_select .play_option_area .scroll_wrap .btn_add_playlist,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist,.floating_select .play_option_area .scroll_wrap .btn_download,.floating_select .play_option_area .scroll_wrap .btn_play_last,.floating_select .play_option_area .scroll_wrap .btn_play_next,.floating_select .play_option_area .scroll_wrap .btn_purchase{font-size:14px} }@media (max-width:593px){.floating_select .play_option_area .scroll_wrap .btn_add_playlist,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist,.floating_select .play_option_area .scroll_wrap .btn_download,.floating_select .play_option_area .scroll_wrap .btn_play_last,.floating_select .play_option_area .scroll_wrap .btn_play_next,.floating_select .play_option_area .scroll_wrap .btn_purchase{width:auto;padding:9px 8px 7px;background-color:#000;text-align:center;font-size:13px} }.floating_select .play_option_area .scroll_wrap .btn_add_playlist:before,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist:before,.floating_select .play_option_area .scroll_wrap .btn_download:before,.floating_select .play_option_area .scroll_wrap .btn_play_last:before,.floating_select .play_option_area .scroll_wrap .btn_play_next:before,.floating_select .play_option_area .scroll_wrap .btn_purchase:before{display:inline-block;vertical-align:top;content:"";margin-right:6px} @media (max-width:593px){.floating_select .play_option_area .scroll_wrap .btn_add_playlist:before,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist:before,.floating_select .play_option_area .scroll_wrap .btn_download:before,.floating_select .play_option_area .scroll_wrap .btn_play_last:before,.floating_select .play_option_area .scroll_wrap .btn_play_next:before,.floating_select .play_option_area .scroll_wrap .btn_purchase:before{display:block;margin:0 auto 6px} }.floating_select .play_option_area .scroll_wrap .btn_add_playlist.disabled,.floating_select .play_option_area .scroll_wrap .btn_delete_playlist.disabled,.floating_select .play_option_area .scroll_wrap .btn_download.disabled,.floating_select .play_option_area .scroll_wrap .btn_play_last.disabled,.floating_select .play_option_area .scroll_wrap .btn_play_next.disabled,.floating_select .play_option_area .scroll_wrap .btn_purchase.disabled{opacity:.3;cursor:default} .floating_select .play_option_area .btn_play_next{width:139px} @media (max-width:1279px){.floating_select .play_option_area .btn_play_next{width:99px} }.floating_select .play_option_area .btn_play_next:before{background-position:-757px -406px;width:19px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_play_next:before{background-position:-639px -699px;width:20px;height:20px} }.floating_select .play_option_area .btn_play_last{width:126px;margin-left:10px} @media (max-width:1279px){.floating_select .play_option_area .btn_play_last{width:86px;margin-left:8px} }@media (max-width:593px){.floating_select .play_option_area .btn_play_last{margin-left:4px} }.floating_select .play_option_area .btn_play_last:before{background-position:-757px -380px;width:19px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_play_last:before{background-position:-611px -699px;width:20px;height:20px} }.floating_select .play_option_area .btn_add_playlist{width:100px;margin-left:10px} @media (max-width:1279px){.floating_select .play_option_area .btn_add_playlist{width:73px;margin-left:8px} }@media (max-width:593px){.floating_select .play_option_area .btn_add_playlist{margin-left:18px} }.floating_select .play_option_area .btn_add_playlist:before{background-position:-757px -471px;width:19px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_add_playlist:before{background-position:-676px -729px;width:20px;height:20px} }.floating_select .play_option_area .btn_delete_playlist{width:100px;margin-left:10px} @media (max-width:1279px){.floating_select .play_option_area .btn_delete_playlist{width:73px;margin-left:8px} }@media (max-width:593px){.floating_select .play_option_area .btn_delete_playlist{margin-left:27px} }.floating_select .play_option_area .btn_delete_playlist:before{background-position:-757px -497px;width:19px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_delete_playlist:before{background-position:-704px -729px;width:20px;height:20px} }.floating_select .play_option_area .btn_purchase{width:100px;margin-left:10px} @media (max-width:1279px){.floating_select .play_option_area .btn_purchase{width:76px;margin-left:8px} }@media (max-width:593px){.floating_select .play_option_area .btn_purchase{margin-left:27px} }.floating_select .play_option_area .btn_purchase:before{background-position:-687px -639px;width:26px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_purchase:before{background-position:-687px -144px;width:31px;height:20px} }.floating_select .play_option_area .btn_download{width:100px;margin-left:10px} @media (max-width:1279px){.floating_select .play_option_area .btn_download{width:76px;margin-left:8px} }@media (max-width:593px){.floating_select .play_option_area .btn_download{margin-left:22px} }.floating_select .play_option_area .btn_download:before{background-position:-361px -633px;width:18px;height:18px} @media (max-width:593px){.floating_select .play_option_area .btn_download:before{background-position:-757px -4px;width:20px;height:20px} }.floating_select .btn_prev{position:absolute;top:0;left:0;bottom:22px;min-width:20px;background-image:-webkit-gradient(linear,right top,left top,from(transparent),to(#000));background-image:linear-gradient(270deg,transparent,#000)} html[data-platform-detectPc*=mobile] .floating_select .btn_prev{left:-24px;width:50px;background-image:-webkit-gradient(linear,right top,left top,color-stop(15%,transparent),color-stop(62%,#000));background-image:linear-gradient(270deg,transparent 15%,#000 62%)} @media (max-width:593px){html[data-platform-detectPc*=mobile] .floating_select .btn_prev{left:-20px;width:60px;background-image:-webkit-gradient(linear,right top,left top,from(transparent),color-stop(69%,#000));background-image:linear-gradient(270deg,transparent,#000 69%)} }@media (max-width:593px){.floating_select .btn_prev{bottom:10px} }.floating_select .btn_next{position:absolute;top:0;right:83px;bottom:22px;min-width:20px;background-image:-webkit-gradient(linear,left top,right top,from(transparent),to(#000));background-image:linear-gradient(90deg,transparent,#000)} .floating_select .btn_next:after{display:block;content:"";clear:both} html[data-platform-detectPc*=mobile] .floating_select .btn_next{right:77px;width:50px;background-image:-webkit-gradient(linear,left top,right top,color-stop(15%,transparent),color-stop(62%,#000));background-image:linear-gradient(90deg,transparent 15%,#000 62%)} @media (max-width:593px){html[data-platform-detectPc*=mobile] .floating_select .btn_next{right:50px;width:40px;background-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(69%,#000));background-image:linear-gradient(90deg,transparent,#000 69%)} }@media (max-width:593px){.floating_select .btn_next{right:60px;bottom:10px} }.floating_select .VueCarousel-navigation-prev{display:inline-block;position:relative;top:0;left:0;-webkit-transform:none;transform:none;padding:5px;vertical-align:top} @media (max-width:593px){.floating_select .VueCarousel-navigation-prev{padding:13px 5px} }.floating_select .VueCarousel-navigation-prev:before{width:32px;height:32px} .floating_select .VueCarousel-navigation-prev:after{background-position:-785px -448px;width:10px;height:14px;right:17px} .floating_select .VueCarousel-navigation-next{position:relative;display:inline-block;top:0;right:0;-webkit-transform:none;transform:none;padding:5px;vertical-align:top} @media (max-width:593px){.floating_select .VueCarousel-navigation-next{padding:13px 5px} }.floating_select .VueCarousel-navigation-next:before{width:32px;height:32px} .floating_select .VueCarousel-navigation-next:after{background-position:-785px -404px;width:10px;height:14px;left:17px} .floating_select .btn_play_select{position:relative;float:right;width:135px;height:42px;font-size:15px;line-height:42px;color:#fff;text-align:center;vertical-align:top;border-radius:4px;background-color:#ff0050} @media (max-width:1279px){.floating_select .btn_play_select{width:83px;font-size:14px} }@media (max-width:593px){.floating_select .btn_play_select{width:60px;height:auto;padding:10px 0 9px;line-height:19px} }.floating_select .btn_play_select:before{display:inline-block;vertical-align:middle;content:"";background-position:-415px -699px;width:20px;height:20px;margin:-2px 5px 0 0} @media (max-width:593px){.floating_select .btn_play_select:before{display:block;margin:0 auto 2px} }@media (max-width:593px){.floating_select .btn_play_select .del{overflow:hidden;position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px} }.floating_select .btn_close{position:absolute;top:21px;right:-11px;padding:9px 11px} @media (max-width:593px){.floating_select .btn_close{top:15px} }.floating_select .btn_close:after{display:inline-block;vertical-align:top;content:"";background-position:-640px -633px;width:13px;height:13px} .floating_play_with_mp3 .play_option a+a, .play_with_mp3 .play_option a+a { margin-left: 10px; } .floating_bar{display: block; visibility: hidden; position: fixed; top: 70px; right: 0; left: 245px; z-index: 30; background-color: #000; opacity: 0; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in;} @media (max-width:1919px){.floating_bar{width:auto;margin:0} }@media (max-width:1279px){.floating_bar{left:225px} }@media (max-width:767px){.floating_bar{top:67px;left:0} }@media (max-width:593px){.floating_bar{top:64px;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#000),to(transparent));background-image:linear-gradient(180deg,#000 50%,transparent);background-color:transparent} }.floating_bar.on{visibility:visible; opacity: 1;} .floating_bar .bar_inner{position:relative;width:1525px;padding:16px 0;margin:0 auto} .floating_bar .bar_inner:after{display:block;content:"";clear:both} @media (max-width:1919px){.floating_bar .bar_inner{width:auto;margin:0 75px} }@media (max-width:1279px){.floating_bar .bar_inner{margin:0 43px} }@media (max-width:593px){.floating_bar .bar_inner{margin:0 20px;padding:12px 0} }.floating_bar .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;font-size:20px;line-height:42px;letter-spacing:-.1px;font-weight:700;color:#fff} @media (max-width:593px){.floating_bar .title{display:none} }.floating_bar .title.billboard:before{display:inline-block;vertical-align:top;content:"";background-position:-463px -322px;width:78px;height:16px;margin:12px 8px 0 0} .floating_bar .title.billboard_korea:before{display:inline-block;vertical-align:top;content:"";background-position:-463px -158px;width:83px;height:16px;margin:12px 5px 0 0} .floating_bar .title br{display:none} .floating_bar .floating_play_with_mp3,.floating_bar .option_area{float:right;padding-left:24px} @media (max-width:593px){.floating_bar .floating_play_with_mp3,.floating_bar .option_area{float:none;padding-left:0} }.floating_bar .floating_play_with_mp3 .playable_dropdown,.floating_bar .option_area .playable_dropdown{top:47px;right:0;left:auto} @media (max-width:1279px){.floating_bar .floating_play_with_mp3 .more_option{display:none} }.vibe_membership .floating_bar{display:none;top:116px;height:auto;background-color:#f2f2f2;background-image:none;border-bottom:1px solid #e4e4e4;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.07);box-shadow:0 2px 4px 0 rgba(0,0,0,.07)} @media (max-width:593px){.vibe_membership .floating_bar{display:block} } .floating_bar .floating_play_with_mp3,.floating_bar .option_area{float:right;padding-left:24px} @media (max-width:593px){.floating_bar .floating_play_with_mp3,.floating_bar .option_area{float:none;padding-left:0} }.floating_bar .floating_play_with_mp3 .playable_dropdown,.floating_bar .option_area .playable_dropdown{top:47px;right:0;left:auto} @media (max-width:1279px){.floating_bar .floating_play_with_mp3 .more_option{display:none} } .floating_play_with_mp3 .btn_play,.play_with_mp3 .btn_play{width:134px;background-color:#ff0050;border:1px solid #ff0050;color:#fff} @media (max-width:992px){.floating_play_with_mp3 .btn_play,.play_with_mp3 .btn_play{width:77px} }.floating_play_with_mp3 .btn_play:before,.play_with_mp3 .btn_play:before{display:inline-block;vertical-align:middle;content:"";background-position:-415px -699px;width:20px;height:20px;margin:-3px 4px 0 0} @media (max-width:593px){.floating_play_with_mp3 .btn_play:before,.play_with_mp3 .btn_play:before{margin:-4px 8px 0 0} }.floating_play_with_mp3 .btn_play.disabled,.play_with_mp3 .btn_play.disabled{border:1px solid #111;background-color:#111;color:#333;cursor:default} .floating_play_with_mp3 .btn_play.disabled:before,.play_with_mp3 .btn_play.disabled:before{opacity:.15} .floating_play_with_mp3 .btn_shuffle,.play_with_mp3 .btn_shuffle{width:134px;background-color:#2a2a2a;border:1px solid #2a2a2a;color:#fff} @media (max-width:992px){.floating_play_with_mp3 .btn_shuffle,.play_with_mp3 .btn_shuffle{width:77px} }.floating_play_with_mp3 .btn_shuffle:before,.play_with_mp3 .btn_shuffle:before{display:inline-block;vertical-align:middle;content:"";background-position:-471px -699px;width:20px;height:20px;margin:-2px 6px 0 0} @media (max-width:593px){.floating_play_with_mp3 .btn_shuffle:before,.play_with_mp3 .btn_shuffle:before{margin:-4px 8px 0 0} }.floating_play_with_mp3 .btn_shuffle.disabled,.play_with_mp3 .btn_shuffle.disabled{border:1px solid #111;background-color:#111;color:#333;cursor:default} .floating_play_with_mp3 .btn_shuffle.disabled:before,.play_with_mp3 .btn_shuffle.disabled:before{opacity:.15} .floating_play_with_mp3 .btn_mp3,.play_with_mp3 .btn_mp3{position:relative;width:100px;background-color:#2a2a2a;border:1px solid #2a2a2a;color:#fff} @media (max-width:992px){.floating_play_with_mp3 .btn_mp3,.play_with_mp3 .btn_mp3{width:76px} }.floating_play_with_mp3 .btn_mp3.disabled,.play_with_mp3 .btn_mp3.disabled{border:1px solid #111;background-color:#111;opacity:1;color:#333;cursor:default} .floating_play_with_mp3 .more_option,.play_with_mp3 .more_option{display:inline-block;vertical-align:top;margin-left:14px} @media (max-width:1279px){.floating_play_with_mp3 .more_option,.play_with_mp3 .more_option{display:block;margin:20px 0 0} }@media (max-width:593px){.floating_play_with_mp3 .more_option,.play_with_mp3 .more_option{text-align:center} }.floating_play_with_mp3 .dropdown_wrap,.play_with_mp3 .dropdown_wrap{display:inline-block;vertical-align:top} .floating_play_with_mp3 .btn_like,.play_with_mp3 .btn_like{display:inline-block;vertical-align:top;margin-right:10px;text-align:center} .floating_play_with_mp3 .btn_like:before,.play_with_mp3 .btn_like:before{display:inline-block;vertical-align:top;content:"";background-position:-504px -583px;width:42px;height:42px} .floating_play_with_mp3 .btn_like.on:before,.play_with_mp3 .btn_like.on:before{background-position:-637px -4px;width:42px;height:42px} .floating_play_with_mp3 .btn_add,.play_with_mp3 .btn_add{display:inline-block;vertical-align:top;margin-right:10px} .floating_play_with_mp3 .btn_add:before,.play_with_mp3 .btn_add:before{display:inline-block;vertical-align:top;content:"";background-position:-154px -583px;width:42px;height:42px} .floating_play_with_mp3 .btn_add.on:before,.play_with_mp3 .btn_add.on:before{display:inline-block;vertical-align:top;content:"";background-position:-254px -583px;width:42px;height:42px} @media (max-width:992px){.floating_play_with_mp3 .del,.play_with_mp3 .del{display:none} }.floating_play_with_mp3.disabled a,.play_with_mp3.disabled a{pointer-events:none} .floating_play_with_mp3.disabled .btn_play,.floating_play_with_mp3.disabled .btn_shuffle,.play_with_mp3.disabled .btn_play,.play_with_mp3.disabled .btn_shuffle{border:1px solid #111;background-color:#111;color:#333;cursor:default} .floating_play_with_mp3.disabled .btn_play:before,.floating_play_with_mp3.disabled .btn_shuffle:before,.play_with_mp3.disabled .btn_play:before,.play_with_mp3.disabled .btn_shuffle:before{opacity:.15} .floating_play_with_mp3.disabled .btn_mp3,.play_with_mp3.disabled .btn_mp3{border:1px solid #111;background-color:#111;opacity:1;color:#333;cursor:default} .floating_play_with_mp3.disabled .more_option .btn_option,.play_with_mp3.disabled .more_option .btn_option{opacity:1;cursor:default} .floating_play_with_mp3.disabled .more_option .btn_option:before,.play_with_mp3.disabled .more_option .btn_option:before{background-position:-637px -354px;width:42px;height:42px} .floating_play_with_mp3.disabled .more_option .btn_like,.play_with_mp3.disabled .more_option .btn_like{opacity:1;cursor:default} .floating_play_with_mp3.disabled .more_option .btn_like:before,.play_with_mp3.disabled .more_option .btn_like:before{background-position:-554px -583px;width:42px;height:42px} .floating_play_with_mp3.disabled .more_option .btn_like.on:before,.play_with_mp3.disabled .more_option .btn_like.on:before{background-position:-637px -54px;width:42px;height:42px} .floating_play_with_mp3.disabled .more_option .btn_add,.play_with_mp3.disabled .more_option .btn_add{opacity:1;cursor:default} .floating_play_with_mp3.disabled .more_option .btn_add:before,.play_with_mp3.disabled .more_option .btn_add:before{background-position:-204px -583px;width:42px;height:42px} .floating_play_with_mp3.disabled .more_option .btn_add.on:before,.play_with_mp3.disabled .more_option .btn_add.on:before{background-position:-304px -583px;width:42px;height:42px} .floating_play_with_mp3 .tooltip,.play_with_mp3 .tooltip{left:0;word-break:keep-all} @media (max-width:1059px){.floating_play_with_mp3 .tooltip,.play_with_mp3 .tooltip{top:-91px;left:unset;right:0;padding-right:36px} }@media (max-width:1059px){.floating_play_with_mp3 .tooltip:after,.play_with_mp3 .tooltip:after{left:unset;right:24px} }.floating_play_with_mp3 .tooltip .text,.play_with_mp3 .tooltip .text{width:auto;white-space:nowrap} @media (max-width:1059px){.floating_play_with_mp3 .tooltip .text,.play_with_mp3 .tooltip .text{width:140px;white-space:normal} }@media (max-width:1059px){.floating_play_with_mp3 .tooltip br,.play_with_mp3 .tooltip br{display:none} } .loading {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300; text-align: center; background-color: #000; transition: all .6s; opacity: 0; pointer-events: none; } .loading.on { pointer-events:auto;opacity: 1 !important; } .loading:before { width: 0; height: 100% } .loading:after,.loading:before { display: inline-block; vertical-align: middle; content: "" } .loading:after { width: 58px; height: 58px; background: url("../img/playing_white_50x50.png") 0 0; background-size: 3480px 58px; -webkit-animation: loading 1.5s steps(60) infinite; animation: loading 1.5s steps(60) infinite } .loading.settlement2020 { background-color: #f5f5f5 } .sort_order{position:absolute;top:18px;right:20px} @media (max-width:1279px){.sort_order{position:static;margin:0 -8px} }.sort_order .item_wrap{display:inline-block} .sort_order input:focus+.item{outline:1px solid #add8e6;border-radius:5px} .sort_order input:checked+.item{color:#fff;font-weight:700} .sort_order input:checked+.item:before{background-position:-785px -470px;width:14px;height:12px;display:inline-block;margin:3px 3px 0 8px;background-color:transparent;border-radius:0;vertical-align:top;content:""} @media (max-width:767px){.sort_order input:checked+.item:before{display:none} }.sort_order .item{display:inline-block;font-size:15px;line-height:19px;color:#999;vertical-align:top;border:0;background-color:transparent} @media (max-width:767px){.sort_order .item{padding:0 8px;font-size:16px} }.sort_order .item:before{display:inline-block;vertical-align:top;content:"";width:3px;height:3px;margin:8px 8px 0;border-radius:50%;background-color:#999} @media (max-width:767px){.sort_order .item:before{display:none} }.sort_order .item[aria-checked=true]{color:#fff;font-weight:700} .sort_order .item[aria-checked=true]:before{background-position:-785px -470px;width:14px;height:12px;display:inline-block;margin:3px 3px 0 8px;background-color:transparent;border-radius:0;vertical-align:top;content:""} @media (max-width:767px){.sort_order .item[aria-checked=true]:before{display:none} }.arrange_order{margin-right:-8px} @media (max-width:593px){.arrange_order{margin:26px -8px 0} }.arrange_order .btn_arrange{display:inline-block;padding:9px 0 8px;font-size:15px;color:#fff;line-height:19px;vertical-align:top} .arrange_order .btn_arrange:after{background-position:-4px -757px;width:17px;height:16px;display:inline-block;margin:1px 0 0 3px;vertical-align:top;content:""} .arrange_order .ly_option{top:33px;right:0;width:147px} .arrange_order .ly_item{position:relative} .arrange_order .ly_item.checked:after{background-position:-785px -556px;width:14px;height:12px;position:absolute;top:14px;right:15px;content:""} .arrange_order.disabled .btn_arrange{opacity:.3;cursor:default} .top_wrap+.control_sort_area{padding-top:20px} @media (max-width:767px){.top_wrap+.control_sort_area{padding-top:0} }.control_sort_area{position:absolute;right:0} .control_sort_area .sort_order{position:static;float:right;margin-top:4px} @media (max-width:767px){.control_sort_area .sort_order{margin-top:25px} }@media (max-width:593px){.control_sort_area .sort_order{float:none} }@media (max-width:992px){.control_sort_area .sort_order .del{display:none} }@media (max-width:593px){.control_sort_area .sort_order .del{display:inline} }.control_sort_area .arrange_order{margin:0} .control_sort_area .play_control_area+.sort_order{margin-top:18px} @media (max-width:767px){.control_sort_area .play_control_area+.sort_order{margin-top:38px} }@media (max-width:593px){.control_sort_area .play_control_area+.sort_order{margin-top:21px} }@media (max-width:767px){.control_sort_area .play_control_area+.arrange_order{padding-top:21px} }@media (max-width:593px){.control_sort_area .play_control_area+.arrange_order{padding-top:11px} }@media (max-width:374px){.control_sort_area .play_control_area+.arrange_order{float:none;display:block} } @media (max-width:1279px){.sub_list{} } .sub_list ul { gap: 10px; display: grid; grid-template: auto / repeat(8, 1fr); -webkit-align-items: flex-start; align-items: flex-start; gap:40px 20px} .sub_list .list_item{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:top} .sub_list .list_item .title{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} @media (max-width:1599px){.sub_list ul{grid-template: auto / repeat(6, 1fr)} }@media (max-width:1279px){.sub_list ul{grid-template: auto / repeat(5, 1fr)} }@media (max-width:992px){.sub_list ul{grid-template: auto / repeat(4, 1fr);gap:10px} }@media (max-width:593px){.sub_list ul{grid-template: auto / repeat(2, 1fr);} } ul.bxslider {display: grid ; grid-template: auto / repeat(8, 1fr); align-items: flex-start; gap:0px 20px;} .main_slider{ position: relative; } .main_slider.playlists{margin-top: 35px;} @media (max-width: 1279px) {ul.bxslider{grid-template: auto / repeat(4, 1fr); } } .main_slider .list_item {display:flex; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box ;position: relative;} .main_slider .list_item >a{position: relative;} @media (max-width: 593px) { ul.bxslider { grid-template: auto / repeat(2, 1fr); } ul.bxslider { gap:20px 20px;} } .main_slider .thumb_area{ position: relative;} .main_slider .link { top: 0; left: 0; right: 0; bottom: 0 } .main_slider .link:after { position: absolute; right: 0; bottom: 0; left: 0; height: 90px; background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25))); background: linear-gradient(transparent,rgba(0,0,0,.25)); opacity: 0; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; content: "" } .main_slider .thumb_area img{ width: 100%; height: 100% } .main_slider ul:after { display: block; content: ""; clear: both; } .btn_play_now{cursor: pointer; position: absolute; bottom: 6px; left: 6px; z-index: 25; padding: 6px; opacity: 0; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in } .btn_play_now:before { display: inline-block; vertical-align: top; content: ""; background-color: rgba(0,0,0,.8); border-radius: 50%; -webkit-transition: -webkit-transform .2s ease-in; transition: -webkit-transform .2s ease-in; transition: transform .2s ease-in; transition: transform .2s ease-in,-webkit-transform .2s ease-in; width: 36px; height: 36px } .btn_play_now:after { background-position:-397px -757px; width: 14px; height: 16px; position: absolute; top: 50%; left: 50%; content: ""; -webkit-transform: translate(-6px,-8px); transform: translate(-6px,-8px) } .btn_play_now:hover:before { background-color: #ff0050; -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .btn_play_now.on,.btn_play_now:focus { opacity: 1 } .main_slider .thumb_area:hover .btn_play_now,.main_slider .thumb_area:hover .link:after,.main_slider .thumb_area:hover a.thumb:after { opacity: 1 } .main_slider .info{ margin-top: 11px } .main_slider .title{ overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; height: 19px } .main_slider .title .text{ height: 19px; font-size: 16px; line-height: 19px; letter-spacing: -.1px; color: #fff } .main_slider .artist{ overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all; display: block; display: -webkit-box; height: 20px; padding-top: 3px; font-size: 15px; line-height: 20px; letter-spacing: -.1px; vertical-align: top; color: #888; white-space: normal } .main_slider .artist .link_artist{ color: #888 } .sub_list .thumb_area{position:relative;padding-top:100% ;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURRoaGhERETZTak8AAAIlSURBVHja7doxbsIwGMVx0wyR2iHcIEfxUTgKPhpbV47gsWOGDgwINzgqOCQo339oFbUvQweLH++TIQnQ59Kzwz09RERERERERERERER+l9SYvKUASbVPMOWlX4ApowUT2Sea4hNN2Q0LIKV+XLATpShldSkXj1MCJsF5ONihP5tZytFR8pGvGWSwz+EyQ1IiJ53Dg0UNpsE02B8ZbIsHqxMerGX3lzh8IgtssE3CKRW6i/n3ONwwzCn9SP1gDUnpnz8OxJzS5pSWpPic4knKPqd4kpJwyvU17IaP41ZSDSmUwJT6lnIhpGOkuaWcIek3+cRJR8jh+52GSJP/2knIGxfIJofrK3pxhOSHnRx4w+Tnfw2EnOE38U25u+azMlLii921XpRO+oVERERERERERERE5J8R7YuIiIiIiIiIiIjIWkiNyb2+ZyVFfc9IyvqekZQrNnL9Tx5L8Ymm7IYVkPJYrQJEKUpZXcq9vmcmAZOivmckh6L2YiNHR8m4vmchD/U9C4mcPBSFfihFg2kwDbbKwbZ4sKK+Z01p2f0lulF9zzjYJuGUCt3FJvW9RTKt7y2SaX1vkbQ5pSUpflKsWyT7nOJJSsIpM/W9JTJT37MQmDJT37OQjpEmTep7RuKL+p6ddIQcxvU9I2mK+p6FhHF9z7LJYVzfs5D8OHPfca6+ZyBn+E18pr5nOCsjJdP63vJF6aRfSERERERERERERERE8vEF75usLCqqK/sAAAAASUVORK5CYII=); background-size: cover;} .sub_list .thumb_area:hover .btn_play_now,.sub_list .thumb_area:hover .link:after,.sub_list .thumb_area:hover a.thumb:after{opacity:1} .sub_list .thumb_area img{width:100%;height:100%} .sub_list .link{position:absolute;top:0;left:0;right:0;bottom:0} .sub_list .link:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .sub_list .link:after{display:none} .sub_list a.thumb{position:absolute;top:0;left:0;right:0;bottom:0} .sub_list a.thumb:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .sub_list a.thumb:after{display:none} .quarter-wrap.thumb { display: grid; grid-template: auto / repeat(2, 1fr); -webkit-align-items: flex-start; align-items: flex-start; } .sub_list .quarter{display:inline-block;width:100%;height:100%} .sub_list .info{margin-top:11px} .sub_list .title{display:block} .sub_list .title .text_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff} html .sub_list .title .text_wrap:hover{text-decoration:underline} .sub_list .title .text_wrap .text{overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} .sub_list .title .text_wrap .badge_dolby{-ms-flex-negative:0;flex-shrink:0} .sub_list .title .text_wrap .badge_dolby:after{background-position:-785px -145px;width:14px;height:15px;display:block;margin:0 2px 0 5px;content:""} .sub_list .title .text{font-size:16px;line-height:19px;letter-spacing:-.1px} .sub_list .artist{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-all;display:block;display:-webkit-box;height:20px;padding-top:3px;font-size:15px;line-height:20px;letter-spacing:-.1px;vertical-align:top;color:#888;white-space:normal} .sub_list .artist .link_artist{color:#888} html .sub_list .artist .link_artist:hover{text-decoration:underline} .btn_play_now:hover:after,.btn_play_now:after,.info .rank .down,.info .rank .up,.list_wrap_album .title .text_wrap .badge_dolby:after,.recommend_result .info .text_wrap .badge_dolby:after,.sub_list .title .text_wrap .badge_dolby:after { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px } html[data-platform*=mobile] .settlement_2021 .btn_play_now.on:hover:after{background:url(data:image/png;base64,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) 0 0 no-repeat;width:24px;height:24px;-webkit-transform:translate(-12px,-12px);transform:translate(-12px,-12px);background-size:1440px 24px;-webkit-animation:playing24 2s steps(60) infinite;animation:playing24 2s steps(60) infinite} .btn_play_now{position:absolute;bottom:6px;left:6px;z-index:25;padding:6px;opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in} html[data-platform*=mobile] .btn_play_now{display:none} .btn_play_now:before{display:inline-block;vertical-align:top;content:"";background-color:rgba(0,0,0,.8);border-radius:50%;-webkit-transition:-webkit-transform .2s ease-in;transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;transition:transform .2s ease-in,-webkit-transform .2s ease-in;width:36px;height:36px} .btn_play_now:after{background-position:-397px -757px;width:14px;height:16px;position:absolute;top:50%;left:50%;content:"";-webkit-transform:translate(-6px,-8px);transform:translate(-6px,-8px)} .btn_play_now:hover:before{background-color:#ff0050;-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transform-origin:50% 50%;transform-origin:50% 50%} .btn_play_now.on,.btn_play_now:focus{opacity:1} .btn_play_now.on:after{background:url(../img/playing_pink_43x43.ca14e0ee.png) 0 0 no-repeat;width:36px;height:36px;-webkit-transform:translate(-17px,-17px);transform:translate(-17px,-17px);background-size:2160px 36px;-webkit-animation:playing36 2s steps(60) infinite;animation:playing36 2s steps(60) infinite} .btn_play_now.on:hover:before{background-color:rgba(0,0,0,.8)} .btn_play_now.on:hover:after{background-position:-375px -757px;width:14px;height:16px;-webkit-animation:none;animation:none;-webkit-transform:translate(-6px,-7px);transform:translate(-6px,-7px)} html[data-platform*=mobile] .btn_play_now.on:hover:after{background:url(../img/playing_pink_43x43.ca14e0ee.png) 0 0 no-repeat;width:36px;height:36px;background-size:2160px 36px;-webkit-animation:playing36 2s steps(60) infinite;animation:playing36 2s steps(60) infinite} .summary_section{min-height:240px;padding:0px 0 40px;border-bottom:1px solid hsla(0,0%,100%,.1)} @media (max-width:1279px){.summary_section{min-height:180px;padding-bottom:20px}} @media (max-width:767px){.summary_section{padding-top:30px}} @media (max-width:593px){.summary_section{min-height:unset}} .track_section .select_all .text_area { display: table-cell; padding: 8px 20px 10px 0; } .summary_area{padding-left:280px; position:relative} @media (max-width:1279px){.summary_area{padding-left:207px} }@media (max-width:593px){.summary_area{min-height:unset;padding-left:0} }.summary_area .summary_thumb{position:absolute;top:0px;left:0;width:240px;height:240px;margin-right:40px} @media (max-width:1279px){.summary_area .summary_thumb{width:180px;height:180px;margin-right:27px} }@media (max-width:767px){.summary_area .summary_thumb{top:30px} }@media (max-width:593px){.summary_area .summary_thumb{position:static;width:200px;height:200px;margin:0 auto} }.summary_area .summary_thumb img{width:100%;height:100%} .summary_area .text_area{position:relative;min-height:167px} @media (max-width:1279px){.summary_area .text_area{min-height:121px} }@media (max-width:593px){.summary_area .text_area{min-height:0;text-align:center} }@media (max-width:593px){.summary_area .title_area{margin-top:20px;text-align:center} }.summary_area .title_wrap{position:relative;right:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-height:47px;padding-top:7px;font-size:38px;line-height:47px;letter-spacing:-.3px;color:#fff} @media (max-width:1279px){.summary_area .title_wrap{max-height:60px;padding-top:0;font-size:24px;line-height:30px} }@media (max-width:593px){.summary_area .title_wrap{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;right:0;padding:0;max-height:52px;font-size:22px;line-height:26px;letter-spacing:-.3px;-webkit-line-clamp:2} }.summary_area .title_wrap .title{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} .summary_area .title_wrap .badge_dolby{background-position:-687px -418px;width:28px;height:28px;margin-left:7px;-ms-flex-negative:0;flex-shrink:0} @media (max-width:1279px){.summary_area .title_wrap .badge_dolby{background-position:-757px -577px;width:18px;height:18px;margin-left:5px} }.summary_area .title_wrap .dolby_info{background-position:-785px -214px;width:14px;height:14px;margin-left:6px;-ms-flex-negative:0;flex-shrink:0} @media (max-width:1279px){.summary_area .title_wrap .dolby_info{margin-left:5px} }.summary_area .title_wrap.windows .badge_dolby,.summary_area .title_wrap.windows .dolby_info{margin-top:-2px} @media (max-width:1279px){.summary_area .title_wrap.windows .badge_dolby,.summary_area .title_wrap.windows .dolby_info{margin-top:0} }.summary_area .summary_thumb+.summary_area .title_wrap{margin-left:-1px} @media (max-width:593px){.summary_area .summary_thumb+.summary_area .title_wrap{margin-left:0} }.summary_area .sub_title_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:5px;font-weight:400;color:#fff} @media (max-width:1279px){.summary_area .sub_title_wrap{margin-top:3px} }@media (max-width:593px){.summary_area .sub_title_wrap{display:block} }.summary_area .sub_title_wrap .sub_title{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:inline-block;display:-webkit-box;-ms-flex-negative:1;flex-shrink:1;font-size:16px;line-height:19px;letter-spacing:-.3px;vertical-align:top;color:#fff} @media (max-width:593px){.summary_area .sub_title_wrap .sub_title{font-size:18px;line-height:21px} }.summary_area .sub_title_wrap .like_count{position:relative;display:inline-block;vertical-align:top;-ms-flex-negative:0;flex-shrink:0;font-size:14px;line-height:19px;letter-spacing:-.3px} @media (max-width:593px){.summary_area .sub_title_wrap .like_count{display:block;margin-top:7px;word-break:break-all;font-size:14px;line-height:17px} }.summary_area .sub_title_wrap .like_count:before{display:inline-block;vertical-align:top;width:2px;height:2px;margin:8.5px 5px;border-radius:50%;background-color:#acacac;content:""} @media (max-width:593px){.summary_area .sub_title_wrap .like_count:before{display:none} }.summary_area .sub_title_wrap .icon_like{display:inline-block;margin:3px 5px 0 0;vertical-align:top} @media (max-width:593px){.summary_area .sub_title_wrap .icon_like{margin:2px 4px 0 0} }.summary_area .sub_info{margin-top:8px} @media (max-width:1279px){.summary_area .sub_info{margin-top:7px} }@media (max-width:593px){.summary_area .sub_info{margin-top:8px} }.summary_area .sub_info .sub_info_item{display:inline-block;font-size:15px;line-height:19px;vertical-align:top;color:#999;letter-spacing:-.3px} @media (max-width:1279px){.summary_area .sub_info .sub_info_item{font-size:13px;line-height:16px} }@media (max-width:593px){.summary_area .sub_info .sub_info_item{font-size:14px;line-height:17px} }.summary_area .sub_info .sub_info_item:after{display:inline-block;width:2px;height:2px;margin:8px 6px 0;vertical-align:top;background-color:#999;border-radius:50%;content:""} @media (max-width:1279px){.summary_area .sub_info .sub_info_item:after{margin-top:7px} }.summary_area .sub_info .sub_info_item:last-child:after,.summary_area .sub_info .sub_info_item:only-child:after{display:none} .summary_area .description{position:relative;max-width:920px;margin-top:12px} @media (max-width:1599px){.summary_area .description{max-width:none} }@media (max-width:1279px){.summary_area .description{margin-top:6px} }@media (max-width:593px){.summary_area .description{margin-top:20px} }.summary_area .description .text{overflow:hidden;height:48px;font-size:15px;line-height:24px;color:#999;letter-spacing:-.3px;word-break:break-all} @media (max-width:1279px){.summary_area .description .text{height:38px;font-size:13px;line-height:19px} }@media (max-width:593px){.summary_area .description .text{height:42px;font-size:15px;line-height:21px;text-align:left} }.summary_area .title_area+.description{margin-top:4px} @media (max-width:767px){.summary_area .title_area+.description{margin-top:6px} }@media (max-width:593px){.summary_area .title_area+.description{margin-top:15px} }.summary_area .more{position:absolute;right:0;bottom:0;height:17px;padding:0 5px;font-size:13px;line-height:17px;color:#666;background-color:#fbfbfb} @media (max-width:593px){.summary_area .more{height:21px;font-size:15px;line-height:21px} } .option .btn_option { display: block; height: 100% } .option .btn_option:after { background-position: -424px -729px; width: 20px; height: 20px; margin-top: 15px } @media (max-width: 1279px) { .option .btn_option:after { background-position:-757px -459px; width: 19px; height: 4px; margin: 23px 0 0 1px } } .option .btn_like:after,.option .btn_option:after { display: inline-block; vertical-align: top; content: "" } .option .btn_like:after,.option .btn_option:after { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px } .num .icon_play:after { background-position: -687px -44px; width: 32px; height: 32px; visibility: hidden; } .end_section{ padding-top: 40px } @media (max-width: 1279px) { .end_section{ padding-top:30px } } .section_title_more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .section_title_more .link_more { display: inline-block; vertical-align: top; font-size: 16px; font-weight: 400; line-height: 30px; color: grey } @media (max-width: 1279px) { .section_title_more .link_more { font-size:15px; line-height: 28px } } .section_title { display: inline-block; padding-bottom: 14px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.5px; vertical-align: top; color: #fff } .section_title > img{height:29px} @media (max-width: 1279px) { .section_title { display:block; padding-bottom: 13px; font-size: 22px; line-height: 28px } } .artist_view{ padding: 50px 0 75px;} .artist_summary_section{position:relative;padding:50px;background:#111 no-repeat 50%/1830px;overflow: hidden;} @media (max-width:1599px){.artist_summary_section{padding-left:45px} }@media (max-width:1279px){.artist_summary_section{padding:40px 0} }@media (max-width:767px){.artist_summary_section{margin:0 -43px;padding-bottom:82px} }@media (max-width:593px){.artist_summary_section{margin:0 -20px} }.artist_summary_section:before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3);content:""} .artist_summary_section .summary_wrap{display:table;width:100%} @media (max-width:1279px){.artist_summary_section .summary_wrap{display:block;text-align:center} }.artist_summary_section .summary_thumb{display:table-cell;width:190px;vertical-align:top} @media (max-width:1279px){.artist_summary_section .summary_thumb{display:block;width:100%} }.artist_summary_section .summary_thumb .thumb_wrap{display:inline-block;position:relative;width:190px;height:190px;border-radius:50%;vertical-align:top} @media (max-width:1279px){.artist_summary_section .summary_thumb .thumb_wrap{width:170px;height:170px} }.artist_summary_section .summary_thumb img{width:100%;height:100%;border-radius:50%} .artist_summary_section .summary_thumb .more{display:none;position:absolute;top:0;right:0;bottom:0;left:0} @media (max-width:1599px){.artist_summary_section .summary_thumb .more{display:block} }.artist_summary_section .summary_thumb .more_count{position:absolute;right:13px;bottom:12px;height:28px;min-width:43px;padding:0 9px 0 8px;border-radius:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:14px;line-height:28px;text-align:center;color:#fff} .artist_summary_section .summary_thumb .option_area{position:relative;margin-top:10px} @media (max-width:1279px){.artist_summary_section .summary_thumb .option_area{position:absolute;top:20px;right:20px;margin:0} }@media (max-width:767px){.artist_summary_section .summary_thumb .option_area{top:unset;right:0;bottom:28px;left:0;margin:0 auto} }.artist_summary_section .summary_thumb .area_inner{width:100%} .artist_summary_section .summary_text{position:relative;display:table-cell;padding:0 40px;vertical-align:middle} @media (max-width:1279px){.artist_summary_section .summary_text{display:block;padding:0;margin-top:20px} }.artist_summary_section .summary_text .title_pc .title_link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;position:relative;display:inline-block;padding-right:26px;max-width:100%;max-height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:38px;line-height:45px;letter-spacing:-.5px;color:#fff;cursor:auto} @media (max-width:1279px){.artist_summary_section .summary_text .title_pc{display:none} }.artist_summary_section .summary_text .title_pc.is_link .title_link{cursor:pointer} .artist_summary_section .summary_text .title_pc.is_link .title_link:after{background-position:-687px -172px;width:20px;height:30px;position:absolute;top:8px;right:0;opacity:.4;content:""} .artist_summary_section .summary_text .title_mobile{overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box;display:none;font-size:26px;line-height:33px;letter-spacing:.34px;color:#fff} @media (max-width:1279px){.artist_summary_section .summary_text .title_mobile{display:block} }@media (max-width:767px){.artist_summary_section .summary_text .title_mobile{margin-top:20px} }@media (max-width:1279px){.artist_summary_section .summary_text .info_pc{display:none} }.artist_summary_section .summary_text .info_pc .info{display:table;table-layout:fixed;margin-top:15px;font-size:16px;line-height:20px;text-align:left} .artist_summary_section .summary_text .info_pc .info+.info{margin-top:9px} .artist_summary_section .summary_text .info_pc .info.info_activity,.artist_summary_section .summary_text .info_pc .info.info_member{margin-top:7px;line-height:24px} .artist_summary_section .summary_text .info_pc .info_term{display:table-cell;width:40px;color:hsla(0,0%,100%,.5)} .artist_summary_section .summary_text .info_pc .info_desc{display:table-cell;color:#fff} .artist_summary_section .summary_text .info_pc .info_desc a{color:#fff} .artist_summary_section .summary_text .info_mobile{position:relative;margin-top:5px;padding-right:12px;font-size:15px;line-height:19px;letter-spacing:-.3px;color:hsla(0,0%,100%,.7)} @media (max-width:1279px){.artist_summary_section .summary_text .info_mobile{display:inline-block} }@media (max-width:767px){.artist_summary_section .summary_text .info_mobile{margin-top:8px} }.artist_summary_section .summary_text .info_mobile:after{background-position:-548px -346px;width:9px;height:13px;position:absolute;top:3px;right:0;content:""} .artist_summary_section .summary_text .info_mobile .info_genre{position:relative;padding-right:13px} .artist_summary_section .summary_text .info_mobile .info_genre:after{position:absolute;top:8px;right:5px;width:2px;height:2px;background-color:hsla(0,0%,100%,.7);border-radius:100%;content:""} .artist_summary_section .thumbnail_list{display:table-cell;padding-bottom:12px;white-space:nowrap;vertical-align:bottom;text-align:right} @media (max-width:1599px){.artist_summary_section .thumbnail_list{display:none} }.artist_summary_section .thumbnail_list .list_item{position:relative;display:inline-block;width:70px;height:70px;overflow:hidden;vertical-align:bottom} .artist_summary_section .thumbnail_list .list_item+.list_item{margin-left:10px} .artist_summary_section .thumbnail_list .thumbnail{display:block;width:100%;height:100%} .artist_summary_section .thumbnail_list .img_thumb{width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .artist_summary_section .thumbnail_list .more{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.4);font-size:16px;line-height:70px;color:#fff;text-align:center} /* */ ul.album_list { display: grid; grid-template: auto / repeat(8, 1fr); -webkit-align-items: flex-start; align-items: flex-start;gap: 10px; } @media (max-width:1279px){ul.album_list{grid-template: auto / repeat(5, 1fr);}} @media (max-width:900px){ul.album_list{grid-template: auto / repeat(4, 1fr);}} @media (max-width:600px){ul.album_list{grid-template: auto / repeat(2, 1fr);}} ul.album_list .thumb_area .thumb { display: inline-block;width: 100%; height: auto;} .list_wrap_album{position:relative} .list_wrap_album .VueCarousel-navigation-next,.list_wrap_album .VueCarousel-navigation-prev{margin-top:-28px} .list_wrap_album_today{position:relative} .list_wrap_album_today .list_item{width:199px} @media (max-width:1599px){.list_wrap_album_today .list_item{width:165px} }@media (max-width:1279px){.list_wrap_album_today .list_item{width:162px} }.list_wrap_album_today .link{height:199px} @media (max-width:1599px){.list_wrap_album_today .link{height:165px} }@media (max-width:1279px){.list_wrap_album_today .link{height:162px} }.list_wrap_album_today .list_item+.list_item{margin-left:22px} @media (max-width:1599px){.list_wrap_album_today .list_item+.list_item{margin-left:15px} }@media (max-width:1279px){.list_wrap_album_today .list_item+.list_item{margin-left:11px} }.list_wrap_album_today .VueCarousel-navigation-next,.list_wrap_album_today .VueCarousel-navigation-prev{margin-top:-27px} .list_wrap_album .link{display:block} .list_wrap_album .link:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .list_wrap_album .link:after{display:none} .list_wrap_album .thumb{width:100%;} .list_wrap_album .title{position:relative;display:block;margin-top:11px;font-size:16px;line-height:19px;letter-spacing:-.1px;color:#fff} .list_wrap_album .title .text_wrap{display:-webkit-box;display:-ms-flexbox;display:flex} html .list_wrap_album .title .text_wrap:hover{text-decoration:underline} .list_wrap_album .title .text_wrap .text{overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} .list_wrap_album .title .text_wrap .badge_dolby{-ms-flex-negative:0;flex-shrink:0;margin-top:2px} .list_wrap_album .title .text_wrap .badge_dolby:after{background-position:-785px -145px;width:14px;height:15px;display:block;margin:0 2px 0 5px;content:""} .list_wrap_album .artist{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;position:relative;height:20px;margin-top:3px;font-size:15px;line-height:20px;letter-spacing:-.1px;color:#888} @media (max-width:1279px){.list_wrap_album.search_result .title{margin-top:0;font-size:17px} }.list_wrap_album_today .link{display:block} .list_wrap_album_today .link:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .list_wrap_album_today .link:after{display:none} .list_wrap_album_today .text_wrap{display:-webkit-box;display:-ms-flexbox;display:flex} .list_wrap_album_today .title{display:block;margin-top:11px;font-size:16px;line-height:19px;letter-spacing:-.47px;color:#fff} .list_wrap_album_today .title .text{overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;word-break:break-all;display:block;display:-webkit-box} html .list_wrap_album_today .title .text:hover{text-decoration:underline} .list_wrap_album_today .artist{display:block;overflow:hidden;text-overflow:ellipsis;word-break:break-all;position:relative;margin-top:3px;font-size:15px;line-height:20px;letter-spacing:-.3px;color:#888;white-space:nowrap} .artist_summary_section:before { position: absolute; top: 0; right: 0; content: ""; width: 100%; height: 100%; background-color:rgba(0,0,0,.3);-webkit-filter: blur(10px); -moz-filter: blur(10px); filter: blur(10px); cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; overflow: hidden; } .thumb_area { position: relative; white-space: normal; } html[data-platform*=mobile] .thumb_area:hover .link:after { display: none } .thumb_area:hover .btn_option_now,.thumb_area:hover .btn_play_now { opacity: 1 } .album_info_area .thumb_area .dropdown_wrap .btn_option_now:after,.album_track_area .thumb_area .dropdown_wrap .btn_option_now:after,.list_wrap_album .dropdown_wrap .btn_option_now:after,.list_wrap_album_today .dropdown_wrap .btn_option_now:after,.list_wrap_larger .dropdown_wrap .btn_option_now:after,.list_wrap_magazine .dropdown_wrap .btn_option_now:after,.list_wrap_news .dropdown_wrap .btn_option_now:after,.mag_headline .dropdown_wrap .btn_option_now:after,.mag_list .list_item .dropdown_wrap .btn_option_now:after,.more_option .btn_option.disabled:before,.more_option .btn_option:before,.more_option .btn_option_onstage:before,.recommend_result .recommend_item .btn_like:after,.recommend_result .recommend_item .btn_option:after,.recommend_result .recommend_item .btn_option_now:after,.settlement_2021 .dropdown_wrap .btn_option_now:after,.subend_section .list_item .dropdown_wrap .btn_option_now:after,.today_mag.pick .dropdown_wrap .btn_option_now:after,.today_mag.special .dropdown_wrap .btn_option_now:after { background-image: url(../img/sp_vibe.00b4ef4d.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px } .list_wrap_album .dropdown_wrap .btn_option_now:after { background-position: -521px -431px; width: 23px; height: 7px; display: block; margin: 17px auto 0; content: ""; } .list_wrap_album .dropdown_wrap { position: absolute; right: 2px; bottom: 2px; width: 42px; height: 42px } .list_wrap_album .dropdown_wrap .btn_option_now{display:inline-block;width:100%;height:100%;vertical-align:top;opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in} .list_wrap_album .dropdown_wrap .btn_option_now:after{background-position:-521px -431px;width:23px;height:7px;display:block;margin:17px auto 0;content:""} .list_wrap_album .dropdown_wrap .btn_option_now:focus{opacity:1} .list_wrap_album .dropdown_wrap .playable_dropdown{top:42px;right:0;left:auto} .subend_section .list_item .thumb_area:hover .btn_option_now,.thumb_area:hover .btn_option_now { opacity: 1 } @media (-ms-high-contrast:none),(hover: hover) and (pointer:fine) { .thumb_area:hover .link:after { opacity:1; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out } } .more_option{display:block;margin:0 auto} .more_option .btn_option{display:inline-block;vertical-align:top} .more_option .btn_option:before.disabled{background-position:-637px -354px;width:42px;height:42px;cursor:default} .more_option .btn_option:before{display:inline-block;vertical-align:top;content:"";background-position:-637px -304px;width:42px;height:42px;display:block} .more_option .btn_option_onstage{display:inline-block;padding:19px 11px 19px 12px;vertical-align:top} @media (max-width:1279px){.more_option .btn_option_onstage{padding:19px 10px 19px 9px} }.more_option .btn_option_onstage.disabled{opacity:.2;cursor:default} .more_option .btn_option_onstage:before{display:inline-block;vertical-align:top;content:"";background-position:-757px -368px;width:19px;height:4px;display:block} .more_option .btn_add.disabled,.more_option .btn_like.disabled{opacity:.2;cursor:default} .more_option .playable_dropdown{top:52px;left:0} .badge_title { display: table-cell; vertical-align: middle } .badge_title:after { background-position: -496px -451px; width: 37px; height: 15px; display: block; margin: 3px 0 0 7px; content: "" } .end_section{ position: relative; padding-top: 30px } .end_section+.end_section { padding-top: 30px } @media (max-width: 1279px) { .end_section+.end_section { padding-top:39px } } .station_wrap .station_list:after { display: block; content: ""; clear: both; } .station_wrap .station_list .list_item{display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box} .station_list .thumb_area{position:relative;padding-top:100%} .station_list .thumb_area img{width:100%;height:100%} .station_list .thumb_area .link{position:absolute;top:0;left:0;right:0;bottom:0} html .station_list .thumb_area .link{cursor:default} .station_list .thumb_area .link:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .station_list .thumb_area .link:after{display:none} .station_list .thumb_area:hover .btn_play_now,.station_list .thumb_area:hover .link:after{opacity:1} .station_list .thumb_area img{width:100%;height:100%} .station_list .thumb_area .link{position:absolute;top:0;left:0;right:0;bottom:0} html .station_list .thumb_area .link{cursor:default} .station_list .thumb_area .link:after{position:absolute;right:0;bottom:0;left:0;height:90px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25)));background:linear-gradient(transparent,rgba(0,0,0,.25));opacity:0;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;content:""} html[data-platform*=mobile] .station_list .thumb_area .link:after{display:none} .station_list .thumb_area:hover .btn_play_now,.station_list .thumb_area:hover .link:after{opacity:1} ul.station_list { gap: 10px; display: grid; grid-template: auto / repeat(7, 1fr); -webkit-align-items: flex-start; align-items: flex-start; gap: 20px; } @media (max-width: 1279px) { ul.station_list {grid-template: auto / repeat(4, 1fr);} } @media (max-width: 609px) { ul.station_list {grid-template: auto / repeat(2, 1fr);} } @media (max-width: 1279px) {.warp .content div#content-section{ margin: 0 43px; } } @media (max-width:800px){ .warp .content{ width: 100%;margin-left: 0;padding-top: 67px;} /* .warp .nav_get{left: -218px;} */ .warp .content div#content-section { margin: 0 20px; } } .btn_add_item .thumb_area:after { background-image: url(../img/sp_vibe.8a806985.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px; } .btn_add_item .info{ height: 42px; margin-top: 10px } @media (max-width: 593px) { .btn_add_item .info{ margin-top:11px } } .btn_add_item .title{ overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; height: 19px; font-size: 16px; line-height: 19px; letter-spacing: -.1px; color: #fff } .btn_add_item .thumb_area { position: relative; padding-top: 100%; text-align: center; background-color: #1f1f1f } .btn_add_item .thumb_area:after { background-position: -565px -4px; width: 64px; height: 64px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content: "" } .list_item .thumb_area .link{display: block;} .myalbum a.link { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURRoaGhERETZTak8AAAIlSURBVHja7doxbsIwGMVx0wyR2iHcIEfxUTgKPhpbV47gsWOGDgwINzgqOCQo339oFbUvQweLH++TIQnQ59Kzwz09RERERERERERERER+l9SYvKUASbVPMOWlX4ApowUT2Sea4hNN2Q0LIKV+XLATpShldSkXj1MCJsF5ONihP5tZytFR8pGvGWSwz+EyQ1IiJ53Dg0UNpsE02B8ZbIsHqxMerGX3lzh8IgtssE3CKRW6i/n3ONwwzCn9SP1gDUnpnz8OxJzS5pSWpPic4knKPqd4kpJwyvU17IaP41ZSDSmUwJT6lnIhpGOkuaWcIek3+cRJR8jh+52GSJP/2knIGxfIJofrK3pxhOSHnRx4w+Tnfw2EnOE38U25u+azMlLii921XpRO+oVERERERERERERE5J8R7YuIiIiIiIiIiIjIWkiNyb2+ZyVFfc9IyvqekZQrNnL9Tx5L8Ymm7IYVkPJYrQJEKUpZXcq9vmcmAZOivmckh6L2YiNHR8m4vmchD/U9C4mcPBSFfihFg2kwDbbKwbZ4sKK+Z01p2f0lulF9zzjYJuGUCt3FJvW9RTKt7y2SaX1vkbQ5pSUpflKsWyT7nOJJSsIpM/W9JTJT37MQmDJT37OQjpEmTep7RuKL+p6ddIQcxvU9I2mK+p6FhHF9z7LJYVzfs5D8OHPfca6+ZyBn+E18pr5nOCsjJdP63vJF6aRfSERERERERERERERE8vEF75usLCqqK/sAAAAASUVORK5CYII=); background-size: cover; } .more_option { display: table-cell; width: 84px; vertical-align: top } .option_area .more_option:after { display: block; content: ""; clear: both } @media (max-width: 1279px) { .option_area .more_option { width:80px } } @media (max-width: 593px) { .option_area .more_option { width:84px } } .option_area .more_option.only { width: 42px } .option_area .more_option .dropdown_wrap { float: right } .option_area .play_option+.more_option { padding-left: 10px } @media (max-width: 593px) { .option_area .play_option+.more_option { padding:4px 0 4px 10px } } .subend_section .list_item .dropdown_wrap ,.list_item .dropdown_wrap{ position: absolute; right: 6px; bottom: 6px; width: 42px; height: 42px } .subend_section .list_item .dropdown_wrap:hover .ly_option,.list_item .dropdown_wrap:hover .ly_option,.play_with_mp3 .dropdown_wrap:hover .ly_option{display: block;} .subend_section .list_item .dropdown_wrap .btn_option_now,.list_item .dropdown_wrap .btn_option_now{ display: inline-block; width: 100%; height: 100%; vertical-align: top; opacity: 0; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in } .subend_section .list_item .dropdown_wrap .btn_option_now:after,.list_item .dropdown_wrap .btn_option_now:after{ background-position:-521px -431px; width: 23px; height: 7px; display: block; margin: 17px auto 0; content: "" } .subend_section .list_item .dropdown_wrap .btn_option_now:focus { opacity: 1 } .subend_section .list_item .dropdown_wrap .btn_option_now+.ly_option, .list_item .dropdown_wrap:hover .ly_option { width: 210px } .subend_section .list_item .dropdown_wrap .ly_option,.list_item .dropdown_wrap:hover .ly_option { top: 42px; right: 0; left: auto } .subend_section .list_item .dropdown_wrap .ly_option.fixed { position: fixed } .subend_section .list_item .thumb_area:hover .btn_option_now,.list_item:hover .dropdown_wrap .btn_option_now { opacity: 1 } .option:hover .ly_option{display: block;} .header .ly_option { top: 44px; right: 0; width: 156px; background-color: #222 } @media (max-width: 767px) { .header .ly_option { display:none } } .header .ly_option .ly_item { color: #fff } .ly_option .ly_item.edt:before{display: inline-block; vertical-align: top; content: ""; background-position: -256px -729px; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} .ly_option .ly_item.delt:before { display: inline-block; vertical-align: top; content: ""; background-position: -32px -729px; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px; } .ly_option .ly_item.add:before {display: inline-block; vertical-align: top; content: ""; background-position: -4px -729px; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px; } .ly_option .ly_item.hot:before {display: inline-block; vertical-align: top; content: ""; background-position: -60px -729px; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px; } .header .ly_option .ly_item:active,html .header .ly_option .ly_item:hover { background-color: hsla(0,0%,100%,.07) } .ly_option .ly_item,.ly_option .spi_sns_share { cursor: pointer; position: relative; display: block; width: 100%; padding: 12px 16px 13px 40px; font-size: 15px; line-height: 17px; letter-spacing: -.32px; text-align: left; color: #fff; white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box } .ly_option .ly_item:hover{background-color: #ffffff12;} .profile_area:hover .ly_option{display: block;} .ly_option { display: none; position: absolute; z-index: 25; padding: 10px 0; white-space: nowrap; border-radius: 4px; background-color: #222; } .option .ly_option { top: 47px; right: 0; width: 240px; padding: 10px 0 10px; overflow: hidden; } .option .btn_like:after, .option .btn_option:after { display: inline-block; vertical-align: top; content: ""; } .option .btn_option:after { background-position:-424px -729px; width: 20px; height: 20px; margin-top: 15px; } .summary_section .summary_thumb { float: left; width: 240px; height: 240px; margin-right: 40px } @media (max-width: 1279px) { .summary_section .summary_thumb { width:180px; height: 180px; margin-right: 27px } } @media (max-width: 593px) { .summary_section .summary_thumb { float:none; width: 200px; height: 200px; margin: 0 auto } } .summary_section .summary_thumb img{ width: 100%; height: 100% } .summary_section .text_area { position: relative; min-height: 158px } @media (max-width: 1279px) { .summary_section .text_area { min-height:121px } } @media (max-width: 593px) { .summary_section .text_area { min-height:0; text-align: center } } .summary_section .title { overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; position: relative; right: 2px; padding-top: 7px; max-height: 47px; font-size: 38px; line-height: 40px; letter-spacing: -.3px; color: #fff } @media (max-width: 1279px) { .summary_section .title { padding-top:0; max-height: 60px; font-size: 24px; line-height: 30px } } @media (max-width: 593px) { .summary_section .title { right:0; padding: 0; max-height: 52px; font-size: 22px; line-height: 26px; letter-spacing: -.3px; -webkit-line-clamp: 2 } } .summary_section .sub_title { overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; margin-top: 6px; height: 20px; font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: -.3px; color: #fff } @media (max-width: 1279px) { .summary_section .sub_title { margin-top:4px; height: 19px; font-size: 16px; line-height: 19px } } @media (max-width: 593px) { .summary_section .sub_title { margin-top:4px; height: 21px; font-size: 18px; line-height: 21px } } .link_sub_title { color: #fff; } .summary_section .sub { margin-top: 8px } @media (max-width: 1279px) { .summary_section .sub { margin-top:7px } } @media (max-width: 593px) { .summary_section .sub { margin-top:8px } } @media (max-width: 1279px) { .summary_section .sub .item { font-size:13px; line-height: 16px } } @media (max-width: 593px) { .summary_section .sub .item { font-size:14px; line-height: 17px } } .summary_section .sub .item:after { display: inline-block; width: 2px; height: 2px; margin: 8px 6px 0 2px; vertical-align: top; background-color: #999; border-radius: 50%; content: "" } @media (max-width: 1279px) { .summary_section .sub .item:after { margin-top:7px } } .summary_section .sub .item:last-child:after,.summary_section .sub .item:only-child:after { display: none } .summary_section .info { position: relative; max-width: 920px; margin-top: 12px; padding-left: 280px } @media (max-width: 1599px) { .summary_section .info { max-width:none; padding-left: 0 } } @media (max-width: 1279px) { .summary_section .info { margin-top:6px } } @media (max-width: 593px) { .summary_section .info { margin-top:20px } } .summary_section .info .text { overflow: hidden; height: 48px; font-size: 15px; line-height: 24px; color: #999; letter-spacing: -.3px; word-break: break-all } @media (max-width: 1279px) { .summary_section .info .text { height:38px; font-size: 13px; line-height: 19px } } @media (max-width: 593px) { .summary_section .info .text { height:42px; font-size: 15px; line-height: 21px; text-align: left } } .my_music .summary_thumb{display: grid; grid-template: auto / repeat(2, 1fr); -webkit-align-items: flex-start; align-items: flex-start;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURRoaGhERETZTak8AAAIlSURBVHja7doxbsIwGMVx0wyR2iHcIEfxUTgKPhpbV47gsWOGDgwINzgqOCQo339oFbUvQweLH++TIQnQ59Kzwz09RERERERERERERER+l9SYvKUASbVPMOWlX4ApowUT2Sea4hNN2Q0LIKV+XLATpShldSkXj1MCJsF5ONihP5tZytFR8pGvGWSwz+EyQ1IiJ53Dg0UNpsE02B8ZbIsHqxMerGX3lzh8IgtssE3CKRW6i/n3ONwwzCn9SP1gDUnpnz8OxJzS5pSWpPic4knKPqd4kpJwyvU17IaP41ZSDSmUwJT6lnIhpGOkuaWcIek3+cRJR8jh+52GSJP/2knIGxfIJofrK3pxhOSHnRx4w+Tnfw2EnOE38U25u+azMlLii921XpRO+oVERERERERERERE5J8R7YuIiIiIiIiIiIjIWkiNyb2+ZyVFfc9IyvqekZQrNnL9Tx5L8Ymm7IYVkPJYrQJEKUpZXcq9vmcmAZOivmckh6L2YiNHR8m4vmchD/U9C4mcPBSFfihFg2kwDbbKwbZ4sKK+Z01p2f0lulF9zzjYJuGUCt3FJvW9RTKt7y2SaX1vkbQ5pSUpflKsWyT7nOJJSsIpM/W9JTJT37MQmDJT37OQjpEmTep7RuKL+p6ddIQcxvU9I2mK+p6FhHF9z7LJYVzfs5D8OHPfca6+ZyBn+E18pr5nOCsjJdP63vJF6aRfSERERERERERERERE8vEF75usLCqqK/sAAAAASUVORK5CYII=);background-size: cover;} .ly_playlist_item .ly_thumb.empty:after, .ly_playlist_item:hover .ly_thumb:after { background-image: url(../img/sp_vibe.8a806985.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_vibe.bf655ef6.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_vibe.bf655ef6.svg); background-size: 805px 798px;; } .modal { overflow-y: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30000; background-color: rgba(0,0,0,.6); outline: 0 } .ly_popup { overflow-y: hidden; position: relative; display: inline-block; margin: 50px 0; padding: 35px 0; vertical-align: middle; border-radius: 4px; background-color: #222; -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); box-shadow: 0 1px 3px 0 rgba(0,0,0,.2) } @media (max-width: 593px) { .ly_popup { padding:30px 0; text-align: left } } @media (max-width: 767px) { .modal.fixed_bottom { overflow:hidden; bottom: 70px } } @media (max-width: 767px) { .modal.fixed_bottom .layer:after { vertical-align:bottom } } @media (max-width: 767px) { .modal.fixed_bottom .layer:after { vertical-align:bottom } } .layer { width: 100%; height: 100%; text-align: center } .layer:after { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: "" } .ly_popup { min-width: 340px } @media (max-width: 593px) { .ly_popup { min-width:345px; text-align: center } } @media (max-width: 374px) { .ly_popup { min-width:300px } } .ly_popup.coupon_change { padding: 35px 0 } .ly_popup { width: 450px; margin: 50px 20px; padding: 40px 30px 50px; -webkit-box-sizing: border-box; box-sizing: border-box } @media (max-width: 593px) { .ly_popup { width:auto } } @media (max-width: 375px) { .ly_popup { padding:25px 20px 35px } } .ly_title { display: block; font-size: 24px; line-height: 29px; text-align: center; color: #fff } @media (max-width: 375px) { } .thumb_area .thumb { display: inline-block; width: 132px; height: 132px; border-radius:5px; } .thumb_area .thumb img { width: 100%; height: 100% } .input_area { text-align: left } @media (max-width: 800px) { .input_area { margin-top:0 } } .input_area .input_group+.input_group { margin-top: 20px } @media (max-width: 375px) { .input_area .input_group+.input_group { margin-top:15px } } .input_area .input_title { padding: 13px 14px 12px; border: 1px solid #2a2a2a; border-radius: 5px; line-height: 19px } .input_area .input_desc,.input_area .input_title { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #2a2a2a; font-size: 15px; color: #fff; -webkit-appearance: none } .input_area .input_desc { height: 76px; padding: 11px 14px; border: 1px solid #2a2a2a; border-radius: 4px; line-height: 22px; resize: none } .ly_btn_area { margin-top: 36px } @media (max-width: 375px) { .ly_btn_area { margin-top:25px } } .ly_popup .ly_btn_area a,.window_popup .ly_btn_area a { cursor: pointer; display: inline-block; min-width: 112px; padding: 0 15px 1px; border-radius: 4px; background-color: #2a2a2a; font-size: 15px; color: #fff; line-height: 46px; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box } @media (max-width: 593px) { .ly_popup .ly_btn_area a,.window_popup .ly_btn_area a { min-width:82px; line-height: 42px } } .ly_btn_area .btns { width: 132px; background-color: #2a2a2a } .ly_popup .ly_btn_area a.point,.window_popup .ly_btn_area a.point { border-color: #ff0050; background-color: #ff0050; color: #fff } .ly_btn_area .btns+.btns { margin-left: 10px } .quarter-wrap .quarter{ display: inline-block; width: 50%; height: 50%; vertical-align: top } .quarter-wrap.thumb{width: 100%;height: auto;float: left;} .quarter-wrap.thumb .quarter{float: left;} .input_area .label_public .text { margin-left: 10px; font-size: 15px; line-height: 16px; vertical-align: top; color: #fff; } .input_area .public_text{ margin-top: 8px; padding-left: 10px; line-height: 20px; color: #999; } .tgl { display: none; } .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl+.tgl-btn { box-sizing: border-box; } .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl+.tgl-btn::-moz-selection { background: none; } .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl+.tgl-btn::selection { background: none; } .tgl+.tgl-btn { outline: 0; display: block; width: 50px; /* 전체 가로사이즈 */ height: 25px; /* 전체 세로사이즈 */ position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tgl+.tgl-btn:after, .tgl+.tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .tgl+.tgl-btn:after { left: 0; } .tgl+.tgl-btn:before { display: none; } .tgl:checked+.tgl-btn:after { left: 50%; } .tgl-ios+.tgl-btn { background: #2a2a2a; /* 체크전 백그라운드 컬러 */ border-radius: 2em; padding: 2px; transition: all .4s ease; /*border: 1px solid #e8eae9; */} .tgl-ios+.tgl-btn:after { border-radius: 2em; background: #fff; /* 버튼컬러 */ transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); } .tgl-ios+.tgl-btn:hover:after { will-change: padding; } .tgl-ios+.tgl-btn:active { box-shadow: inset 0 0 0 2em #e8eae9; } .tgl-ios+.tgl-btn:active:after { padding-right: .8em; } .tgl-ios:checked+.tgl-btn { background: #c1c1c1; /* 체크후 백그라운드 컬러 */ } .tgl-ios:checked+.tgl-btn:active { box-shadow: none; } .tgl-ios:checked+.tgl-btn:active:after { margin-left: -.8em; } .paging_w { padding: 20px 0 30px; } .paging_w a { display: inline-block; padding: 6px 9px; color: #fff; font-size: 16px; background: #242424; border-radius: 4px; font-weight: bold; } .paging_w a.active { background: #585858; } .paging_w a:hover { background: #585858; } .popup_container:after { background: rgba(0,0,0,.6); content: ""; } .popup_container, .popup_container:after { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .modal_player_download_w, .popup_play_tooltip, .popup_w, .popup_w_big, .popup_w_img, .popup_w_setting { position: absolute; width: 340px; border-radius: 5px; -webkit-box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%); box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%); background: #fff; z-index: 2000; position: fixed; top: 50%; left: 50%; height: auto; padding: 30px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .popup_w_big { width:470px } .popup_w_big h3 { font-size:18px } .popup_w_big .inp_character_name { margin-top:15px; margin-bottom:15px } .popup_w_big .check_byte { color:transparent; text-indent:100%; vertical-align:middle; white-space:nowrap; overflow:hidden; width:0; height:0; font-size:0; line-height:0; z-index:-1 } .popup_w_big h3+.popup_content { overflow-x:hidden; margin-top:15px } .popup_w_big .popup_content { overflow-y:auto } .popup_w_big .popup_content .popup_put_mylist_ul { width:99% } .popup_w_big .popup_content li { border-bottom:1px solid #eee } .popup_w_big .popup_content .popup_sub_list li { border-bottom:0 } .popup_w_big .popup_content .pop_user_character_plus { position:relative; display:block; width:100%; height:75px; padding:14px 0; text-align:left } .popup_w_big .popup_content .pop_user_character_plus .character_pop_thumbnail { position:absolute; top:8px; left:0; width:16% } .popup_w_big .popup_content .pop_user_character_plus .character_pop_thumbnail img { display:inline-block; width:60px; height:60px; border-radius:60px; vertical-align:middle; background-size:100% auto; background-position:0 0; border-radius:5px } .popup_w_big .popup_content .pop_user_character_plus .character_pop_thumbnail.newlist_plus { width:60px; height:60px; min-width:60px; background-color:#f3f3f3; border-radius:5px; vertical-align:middle; text-align:center } .popup_w_big .popup_content .pop_user_character_plus .character_pop_thumbnail.newlist_plus:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; display:inline-block; margin:auto; background-image:url(../img/sp_button.5acded0c.png); background-position:-339px -569px; width:20px; height:20px; color:transparent; text-indent:100%; vertical-align:middle; white-space:nowrap; overflow:hidden } @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) { .popup_w_big .popup_content .pop_user_character_plus .character_pop_thumbnail.newlist_plus:before { background-image:url(../img/sp_button@2x.79e0e25e.png); background-size:622px 609px } } .popup_w_big .popup_content .pop_user_character_plus .character_info { padding-left:75px; vertical-align:middle } .popup_w_big .popup_content .pop_user_character_plus .character_info .character_w p { display:block; padding-top:7px; overflow:hidden; font-size:13px; color:#969696; text-overflow:ellipsis; white-space:nowrap } .popup_w_big .popup_content .pop_user_character_plus .character_info .character_w p.playlist_title { font-size:15px; color:#333 } .popup_w_big .popup_content .pop_user_character_plus .character_info .character_w p.playlist_add_text { font-size:15px; color:#3f3fff } .popup_w_big .popup_content .list_add_bnt_s { text-align:right; padding-top:20px } .popup_w_big .popup_content .list_add_bnt_s button { margin-left:20px; font-size:15px } .popup_w_big .popup_content .list_add_bnt_s button.on { color:#3f3fff } .popup_w_big .popup_content .popup_main_text { padding-top:30px; font-size:15px } .popup_w_big .popup_content .popup_sub_text { padding-top:5px; font-size:13px; color:#989898 } .popup_w_big .popup_content .popup_sm_text { padding-top:15px; font-size:13px } .popup_sub_list { margin-top:18px; padding-top:21px; border-top:1px solid #eee } .popup_sub_list li { position:relative; padding-top:15px; padding-left:15px; font-size:13px; color:#010101; line-height:1.46; border-bottom:0 } .popup_sub_list li:before { content:""; position:absolute; top:20px; left:0; background-image:url(../img/sp_icon.a308186b.png); background-position:-515px -120px; width:5px; height:5px; color:transparent; text-indent:100%; vertical-align:middle; white-space:nowrap; overflow:hidden } @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) { .popup_sub_list li:before { background-image:url(../img/sp_icon@2x.d7a0f198.png); background-size:531px 455px } } .popup_sub_list .inp_radio { margin-top:10px } .popup_w_big .popup_content .img_group { overflow:hidden; margin-top:20px } .popup_w_big .popup_content .img_group img { float:left; width:230px } .popup_w_big .popup_content .img_group img:last-child { float:right } .popup_play_tooltip { top:auto; bottom:130px; width:auto; padding:13px 20px } .popup_play_tooltip,.popup_play_tooltip:after { -webkit-transform:translate(-50%); transform:translate(-50%) } .popup_play_tooltip:after { content:""; position:absolute; bottom:-9px; left:50%; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid #fff } .popup_play_tooltip p { font-size:13px } .popup_w_img { width:420px; padding:0; border-radius:7px } .popup_w_img .popup_content { overflow:hidden; border-top-left-radius:7px; border-top-right-radius:7px } .popup_w_img .popup_content img { width:100%; vertical-align:top } .popup_w_img .popup_button_w { margin:21px 0 } .popup_w_img .popup_button_w label:before { -webkit-transform:scale(.58824); transform:scale(.58824) } .popup_w_img .popup_button_w label span { font-size:15px } @media (max-width: 593px) {.summary_section .ly_option { top: 51px; right: 5px; }} /*검색*/ .search_title{ font-size: 38px; line-height: 39px; letter-spacing: -.5px; color: #fff; } /* a.section_title:after { display: inline-block; vertical-align: top; content: ""; background-position: -732px -59px; width: 10px; height: 19px; margin: 4px 0 0 5px; } */ .result_section { position: relative; padding-top: 50px; } .result_section+.result_section{ padding-top: 65px; } @media (max-width: 1279px) { .search_title { font-size: 30px; line-height: 31px; letter-spacing: -.39px; } .section_title { display: block; padding-bottom: 13px; font-size: 22px; line-height: 28px; } a.section_title:after { margin: 4px 0 0 5px; } .result_section { padding-top: 30px; } .result_section+.result_section { padding-top: 50px; } } .sub_list{ position: relative;margin-top: 30px; } .sub_list.playlists{margin-top: 35px;} @media (max-width: 1279px) { .sub_list{ margin-top: 20px; } } .sub_list .thumb_area{ position: relative; padding-top: 100% } .sub_list .link { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .sub_list .link:after { position: absolute; right: 0; bottom: 0; left: 0; height: 90px; background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.25))); background: linear-gradient(transparent,rgba(0,0,0,.25)); opacity: 0; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; content: "" } .sub_list .thumb_area img{ width: 100%; height: 100% } .sort_order .item_wrap.on .item { color: #fff; font-weight: 700; } .sort_order .item_wrap.on .item:before{background-position:-785px -470px;width:14px;height:12px;display:inline-block;margin:3px 3px 0 8px;background-color:transparent;border-radius:0;vertical-align:top;content:""} .dropdown_wrap { position: relative } .ly_option { display: none; position: absolute; z-index: 25; padding: 10px 0; white-space: nowrap; border-radius: 4px; background-color: #222; } .option .ly_option { top: 47px; right: 0; width: 240px; padding: 10px 0 10px; overflow: hidden; } .option .btn_like:after, .option .btn_option:after { display: inline-block; vertical-align: top; content: ""; } .option .btn_option:after { background-position:-424px -729px; width: 20px; height: 20px; margin-top: 15px; } .ly_option .ly_song_info { padding: 14px 16px 13px; border-bottom: 1px solid #383838 } html .ly_option .ly_song_info:hover { background-color: hsla(0,0%,100%,.07) } .ly_option .ly_song_info+.ly_item { margin-top: 10px } .ly_option .ly_song_info:after { display: block; content: ""; clear: both } a.ly_item.btn_add_my:after{background-position:-228px -729px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_add_next:after{background-image: url(../img/play.svg); background-position:-4px -102px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_add_last:after{background-image: url(../img/play.svg); background-position:-4px -132px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_album_add_next:after{background-image: url(../img/play.svg); background-position:-4px -102px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_album_add_last:after{background-image: url(../img/play.svg); background-position:-4px -132px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_ualbum_add_next:after{background-image: url(../img/play.svg); background-position:-4px -102px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} a.ly_item.dropdown_ualbum_add_last:after{background-image: url(../img/play.svg); background-position:-4px -132px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} .slick-list {overflow: inherit !important;} .ly_option .ly_info_area { text-align: left; } .ly_option .ly_img_thumb { width: 100%; height: 100%; } .ly_option .ly_link_thumb { float: left; width: 44px; height: 44px; margin-right: 10px; } .ly_option .ly_info_album { font-size: 15px; color: #fff; } .ly_option .ly_info_album, .ly_option .ly_info_artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; line-height: 22px; } .ly_option .ly_info_artist { font-size: 13px; color: #888; } .ly_popup .ly_top_text { display: block; margin: 0 35px 10px; font-size: 15px; line-height: 19px; text-align: center; font-weight: 700; color: #fff } @media (max-width: 593px) { .ly_popup .ly_top_text { margin:0 30px 10px; font-size: 16px } } .ly_playlist_wrap { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: scrollbar; max-height: 233px; margin-top: 21px; padding: 0 12px 0 20px } .ly_playlist_wrap::-webkit-scrollbar { width: 8px } .ly_playlist_wrap::-webkit-scrollbar-track { background: hsla(0,0%,84.3%,.5); border-radius: 5px } .ly_playlist_wrap::-webkit-scrollbar-thumb { background: #999; border-radius: 5px } @media (max-width: 593px) { .ly_playlist_wrap { width:266px; max-height: 285px; margin-top: 14px } } .ly_playlist_item { display:flex; padding: 5px 14px;cursor: pointer; } @media (max-width: 593px) { .ly_playlist_item { padding:5px } } .ly_playlist_item:after { display: block; content: ""; clear: both; } .ly_playlist_item .ly_thumb { position: relative; float: left; width: 50px; height: 50px;margin-right: 14px } @media (max-width: 593px) { .ly_playlist_item .ly_thumb { width:50px; height: 50px; margin-right: 18px } } .ly_playlist_item .ly_thumb.empty { text-align: center; background-color: #2a2a2a } @media (max-width: 593px) { .ly_playlist_item .ly_thumb.empty:after { margin-top:15px; -webkit-transform: scale(1); transform: scale(1) } } .ly_playlist_item .ly_thumb:before { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background-color: rgba(0,0,0,.8); content: "" } .ly_playlist_item:hover { background-color: hsla(0,0%,100%,.07) } .ly_playlist_item:hover .ly_thumb:before { display: block } .ly_playlist_item .ly_title_area { overflow: hidden; height: 50px ;display: flex; align-items: center;} @media (max-width: 593px) { .ly_playlist_item .ly_title_area { height:50px } } .ly_playlist_item .ly_title_area .ly_inner { display: table-cell; text-align: left; vertical-align: middle } .ly_playlist_item .ly_playlist_title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; width: 218px; font-size: 14px; line-height: 17px; color: #fff } @media (max-width: 593px) { .ly_playlist_item .ly_playlist_title { width:172px; font-size: 16px; line-height: 23px } } .ly_playlist_item .ly_playlist_info { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; width: 172px; font-size: 13px; line-height: 16px; color: #999 } @media (max-width: 593px) { .ly_playlist_item .ly_playlist_info { width:172px; font-size: 15px; line-height: 23px } } a.btn_option { cursor: pointer; } .v-lazy-image-loaded{ opacity: 1 } .ly_playlist_item .ly_thumb img { width: 100%; height: 100% } .ly_popup .ly_close,.window_popup .ly_close { outline: medium; position: absolute; top: 9px; right: 9px; width: 34px; height: 34px; text-align: center ;cursor: pointer;} .ly_popup .ly_close:after,.window_popup .ly_close:after { display: inline-block; vertical-align: top; content: ""; background-position: -335px -633px; width: 18px; height: 18px; margin-top: 10px } .ly_option .ly_song_info { padding: 14px 16px 13px; border-bottom: 1px solid #383838 } html .ly_option .ly_song_info:hover { background-color: hsla(0,0%,100%,.07) } .ly_option .ly_song_info+.ly_item { margin-top: 10px } .ly_option .ly_song_info:after { display: block; content: ""; clear: both } a.ly_item.btn_add_my:after{background-position:-228px -729px; display: inline-block; vertical-align: top; content: ""; width: 20px; height: 20px; position: absolute; top: 10px; left: 15px;} .ly_option .ly_info_area { text-align: left; } .ly_option .ly_img_thumb { width: 100%; height: 100%; } .ly_option .ly_link_thumb { float: left; width: 44px; height: 44px; margin-right: 10px; } .ly_option .ly_info_album { font-size: 15px; color: #fff; } .ly_option .ly_info_album, .ly_option .ly_info_artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; line-height: 22px; } .ly_option .ly_info_artist { font-size: 13px; color: #888; } .ly_playlist_item .ly_thumb.empty:after { background-position:-452px -729px; width: 20px; height: 20px; margin-top: 16px; -webkit-transform: scale(.8); transform: scale(.8) } @media (max-width: 593px) { .ly_playlist_item .ly_thumb.empty:after { margin-top:15px; -webkit-transform: scale(1); transform: scale(1) } } .ly_playlist_item:hover .ly_thumb:after { background-position:-452px -729px; width: 20px; height: 20px; position: absolute; top: 6px; left: 15px; z-index: 20; margin-top: 10px; -webkit-transform: scale(.8); transform: scale(.8); content: "" } @media (max-width: 593px) { .ly_playlist_item:hover .ly_thumb:after { left:15px; margin-top: 15px; -webkit-transform: scale(1); transform: scale(1) } } .ly_playlist_item .ly_thumb.empty:after { display: inline-block; vertical-align: top; content: ""; } .library_menu{position:relative;padding-top:45px;overflow:hidden} @media (max-width:1279px){.library_menu{padding-top:25px} }@media (max-width:593px){.library_menu{padding-top:20px} }.library_menu:before{position:absolute;right:0;bottom:0;left:0;height:1px;background-color:hsla(0,0%,100%,.1);content:""} @media (max-width:593px){.library_menu:before{display:none} }.library_menu .menu_list{overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;margin-left:-13px;white-space:nowrap} .library_menu .menu_list::-webkit-scrollbar{display:none} @media (max-width:593px){.library_menu .menu_list{margin:0 -10px} }.library_menu .menu_item{display:inline-block;vertical-align:top;margin-left:8px} @media (max-width:593px){.library_menu .menu_item{margin-left:7px} }@media (max-width:593px){.library_menu .menu_item:first-of-type{margin-left:5px} }.library_menu .menu_item:last-of-type{margin-right:8px} @media (max-width:593px){.library_menu .menu_item:last-of-type{margin-left:7px} }.library_menu .link_menu{position:relative;display:inline-block;padding:5px 5px 18px;vertical-align:top;font-size: 16px; font-weight: bold;} @media (max-width:593px){.library_menu .link_menu{padding-bottom:13px} }.library_menu .link_menu.on:after{position:absolute;right:5px;bottom:0;left:5px;height:3px;background-color:#ff0050;content:""} .library_menu .link_menu.on.albums:after,.library_menu .link_menu.on.artists:after,.library_menu .link_menu.on.tracks:after{right:4px;left:6px} @media (max-width:593px){.library_menu .link_menu.on.albums:after,.library_menu .link_menu.on.artists:after,.library_menu .link_menu.on.tracks:after{right:5px;left:5px} }.library_menu .btn_prev{position:absolute;top:17px;left:0;bottom:5px;z-index:20;min-width:20px;background-image:-webkit-gradient(linear,right top,left top,from(transparent),to(#000));background-image:linear-gradient(270deg,transparent,#000)} @media (max-width:593px){.library_menu .btn_prev{top:9px;bottom:0} }.library_menu .btn_next{position:absolute;top:17px;right:0;bottom:5px;min-width:20px;z-index:20;background-image:-webkit-gradient(linear,left top,right top,from(transparent),to(#000));background-image:linear-gradient(90deg,transparent,#000)} .library_menu .btn_next:after{display:block;content:"";clear:both} @media (max-width:593px){.library_menu .btn_next{top:9px;bottom:0} }.library_menu .VueCarousel-navigation-prev{display:inline-block;position:absolute;left:0;padding:3px} .library_menu .VueCarousel-navigation-prev:before{width:32px;height:32px} .library_menu .VueCarousel-navigation-prev:after{background-position:-785px -448px;width:10px;height:14px;right:15px} .library_menu .VueCarousel-navigation-next{position:absolute;display:inline-block;right:0;padding:3px;vertical-align:top} html[data-platform*=mobile] .library_menu .VueCarousel-navigation-next{display:none} .library_menu .VueCarousel-navigation-next:before{width:32px;height:32px} .library_menu .VueCarousel-navigation-next:after{background-position:-785px -404px;width:10px;height:14px;left:15px} .header .btn_close_search:after,.header .mobile_wrap .btn_menu:after,.header .mobile_wrap .btn_search:after,.header .profile_area .profile .nickname:after,.header .recent_keyword_area .btn_delete:after { display: inline-block; vertical-align: top; content: "" } .header .btn_close_input:before,.header .btn_close_search:after,.header .floating_wrap .link_desktopapp,.header .floating_wrap .link_desktopapp:hover,.header .icon_search,.header .membership_area .link_subscribe:before,.header .membership_area .membership_desc.no_login:before,.header .membership_area .membership_desc.unsubscribe:before,.header .mobile_wrap .btn_menu:after,.header .mobile_wrap .btn_search:after,.header .mobile_wrap .link_goapp:before,.header .mobile_wrap .link_subscribe:before,.header .profile_area .link_login:before,.header .profile_area .profile .img_wrap .default_thumb,.header .profile_area .profile .nickname:after,.header .recent_keyword_area .btn_delete:after { background-image: url(../img/sp_topbar.4a489408.png); background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../img/sp_topbar.abb84804.svg); background-image: linear-gradient(transparent,transparent),url(../img/sp_topbar.abb84804.svg); background-size: 667px 630px } .header .input_search:focus+.icon_search{background-position:-256px -606px;width:20px;height:20px} @media (max-width:767px){.header .input_search:focus+.icon_search{background-position:-200px -606px;width:20px;height:20px} }.header .icon_search{background-position:-228px -606px;width:20px;height:20px;position:absolute;top:10px;left:13px} @media (max-width:767px){.header .icon_search{background-position:-200px -606px;width:20px;height:20px;top:15px;left:20px} } .header{position:fixed;top:0;left:0;bottom:81px;z-index:10100;background-color:#000;;} @media (max-width:1919px){.header{left:0;-webkit-transform:none;transform:none} } @media (min-width:800px){.header{width:225px} }@media (max-width:800px){.header{right:0;bottom:auto;width:auto;height:67px;border-right:none} }@media (max-width:593px){.header{height:64px} }@media (max-width:767px){.header .logo_wrap{float:left;padding-left: 20px;} }.header .logo_wrap .link_logo{display: flex; align-items: center;;vertical-align:top} @media (max-width:767px){.header .logo_wrap .link_logo{height:67px} }@media (max-width:593px){.header .logo_wrap .link_logo{height:64px} }.header .logo_wrap .link_logo .logo{margin: 22px 10px 24px 22px;} .header .logo_wrap .link_logo span{font-size:20px; font-family: "roboto";display: flex ; align-items: center;} .link_logo em{width: 40px; display: inline-block; height: 40px; position: relative;} .link_logo em:after { top: 0; right:0; position: absolute; content: ""; visibility: visible; width: 40px; height: 40px; margin: 0; background: url(../img/playing_white_50x50.png) 0 0 no-repeat; background-size: 2400px 40px; -webkit-animation: playing40 2s steps(60) infinite; animation: playing40 2s steps(60) infinite; } @-webkit-keyframes playing40 { 0% { background-position-x: 0 } to { background-position-x: -2400px } } @keyframes playing40 { 0% { background-position-x: 0 } to { background-position-x: -2400px } } @media (max-width:767px){.header .logo_wrap .link_logo .logo{margin:24px 10px 0 20px} }@media (max-width:593px){.header .logo_wrap .link_logo .logo{margin:22px 15px 0 20px} }.header .mobile_wrap{display:none;position:absolute;top:0;right:0;bottom:0;left:146px;padding-left:60px;text-align:right;} @media (max-width:767px){.header .mobile_wrap{display:block;} }@media (max-width:389px){.header .mobile_wrap{padding-left:40px} }@media (max-width:319px){.header .mobile_wrap{padding-left:0} }.header .mobile_wrap .link_goapp{position:absolute;top:0;left:0;padding:0 11px;height:67px} @media (max-width:593px){.header .mobile_wrap .link_goapp{height:64px} }@media (max-width:389px){.header .mobile_wrap .link_goapp{padding:0 8px} }@media (max-width:319px){.header .mobile_wrap .link_goapp{display:none} }.header .mobile_wrap .link_goapp:before{display:inline-block;vertical-align:top;content:"";background-position:-536px -486px;width:37px;height:14px;margin-top:27px} @media (max-width:593px){.header .mobile_wrap .link_goapp:before{margin-top:25px} }.header .mobile_wrap .link_subscribe{display:inline-block;padding:0 11px 0 9px;vertical-align:top;height:67px} @media (max-width:593px){.header .mobile_wrap .link_subscribe{height:64px} }@media (max-width:389px){.header .mobile_wrap .link_subscribe{padding:0 10px 0 8px} }@media (max-width:374px){.header .mobile_wrap .link_subscribe{display:none} }.header .mobile_wrap .link_subscribe:before{display:inline-block;vertical-align:top;content:"";background-position:-536px -464px;width:68px;height:14px;margin-top:27px} @media (max-width:593px){.header .mobile_wrap .link_subscribe:before{margin-top:25px} }.header .mobile_wrap .btn_search{display:inline-block;vertical-align:top;height:67px} @media (max-width:593px){.header .mobile_wrap .btn_search{height:64px} }.header .mobile_wrap .btn_search:after{background-position:-200px -606px;width:20px;height:20px} @media (max-width:767px){.header .mobile_wrap .btn_search:after{margin:24px 11px 0} }@media (max-width:593px){.header .mobile_wrap .btn_search:after{margin:22px 11px 0} }@media (max-width:389px){.header .mobile_wrap .btn_search:after{margin:22px 8px 0} }.header .mobile_wrap .btn_menu{display:inline-block;height:67px;vertical-align:top;text-align:center} @media (max-width:593px){.header .mobile_wrap .btn_menu{height:64px} }.header .mobile_wrap .btn_menu:after{background-position:-389px -134px;width:22px;height:16px;margin:25px 19px 0 10px} @media (max-width:593px){.header .mobile_wrap .btn_menu:after{margin:23px 19px 0 12px} }@media (max-width:389px){.header .mobile_wrap .btn_menu:after{margin:23px 17px 0 10px} }.header .menu_wrap{position:absolute;top:73px;right:0;bottom:0;left:0;padding:0 16px 0 24px;overflow-x: hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar} .header .menu_wrap::-webkit-scrollbar{width:8px} .header .menu_wrap::-webkit-scrollbar-thumb,.header .menu_wrap::-webkit-scrollbar-track{border-radius:5px} html .header .menu_wrap:hover::-webkit-scrollbar-track{background:hsla(0,0%,84.3%,.23)} html .header .menu_wrap:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.7%,.6)} html[data-platform*=mobile] .header .menu_wrap{-webkit-overflow-scrolling:auto} @media (max-width:767px){html[data-platform*=mobile] .header .menu_wrap{-webkit-overflow-scrolling:touch} }.header .menu_wrap.on,.header .menu_wrap.on .menu_area{display:block} .header .profile_area{width:197px;border:1px solid hsla(0,0%,100%,.1);border-width:1px 0} @media (max-width:1279px){.header .profile_area{width:177px} }@media (max-width:767px){.header .profile_area{display:none} }.header .profile_area .profile{display:block;padding:11px 4px} .header .profile_area .profile .img_wrap{float:left;width:30px;height:30px;margin-right:10px;overflow:hidden;border-radius:50%} .header .profile_area .profile .img_wrap img{width:100%} .header .profile_area .profile .img_wrap .default_thumb{background-position:-627px -104px;width:30px;height:30px;display:inline-block} .header .profile_area .profile .nickname{height:30px;overflow:hidden;white-space:nowrap} .header .profile_area .profile .nickname:after{background-position:-598px -486px;width:6px;height:6px;margin:12px 0 0 4px} @media (max-width:1279px){.header .profile_area .profile .nickname:after{margin-left:4px} }.header .profile_area .profile .text{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;max-width:135px;opacity:.8;font-size:15px;line-height:28px;vertical-align:top;color:#fff} @media (max-width:1279px){.header .profile_area .profile .text{max-width:115px} }html .header .profile_area .profile .text:hover{opacity:1} .header .profile_area .ly_option{top:44px;right:0;width:156px;background-color:#222} @media (max-width:767px){.header .profile_area .ly_option{display:none} }.header .profile_area .ly_option .ly_item{color:#fff} .header .profile_area .ly_option .ly_item:active,html .header .profile_area .ly_option .ly_item:hover{background-color:hsla(0,0%,100%,.07)} .header .profile_area .link_login{display:block;font-size:15px;padding:11px 0;line-height:19px;color:#999} .header .profile_area .link_login .text,.header .profile_area .link_login:before{display:inline-block;vertical-align:middle} .header .profile_area .link_login:before{background-position:-627px -104px;width:30px;height:30px;margin:0 10px 0 6px;border-radius:50%;content:""} .header .membership_area{margin-top:15px} @media (max-width:767px){.header .membership_area{display:none} }.header .membership_area .membership_desc{display:inline-block;padding:5px 0} .header .membership_area .membership_desc.no_login:before{display:inline-block;vertical-align:top;content:"";background-position:-4px -156px;width:192px;height:14px} @media (max-width:1279px){.header .membership_area .membership_desc.no_login:before{background-position:-4px -279px;width:123px;height:32px} }.header .membership_area .membership_desc.unsubscribe:before{display:inline-block;vertical-align:top;content:"";background-position:-241px -84px;width:163px;height:14px} .header .membership_area .link_subscribe{display:block;width:197px;height:44px;margin-top:7px;padding:14px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:5px;background-image:linear-gradient(104deg,#ff0c28 9%,#d901df 51%,#7200ff 98%)} .header .membership_area .link_subscribe:before{display:block;margin:0 auto;content:""} @media (max-width:1279px){.header .membership_area .link_subscribe{width:177px} }.header .membership_area .link_subscribe:before{background-position:-426px -68px;width:100px;height:16px} .header .search_area{position:relative;width:197px;margin-top:20px;border-radius:4px} @media (max-width:1279px){.header .search_area{width:177px} }@media (max-width:767px){.header .search_area{display:none;width:auto;margin-top:0;padding:7px 0 10px;border-radius:0;background-color:#000} }@media (max-width:593px){.header .search_area{padding-bottom:7px} }.header .input_area{position:relative;display:block} @media (max-width:767px){.header .input_area{padding:0 61px 0 10px} }.header .input_search{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;padding:10px 36px 10px 44px;width:100%;height:40px;border:0;background-color:#1a1a1a;border-radius:4px;font-size:17px;font-weight:700;line-height:20px;letter-spacing:-.3px;color:#fff;-webkit-transition:background-color .2s ease;transition:background-color .2s ease;caret-color:#ff0050;-webkit-appearance:none;-moz-appearance:none;appearance:none} @media (max-width:767px){.header .input_search{height:50px;padding:11px 15px 11px 40px;background-color:#000;font-size:22px;line-height:28px;-webkit-transition:none;transition:none} }.header .input_search::-webkit-input-placeholder{font-size:17px;font-weight:400;line-height:20px;letter-spacing:-.3px;color:hsla(0,0%,80%,.4)} .header .input_search::-moz-placeholder{font-size:17px;font-weight:400;line-height:20px;letter-spacing:-.3px;color:hsla(0,0%,80%,.4)} .header .input_search:-ms-input-placeholder{font-size:17px;font-weight:400;line-height:20px;letter-spacing:-.3px;color:hsla(0,0%,80%,.4)} .header .input_search::-ms-input-placeholder{font-size:17px;font-weight:400;line-height:20px;letter-spacing:-.3px;color:hsla(0,0%,80%,.4)} .header .input_search::placeholder{font-size:17px;font-weight:400;line-height:20px;letter-spacing:-.3px;color:hsla(0,0%,80%,.4)} @media (max-width:767px){.header .input_search::-webkit-input-placeholder{font-size:22px;line-height:28px} .header .input_search::-moz-placeholder{font-size:22px;line-height:28px} .header .input_search:-ms-input-placeholder{font-size:22px;line-height:28px} .header .input_search::-ms-input-placeholder{font-size:22px;line-height:28px} .header .input_search::placeholder{font-size:22px;line-height:28px} }.header .input_search:focus{outline:0;-webkit-box-shadow:0 0 4px 0 #000000;box-shadow:0 0 4px 0 #000000;background-color:#262626} @media (max-width:767px){.header .input_search:focus{border:1px solid #000000;-webkit-box-shadow:0 0 4px 0 #000000;box-shadow:0 0 4px 0 #000000;background-color:#000} }.header .input_search:focus+.icon_search{background-position:-256px -606px;width:20px;height:20px} @media (max-width:767px){.header .input_search:focus+.icon_search{background-position:-200px -606px;width:20px;height:20px} }.header .icon_search{background-position:-228px -606px;width:20px;height:20px;position:absolute;top:10px;left:13px} @media (max-width:767px){.header .icon_search{background-position:-200px -606px;width:20px;height:20px;top:15px;left:20px} }.header .btn_close_input{display:none;position:absolute;top:0;right:0;padding:12px 12px 8px} .header .btn_close_input:before{display:inline-block;vertical-align:top;content:"";background-position:-292px -424px;width:16px;height:16px} .header .btn_close_input.on{display:block} @media (max-width:767px){.header .btn_close_input.on{display:none} }.header .auto_keyword_area,.header .recent_keyword_area{z-index:20;position:fixed;top:292px;left:24px;width:400px;padding:9px 0 8px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.15);box-shadow:0 2px 5px 0 rgba(0,0,0,.15);border-radius:4px;background-color:#262626} @media (max-width:1919px){.header .auto_keyword_area,.header .recent_keyword_area{left:24px} }@media (max-width:767px){.header .auto_keyword_area,.header .recent_keyword_area{position:absolute;top:67px!important;right:0;left:0;width:auto;padding:10px 0;border-radius:0;-webkit-box-shadow:0 2px 10px 2px rgba(0,0,0,.3);box-shadow:0 2px 10px 2px rgba(0,0,0,.3);background-color:#222} }@media (max-width:593px){.header .auto_keyword_area,.header .recent_keyword_area{top:64px!important} }.header .auto_keyword_area .text_mood,.header .recent_keyword_area .text_mood{display:inline-block;margin-left:10px;font-size:14px;color:grey} .header .recent_keyword_area .keyword_title{font-weight:400} .header .recent_keyword_area .keyword_title .text{display:inline-block;padding:13px 0 0 16px;font-size:14px;line-height:17px;color:#999;vertical-align:top} @media (max-width:767px){.header .recent_keyword_area .keyword_title .text{padding-left:19px;font-size:15px;line-height:20px} }.header .recent_keyword_area .btn_delete_all{float:right;padding:13px 17px 16px;font-size:14px;line-height:17px;color:#666} @media (max-width:767px){.header .recent_keyword_area .btn_delete_all{padding:15px 20px;font-size:14px;line-height:20px} }.header .recent_keyword_area .keyword_list_item{display:table;width:100%;table-layout:fixed} .header .recent_keyword_area .recent_keyword{display:table-cell;padding:14px 0 13px 16px;vertical-align:middle} @media (max-width:767px){.header .recent_keyword_area .recent_keyword{padding:15px 20px} }.header .recent_keyword_area .recent_keyword .text_wrap{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;font-size:16px;line-height:19px;color:#fff} @media (max-width:767px){.header .recent_keyword_area .recent_keyword .text_wrap{font-size:15px;line-height:20px} }.header .recent_keyword_area .btn_delete{display:table-cell;width:49px;height:46px;text-align:center;vertical-align:middle} @media (max-width:767px){.header .recent_keyword_area .btn_delete{padding-right:1px;opacity:1} }.header .recent_keyword_area .btn_delete:after{background-position:-581px -486px;width:9px;height:9px;margin:19px 20px 18px} @media (max-width:767px){.header .recent_keyword_area .btn_delete:after{margin:21px 20px 20px} }.header .keyword_list_item.hover,.header .keyword_list_item:hover{background-color:hsla(0,0%,100%,.07)} html[data-platform*=mobile] .header .keyword_list_item.hover,html[data-platform*=mobile] .header .keyword_list_item:hover{background-color:transparent} .header .keyword_list_item.hover .auto_keyword:before,.header .keyword_list_item:hover .auto_keyword:before{opacity:1} html[data-platform*=mobile] .header .keyword_list_item.hover .auto_keyword:before,html[data-platform*=mobile] .header .keyword_list_item:hover .auto_keyword:before{opacity:.5} @media (max-width:767px){.header .keyword_list_item.hover .auto_keyword:before,.header .keyword_list_item:hover .auto_keyword:before{opacity:1} }.header .auto_keyword{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;padding:14px 17px 13px 16px;font-size:16px;line-height:19px;letter-spacing:-.3px;color:#999} @media (max-width:767px){.header .auto_keyword{padding:15px 20px;font-size:17px;line-height:20px} }.header .auto_keyword strong{color:#fff;font-weight:400} .header .auto_keyword .auto_keyword_mood{display:inline-block;margin-left:10px;font-size:14px;color:grey} .header .btn_close_search{display:none;position:absolute;top:0;right:0;bottom:0;width:60px;text-align:center} .header .btn_close_search:before{display:none;position:absolute;top:24px;bottom:23px;left:-1px;width:1px;background-color:#3a3a3a;content:""} @media (max-width:767px){.header .btn_close_search:before{display:block} }@media (max-width:593px){.header .btn_close_search:before{top:22px;bottom:22px} }.header .btn_close_search:after{background-position:-144px -606px;width:20px;height:20px;margin-top:24px} @media (max-width:767px){.header .btn_close_search:after{background-position:-172px -606px;width:20px;height:20px} }@media (max-width:593px){.header .btn_close_search:after{margin-top:22px} }.header .menu_area{width:197px;padding-bottom:130px} @media (max-width:1279px){.header .menu_area{width:177px} }@media (max-width:767px){.header .menu_area{position:fixed;top:0;right:100%;bottom:0;left:-100%;width:auto;z-index:20;margin-top:0;padding: 0;overflow-y:auto;background-color:#000;outline:0;transition:all 600ms cubic-bezier(0.86, 0, 0.07, 1)} .header .menu_area.on{left:0;right:0} .header .menu_area.with_banner{padding-top:102px} }.header .floating_wrap{position:absolute;bottom:0;right:0;left:0;padding:52px 24px 24px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(34%,#000),to(#000));background:linear-gradient(180deg,transparent,#000 34%,#000)} @media (max-width:767px){.header .floating_wrap{display:none} }.header .floating_wrap .link_app{display:block;border-radius:4px;border:1px solid hsla(0,0%,100%,.2);font-size:14px;line-height:42px;text-align:center;color:#fff} @media (max-width:1279px){.header .floating_wrap .link_app{line-height:48px} }.header .floating_wrap .link_app:hover{border-color:#fff} .header .floating_wrap .link_desktopapp{background-position:-4px -28px;width:197px;height:44px;display:block} @media (max-width:1279px){.header .floating_wrap .link_desktopapp{background-position:-241px -4px;width:177px;height:44px} }.header .floating_wrap .link_desktopapp:hover{background-position:-4px -80px;width:197px;height:44px;display:block} @media (max-width:1279px){.header .floating_wrap .link_desktopapp:hover{background-position:-4px -178px;width:177px;height:44px} }.header.searching{background-color:#000} .header.searching:after{display:block} .mb_login { display: none; margin-top: 12px; padding: 15px 13px; flex-direction: column; gap: 30px; margin: 24px 34px 14px; border-top: 1px solid #272727; } @media (max-width:593px){.header.searching .logo{display:none} .mb_login {display:flex} }@media (max-width:767px){.header.searching .btn_search{display:none} }.header.searching .btn_menu{display:none} @media (max-width:767px){.header.searching .menu_wrap{display:block;top:0;padding:0;overflow:visible} .header.searching .menu_wrap .membership_area{display:none} }.header.searching .link_goapp{display:none} @media (max-width:767px){.header.searching .btn_close_search,.header.searching .search_area{display:block} } .main_footer{ margin-top: 60px; text-align: center; word-break: keep-all; color: #fff; } .main_footer strong{display: block; font-size: 30px; line-height: 38px; letter-spacing: -.54px;} .main_footer p.txt{margin-top: 12px; font-size: 16px; line-height: 22px; color: #999;} .main_footer .img_playlists{height: 300px; margin-top: 45px; background: url(https://i.postimg.cc/xnJWqPCb/today-thumbs-CYDQNre-H.png); background-repeat: no-repeat; background-position-x: 50%; background-position-y: 0; background-size: auto 319px;} @media (max-width: 1499px){ .main_footer .img_playlists{height: 363px} } .footer {height: 99px; margin: 0 auto; margin-bottom: 70px; background-color: #111; } @media (max-width: 1919px) { .footer { width:auto; margin: 0 } } @media (max-width: 1279px) { .footer { left:225px; height: auto; padding-bottom: 38px } } @media (max-width: 767px) { .footer { bottom:70px; left: 0 } } @media (max-width: 1919px) { .footer { width:auto; margin: 0 } } @media (max-width: 1279px) { .footer { left:225px; height: auto; padding-bottom: 38px } } @media (max-width: 767px) { .footer { bottom:0px; left: 0 } } .notice { height: 52px; margin: 0 75px; padding-right: 200px; border-bottom: 1px solid #1d1d1d; } .notice:after { display: block; content: ""; clear: both } @media (max-width: 1279px) { .notice { margin:0 43px; padding-right: 0 } } @media (max-width: 767px) { .notice { margin:0 20px } } .notice .link{ float: left; margin-right: 5px; padding: 18px 5px 19px 0; font-size: 13px; line-height: 16px; color: #666; } .notice .title { height: 53px; overflow: hidden; } .notice ul{ margin-top: 0px; } .notice .list_item{ display: table; -webkit-transition: all .5s; transition: all .5s; } .notice .list_item .inner{ display: table-cell; height: 53px; vertical-align: middle; } .notice .notice_link{ overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: block; display: -webkit-box; height: 53px; font-size: 13px; line-height: 53px; vertical-align: middle; color: #fff; } .terms { margin: 0 65px } @media (max-width: 1279px) { .terms { max-width:450px; margin: 0 auto; padding: 19px 20px 12px; text-align: center } } @media (max-width: 767px) { .terms { padding-bottom:2px } } @media (max-width: 593px) { .terms { max-width:330px } } @media (max-width: 374px) { .terms { padding-bottom:0 } } .terms .item{ display: inline-block; padding: 15px 10px; font-size: 13px; line-height: 16px; vertical-align: top; color: #666; } @media (max-width: 1279px) { .terms .item { padding:5px 6px } } button { background: inherit; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; overflow: visible; padding: 0; } div#loading-icon { position: absolute; width: 100%; height: 100%; text-align: center; background: #ddd; top: 0; left: 0; z-index: 888888; } .search_bar.isActive{display:block} @media (min-width:768px){ .search_bar{background-color:#000;display:block;margin:0 auto;position:sticky;width:100%;padding: 14px 0;z-index:999;top: 0;left:0} } @media (max-width:500px){ .search_bar { position: fixed; z-index: 99999; top: 0; left: 0;width:100%; display:none} .search_bar.on{display:block} } .search_bar .inner{background-color:#000;border-radius:5px;position: relative;margin: 0 auto;} @media (min-width:1024px){.search_bar .inner{width:480px}} @media (min-width:1280px){.search_bar .inner{width:540px}} @media (min-width:1920px){.search_bar .inner{width:600px}} .search_bar .input_area{padding:15px 60px 15px 20px} @media (min-width:768px){.search_bar .input_area{padding:0} } .search_bar .input_area .frame{background-color:#ffffff1a;border-radius:5px;padding:11px 40px 11px 38px;position:relative;transition:all .3s} .search_bar .input_area .frame.on{background-color:#242424} @media (min-width:768px){ .search_bar .input_area .frame{padding-left:44px} } .search_bar .input_area .search_icon{color:#ffffff4d;height:18px;left:12px;position:absolute;top:11px;width:18px} @media (min-width:768px){.search_bar .input_area .search_icon{height:20px;left:14px;width:20px} }.search_bar .input_area .search_input{background-color:transparent;border:0;caret-color:#ff0050;color:#fff;font-size:15px;line-height:18px;margin:-5px 0;padding:5px 0;width:100%} .search_bar .input_area .search_input::-webkit-input-placeholder{color:#ffffff4d} .search_bar .input_area .search_input::-moz-placeholder{color:#ffffff4d} .search_bar .input_area .search_input:-ms-input-placeholder{color:#ffffff4d} .search_bar .input_area .search_input::-ms-input-placeholder{color:#ffffff4d} .search_bar .input_area .search_input::placeholder{color:#ffffff4d} .search_bar .input_area .search_input:focus{outline:none} .search_bar .input_area .search_input::-ms-clear,.search_bar .input_area .search_input::-ms-reveal{display:none;height:0;width:0} .search_bar .input_area .search_input::-webkit-search-cancel-button,.search_bar .input_area .search_input::-webkit-search-decoration,.search_bar .input_area .search_input::-webkit-search-results-button,.search_bar .input_area .search_input::-webkit-search-results-decoration{display:none} @media (min-width:768px){.search_bar .input_area .search_input{font-size:16px;line-height:20px} }.search_bar .input_area .button_reset{background-color:transparent;padding:12px 12px 11px 8px;position:absolute;right:0;top:0} @media (min-width:768px){.search_bar .input_area .button_reset{padding:13px 14px 11px 8px} }.search_bar .input_area .button_reset .icon{color:gray;height:16px;width:16px} .search_bar .input_area .button_cancel{color:#fff;font-size:16px;line-height:40px;position:absolute;right:20px;text-align:right;top:15px;white-space:nowrap;width:40px} @media (min-width:768px){.search_bar .input_area .button_cancel{display:none} }.search_bar .input_area .search_input:focus .search_icon{color:#fff} @media (min-width:768px){ .search_bar .keyword_area{background-color:#000;border-radius:0 0 5px 5px;left:0;margin-top:-6px;position:absolute;right:0;top:100%;z-index: 9;opacity: 0;pointer-events: none;} .search_bar .keyword_area.on{opacity: 1;pointer-events: auto;} } .search_bar .keyword_area .inner_keyword{-webkit-box-shadow:0 4px 4px 0 rgba(0,0,0,.25);box-shadow:0 4px 4px #00000040;padding-bottom:12px;position:relative} @media (min-width:768px){.search_bar .keyword_area .inner_keyword{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,.15)),color-stop(100%,hsla(0,0%,100%,.15)),to(#000));background:linear-gradient(0deg,#ffffff26,#ffffff26 100%,#000);border-radius:0 0 5px 5px;padding-top:17px} .search_bar .keyword_area .inner_keyword:before{background-color:#ffffff1a;content:"";height:1px;left:16px;position:absolute;right:16px;top:7px} }.search_bar .keyword_area .title_bar{display:-webkit-box;display:-ms-flexbox;display:flex;padding:13px 16px} .search_bar .keyword_area .title{color:#999;font-size:14px;line-height:20px} .search_bar .keyword_area .button_clear{color:#ff453a;font-size:14px;line-height:20px;margin-left:auto} .search_bar .list_keyword .item{position:relative} .search_bar .list_keyword .item.isHover,.search_bar .list_keyword .item:focus,.search_bar .list_keyword .item:hover{background-color:#ffffff14} .search_bar .list_keyword .item.isHover .button_delete,.search_bar .list_keyword .item:focus .button_delete,.search_bar .list_keyword .item:hover .button_delete{background-color:transparent} .search_bar .list_keyword .option{color:#999;display:block;font-size:16px;line-height:20px;overflow:hidden;padding:13px 46px 13px 16px;text-overflow:ellipsis;white-space:nowrap} .search_bar .list_keyword .option:only-child{padding-right:16px} .search_bar .list_keyword .option strong{color:#fff} .search_bar .list_keyword .icon{color:#ffffff4d;height:16px;margin:3px 12px 0 0;width:16px} .search_bar .list_keyword .category{color:gray;display:inline-block;font-size:13px;line-height:20px;margin-left:4px;vertical-align:top} .search_bar .list_keyword .button_delete{padding:17px 16px;position:absolute;right:0;top:0} .search_bar .list_keyword .icon_delete{color:gray;display:block;height:12px;width:12px} .content.is_searching .search_bar .input_area .search_icon{color:#fff} @media (min-width:768px){.mag_end .search_bar .inner{background-color:transparent} } .ly_bottom{ background-color: #232323f7; bottom: 70px; left: 0; outline: 0; padding: 14px 20px 15px; position: fixed; right: 0; text-align: center; z-index: 10300; } .ly_bottom .text{ color: #fff; font-size: 15px; line-height: 21px; margin-right: 6px; } .ly_bottom { bottom:70px; } .ly_bottom a{color: #fe1d67; font-size: 16px; font-weight: bold;} .header h1.logo_wrap { height: 70px; display: flex ; padding-left: 30px; } .membership { margin-top: 15px; } .membership .link_subscribe { display: block; text-align: center;margin-top: 7px; padding: 14px 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; background-image: linear-gradient(104deg, #ff0c28 9%, #d901df 51%, #7200ff 98%); } .membership .link_subscribe span.blind { font-size: 16px; position: relative; color: #fff; text-align: center; font-weight: bold; font-family: 'Malgun Gothic', dotum, sans-serif; vertical-align: middle; line-height: 0; } .floating_area { bottom: 0; left: 0; padding: 52px 13px 24px; position: absolute; right: 0; z-index: 1; } .floating_area:before { background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(42.74%, #000)); background: linear-gradient(180deg, transparent, #000 42.74%); bottom: 0; content: ""; height: 120px; left: 0; position: absolute; right: 0; } .floating_area:after {z-index: -1;background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(79.5%, #000)); background: linear-gradient(180deg, transparent, #000 79.5%); bottom: 0; content: ""; height: 120px; left: 0; position: absolute; right: 0; } .router-link-active{ border: 1px solid hsla(0, 0%, 100%, .2); border-radius: 4px; color: #ccc; display: block; overflow: hidden; padding: 8px 11px 9px; position: relative; text-align: center; } .text_app { color: currentColor; font-size: 16px; line-height: 25px; white-space: nowrap; } @media (max-width:1024px){ .floating_area{display:none} } /*이 노래 느낌 이어가기*/ .bg-this{background-color: #141414; background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 8px; display: inline-block; overflow: hidden; position: relative; vertical-align: top; white-space: normal; width: 288px;} .track-container{} .track-container .album{padding: 20px;} .track-container .album .album-cover{display: -webkit-box; display: -ms-flexbox; display: flex ; margin-bottom: 16px; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .track-container .album .album-cover .cover-link{-webkit-box-flex: 0; background-color: #d4d4d480; border-radius: 2px; -ms-flex: none; flex: none; height: 88px; margin-right: 16px; overflow: hidden; position: relative; width: 88px;} .track-container .album .album-cover .cover-link:after { border: 1px solid rgba(0, 0, 0, .1); border-radius: 2px; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .track-container .album .album-cover .cover-link img{height: 100%; width: 100%;} .track-container .album .album-cover .album-info{-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;} .track-container .album .album-cover .album-info .title{color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex ; font-size: 16px; font-weight: 700; line-height: 28px; margin-bottom: 2px; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .track-container .album .album-cover .album-info .title .ellipsis{display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .track-container .album .album-cover .album-info .artist{display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #ffffff80; font-size: 14px; font-weight: 400; line-height: 16px;} .track-container .album .album-cover .album-info .play-btn{display: inline-block; margin-top: 8px; overflow: hidden; position: relative; vertical-align: top;} .track-container .album .album-cover .album-info .play-btn:before { background-color: #fff; border-radius: 20px; bottom: 4px; content: ""; left: 4px; position: absolute; right: 4px; top: 4px; } .track-container .album .album-cover .album-info .play-btn svg{display: block; height: 31px; position: relative; width: 79px;vertical-align: top;} .track-container .album .album-cover .album-info .play-btn .blind{overflow: hidden; position: absolute; clip: rect(0 0 0 0); height: 1px; margin: -1px; width: 1px;} /**Similar Track Item 1 **/ .track-container .album .track-item{padding: 7px 0;display: flex;} .track-container .album .track-item .track-cover{ display: inline-block;-webkit-box-flex: 0; background-color: #d4d4d480; border-radius: 2px; -ms-flex: 0 0 50px; flex: 0 0 50px; height: 50px; overflow: hidden; position: relative; width: 50px;} .track-container .album .track-item .track-cover:before { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .track-container .album .track-item .track-cover:after { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' fill='none' viewBox='0 0 16 18'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m3.482 1.74 11.485 6.9a.844.844 0 0 1 0 1.438l-11.485 6.9a.81.81 0 0 1-1.119-.295.85.85 0 0 1-.113-.424V2.46c0-.46.366-.834.817-.834.146 0 .29.04.415.115Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat; content: ""; height: 17px; left: 50%; opacity: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 15px; } .track-container .album .track-item:hover .track-cover:after { opacity: 1; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .track-container .album .track-item:hover .track-cover:before { background-color: #0006; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .track-container .album .track-item .track-cover .blind{overflow: hidden; position: absolute; clip: rect(0 0 0 0); height: 1px; margin: -1px; width: 1px;} .track-container .album .track-item .track-cover img{height: 100%; width: 100%;} .track-container .album .track-item .track-info{overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding-left: 16px;display: flex ; flex-direction: column; align-items: flex-start;z-index:1;justify-content: center; gap: inherit;} .track-container .album .track-item .track-info .track-title{display: -webkit-box; display: -ms-flexbox; display: flex ;} .track-container .album .track-item .track-info .track-title a{color: #fff; display: block; display: inline-block; font-size: 16px; font-weight: 500; line-height: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap;} .track-container .album .track-item .track-info .track-artist{display: -webkit-box; display: -ms-flexbox; display: flex ;margin-top: 1px;} .track-container .album .track-item .track-info .track-artist a{color: #ffffff80; display: block; display: inline-block; font-size: 15px; font-weight: 400; line-height: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap;font-size: 14px; line-height: 18px;} .track-container .album .track-item .track-actions{} .track-container .album .track-item .track-actions .play-toggle{} .track-container .album .track-item .track-actions .play-toggle .icon{} .track-container .album .track-item .track-actions .play-toggle .blind{overflow: hidden; position: absolute; clip: rect(0 0 0 0); height: 1px; margin: -1px; width: 1px;} .track-container .album .track-item .track-actions .dropdown{} .more-link{display: -webkit-box; display: -ms-flexbox; display: flex ; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; background-color: #1a1a1a; color: #ffffff4d; font-size: 14px; height: 48px; justify-content: center; line-height: 19px; position: relative;} .quarter-wrap { overflow: hidden; border-radius: 4px; }