@charset 'euc-kr';

html {height:100%; margin:0; padding:0;}
body {height:100%; margin:0; padding:0; background-color:#111; font-size:12px; line-height:1;}
body, input, textarea, select {font-family:'¸¼Àº °íµñ', 'Malgun Gothic', 'µ¸¿ò', dotum, AppleSDGothicNeo-Medium, AppleGothic, Dotum, Tahoma, Verdana, sans-serif; color:#444;}
a {color:#444; text-decoration:none;}
a:hover,a:focus {}
div, p, ul, ol, li, form, dl, dt, dd, h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
p {line-height:18px;}
li {list-style:none;}
img {border:0;}
button {cursor:pointer; padding:0; border:1px solid #ccc;}
table {border-collapse:collapse; width:100%;}
caption, legend, .none {position:absolute; top:0; left:0; visibility:hidden; width:0; height:0; font-size:0; overflow:hidden;}



/* download */
#genpl-wrappper {width:100%; /*overflow-x:hidden;*/}
#genpl-shape {
	position:relative; left:0; min-width:640px; width:200%;
	-webkit-transition-property:left; -webkit-transition-duration: 1s;
	transition-property:left; transition-duration: .2s;
}
	#genpl-shape:after {content:''; clear:both; display:block; visibility:hidden;}
#genpl-shape.playlist {left:-100%;}

#gen_playlist {}

#genpl-player {float:left; min-width:320px; width:50%; background-color:#111; min-height:490px;}
#genpl-player .cover_area {position:relative; width:100%; min-height:320px;}
#genpl-player .cover_image img {width:100%; display:block; max-width:400px; margin:0 auto;}
#genpl-player .cover_area .lyric_box {visibility:hidden; position:absolute; top:0; left:0; width:100%; height:100%; white-space:pre-line; background-color:rgba(0,0,0,.7);}
#genpl-player .cover_area.lyric-on .lyric_box {visibility:visible;}
#genpl-player .lyric_box .text {text-align:center; color:#ccc; line-height:1.5em; margin:30px 20px;}

#genpl-list {float:right; min-width:320px; width:50%; background-color:#f2f2f2;}

.gen_title {
	position:relative; height:45px;
	background: #678090;
		background: -moz-linear-gradient(top,  #678090 0%, #2d3943 41%, #1c2730 42%, #111111 80%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#678090), color-stop(41%,#2d3943), color-stop(42%,#1c2730), color-stop(80%,#111111));
		background: -webkit-linear-gradient(top,  #678090 0%,#2d3943 41%,#1c2730 42%,#111111 80%);
		background: -o-linear-gradient(top,  #678090 0%,#2d3943 41%,#1c2730 42%,#111111 80%);
		background: -ms-linear-gradient(top,  #678090 0%,#2d3943 41%,#1c2730 42%,#111111 80%);
		background: linear-gradient(to bottom,  #678090 0%,#2d3943 41%,#1c2730 42%,#111111 80%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#678090', endColorstr='#111111',GradientType=0 );
}
.gen_title h1,
.gen_title .btn button {position:absolute; top:0; text-indent:100%; overflow:hidden; white-space:nowrap; color:#fff; background-image:url('/Iv/commons/images/mobile/icon_1.png'); background-repeat:no-repeat;}
.gen_title .btn {
	position:absolute; top:0; right:0; width:54px; height:45px;
	background: #6f9aab;
	background: -moz-linear-gradient(top,  #6f9aab 0%, #365b6a 41%, #234554 42%, #121313 80%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f9aab), color-stop(41%,#365b6a), color-stop(42%,#234554), color-stop(80%,#121313));
	background: -webkit-linear-gradient(top,  #6f9aab 0%,#365b6a 41%,#234554 42%,#121313 80%);
	background: -o-linear-gradient(top,  #6f9aab 0%,#365b6a 41%,#234554 42%,#121313 80%);
	background: -ms-linear-gradient(top,  #6f9aab 0%,#365b6a 41%,#234554 42%,#121313 80%);
	background: linear-gradient(to bottom,  #6f9aab 0%,#365b6a 41%,#234554 42%,#121313 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f9aab', endColorstr='#121313',GradientType=0 );
}
.gen_title h1 {top:9px; left:10px; width:62px; height:23px; background-position:0 0; background-size:100%;}
.gen_title .btn button {width:54px; height:45px; border:0 none; background-color:transparent;}
.gen_title .bt-playlist button {background-position:50% -45px; background-size:120%;}
.gen_title .bt-player button {background-position:50% -90px; background-size:120%;}
.gen_title h2 {color:#fff; text-align:center; font-size:16px; padding-top:15px;}
.gen_title h2.song {margin:0 65px 0 80px; text-align:left; font-size:14px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


.player_control .time-line {
	position:relative; height:50px; border-top:1px solid #8b8c8c; border-bottom:1px solid #0b0b0c;
	box-shadow:inset 0 1px 0 0 #bfc4c8;
	background: #8c939b;
	background: -moz-linear-gradient(top,  #8c939b 0%, #323f4d 48%, #2d3842 49%, #141516 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c939b), color-stop(48%,#323f4d), color-stop(49%,#2d3842), color-stop(100%,#141516));
	background: -webkit-linear-gradient(top,  #8c939b 0%,#323f4d 48%,#2d3842 49%,#141516 100%);
	background: -o-linear-gradient(top,  #8c939b 0%,#323f4d 48%,#2d3842 49%,#141516 100%);
	background: -ms-linear-gradient(top,  #8c939b 0%,#323f4d 48%,#2d3842 49%,#141516 100%);
	background: linear-gradient(to bottom,  #8c939b 0%,#323f4d 48%,#2d3842 49%,#141516 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c939b', endColorstr='#141516',GradientType=0 );
}
.player_control .time-line {}
.player_control .time-line .start,
.player_control .time-line .end {position:absolute; top:18px; width:45px; text-align:center; font-size:12px; font-style:normal;}
.player_control .time-line .start {left:8px; color:#52cdcd;}
.player_control .time-line .end {right:8px; color:#fff;}
.player_control .time-bar {
	position:absolute; top:20px; left:55px; right:55px; height:10px;
	background: #678090;
}
.player_control .downed,
.player_control .progress {position:absolute; left:0; border-radius:5px;}
.player_control .downed {
	top:1px; height:8px; opacity:.2;
	background-color:#fff;
}
.player_control .progress {
	top:0; height:10px;
	background: #8cffff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
	background: -moz-linear-gradient(top,  #8cffff 0%, #52cccc 38%, #4ab1ba 40%, #4fbbc4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cffff), color-stop(38%,#52cccc), color-stop(40%,#4ab1ba), color-stop(100%,#4fbbc4));
	background: -webkit-linear-gradient(top,  #8cffff 0%,#52cccc 38%,#4ab1ba 40%,#4fbbc4 100%);
	background: -o-linear-gradient(top,  #8cffff 0%,#52cccc 38%,#4ab1ba 40%,#4fbbc4 100%);
	background: -ms-linear-gradient(top,  #8cffff 0%,#52cccc 38%,#4ab1ba 40%,#4fbbc4 100%);
	background: linear-gradient(to bottom,  #8cffff 0%,#52cccc 38%,#4ab1ba 40%,#4fbbc4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cffff', endColorstr='#4fbbc4',GradientType=0 );
}
.player_control .handle {
	position:absolute; top:-5px; width:20px; height:20px; margin-left:-10px;
	background:url('/Iv/commons/images/mobile/handle.png') no-repeat 0 0; background-size:100%;
}

.control-btns {position:relative; height:70px; border-top:1px solid #2a2a2b; background-color:#111;}
.control-btns .button {position:absolute; display:block; white-space:nowrap; overflow:hidden; text-indent:100%;}
.control-btns .play {top:10px; left:50%; margin-left:-20px; width:41px; height:41px; background:url('/Iv/commons/images/mobile/btn_play.png') no-repeat 0 0; background-size:cover;}
.control-btns .play.stop {background-position:100% 0;}
.control-btns .prev,
.control-btns .next {top:12px; left:50%; width:37px; height:37px; background:url('/Iv/commons/images/mobile/btn_skip.png') no-repeat 0 0; background-size:200%;}
.control-btns .prev {margin-left:-74px; background-position:0 0;}
.control-btns .next {margin-left:39px; background-position:0 100%;}
.control-btns .repeat {top:15px; left:16px; width:32px; height:32px; background:url('/Iv/commons/images/mobile/btn_repeat.png') no-repeat 0 0; background-size:cover;}
.control-btns .repeat.r1 {background-position:50% 0;}
.control-btns .repeat.r2 {background-position:100% 0;}
.control-btns .random {top:15px; right:16px; width:32px; height:32px; background:url('/Iv/commons/images/mobile/btn_random.png') no-repeat 0 0; background-size:cover;}
.control-btns .random.on {background-position:100% 0;}

.ad-app-install {
	position:absolute; top:0; left:0; width:100%; z-index:5; min-height:40px; padding:2px 0 3px 0; color:#fff; font-size:11px;
	border-top:1px solid #404040; background-color:#000;
}
.ad-app-install p {margin:5px 0 0 10px; line-height:14px;}
.ad-app-install .btn-app {
	float:right; margin:6px 7px 0 20px; border-radius:3px; border:1px solid #000; text-align:center; padding:8px 10px; color:#c6dada;
	background: #333333;
	background: -moz-linear-gradient(top,  #333333 0%, #262626 49%, #0f0f0f 51%, #333333 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(49%,#262626), color-stop(51%,#0f0f0f), color-stop(100%,#333333));
	background: -webkit-linear-gradient(top,  #333333 0%,#262626 49%,#0f0f0f 51%,#333333 100%);
	background: -o-linear-gradient(top,  #333333 0%,#262626 49%,#0f0f0f 51%,#333333 100%);
	background: -ms-linear-gradient(top,  #333333 0%,#262626 49%,#0f0f0f 51%,#333333 100%);
	background: linear-gradient(to bottom,  #333333 0%,#262626 49%,#0f0f0f 51%,#333333 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}
.ad-1minute {
	position:absolute; bottom:0; left:0; width:100%; background-color:#000;
	border-top-left-radius:5px; border-top-right-radius:5px; box-shadow:0 -3px 3px rgba(0,0,0,.4);
}
.ad-1minute p {width:60%; margin:10px; color:#fff; font-size:11px; line-height:14px;}
.ad-1minute .close-x {position:absolute; top:11px; right:10px;}
.ad-1minute .close-x img {width:21px; height:21px;}



/* playlist */
#gen_playlist {}
.gen_playlist li {height:55px; background-color:#fff;}
.gen_playlist a {display:block;}
	.gen_playlist a:after {content:''; clear:both; display:block; height:0; visibility:hidden;}
.gen_playlist .thumb {position:relative; float:left; width:55px; height:55px;}
.gen_playlist .thumb img {width:55px; height:55px;}
.gen_playlist li.play .thumb:after {content:'Àç»ý Áß'; position:absolute; top:0; left:0; width:55px; height:55px; overflow:hidden; white-space:nowrap; text-indent:100%; background:url('/Iv/commons/images/mobile/now_play.png') no-repeat 50% 50%; background-size:60%;}
.gen_playlist .number {float:left; width:40px; font-size:11px; line-height:50px; text-align:center;}
.gen_playlist .song-artist {float:left; display:block; min-width:220px; padding:8px 0 0;
	width: 225px;
	width: -webkit-calc(100% - 100px);
	width: -moz-calc(100% - 100px);
	width: calc(100% - 100px);
}
.gen_playlist .song-artist .song,
.gen_playlist .song-artist .artist {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gen_playlist .song-artist .song {font-size:14px; font-weight:bold; color:#000; line-height:18px;}
.gen_playlist .song-artist .artist {color:#666; font-size:12px; line-height:16px;}