body
{
	font-family: '맑은 고딕', '나눔고딕', 돋움체, Arial, sans-serif;
	font-size: 1em;
	color: #202020;
	padding: 0px;
	margin: 0px;
	background-color: #f1f1f1;
}

table
{
	width:100%;
	border-collapse: collapse;
	border: 0px;
}

th
{
	padding: 3px;
}

a
{
	text-decoration:none;
	color: #202020;
}

hr
{
  width : 90%;
	border: 0px;
	border-bottom: 1px #eee dashed;
}

p
{
	margin: 5px;
}

.solidBox
{
	border: 1px solid #cccccc;
}

button
{
	border: 1px solid #cccccc;
}

.card {
	background-color: #fff;
	border: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	box-sizing: border-box;
}

.card-padding {
	padding: 10px;
}

.card-playlistbanner {
	text-align: center;
	margin-top: 5px;
}

.playlist_td
{
	padding: 8px;
}

.playlist_td_for_touchable
{
	padding: 8px;
	padding-top: 13px;
	padding-bottom: 13px;
}

.playlist_current_td1 {
	background-color: #4CAF50;
}

.playlist_current {
	background-color: #E8F5E9;
	padding: 23px;
	font-weight: bold;
}

.bufferingInfo
{
	font-family: 돋움체,나눔고딕코딩,monospace;
}

#all
{
	min-width: 400px;
	width:100%;
}

#notibar
{
	background: #ff8a00;
	font-size: 1.2em;
	color: white;

	margin: 0px;
}

#topmenu {
	height:100px;
	padding:0px;
	width:100%;
	margin: 0px 0px 0px 0px;
	border: 0px;
	background: #3F51B5;
	color : White;
	position: fixed;
	top : 0;
	border: 0;
	box-shadow: 0 3px 3px rgba(0,0,0,.5);
	box-sizing: border-box;
	z-index: 10;
}

#topmenu_left {
	width: 20%;
}

#topmenu_center {
	width: 60%;
}

#topmenu_right {
	width: 20%;
}

#policy {
	text-align: center;
	margin-top: 5px;
}

#wimyboxlogo
{
	padding: 10px;
	vertical-align: middle;

	font-size: 1.2em;
	font-weight: bold;
	color : #fff;

	z-index: 9;
}

#playInfo {
	margin: 0px 0px 0px 0px;
	border: 0px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 120%;
	color: #fff;
}

#miniControl
{
	vertical-align: middle;
	text-align: right;
	padding: 5px;
}

.minicontrol_td
{
	height:100px;
}

.play, .pause, .repeat_on, .repeat_off, .random_on, .random_off {
	outline: none;
	background-size: 25px 25px;
	width: 25px;
	height: 25px;
	border: 0px;
	margin: 0px;
	font-size: 0px; /* for ie */
}

.play {
	background: url("play.png");
	margin-right: 14px;
}

.pause {
	background: url("pause.png");
	margin-right: 14px;
}

.repeat_on {
	background: url("repeat_on.png");
	margin-left: 3px;
}

.repeat_off {
	background: url("repeat_off.png");
	margin-left: 3px;
}

.random_on {
	background: url("random_on.png");
	margin-left: 3px;
}

.random_off {
	background: url("random_off.png");
	margin-left: 3px;
}

#showLoading {
	clear: both;
	font-size: 2.5em;
	font-weight: bold;
	padding: 20;
	text-align: center;
	width: 402px;
	margin-left:auto;
	margin-right: auto;
}

#allcontent
{
	max-width: 1350px;
	width:98%;
	margin-top: 123px;
	margin-left:auto;
	margin-right: auto;
}

#mainDiv
{
	width: 402px;
	margin-left:auto;
	margin-right: auto;
	padding: 0px;
}

#playingRealInfo
{
	padding: 3px;
    font-size:0.8em;
    color: white;
    width: 100%;
    text-align: center;
    margin-bottom: 9px;
}

#videoDiv
{
	color: white;
	padding: 0px;
	margin: 0px;
}

#player
{
	background-color: black;
}

#playerControl
{
	padding: 5px;
	background-color: black;
}

#allcontrol
{
	line-height: 180%;
	padding: 5px;
	margin-top: 5px;
}

#help
{
	float: right;
}

#control
{
	text-decoration:none;
}

