::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 0px none #ffffff; border-radius: 12px; } ::-webkit-scrollbar-thumb:hover { background: #c0c0c0; } ::-webkit-scrollbar-thumb:active { background: #c0c0c0; } ::-webkit-scrollbar-track { background: #ffffff; border: 0px none #ffffff; border-radius: 45px; } ::-webkit-scrollbar-track:hover { background: #ffffff; } ::-webkit-scrollbar-track:active { background: #ffffff; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-input-placeholder { color: #b0b0b0; } :-moz-placeholder { /* Firefox 18- */ color: #b0b0b0; } ::-moz-placeholder { /* Firefox 19+ */ color: #b0b0b0; } :-ms-input-placeholder { color: #b0b0b0; } .placeholder-style { color: #b0b0b0; } #loginHidden { width: 1px; height: 1px; overflow: hidden; position: absolute; } .placeholder { /*color: #b0b0b0; */ color: #ffffff; } .left { float: left; } .right { float: right; margin-top: 2px; } .arrow { width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #a1a1a1 transparent transparent transparent; } #debug { position: fixed; top: 20px; left: 20px; padding: 10px; background-color: #ffffff; color: red; font-size: 20px; z-index: 10000; } body { overflow-x: hidden !important; background-color: #000000; font-size: 1em; min-width: 990px; height: 100%; font-family: Helvetica Neue, Helvetica, Arial, Tahoma, sans-serif, 微軟正黑體, 微软正黑体, 'Microsoft JhengHei', 微軟雅黑體, 微软雅黑体, 'Microsoft YaHei', 華文黑體, 华文黑体, STHeiti, 華文細黑, 华文细黑, STXihei, '儷黑 Pro', 'LiHei Pro'; } a { color: #fff; outline: none; } #shadow { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000000; opacity: 0.6; } .container { margin: 0 auto; min-width: 998px; max-width: 1440px; width: 100%; min-height: 100%; position: relative; } .element-c { left: 0; float: left; z-index: 1; width: 100%; background-color: rgba(255, 255, 255, 0.7); } #bg .banner { position: fixed; top: 0; left: 0; width: 100%; z-index: -100; border: 2px solid red; min-width: 998px; text-align: center; } .banner.hide { display: none; } .banner.landing { min-height: 720px; } .banner img { max-width: 1440px; } .footer { position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; height: 100px; background-color: rgb(222, 222, 222); } .h_c { position: fixed; float: left; z-index: 997; width: inherit; height: 73px; min-width: 998px; max-width: 1440px; background-image: url('../images/top_background.png'); background-repeat: repeat-x; background-size: auto auto; background-position: left top; } #header { position: absolute; top: 0; left: 0; right: 0; z-index: 6; width: 93.4%; max-width: 1400px; min-width: 998px; height: 73px; margin: 0 auto; } #search { left: 0; right: 0; width: 260px; height: 30px; padding-top: 5px; float: left; margin-left: 40px; } #searchIcon { width: 22px; height: 22px; float: right; margin-top: 15px; cursor: pointer; opacity: 0.7; } #searchIcon:hover { opacity: 1; } ._input { color: #ffffff; display: block; clear: both; width: 100%; height: 36px; padding: 0 0 0 44px; border: 1px solid rgba(255, 255, 255, 1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: url('../images/icon_search.png') rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-size: auto auto; background-position: 12px 50%; /*font: 400 0.813em/1.38 Helvetica;*/ font-family: Arial, Helvetica; overflow: hidden; font-size: 18px; opacity: 1; } ._input::-webkit-input-placeholder { color: #a1a1a1; } ._input:-moz-placeholder { /* Firefox 18- */ color: #a1a1a1; } ._input::-moz-placeholder { /* Firefox 19+ */ color: #a1a1a1; } ._input:-ms-input-placeholder { /*color: #a1a1a1; */ } #searchLayer { margin: 80px auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 680px; z-index: 13001; display: none; } #searchLeftInside { float: left; width: 100%; } #searchBox .title { width: 100%; float: left; height: 28px; } #regionArtist { width: 100%; float: left; } #searchHistory { width: 100%; margin-bottom: 24px; float: left; } #searchHistory>div { padding: 8px 0px; float: left; width: 100%; font-size: 18px; } #searchLayer .close { background: url("/images/icon/close.png") no-repeat; background-size: cover; width: 32px; height: 32px; position: absolute; right: -48px; top: -48px; cursor: pointer; opacity: 0.7; } #searchLayer .close:hover { opacity: 1; } #searchLayer .nopredictive:hover { text-decoration: underline; } #searchHistory .history div { width: 622px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #clearSearchHistory { cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 6px 10px; border: 1px solid #ffffff; min-width: 116px; text-align: center; color: #ffffff; } #clearSearchHistory:hover { border: 1px solid #39d1b3; color: #39d1b3; } #viewArtistsCat { cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 6px 10px; color: #ffffff; background-color: #39d1b3; min-width: 116px; text-align: center; } #viewArtistsCat:hover { background-color: #27bb9d; } .searchRightArtist { margin: 24px 13px 24px 0px; float: left; width: 102px; } .searchRightArtist p { font-size: 14px; color: #ffffff; text-align: center; margin-top: 114px; } .artistF { margin-top: 10px; } .searchRightArtist img, .searchRightArtist .artist { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; width: 102px; height: 102px; } .searchRightArtist .artist:after { border: 1px solid rgba(255, 255, 255, 0.2); content: ''; position: absolute; border-radius: 50%; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 100; } .searchRightArtist:hover p { text-decoration: underline; } #dimLayer, #dimLayerAlert { position: fixed; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; z-index: 13000; top: 0; } #dimLayerCustom #close { position: absolute; top: 7%; left: 90%; cursor: pointer; width: 42px; } #dimLayerCustom, #dimLayerCustomAlert { position: fixed; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; z-index: 13000; top: 0; } #dimLayerCustom #close { position: absolute; top: 7%; left: 90%; cursor: pointer; width: 42px; } #frameLayer #close { position: absolute; left: 110%; cursor: pointer; width: 42px; z-index: 1500; } .upgradeframeLayer1 { height: 510px !important; background-image: -webkit-linear-gradient(-135deg, rgba(18, 149, 133, 1) 0%, rgba(5, 92, 80, 1) 32%, rgba(10, 53, 46, 1) 65%, rgba(8, 34, 29, 1) 100%); background-image: -moz-linear-gradient(-135deg, rgba(18, 149, 133, 1) 0%, rgba(5, 92, 80, 1) 32%, rgba(10, 53, 46, 1) 65%, rgba(8, 34, 29, 1) 100%); background-image: -o-linear-gradient(-135deg, rgba(18, 149, 133, 1) 0%, rgba(5, 92, 80, 1) 32%, rgba(10, 53, 46, 1) 65%, rgba(8, 34, 29, 1) 100%); background-image: linear-gradient(-135deg, rgba(18, 149, 133, 1) 0%, rgba(5, 92, 80, 1) 32%, rgba(10, 53, 46, 1) 65%, rgba(8, 34, 29, 1) 100%); background-color: black; position: relative; } .upgradeframeLayer1 .splashIn1 {} .upgradeframeLayer1>div:last-child { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center } .upgradeframeLayer1 .splashbg { cursor: pointer; width: 520px; height: 500px; } .upgradeframeLayer1 .splashbg2 { cursor: pointer; width: 520px; height: 410px; } .upgradeframeLayer1 .splashInbg { position: absolute; height: 170px; width: 100%; bottom: 0px; background-image: rgba(255, 255, 255, 1); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%); background-image: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 1))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%); } .upgradeframeLayer1.default{ text-align:center; background:none; height:510px; font-weight:200; } .upgradeframeLayer1.default > div:first-child{ background-color:#39D1B3; height:105px; margin-top:83px; position:relative; } .upgradeframeLayer1.default > div:first-child img{ position:relative; width:229px; top:-83px; } .upgradeframeLayer1.default > div:first-child img.retention{ position:relative; width:229px; top:-70px; } .upgradeframeLayer1.default .feature{ background-color:#ffffff; height:322px; font-size:16px; color:#a1a1a1; display:flex; align-items:center; flex-direction:column; line-height:24px; } .upgradeframeLayer1.default .feature > div:first-child{ font-size:20px; padding:14px; color:#555555; line-height:28px; font-weight:400; } .upgradeframeLayer1.default .feature > div:last-child{ line-height:20px; } .upgradeframeLayer1.default .feature ul{ padding:5px 8px 5px 43px; } .upgradeframeLayer1.default .feature li{ text-align:left; padding:5px; position:relative; } .upgradeframeLayer1.default .feature li:before{ content: ""; width: 20px; height: 20px; left: -28px; position: absolute; background: url(/images/ico_popup_upgrade_check.png); background-size:cover; } .iePopup>div:last-child { top: 36px; position: absolute; text-align: center; color: #ffffff; width: 400px; left: 60px; } .iePopup>div:last-child .title { font-weight: bold; line-height: 29px; font-size: 24px; } .iePopup>div:last-child .desc { font-size: 14px; line-height: 19px; text-align: center; margin-top: 8px; } .iePopup>div:last-child .desc a { color: #39d1b3; } .iePopup>div:last-child .chrome, .iePopup>div:last-child .edge, .iePopup>div:last-child .firefox { width: 48px; height: 48px; margin: 24px 12px; float: left; background-size: cover; } .iePopup>div:last-child .chrome { background-image: url('/images/btn_chrome_go.png'); margin-left: 104px; } .iePopup>div:last-child .edge { background-image: url('/images/btn_edge_go.png'); } .iePopup>div:last-child .firefox { background-image: url('/images/btn_firefox_go.png'); } .btn_popup_close { position: absolute; top: -45px; right: -52px; width: 30px; height: 30px; -webkit-filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); cursor: pointer; opacity: 0.8; z-index: 100000; } .btn_popup_close_terminate { position: absolute; top: -45px; right: -52px; width: 30px; height: 30px; -webkit-filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); cursor: pointer; opacity: 0.8; z-index: 100000; } .btn_popup_close:hover { opacity:1; } .btn_popup_close_terminate:hover { opacity:1; } .upgradeframeLayer1 .buttonsplashdiv { width: 100%; text-align: center; } .upgradeframeLayer1 .buttonsplash1 { padding:6px 0; font-size:14px; font-weight:200; line-height:20px; width: 296px; border: none; border-radius: 3px; color: white; background-color: rgba(57, 209, 179, 1) } .upgradeframeLayer1 .Line1 { width: 400px; text-align: center; margin: 0 auto; } .upgradeframeLayer1 .Line1a { margin: 12px auto 8px; width: 400px; } .upgradeframeLayer1 .Line2 { width: 400px; text-align: center; margin: 0 auto; padding-bottom: 8px; } .upgradeframeLayer1 .subline { vertical-align: bottom; /*min-height:40px;*/ margin-top: 8px; width: 400px; line-height: 1.2em; } .upgradeframeLayer1 .buttonsplash2 { height: 28px; width: 296px; border: 1px solid white; border-radius: 3px; color: white; background-color: black } #searchBox { color: #ffffff; z-index: 998; float: left; padding: 24px 0px; width: 680px; min-height: 588px; } #searchBox>a>div { color: #ffffff; margin-bottom: 24px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #searchBox>div { margin-bottom: 24px; } #chanLang { float: right; text-align: right; color: #fff; margin: 10px 15px 0 0; } #user { float: right; text-align: right; color: #fff; margin: 10px 27px 0 16px; position: relative; display: none; } #user span { left: -5px; position: relative; margin-left: 15px; } #btnImportant { float: right; text-align: right; color: #fff; margin: 16px 27px 0 42px; position: relative; cursor: pointer; } #btnImportant:before { content: ""; width: 16px; height: 16px; left: -24px; position: absolute; background: url(/images/notices.png); } #header .profile_pic { width: 25px; } #user img.down { position: absolute; top: 4px; width: 20px; } #user .profile_pic { width: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #user:hover .dropdown-menu { display: block; } #user .dropdown-menu { right: -49px; top: 27px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; left: auto; } #user a { color: #a1a1a1; } #user a:hover, #user li:hover, .dropdown-menu a:hover, .dropdown-menu>li:hover { color: #555555; } #upgrade, #freeReg { float: right; color: #ffffff; padding: 5px 20px; background-color: #39D1B3; cursor: pointer; margin: 13px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; } #upgrade:hover, #freeReg:hover { background-color: #27bb9d; } #upgradeNow { position: relative; color: #ffffff; padding: 10px 0px; background-color: #3ad0b3; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; bottom: 60px; left: 300px; width: 150px; text-align: center; } #frameLayer { margin: 80px auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 520px; height: 90%; z-index: 13001; max-height: 614px; } #frameLayer.remainder { height: 560px; } #frameLayer.upgradeAlert { width: 480px; overflow: scroll; max-height: 600px; } #frameLayer.directPay { margin: 82px auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 756px; height: 90%; max-height: 640px; z-index: 1000; } #frameLayer.safariTutor { margin: 82px auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 680px; max-height: 640px; height: 580px; } #frameLayer #cslUpgradeFrame, #frameLayer iframe { width: 520px; height: 100%; background-color: #ffffff; max-height: 640px; position: relative; } #frameLayer #loginFrame { width: 420px; } #frameLayer #safariTutor { width: 680px; height: 580px; } #frameLayer.directPay iframe { width: 756px; height: 700px; background-color: #ffffff; } #chanLang { float: right; text-align: right; color: #fff; margin: 10px 15px 0 0; } #chChi, #chEng { cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .chChi, .chEng { background-color: #ffffff; color: #a1a1a1; } #top_submenu { float: right; text-align: right; color: #fff; margin-top: 7px; } #top_submenu.member { margin: 10px 0; } #top_submenu div { top: 7px; left: -5px; position: relative; margin-left: 26px; } #top_submenu span { cursor: pointer; padding: 5px 12px; margin: 0 4px; } #top_submenu #introduction:hover, #top_submenu #directPay:hover, #top_submenu #redeem:hover, #top_submenu #login:hover, #top_submenu #chChi:hover, #top_submenu #chEng:hover, #btnImportant:hover { text-decoration: underline; } #top_submenu .profile_pic { position: relative; margin-right: 12px; } #menu-c { float: left; z-index: 998; width: 18.33%; max-width: 264px; position: fixed; } #menu-c .logo { margin: 10px 39px 10px 0; width: 177px; float: right; } #menu { width: 216px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: rgba(49, 49, 49, 0.8); margin: 24px 0 0 0; padding: 12px 0px; float: right; } #menu .button { height: 44px; padding: 0 16px; } #menu .button:hover, #menu .button.selected { background-color: rgba(0, 0, 0, 0.8); cursor: pointer; } #menu .icon { width: 24px; height: 24px; float: left; margin-top: 10px; } #menu .text { width: 154px; height: 44px; float: left; color: #ffffff; font-size: 14px; display: table; padding-left: 16px; } #menu .button:hover .text, #menu .button.selected .text { color: #39D1B3; } #menu .text div { display: table-cell; text-align: left; vertical-align: middle; } #menu .button.fi .text { height: 40px; border-top-right-radius: 5px; } #menu .button.fi .icon { height: 40px; border-top-left-radius: 5px; } #menu .button.li .text { height: 40px; border-bottom-right-radius: 5px; } #menu .button.li .icon { height: 40px; border-bottom-left-radius: 5px; } #bg { position: absolute; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; } #top { width: 100%; position: fixed; z-index: 500; top: 0; height: 340px; overflow: hidden; background-color: #000000; display: none; } #top.min { height: 240px; } #top .banner { top: 0; left: 0; width: 100%; z-index: -100; min-width: 1220px; text-align: center; } #top .banner.blur { -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } #top .banner.blur>div { max-width: 1440px; margin: 0 auto; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 340px; } #top .shadow { top: 0; left: 0; width: 100%; z-index: 10; min-width: 1220px; min-height: 400px; text-align: center; position: absolute; background-color: rgba(0, 0, 0, 0.1); } #submenu { width: 100%; position: absolute; bottom: 0; background-color: #000; height: 40px; Z-INDEX: 500; } #top.min #submenu { top: 200px; } #submenu:before { position: absolute; top: -20px; height: 20px; width: 100%; background: url(../images/profile_shadow_base.png) repeat-x; content: ""; } #submenu.on { background-color: rgba(0, 0, 0, 0.7); } .submenu>div { margin: 0 auto; min-width: 998px; max-width: 1440px; width: 100%; position: relative; } #submenu .list { float: right; width: 75%; margin-right: 3.33%; min-width: 700px; color: #ffffff; position: relative; height: 40px; } #submenu.on .list { border-bottom: 1px solid #a1a1a1; } #submenu .more .arrow { position: relative; left: 5px; top: 11px; } #submenu .more.on { background-color: #313131; margin-top: 0px; height: 40px; border: none; position: absolute; padding-top: 12px; } #submenu .more:after { content: ""; width: 0px; height: 0px; border-width: 5px 4px 0 4px; border-style: solid; border-color: #A1A1A1 transparent transparent transparent; top: 11px; position: relative; left: 2px; } #submenu .more.on:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #A1A1A1 transparent; top: -11px; } #submenu .more.on:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #a1a1a1 transparent; top: -11px; } #submenu .more:hover:after { border-width: 5px 4px 0 4px; border-color: #ffffff transparent transparent transparent; } #submenu .more.on:hover:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #ffffff transparent; } #submenu2 { width: 100%; position: FIXED; top: 339px; background-color: #000; height: 32px; z-index: 500; } #submenu2 .list { right: 0px; width: 75%; min-width: 700px; color: #a1a1a1; background-color: #313131; position: absolute; margin-right: 3.33%; } #submenu a, #submenu2 a { color: #a1a1a1; } #submenu .list LI { padding: 8px 0px; text-align: center; cursor: pointer; font-size: 14px; width: 16.66%; margin-top: 4px; display: inline-block; height: 36px; color: #a1a1a1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #submenu2 LI { padding: 0px 1.66%; cursor: pointer; font-size: 14px; width: 16.692%; height: 60px; display: table; float: left; } #submenu2 LI.-r { padding-right: 0px; width: 15%; } #submenu2 LI>div { display: table-cell; vertical-align: middle; } #submenu2 li.selected { color: #39D1B3; } #submenu li:hover, #submenu2 li:hover { color: #ffffff; } #submenu .more:hover #submenuMore { display: block; } #submenuMore { display: none; } #submenu li.selected { margin-top: 0px; border-top: 4px solid #39d1b3; color: #39d1b3; height: 40px; } #top #info { width: 100%; color: #ffffff; z-index: 500; top: 0; bottom: 0; position: absolute; } #top #info.hvCover { z-index: 530; } #top #info #style1 { top: 0px; position: absolute; width: 96%; height: 300px; } #top #info.hvCover #style1 .cover:before { border: 1px solid rgba(255, 255, 255, 0.2); content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } #top #info.hvCover #style1 .cover { position: absolute; bottom: -76px; width: 245px; height: 245px; overflow: hidden; } #top #info.hvCover #style1 .cover img { width: 100%; margin-right: 20px; } #top #info #style1 .name { position: relative; bottom: 0px; } #top #info.hvCover #style1 .name { margin-left: 265px; } #top #info .artist { font-size: 24px; margin-top: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; } #top #info .artist div { float: left; } #top #info .artist a { color: #ffffff; margin-right: 24px; } #top #info .artist a:hover { text-decoration: underline; } #top #info .artist span img, #share .title span img { width: 36px; height: 36px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 12px; position: relative; top: -2px; } #top #info .artist a span img.default { border: 0px; } #top #info .artist .more-artist, .moduleBN img { cursor: pointer; } #top #info .title { /* white-space: nowrap; */ text-overflow: ellipsis; overflow: hidden; width: 100%; font-size: 36px; line-height: 42px; display: -webkit-box; max-width: 100%; max-height: 80px; margin: 0 auto; line-height: 1.1 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #top #info .title .H4 { line-height: 30px; } #top #info #style1 .title { font-size: 36px; line-height: 42px; } #top #info #style2 { width: 96%; position: absolute; top: -340px; height: 200px; } #top.min #info #style2 { top: 0px; } #top #info .left { position: absolute; bottom: 32px; width: 100%; } .radio, .follow { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 118px; text-align: center; cursor: pointer; float: left; font-size: 14px; margin: 12px 16px 0px 0px; } .radio { background-color: #39d1b3; padding: 6px 0px; } .radio:hover { background-color: #27bb9d; } .radio img { width: 16px; } .radio img, .follow span { margin-right: 6px; position: relative; } .follow { padding: 5px 0px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid #ffffff; float: left; } .follow:hover { border: 1px solid #27bb9d; color: #27bb9d; } .follow span { padding: 4px 9px; background: url(../images/collect.png) center center; background-size: cover; } .follow:hover span { background: url(../images/collect_selected.png) center center; background-size: cover; } .follow.on span { background: url(../images/collect_selected.png) center center; background-size: cover; } /* .follow.personalchart{ width:135px; } */ .follow.personalchart span { background: none; } .follow.personalchart span:first-child { background: url(../images/add.png) center center; background-repeat: no-repeat; } .follow.personalchart.active:hover span:first-child { background: url(../images/add_selected.png) center center; background-repeat: no-repeat; } .follow.on { background-color: #ffffff; color: #27bb9d; } .follow.added { opacity: 0.5; } .follow.added:hover { border: 1px solid #ffffff; color: #ffffff; } .addTo { padding: 5px 10px; background-color: rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px; float: left; margin-right: 22px; } #top #info .addTo, #top #info .share { width: 28px; height: 28px; float: left; cursor: pointer; } #top #info .share, .moduleList .share, #playingItem .share { background: url(../images/icon/share.png) center center no-repeat; } #top #info .share:hover, .moduleList .share:hover, #playingItem .share:hover { background: url(../images/icon/share_over.png) center center no-repeat; } #top #info .fb-like { padding: 4px 16px; float: left; overflow: hidden; } #top #info .right { position: absolute; right: 0; bottom: 36px; } #top #info ul { float: right; max-width: 1260px; width: 85.75%; min-width: 700px; } #contentArea { position: absolute; width: 100%; left: 0; font-size: 14px; min-width: 998px; min-height: 100%; } #contentArea .element-c { left: 0; float: left; z-index: 1; width: 100%; background-color: #000000; margin-top: 340px; min-height: 100%; padding-bottom: 100px; position: relative; } #contentArea.min .element-c { margin-top: 240px; } #contentArea.landing .element-c { background-color: rgba(255, 255, 255, 0.7); margin-top: 0px; } #contentArea #sliderFrame { height: 640px; float: left; } #contentArea #shortcut-c { margin: 20px auto; position: relative; z-index: 1000; width: 890px; } #contentArea #shortcut-c .btn { margin: 0 58px; float: left; } #contentArea .content-c { margin: 0 auto; min-width: 998px; max-width: 1440px; width: 100%; min-height: 100%; position: absolute; left: 0; right: 0; overflow-x: hidden; overflow-y: hidden; } #contentArea .title { width: 100%; float: right; margin-top: 48px; color: #a3a3a3; font-size: 20px; } #contentArea .title span { font-size: 14px; font-weight: 100; margin-left: 20px; } #contentArea.landing .item { width: 100%; float: left; border: 2px solid green; } #contentArea .item .top { margin: 0 auto; min-width: 998px; max-width: 1440px; width: 100%; position: relative; } #contentArea .item#i0 .top { height: 518px; width: 87.5%; float: right; } #contentArea .item .top div { margin-top: 145px; width: 87.5%; padding-left: 1.2%; float: right; color: #ffffff; line-height: 30px; height: 250px; } #contentArea .item .top .txt { font-size: 20px; } #contentArea .item .top .artist { font-size: 35px; font-weight: bold; } #contentArea .item .top .product { font-size: 20px; font-weight: bold; } #contentArea .item .top .btn { padding: 10px 30px; background-color: #39d1b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .element { top: 0; left: 0; right: 0; z-index: 6; width: 78.33%; min-width: 700px; float: right; position: relative; width: 78.33%; padding-right: 3.33%; padding-bottom: 150px; } #contentArea #newAlbum { float: right; width: 100%; min-width: 615px; color: #ffffff; padding-bottom: 25px; } #contentArea #newAlbum .album { float: left; width: 13.8%; min-width: 120px; margin: 25px 1.2%; color: #646464; padding-bottom: 60px; } #contentArea #newAlbum .album .img { margin-bottom: 20px; } .artistProfile #artistMenu { width: 96%; margin: 0 auto; height: 50px; } .artistProfile #artistMenu div { float: left; height: 10px; padding: 10px 40px; margin-top: 4px; text-align: center; color: #ffffff; cursor: pointer; } .artistProfile #artistMenu div:hover, #artistMenu div.selected { margin-top: 0px; border-top: 4px solid #39d1b3; color: #39d1b3; } .moduleGrid, .moduleText { width: 102%; margin-left: -1%; } #contentArea .moduleText .title { font-weight: normal; font-size: 18px; color: #ffffff; line-height: 26px; padding: 0 1.2%; margin-bottom: 48px; } .moduleList .l-h { width: 100%; border-bottom: 1px solid #292929; float: left; color: #c9c9c9; display: table; table-layout: fixed; height: 60px; } .moduleList .l-h>div { display: table-cell; vertical-align: middle; height: 30px; } .moduleList .l-h .all { float: right; margin-right: 10px; color: #a3a3a3; } .moduleList .l-r { width: 100%; border-bottom: 1px solid #292929; float: left; color: #ffffff; height: 62px; display: table; table-layout: fixed; } .moduleList .l-r a:hover, .moduleGrid .item a:hover { text-decoration: underline; } .moduleList .l-r>div { display: table-cell; vertical-align: middle; height: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moduleList .l-r:hover, .moduleList .l-r.selected { background-color: rgba(255, 255, 255, 0.1); } .l-r .cover:before { border: 1px solid rgba(255, 255, 255, 0.2); content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .moduleList .l-r.playing .cover:before { background: url(../images/song_playing_back.png) center center no-repeat; background-size: cover; border: none; height: 64px; } .moduleList .l-r.playing .cover:after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: url(../images/song_playing_front.gif) center center no-repeat; } .moduleList .l-r.playing .song, .moduleList .l-r.playing .artist, .moduleList .l-r.playing .album, .moduleList .l-r.playing .artist a, .moduleList .l-r.playing .album a, .moduleList .l-r.playing .song a, #player_list .l-r.playing .song span, #player_list .l-r.playing .song span a, #videoList #player_list .l-r.playing .song { color: #39D1B3; } .l-r .song, .l-r .artist, .l-r .album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l-r a { color: #ffffff; } .moduleList.selectMode .select, .moduleList .num { width: 64px; min-width: 40px; text-align: center; position: relative; } .moduleList .select { width: 0px; -webkit-transition: width 0.5s; transition: width 0.5s; } #multiSelectBox .select, .moduleList .l-r .select { background-image: url('/images/checkbox_off.png'); background-position: 20px 20px; background-repeat: no-repeat; } #multiSelectBox .select.selected, .moduleList .l-r .select.selected { background-image: url('/images/checkbox_on.png'); cursor: pointer; } .moduleList .l-r.offair .select { background-image: none; } .moduleList.chart .num img { width: 20px; } .moduleList.APL .l-r.playing .num:before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: url(../images/song_playing_back.png) center center no-repeat; } .moduleList.APL .l-r.playing .num:after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: url(../images/song_playing_front.gif) center center no-repeat; } .moduleList.MV .cover { width: 85px; } .moduleList .cover { width: 64px; text-align: center; margin-right: 1.3%; min-height: 30px; position: relative; cursor: pointer; } .moduleList .l-r .play { display: none; position: absolute; z-index: 1; top: 0; margin: 0 auto; cursor: pointer; vertical-align: middle; } .moduleList .l-r:hover .play { display: table-cell; } .moduleList .l-r .play, .moduleList .l-r.playing .cover:after { opacity: 0.7; } .moduleList .l-r .play:hover, .moduleList .l-r.playing .cover:hover:after { opacity: 1; } .moduleList .l-r.playing:hover .play { display: none; } .moduleList .song { /*width:17%;*/ padding-left: 2%; cursor: pointer; } .moduleList.MV .song { width: 29%; } .moduleList.MV.AVL .song, .moduleList.APL .song { /*width:40%;*/ width: 37%; } .moduleList.selectMode.MV.AVL .song, .moduleList.selectMode.APL .song { width: 37%; } .moduleList .artist { width: 15%; padding-left: 2%; } .moduleList.MV .artist { width: 12%; } .moduleList.MV.AVL .artist, .moduleList.APL .artist { /*width:21%;*/ width: 18%; } .moduleList.selectMode.MV.AVL .artist, .moduleList.selectMode.APL .artist { width: 18%; } .moduleList.album .artist { width: 39%; } .moduleList.artist .artist { width: 60%; } .moduleList .album { width: 15%; padding-left: 2%; } #search-result .moduleList .album { width: 34%; } .moduleList.MV .album { width: 14%; } .moduleList .fnc1 { width: 128px; float: right; } .moduleList .l-r .fnc2 { display: none; width: 128px; } .moduleList .l-r .fnc1, .moduleList .l-r .fnc2 { float: right; } .moduleList .l-r:hover .fnc2 { display: table-cell; } .moduleList .l-r:hover .fnc1 { display: none; } .moduleList .E { float: left; width: 50%; height: 64px; } .moduleList .duration { float: left; width: 50%; padding-top: 25px; font-size: 14px; text-align: center; color: #a1a1a1; } .moduleList .share { float: right; width: 50%; cursor: pointer; } .moduleList .add { float: right; width: 50%; cursor: pointer; } .moduleList .E, .moduleList .share, .moduleList .add { text-align: center; width: 46px; height: 46px; margin: 9px; } .moduleList .E img, .moduleList .share img, .moduleList .add img { width: 46px; height: 46px; } #top #info .addTo, .moduleList .add, #playingItem .add { background: url(../images/icon/add.png) center center no-repeat; } #top #info .addTo:hover, .moduleList .add:hover, #playingItem .add:hover { background: url(../images/icon/add_over.png) center center no-repeat; } .moduleList .star { float: right; cursor: pointer; width: 64px; margin-right: 12px; } .moduleList .l-r .star { background: url(../images/star_off.png) center center no-repeat; } .moduleList .l-r .star.on { background: url(../images/star_on.png) center center no-repeat; } .moduleList .l-r .star:hover { background: url(../images/star_over.png) center center no-repeat; } .moduleList .l-r .star.on:hover { background: url(../images/star_on.png) center center no-repeat; } .moduleList .b-r { width: 100%; padding: 10px 0px; justify-content:space-between; color: #ffffff; } .moduleList .total { color: #ffffff; padding-left: 0.8%; font-size: 14px; } .moduleList .label { color: #ffffff; text-align: right; width:60%; line-height: 18px; } .moduleList .more, .moduleGrid .more, .moduleText .more, .moduleLyrics .more { float: right; color: #39d1b3; padding: 5px 0px; text-align: right; padding-left: 1.2%; cursor: pointer; font-size: 14px; } .moduleGrid .more { padding-right: 1.2%; } .moduleList .title .more a, .moduleGrid .title .more a, .moduleText .title .more a, .moduleLyrics .title .more a { color: #39d1b3; font-weight: normal; } #contentArea .moduleGrid .title, #contentArea .moduleList .title, #contentArea .moduleLyrics .title { float: left; color: #ffffff; font-size: 24px; } #contentArea .moduleGrid .title { padding-left: 1.2%; } .moduleGrid .item { float: left; width: 14.6675%; margin: 12px 1%; color: #cccccc; position: relative; font-size: 12px; line-height: 18px; } .moduleGrid.WEB .item { cursor: pointer } .moduleGrid.round .item { color: #ffffff; } .moduleGrid .item .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; width: 100%; height: 38px; } .moduleGrid.MV .item .name { float: left; } .moduleGrid.MV .item .pname:hover { cursor: pointer; text-decoration: underline; } .moduleGrid .item .descs { font-size: 12px; } .element.playlistCtr .moduleGrid .item .name { white-space: normal; overflow: hidden; height: 127px; padding: 0 8px; } .moduleGrid.MV .item, .moduleGrid.WEB .item { float: left; width: 23%; min-width: 120px; margin: 25px 1%; color: #cccccc; position: relative; font-size: 12px; line-height: 18px; } .moduleGrid .item .cover .duration { color: #cccccc; position: absolute; margin: auto; position: absolute; bottom: 15px; right: 15px; } .moduleGrid .item .ctr { text-align: center; } .moduleGrid .img:after { border: 1px solid rgba(255, 255, 255, 0.2); content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .moduleGrid .cover { position: relative; margin-bottom: 10px; line-height: 0px; } .moduleGrid.MV .cover, .moduleGrid.WEB .cover { float: left; } .moduleGrid .item .cover .img { width: 100%; } .moduleGrid.MV .item .cover .img, .moduleGrid.WEB .item .cover .img { height: 100%; position: absolute; top: 0; overflow: hidden; } .moduleGrid.MV .item .cover .img img, .moduleGrid.WEB .item .cover .img img { margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .moduleGrid .item .cover .preload { width: 100%; top: 0; position: relative; } .moduleGrid.round .item .cover .img img, .moduleGrid.round .cover .img:after { border-radius: 50%; } .moduleGrid .item:hover .img { opacity: 0.2; } .moduleGrid.WEB .item:hover .img, .moduleGrid.RPF .item:hover .img { opacity: 1; } .moduleGrid .item:hover .img:after { border: 2px solid #ffffff; } #i0_recently_played_landingGrid_hot_album .item:hover .img:after{ border: unset; } .moduleGrid .item:hover .preload { opacity: 0; } .cover .fnc { display: none; width: 92px; height: 36px; top: 0; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .moduleGrid .name a { color: #cccccc; } .moduleGrid.round .name a { color: #ffffff; } .item:hover .fnc { display: block; } .item .fnc .play { width: 36px; float: left; margin-right: 20px; cursor: pointer; } .item .fnc .more { width: 36px; float: left; cursor: pointer; position: relative; padding: 0; } .item .fnc .play:hover img, .item .fnc .more:hover img { opacity: 1; } .item .fnc .play img, .item .fnc .more img { opacity: 0.7; } .item:hover .fnc .more:hover .dropdown-menu { display: block; } .moduleLyrics { width: 96%; margin: 0 auto; } .moduleLyrics .item { float: left; width: 49%; margin-right: 2%; color: #cccccc; position: relative; line-height: 18px; } .moduleLyrics .item .cover { float: left; width: 30%; position: relative; } .moduleLyrics .item .name { float: left; width: 85%; margin-left: 12px; padding-top: 5px; } .moduleLyrics .item .name .productTitle { font-size: 26px; color: #ffffff; } .dropdown-menu { position: absolute; top: 100%; left: -62px; z-index: 1000; display: none; float: left; width: 166px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; text-align: right; } #nickNamePopUp { width: 328px; padding: 16px; left: -12px; display: block; margin-top: 10px; border-radius: 10px; } #nickNamePopUp:before { left: 18px; margin-left: 0; top: -11px; } #nickNamePopUp:after { left: 18px; margin-left: 0; top: -10px; } .moduleGrid .dropdown-menu { left: -108px; } .dropdown-menu:before { border-bottom: 11px solid rgba(0, 0, 0, 0.2); border-left: 11px solid rgba(0, 0, 0, 0); border-right: 11px solid rgba(0, 0, 0, 0); content: ""; display: inline-block; position: absolute; left: 100%; margin-left: -29%; top: -11px; } .dropdown-menu:after { border-bottom: 11px solid #FFFFFF; border-left: 11px solid rgba(0, 0, 0, 0); border-right: 11px solid rgba(0, 0, 0, 0); content: ""; display: inline-block; position: absolute; left: 100%; margin-left: -29%; top: -10px; } .dropdown-menu>li:first-child { border-radius: 10px 10px 0 0; } .dropdown-menu>li { display: block; padding: 8px 16px; clear: both; font-weight: normal; line-height: 1.428571429; color: #a1a1a1; cursor: pointer; } .playlistCtr .moduleGrid .item { height: 300px; background-color: #262626; } .playlistCtr .moduleGrid .item .dim { width: 100%; background: url(../images/dim.png); height: 41px; position: absolute; bottom: 0px; left: 0; } #player_wrapper { display: none; position: fixed; height: 70px; left: 0; right: 0; bottom: 0; z-index: 11000; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; transition: .3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); overflow: hidden; background-color: #ffffff; } #player_bg { width: 110%; position: absolute; height: 120%; top: -10%; left: -5%; bottom: 0; -webkit-filter: blur(30px); -moz-filter: blur(30px); -o-filter: blur(30px); -ms-filter: blur(30px); filter: blur(30px); background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(../images/general_default_player_blur.jpg); } #player_wrapper .shadow { width: 110%; position: absolute; height: 120%; top: -10%; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); } #player_bg img { width: 110%; position: absolute; margin: -5px -5px -5px -5px; top: 0; left: 0; bottom: 0; } #player { width: 96%; min-width: 998px; max-width: 1440px; margin: 0 auto; position: absolute; color: #ffffff; height: 70px; left: 0; right: 0; bottom: 0; padding: 0 2%; } #player>#player_ext { width: 100%; height: 70px; position: absolute; top: 0; left: 0; } #player>.btn { float: left; margin-top: 15px; position: relative; cursor: pointer; margin-right: 1.6%; opacity: 0.7; } #player>.btn:hover { opacity: 1; } #player #lyrics { margin-top: 25px; } #player>#progressBar>.slider { width: 404px; } #player>#progressBar { float: right; margin-top: 15px; } #player>#progressBar>#title { margin-bottom: 5px; width: 404px; height: 15px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #player>#mute { float: right; cursor: pointer; margin-right: 1.6%; margin-top: 28px; } #player>#duration { float: right; margin-top: 35px; margin-right: 1.6% } #player>#timer { float: right; margin: 35px 1.6% 0 1.6%; } #player>#volume { float: right; cursor: pointer; margin-top: 35px; } #player>#volume>.slider { width: 120px; } #player>#thumbnail { width: 50px; margin-top: 10px; float: right; cursor: pointer; position: relative; } #player>#prev, #player>#next, #player>#pause { cursor: pointer; } #player>#currentPlaylist { float: right; } #player_info { width: 96%; padding: 0 2%; min-width: 998px; max-width: 1440px; margin: 0 auto; position: absolute; color: #ffffff; height: 570px; left: 0; right: 0; bottom: 70px; } #player_info .left { float: left; width: 32%; } #player_info .left div { text-align: center; margin-bottom: 15px; position: relative; } #player_info .left .cover:after { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; } #player_info .left a { color: #ffffff; } /*#player_info .left a:hover{ text-decoration:underline; }*/ #player_info #player_shuffle { height: 30px; float: left; cursor: pointer; background-size: cover; background-position: center center; } #player_info #player_shuffle.off { background-image: url(../images/icon/shuffle.png); } #player_info #player_shuffle.on { background-image: url(../images/icon/shuffle_selected.png); } #player_info #player_repeat { height: 30px; float: left; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-size: cover; background-position: center center; } #player_info #player_repeat.off { background-image: url(../images/icon/repeat.png); } #player_info #player_repeat.one { background-image: url(../images/icon/repeatx1_selected.png); } #player_info #player_repeat.loop { background-image: url(../images/icon/repeat_selected.png); } #player_info .left .btn { width: 324px; margin: 0 auto; } #player_info .left .btn>div { float: left; width: 27px; margin: 0 27px; cursor: pointer; opacity: 0.7; } #player_info .left .btn>div:hover { opacity: 1; } #player_info .l-h, #player_info .l-r { border: none; margin-bottom: 1px; background-color: rgba(70, 70, 70, 0.3); } #player_info .l-r .cover { margin-top: 9px; } #player_info .right { float: right; width: 62%; } #player_info .total { background-color: rgba(38, 38, 38, 0.7); padding: 13px 10px; margin: 1px auto; font-size: 12px; } #player_list, #player_info #lyric { height: 500px; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.4); } #player_info #lyric { display: none; text-align: center; line-height: 24px; letter-spacing: 1px; width: 100%; margin: 0 auto; height: 542px; padding: 24px; } #player_list .l-r .song, #player_list .l-r .artist { width: 60%; line-height: 18px; font-size: 14px; } #player_list .l-r .song span, #player_list .l-r .song span a { color: #a1a1a1; } #player_wrapper #close, #videoplayer_wrapper #close { position: absolute; top: -58px; right: 42px; cursor: pointer; width: 30px; } #close { opacity: 0.7; } #close:hover { opacity: 1; } #share { width: 520px; height: 490px; z-index: 13000; top: 0; left: 0; bottom: 0; right: 0; background-color: #ffffff; position: fixed; margin: 80px auto; } #share .header { padding: 24px; position: absolute; color: #39d1b3; background-color: #fff; width: 100%; font-size: 24px; } #share .bg { width: 100%; position: absolute; top: 72px; height: 172px; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-filter: blur(35px); -moz-filter: blur(35px); -o-filter: blur(35px); -ms-filter: blur(35px); filter: blur(35px); } #share .bg .shadow { top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.1); width: 100%; height: 100%; } #share .img { width: 176px; height: 176px; position: absolute; top: 96px; left: 24px; /*border:1px rgba(0,0,0,0.15) solid;*/ overflow: hidden; } #share .img:after { width: 176px; height: 176px; border: 1px solid rgba(255, 255, 255, 0.2); content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 100; } #share .title { width: 236px; position: absolute; top: 166px; left: 215px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; font-size: 22px; } #share textarea { width: 472px; height: 88px; position: absolute; top: 288px; left: 24px; padding: 10px; font-size: 14px; resize: none; background-color: #f7f7f7; } #share .btn_ctn { width: 472px; position: absolute; top: 370px; left: 24px; display: flex; } #share .icon_ctn { width: 245px; height: 32px; float: left; display: none; } #share .icon_ctn div.btn { width: 32px; float: left; margin-right: 5px; cursor: pointer; } #share .icon_ctn div.txt { width: auto; padding-top: 10px; color: #a3a3a3; float: left; margin-right: 5px; font-size: 14px; } #share .icon_ctn div.selected, #share .icon_ctn div:hover { float: left; margin-right: 5px; opacity: 1; } #share .submit_ctn { width: 244px; float: right; } #share .submit_ctn div { padding: 7px 25px; float: right; margin-left: 12px; cursor: pointer; border-radius: 3px; color: #ffffff; font-size: 14px; width: 116px; text-align: center; } #share .submit_ctn #btn_share, #addToPlaylist #create, #addToPlaylist.editCoverImage #export { background-color: #39d1b3; } #share .submit_ctn #btn_cancel, #addToPlaylist #cancel, #addToPlaylist #back, #albumArtist #cancel { background-color: #a1a1a1; } #share .submit_ctn #btn_cancel { margin-left: 0px; } #share .submit_ctn #btn_cancel:hover, #addToPlaylist #cancel:hover, #addToPlaylist #back:hover, #albumArtist #cancel:hover { background-color: #555555; } #share .submit_ctn #btn_share:hover, #addToPlaylist #create:hover, #addToPlaylist.editCoverImage #export:hover { background-color: #27bb9d; } #addToPlaylist #back:hover { background-color: #555555; } #share .link_ctn { width: 496px; position: absolute; top: 438px; left: 0px; } #share .link_ctn input { width: 326px; height: 30px; float: left; background-color: #f7f7f7; } #share #btn_copy { float: right; padding: 10px 25px; float: right; cursor: pointer; border-radius: 3px; color: #ffffff; background-color: #b2b2b2; } .slider { width: 300px; margin-top: 0px; } .slider>.dragger { background: #39d1b3; background: -webkit-linear-gradient(top, #39d1b3, #4abba5); background: -moz-linear-gradient(top, #39d1b3, #4abba5); background: linear-gradient(top, #39d1b3, #4abba5); -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 16px; height: 16px; } .slider>.dragger:hover { background: -webkit-linear-gradient(top, #39d1b3, #39d1b3); } .slider>.track, .slider>.highlight-track { background: #ccc; background: -webkit-linear-gradient(top, #bbb, #ddd); background: -moz-linear-gradient(top, #bbb, #ddd); background: linear-gradient(top, #bbb, #ddd); -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; height: 4px; } .slider>.highlight-track { background-color: #39d1b3; background: -webkit-linear-gradient(top, #39d1b3, #4abba5); background: -moz-linear-gradient(top, #39d1b3, #4abba5); background: linear-gradient(top, #39d1b3, #4abba5); border-color: #496805; } #progressBar .output, #volume .output { display: none; } #addToPlaylist, #albumArtist { /*width:558px;*/ height: 604px; /*position:fixed;*/ background-color: #ffffff; } #addToPlaylist input { width: 100%; padding: 10px; height: 28px; background-color: #f7f7f7; border: none; font-size: 14px; } #addToPlaylist .errorMsg { color: #ff0000; height: 24px; padding-top: 5px; /*line-height: 24px;*/ font-size: 12px; } #addToPlaylist input.error, #addToPlaylist textarea.error, #addToPlaylist #cover-preview.error { border: 1px solid #ff0000; } #addToPlaylist .zoom input[type="range"] { padding: 0px; width: 160px; margin-top: 16px; -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ background: transparent; /* Otherwise white in Chrome */ } #addToPlaylist .zoom input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } #addToPlaylist .zoom input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } #addToPlaylist .zoom input[type=range]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } #addToPlaylist .zoom input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 50%; height: 20px; width: 20px; background: #ffffff; cursor: pointer; margin-top: -10px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ */ } /* All the same stuff for Firefox */ #addToPlaylist .zoom input[type=range]::-moz-range-thumb { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 50%; height: 20px; width: 20px; background: #ffffff; cursor: pointer; } /* All the same stuff for IE */ #addToPlaylist .zoom input[type=range]::-ms-thumb { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 50%; height: 20px; width: 20px; background: #ffffff; cursor: pointer; } #addToPlaylist .zoom input[type=range]::-webkit-slider-runnable-track { width: 160px; height: 2px; cursor: pointer; animate: 0.2s; /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/ background: #a1a1a1; /*border-radius: 1.3px; border: 0.2px solid #010101;*/ } #addToPlaylist .zoom input[type=range]:focus::-webkit-slider-runnable-track { background: #a1a1a1; } #addToPlaylist .zoom input[type=range]::-moz-range-track { width: 160px; height: 2px; cursor: pointer; background: #a1a1a1; opacity: 0.5; border-radius: 1.3px; } #addToPlaylist .zoom input[type=range]::-ms-track { width: 160px; height: 2px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } #addToPlaylist .zoom input[type=range]::-ms-fill-lower { background: #a1a1a1; /*border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/ } #addToPlaylist .zoom input[type=range]:focus::-ms-fill-lower { background: #a1a1a1; } #addToPlaylist .zoom input[type=range]::-ms-fill-upper { background: #a1a1a1; /*border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/ } #addToPlaylist .zoom input[type=range]:focus::-ms-fill-upper { background: #a1a1a1; } #addToPlaylist .zoom { height: 38px; width: 230px; margin-left: 126px; float: left; } #addToPlaylist .zoom>div, #addToPlaylist .zoom>input { float: left; margin: 18px 5px 0px; } #addToPlaylist .plus { background-image: url('/images/icon/icon_plus.png'); } #addToPlaylist .minus { background-image: url('/images/icon/icon_minus.png'); } #addToPlaylist .plus, #addToPlaylist .minus { width: 20px; height: 20px; background-size: cover; cursor: pointer; } #addToPlaylist .plus:hover, #addToPlaylist .minus:hover { opacity: 0.7 } #addToPlaylist textarea { width: 100%; height: 136px; padding: 10px; padding-bottom: 0px; background-color: #f7f7f7; border: none; font-size: 14px; /*margin-left: 14px;*/ } #addToPlaylist.editCoverImage { position: absolute; z-index: 200; width: 100%; } #addToPlaylist.editCoverImage, #addToPlaylist.editCoverImage #createPlaylist { height: 520px; } #addToPlaylist, #createPlaylist { transition: height 2s; -webkit-transition: height 2s; } #playListSelect, #createPlaylist { width: 100%; height: 604px; position: absolute; background-color: #ffffff; } #playListSelect { padding: 0 10px; } #createPlaylist { padding: 0 24px; } #createPlaylist #cover-o { /*width:558px;*/ height: 234px; width: 520px; margin-left: -24px; background-size: cover; background-position: top center; background-image: url(/images/new_playlist_cover.jpg); background-color: #ffffff; position: relative; /*left: -10px;*/ overflow: hidden; } #addToPlaylist.editCoverImage #createPlaylist #cover-o { width: 520px; height: 388px; background-image: none; background-color: #d9d9d9; } #addToPlaylist.editCoverImage .cropit-image-input { display: none; } #addToPlaylist.editCoverImage #cover-preview-bg, #addToPlaylist.editCoverImage .cropit-image-preview { background-color: #f8f8f8; background-size: cover; /*border: 5px solid #ccc;*/ border-radius: 3px; margin-top: 37px; margin-left: 103px; width: 314px; height: 314px; cursor: move; } #addToPlaylist.popup .btn { width: 116px; text-align: center; cursor: pointer; } #addToPlaylist.popup .title { color: #555555; font-size: 20px; padding: 24px 0px; } #addToPlaylist.popup .title.red { color: #ff3132; } #addToPlaylist.popup .content { color: #555555; font-size: 16px; } #addToPlaylist.popup>div { padding: 0 24px; border-bottom: 0px; position: relative; width: 100%; } #addToPlaylist.popup .btnContainer { height: 40px; } #addToPlaylist.popup .btn { margin-left: 20px; margin-top: 0px; } #addToPlaylist.popup .btn.green { background-color: #39d1b3; } #addToPlaylist.popup .btn.red { background-color: #ff3132; } #addToPlaylist.popup .btn.green:hover { background-color: #33BA9D; } #addToPlaylist.popup .btn.grey { background-color: #a1a1a1; } #addToPlaylist.popup .btn.grey:hover { background-color: #555555; } #nickNamePopUp { text-align: left; position: relative; display: none; } #nickNamePopUp .close { width: 18px; height: 18px; position: absolute; top: 12px; right: 12px; background: url(../images/btn_popup_close.png) no-repeat; background-size: cover; cursor: pointer; } #nickNamePopUp a { display: block; width: 116px; text-align: center; cursor: pointer; margin-top: 16px; padding: 6px 0; background-color: #39d1b3; color: #ffffff; font-size: 14px; border-radius: 3px; } #nickNamePopUp .title { color: #555555; font-size: 18px !important; margin-bottom: 8px; width: 280px; font-weight: bold; line-height: 22px; } #nickNamePopUp .content { color: #555555; font-size: 12px !important; } #addToPlaylist.editCoverImage #cover-preview-bg:after { width: 308px; height: 308px; border: 3px solid rgba(255, 255, 255, 1); content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 100; } #addToPlaylist.editCoverImage .cropit-image-background { opacity: .2; cursor: auto; margin-top: 37px; margin-left: 103px; } #createPlaylist #cover-preview-bg { width: 520px; height: 240px; background-size: cover; background-position: top center; position: absolute; top: 0px; left: 0px; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } #addToPlaylist.editCoverImage #cover-preview-bg { width: 314px; height: 314px; top: 0px; left: 0px; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); } #addToPlaylist.editCoverImage #cover-preview-bg>div { height: 314px; font-size: 16px; line-height: 314px; width: 100%; text-align: center; color: #ffffff; font-weight: 500; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65); } #createPlaylist #cover-preview { width: 186px; height: 186px; background-size: cover; /*background-position:top center;*/ background-image: url(/images/new_playlist_cover_preview.jpg); position: relative; margin: auto auto; top: 20px; } #createPlaylist #cover-preview.uploadimg { top: 24.5px; background-size: cover; } #fileSelector { display: none; } #createPlaylist #cover-change { top: 7px; left: 336px; } #playListSelect { /*border-bottom: 2px solid #39d1b3;*/ position: absolute; top: 0; } #playListSelect>.title, #createPlaylist>.title { color: #39d1b3; font-size: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #playListSelect>.title { padding: 26px 14px; } #createPlaylist>.title { padding: 26px 0px; } #createPlaylist>.contents { position: absolute; left: 0px; width: 520px; } #playListSelect .listing { height: 528px; overflow-y: scroll; margin-left: 14px; margin-bottom: 3px; } #playListSelect .listItem { margin: 0px 18px 0px 0px; color: #000000; font-size: 12px; width: 144px; float: left; cursor: pointer; height: 210px; overflow: hidden; position: relative; } #playListSelect .listItem .name:hover { text-decoration: underline; } #playListSelect .cover, #playListSelect .over { height: 144px; overflow: hidden; position: absolute; top: 0; } #playListSelect .cover img, #playListSelect .over img { /*min-height:162px; min-width:162px;*/ overflow: hidden; } #playListSelect .over { display: none; /*min-width:162px; min-height:162px;*/ } #playListSelect .listItem:hover .over { display: block; } #playListSelect .listing {} #playListSelect .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; color: #262626; line-height: 20px; margin-top: 156px; } #albumArtist .name { text-align: center; } #albumArtist .listItem .cover:before { position: absolute; border: 1px solid rgba(0, 0, 0, .2); border-radius: 50%; top: 0; bottom: 0; left: 0; right: 0; content: ''; } #addToPlaylist .btn, #albumArtist #cancel { float: right; margin-top: 20px; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #ffffff; font-size: 14px; height: 28px; line-height: 28px; min-width: 116px; padding: 0 10px; text-align: center; } #addToPlaylist.editCoverImage #export { position: absolute; bottom: 14px; right: 9px; width: 94px; } #albumArtist .listItem img { border-radius: 50%; } #createPlaylist #create { color: #ffffff; background-color: #3ad0b3; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #videoplayer_wrapper { display: block; position: fixed; height: 0px; left: 0; right: 0; bottom: 0; z-index: 12000; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; transition: .3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); overflow: hidden; background-color: #000000; overflow: hidden; } #videoplayer { width: 100%; min-width: 998px; max-width: 1440px; margin: auto; position: absolute; color: #ffffff; height: 540px; left: 0; right: 0; top: 0; bottom: 0; } #videoplayer .left { float: left; width: 672px; padding-top: 25px; position: relative; text-align: center; margin: 0 1.6% 0 3.3% } #videoplayer .left #MOOVVideoPlayer { width: 672px; height: 397px; margin: 63px auto; } #videoplayer .left .name { margin-bottom: 20px; line-height: 30px; text-align: left; width: 500px; float: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #videoplayer .left .fnc { margin-bottom: 20px; line-height: 30px; text-align: left; width: 170px; float: right; } #videoplayer .left .fnc div { margin: 10px; float: right; cursor: pointer; width: 46px; height: 46px; } #videoplayer .left .title { width: 672px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 24px; } #videoplayer .left .artist { width: 672px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px; } #videoList { width: auto; color: #ffffff; margin-right: 3.3%; padding-top: 25px; } #videoList .song { width: 70%; color: #ffffff; } #videoList .cover { min-width: 50px; width: 85px; } #videoList .l-r.playing .cover:before { background: url(../images/video_playing_back.png) center center no-repeat; } #videoList .l-r.playing .cover:after { background: url(../images/video_playing_front.gif) center center no-repeat; } #videoList .moduleList { width: auto; height: 332px; } #videoList .total { padding: 13px 10px; width: auto; margin: 1px auto; overflow: hidden; background-color: rgba(38, 38, 38, 0.7); font-size: 12px; } #videoList #currentProfile { width: auto; padding: 8px; /*margin-top:85px;*/ background-color: #313131; overflow: hidden; } #player_info #currentProfile { width: 100%; padding: 8px 0px; background-color: rgba(38, 38, 38, 0.7); } #videoList #currentProfile .cover { width: 64px; float: left; background-color: #313131; overflow: hidden; } #player_info #currentProfile .cover { width: 72px; height: 64px; padding-left: 8px; float: left; overflow: hidden; } #videoList #currentProfile .name, #player_info #currentProfile .name { padding-left: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 5px; height: 64px; line-height: 23px; } #videoList #currentProfile .name .nowPlaying, #player_info #currentProfile .name .nowPlaying { font-size: 12px; color: #7e7e7e; } #videoList #currentProfile .name .title, #player_info #currentProfile .name .title { font-size: 24px; color: #fff; } #videoList #currentProfile .name .title a:hover, #player_info #currentProfile .name .title a:hover { text-decoration: underline; } #loading { background: rgb(0, 0, 0) url(../images/loading.gif) no-repeat center center; height: 100%; width: 100%; position: fixed; z-index: 150000; opacity: 0.7; } #lazyload { background: url(../images/lazyload.gif) no-repeat center center; height: 24px; width: 96%; position: absolute; z-index: 150000; bottom: -36px; } .sortingbar option { color: #000; } .sortingbar select { color: #fff; } .msgWithTitle { width: 520px; height: 200px; padding: 24px; background-color: #ffffff; position: fixed; margin: 80px auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 13001; } .msgWithTitle .msg { padding: 24px 0; } .msgWithTitle a { color: initial; } #msgSuspend { width: 472px; height: 204px; padding: 24px; background-color: #ffffff; position: fixed; margin: auto auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 13001; } #msgSuspend .icon { text-align: center; margin-bottom: 24px; } #msgSuspend .icon img { width: 89px; } #msgSuspend .msg { height: 128px; } #msgSuspend .button, .msgWithTitle .button { width: 116px; padding: 8px 0px; float: right; color: #ffffff; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } #msgSuspend #setting, .msgWithTitle .button { background-color: #39d1b3; } #msgSuspend #setting:hover, .msgWithTitle .button:hover { background-color: #27bb9d; } .msgWithTitle .button { bottom: 24px; right: 24px; position: absolute; } #msgSuspend #later { background-color: #a1a1a1; margin-right: 12px; } #errorMsg { margin-top: 288px; text-align: center; } #errorMsg>div { margin: 0px auto 36px auto; } #errorMsg .btn { color: #ffffff; padding: 5px 20px; background-color: #39D1B3; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; width: 200px; } #popupBlock { height: 208px; width: 558px; position: absolute; z-index: 160000; margin: auto auto; background-color: #ffffff; left: 0; top: 0; right: 0; bottom: 0; text-align: center; } #popupBlock>div { margin-top: 36px; } #popupBlock a { text-decoration: underline; } @font-face { font-family: 'si'; src: url('/css/fonts/socicon.eot'); src: url('/css/fonts/socicon.eot?#iefix') format('embedded-opentype'), url('/css/fonts/socicon.woff') format('woff'), url('/css/fonts/socicon.ttf') format('truetype'), url('/css/fonts/socicon.svg#icomoonregular') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: si; src: url(/css/fonts/socicon.svg) format(svg); } } #facebookLoginBtn { background-color: #3b5998; color: #ffffff; border: none; width: 270px; height: 44px; cursor: pointer; } .soc-facebook { font-family: si !important; font-style: normal; font-weight: 400; font-size: 24px; width: 24px; height: 24px; color: #FFFFFF; background-color: #3e5b98; } .soc-facebook:before { content: 'b'; } @media screen and (min-width:1440px) { #player #lyrics { margin-left: 5.9%; margin-right: 3.4%; } #player #prev { margin-right: 3.5%; } #player #pause { margin-right: 3.7%; } /* .moduleList .album { width: 29%; } .moduleList.PL .album { width: 32%; } .moduleList.MV.PL .album { width: 26%; } #search-result .moduleList .album { width: 42%; } .moduleList.MV.AVL .artist, .moduleList.APL .artist { width: 30%; }*/ } @media screen and (max-height:675px) { #player_wrapper #close, #videoplayer_wrapper #close { top: 0px; } } #undo { float: right; width: 20%; text-align: right; color: #39d1b3; cursor: pointer; line-height: 40px; font-size: 14px; font-weight: 900; } #toastMsg { float: left; width: 70%; text-align: left; font-size: 14px; line-height: 20px; margin: 10px 0px; } #msgDelete, #msgAddTo { color: #a1a1a1; font-size: 14px; } #msgAddPlaylist { line-height: 40px; } #msgAddPlaylist .showImg { width: 40px; height: 40px; overflow: hidden; float: left; } #msgAddPlaylist .playlistImg { width: 40px; margin-right: 12px; float: left; } #msgAddPlaylist .msgContent { float: right; width: 404px; margin: 13px 0px; line-height: 14px; } #audioHLSPlayer { top: -1000px; position: absolute; } #therapeutic { box-shadow: 0px -15px 30px 1px rgba(0, 0, 0, 0.4); } .therapeutic #bg { WIDTH: 130% !important; height: 100% !important; position: absolute; top: 0; background-size: cover; } .therapeutic #bg .before, .therapeutic #bg .after { position: absolute; background-size: 100% 100%; width: 100%; height: 100%; animation: bgmove 50s infinite linear; } .therapeutic #bg .before { right: 100%; } .therapeutic #bg .after { left: -2px; } @keyframes bgmove { from { transform: translateX( 100%); } to { transform: translateX(0%); } } #landing #bg #goingMerry { position: absolute; bottom: 200px; width: 400px; right: 40%; } #landing #bg #luffy { position: absolute; bottom: 460px; width: 150px; right: 51.8%; } .therapeutic .view { width: 100%; } .therapeutic .element:first-child, .therapeutic .view:first-child { height: 100%; min-height: 860px; } .therapeutic #intro, .therapeutic #MTtop { color: #ffffff; } .therapeutic #intro>div { text-align: center; display: none; } .therapeutic #intro #title { margin-top: 181px; font-size: 36px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } .therapeutic #intro img { width: 120px; margin: 52px 0 56px 0; } .therapeutic #intro #desc { font-size: 18px; line-height: 26px; width: 75%; margin: 0 auto 36px auto; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } .therapeutic #intro #gotit { font-size: 18px; width: 280px; padding: 13px 0; margin: 0 auto; border-radius: 2px; cursor: pointer; opacity: 0; display: block; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } .therapeutic #MTtop { margin: 0 auto; left: 0; right: 0; color: #ffffff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); min-height: 900px !important; } .therapeutic #MTtop audio { position: absolute; z-index: -1000; } .therapeutic #MTtop>div { text-align: center; } .therapeutic #MTtop>.content>div { display: none; } .therapeutic #MTtop #title { margin: 96px auto 17px auto; font-size: 36px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } .therapeutic #MTtop #schedule { margin: 0 auto; height: 170px; color: #ffffff; } .therapeutic #MTtop #schedule .title { width: 100%; font-size: 24px; margin: 19px auto; color: #ffffff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0); } .therapeutic #MTtop #status { width: 684px; height: 32px; margin: 0 auto; color: #ffffff; } .therapeutic #MTtop #status .check { width: 36px; height: 36px; float: left; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; position: relative; box-shadow: 0 0 0 2px #ffffff inset; margin: 0 30px; } .therapeutic #MTtop #status .check.on { box-shadow: 0 0 0 2px #39d1b3 inset; background-image: url(/images/musictherapy/img_tm_check.png); } .therapeutic #MTtop #status .check:first-child:before { display: none; } .therapeutic #MTtop #status .check:before { content: ""; width: 61px; height: 4px; position: absolute; background-color: #ffffff; top: 15px; left: -60px; z-index: -1; } .therapeutic #MTtop #status .check.on:before { background-color: #39d1b3; } .therapeutic #MTtop #status .link { width: 59px; height: 4px; float: left; margin: 16px 0 0 -2px; background-color: #ffffff; } .therapeutic #MTtop #status .link.active { background-color: #39d1b3; } .therapeutic #MTtop #date { margin: 0 auto; color: #ffffff; width: 684px; } .therapeutic #MTtop #date>span { float: left; display: block; text-align: center; color: #ffffff; width: 96px; padding-top: 7px; font-size: 18px; } .therapeutic #MTtop #category { margin: 0 auto; overflow: hidden; left: 0; right: 0; width: 81.5%; } .therapeutic #MTtop #category .scroll { position: relative; width: auto; width: 125.5%; } .therapeutic #MTtop #category .row { width: 100%; height: 265px; } .therapeutic #MTtop #category #row1 { margin-left: 16.69%; } .therapeutic #MTtop #category .el { float: left; width: 24.55%; margin: 0 4.33%; } .therapeutic #MTtop #category .el img { margin: 0 auto; width: 62.2%; max-width: 160px; border-radius: 50%; transition: all 0.5s linear; } .therapeutic #MTtop #category .el:hover img { background-color: rgba(255, 255, 255, 0.2); } .therapeutic #MTtop #category .el span { display: block; margin-top: 13px; text-align: center; height: 60px; font-size: 24px; } .therapeutic .title { text-align: center; } .therapeutic .textinfo .img { text-align: center; } .therapeutic .textinfo .img img { width: auto; } .therapeutic .textinfo .title { font-size: 28px !important; color: #555555 !important; font-weight: bold; margin-bottom: 24px; margin-top: 17px !important; } .therapeutic .textinfo .btn { font-size: 18px; color: #ffffff; width: 280px; border-radius: 2px; padding: 13px 0; margin: 0 auto; position: absolute; width: 280px; bottom: 0px; left: 0; right: 0; text-align: center; } .therapeutic .textinfo .desc { font-size: 18px; line-height: 26px; color: #555555; margin-bottom: 40px; } .therapeutic .artistpager .module-bg { background-image: linear-gradient(rgba(252, 180, 173, 1) 0%, rgba(251, 196, 208, 1) 100%); height: 228px; } .therapeutic .artistpager .title, .therapeutic .gridpager .title { margin-top: 23px !important; } .therapeutic .artistpager .title span, .therapeutic .gridpager .title span { font-size: 24px !important; color: #ffffff !important; font-weight: bold !important; margin-bottom: 24px; margin-top: 0px !important; position: relative; } .therapeutic .artistpager .title span:before, .therapeutic .gridpager .title span:before { content: ""; width: calc(100% - 20px); height: 100%; margin: 0 auto; border-bottom: 2px solid #ffffff; position: absolute; top: 10px; left: 0; right: 0; } .therapeutic .artistpager .artist_list, .therapeutic .gridpager .grid_list { width: 78%; overflow: hidden; margin: 0 auto; min-width: 577px; margin-bottom: 30px; } .therapeutic .gridpager .artist_list { width: 78%; } .therapeutic .gridpager .grid_list { height: 250px; width: 85%; } .therapeutic .gridpager .moduleGrid { width: 110% !important; left: -4% !important; } .therapeutic .artistpager .artist_list .moduleGrid, .therapeutic .gridpager .moduleGrid { top: 31px; width: 120%; margin-left: auto; margin-right: auto; height: 120px; left: -9%; } .therapeutic .artistpager .moduleGrid .item { padding: 0 !important; } .therapeutic .cover:hover { background-color: initial !important; } .therapeutic .artistpager .artist_list .cover, .therapeutic .artistpager .artist_list img { width: 88px; height: 88px; border-radius: 50%; margin: 16px auto; opacity: 0.5; transition: all 0.5s linear; cursor: pointer; } .therapeutic .artistpager .artist_list .cover, .therapeutic .artistpager .artist_list .slick-center .cover img { width: 120px; height: 120px; margin: 0px auto; opacity: 1; } .therapeutic .artistpager .slick-track { position: relative; } .therapeutic .artistpager .artist_desc .moduleGrid { min-width: initial; } #landing.therapeutic .artistpager { padding-bottom: 0px; } .therapeutic .artistpager .artist_desc .slick-slider { margin-bottom: 0px; } .therapeutic .artistpager .artist_desc, .therapeutic .artist_desc .slick-track { height: 544px; } .therapeutic .artistpager .artist_desc .item { transform: scale(0.9); transition: all 0.5s linear; top: 2.5%; opacity: 0.5; } .therapeutic .artistpager .artist_desc .item.slick-center { transform: scale(1); opacity: 1; top: 0%; } .therapeutic .artistpager .artist_desc img { width: 544px; height: 544px; cursor: pointer; margin: 0px auto; } .therapeutic .artistpager .artist_desc .card { width: 656px; height: 218px; border-top: 3px solid #39d1b3; margin: 0px auto; position: absolute; top: 308px; left: 0; right: 0; background-color: #ffffff; padding: 10px 16px; box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.75); } .therapeutic .artistpager .artist_desc .card .name { text-align: center; font-size: 24px; color: #555555; line-height: normal; height: auto; } .therapeutic .artistpager .artist_desc .card .title { text-align: center; font-size: 18px !important; margin-top: 4px !important; margin-bottom: 8px !important; color: #555555 !important; } .therapeutic .artistpager .artist_desc .card .desc { text-align: left; font-size: 18px; color: #a1a1a1; line-height: 24px; } .therapeutic .artistpager .artist_desc .card .btn { text-align: center; font-size: 18px; color: #ffffff; width: 280px; border-radius: 2px; padding: 13px 0; margin: 0px auto; position: absolute; bottom: 16px; left: 0; right: 0; } .artistpager .moduleGrid .img:after { display: none; } .artistpager .moduleGrid .item:hover .cover { background: none !important; } .artistpager .moduleGrid .item:hover .img, .therapeutic .moduleGrid .item:hover .img2 { opacity: 1 !important; } .therapeutic .gridpager .module-bg { background-image: linear-gradient(#5ac9d4 0%, #f9dfbe 100%); height: 100%; } .therapeutic .gridpager .moduleGrid { top: 31px; margin-left: auto; margin-right: auto; margin-bottom: 0; } .therapeutic .gridpager .moduleGrid .item { transform: scale(0.8); transition: all 0.1s linear; text-align: center; opacity: 0.8; padding: 0 !important; } .therapeutic .gridpager .moduleGrid .slick-center { transform: scale(0.95); opacity: 1; } .therapeutic .gridpager .moduleGrid .item:hover { transform: scale(0.95); opacity: 1; } .therapeutic .gridpager .moduleGrid .item:hover .img { opacity: 1 !important; } .therapeutic .gridpager .moduleGrid .item:hover .img:after { border: none !important; } .therapeutic .view>div:last-child { margin-bottom: 30px; } #MTtop #arrowLeft, #MTtop #arrowRight { display: none; top: 500px; } #landing.therapeutic #arrowLeft, #landing.therapeutic #arrowRight { width: 30px; height: 48px; position: absolute; cursor: pointer; opacity: 0.5; transition: all 0.5s linear } #landing.therapeutic #arrowLeft:hover, #landing.therapeutic #arrowRight:hover, #landing.therapeutic #arrowBottom:hover { opacity: 1 !important; } #landing.therapeutic #arrowLeft { background: url(/images/btn_general_arrow_white_left.png); } #landing.therapeutic #arrowRight { background: url(/images/btn_general_arrow_white_right.png); right: 20px; } #landing.therapeutic #arrowBottom { bottom: 41px; left: 50%; position: absolute; cursor: pointer; width: 44px; height: 28px; background-size: 100%; background-repeat: no-repeat; background: url(/images/btn_general_arrow_white_down.png); opacity: 0.5; } .therapeutic .btn { transition: all 0.5s linear; background-color: #39d1b3; } .therapeutic .btn:hover { background-color: #27bb9d; } #landing.therapeutic .element.gridpager { padding-top: 0px; } .gridpager #arrowLeft, .gridpager #arrowRight { top: 180px; } #lyric { font-size: 14px; } #lyric .contents span { display: block; transition: all 0.25s linear; } #lyric .contents span.selected { background-color: rgba(0, 0, 0, 0.5); font-size: 18px; color: #39d1b3; padding: 5px 0; } #msgImportant { line-height: 18px; height: 300px; } #msgImportant.eng { line-height: 18px; height: 350px; } #multiSelectBox { width: 100%; position: fixed; z-index: 999999; bottom: 56px; left: 0px; right: 0px; } #multiSelectBox>div { width: 640px; height: 60px; background-color: rgba(255, 255, 255, .9); border-radius: 3px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); margin: 0 auto; } #multiSelectBox .select, #multiSelectBox span { float: left; line-height: 60px; } #multiSelectBox>div>span { width: 197px; color: #555555; } #multiSelectBox span.left, #multiSelectBox .addToPlaylist { cursor: pointer; } #multiSelectBox .num { width: auto; margin: 0px 5px; } #multiSelectBox .addToPlaylist { width: auto; font-weight: 900; color: #39d1b3; cursor: pointer; width: 121px; text-align: right; } #multiSelectBox .close { float: right; width: 60px; height: 60px; background-image: url('/images/icon/btn_close.png'); background-repeat: no-repeat; background-position: 19px 19px; background-size: 22px; cursor: pointer; } #multiSelectBox .close:hover { background-image: url('/images/icon/btn_close_over.png'); } #multiSelectBox .select { width: 47px; height: 60px; background-position: 20px 18px; }