#status
{
	margin-top: 3px;
	cursor: pointer;
}

#log
{
	margin-top: 3px;
	border-top: 1px dotted black;
}

#detail_control
{
	margin: 6px;
	margin-left: 20px;
  display: none;
	border: 1px solid #cccccc;
	border-radius: 10px;

  padding: 5px;
}

#list_control_mylist
{
	display: none;
	padding-left: 5px;
	padding-top: 2px;
}

#list_new_mylist
{
	display: none;
}

#myplaylists
{
	border: 1px solid black;
}

#core_content {
	margin: 0px;
  margin-top: 5px;
	padding: 0px;
}

#playlist_outer
{
    padding: 0px;
    margin: 0px 0px 10px 0px;
    width: 52%;
    min-height: 600px;
    float: left;
}

#list_control {
	background-color: #fff;
	border: 0;
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 5px;

  margin: 0px 0px 0px 0px;
  margin-top: 8px;
  width: 100%;
}

#playlist, #listEditor
{
	background-color: white;
	border: 0;
  padding: 0px;
  padding-top: 10px;

  margin: 0px 0px 0px 0px;
  width: 100%;
}

#listEditor
{
	display: none;
}

#listEditor_textarea
{
	width: 100%;
	height: 300px;
}

#bannerOutter {
	float: right;
	width: 47%;
	text-align: center;
	border: 0;
	background: #fff;
}

#banner
{
	padding: 5px;
}

#banner_img {
  width: 250px;
  height: 140px;
}

#lyricsOutter
{
	width:47%;
	float:right;
	padding: 2px;

	line-height: 140%;

	background-color: white;
	border: 0;

	margin-top: 10px;
	margin-bottom: 10px;
}

#lyrics
{
	padding: 5px;
}

#contact {
	float: none;
	clear: both;
	color: #202020;
	background-color: #fff;
	border-top: 1px solid #e2e2e2;
	height: 50px;
	vertical-align: middle;
	text-align: right;
	padding: 10px;
}

/* http://stommepoes.nl/Homeselling/homesellingcontact2.html
http://csscreator.com/node/33027
 contact 가려짐
 */
#navigatorOutter
{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/*z-index: 20;*/
	width: 100%;

	background: white;

	background-image: url('black.png');
	background-size: 100% 10px;
	background-repeat:no-repeat;

	border: 1px solid #cccccc;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

}

#navigator
{
	font-size: 1.2em;
	text-align: center;

	width: 16em;
	margin: 0 auto;
	padding-top: .2em;
	/*z-index: 10;*/

    padding: 10px;
    padding-top: 20px;
}

#more_buffer_input, #maxsonglimitinput
{
	width:20px;
}

/* if width <= 650px */
@media screen and (max-width : 650px)
{
	#all
	{
		width: 98%;
	}

	#topmenu {
	}

	#topmenu_left {
		display: none;
	}

	#topmenu_center {
		width: 75%;
	}

	#topmenu_right {
		width: 25%;
	}

	#playInfo	{
		border: 0px;
	}

	.play { margin-right:0px;}
	.pause { margin-right:0px;}
	.repeat_on { margin-left:0px;}
	.repeat_off { margin-left:0px;}
	.random_off { margin-left:0px;}
	.random_on { margin-left:0px;}

	#allcontent
	{
		width: 100%;
	}

	#playlist_outer
	{
		width: 100%;
		max-width: 100%;
	}

	#bannerOutter
	{
		padding:0px;
		padding-top: 10px;
		padding-bottom: 5px;

		width: 100%;
		float: left;
		clear: both;
	}

	#lyricsOutter
	{
		padding: 0px;
		padding-top: 15px;
		padding-bottom: 5px;
		float: left;
		clear: both;
		width: 100%;
	}
}


  .popup-wrap{
    background-color:rgba(0,0,0,.3);
    backdrop-filter: blur(4px);
    justify-content:center;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:15px;
    padding-top:120px;
  }
  .popup{
    width:90%;
    max-width:1000px;
    margin: auto;
    background-color:#ffffff;
    border-radius:10px;
    overflow:hidden;
    box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
  }
  .popup-body{
    width: 95%;
    margin: auto;
    background-color:#ffffff;
  }
  .popup-close-btn {
    width: 100%;
    height: 50;
    margin: auto;
    margin-bottom: 15;
    text-align: center;
  }