/* vas mobile common style */
/* 2015/04/22  Ryan*/
html body {height:100%;max-width: 100%;overflow-x:hidden;}
body{padding-bottom:0 !important;}

body,input,textarea,select,table,button {position:relative;font-size:12px;color:#6d6d6d;line-height:1.25em;margin:0;padding:0;}
table{width:100%;}
img{ width:100%;margin:0px; max-width:100%;border: 0; -webkit-touch-callout:none;}

.detail{display:none; height:100px; overflow:auto; background-color:#fff; text-align:left;}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

li {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border : 0;
    float: left;
    width:100%; 
    /*padding-bottom:10px;*/
}


#titleDiv{width:100%; /*padding-top:5%;*/}
.titleImg{z-index:1; /*position:absolute;*/}
.rightbtn{width:8%; z-index:3; position:absolute; right:3%; padding-top:2%;}
.leftbtn{width:8%; z-index:3; position:absolute; left:3%; padding-top:2%;}


#menuGnbDiv{width:100%; /*z-index:7; position:absolute;*/ display:none;}

h1, p, a {padding:0;margin:0;} 
div.imgTopic {position:relative;font-family:’Dotum’,’돋움’,sansserif;border: 1px solid #eee;overflow:hidden;} 
div.imgTopic a {text-decoration: none;} 
h1.title {
    position:absolute; 
    width:100%; 
    z-index:1;
    padding: 0 0 0 5px;
    bottom:20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color:#fff;
    background-color:rgba(0, 0, 0, 0.3);
    
} 
h1.title a{
    font-size: 0.55rem;
    line-height: 1rem;
    font-weight:bold;
    color:#fff;
    vertical-align: 0;
    letter-spacing: -1px;

} 
h1.title a:hover, h1.title a:focus {text-decoration:underline;} 
p.content a {
    font-size: 0.7rem;
    color:#fff;
    vertical-align: 0;
    letter-spacing: -1px;
} 
.c_singer {
    position:absolute;
    display:block;
    left:0;
    bottom:0;
    width:100%;
    height:20px;
    padding:0 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap:normal;
    background-color:rgba(0, 0, 0, 0.3);
}


/** 차트 **/
.listDiv li{
    display:inline-block;
    /*display:table;*/
    position:relative;
    background:#ffffff;
    width:100%;
    border-bottom:1px #c8c8c8 solid;  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:bold;
}
.listDiv li img{
    vertical-align:middle; width:100%;
}
.listDiv .ranking{
    /*padding-left:15px;*/
    font-size:12pt;
    color:#2F2F2F;
}
.listDiv .song{
    color:#2F2F2F; 
    font-size:12pt;
}
.listDiv .singer{
    color:#bbbbbb;
    font-size:10pt;
}

.cb_ltable{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.cb_mcell{
    display: table-cell;
    width: 15%;
}
.cb_rcell{
    display: table-cell;
    width: 10%;
    text-align: center;
    vertical-align: middle;
}
.cb_tcell{
    display: table-cell;
    width: 75%;
    vertical-align: middle;
}

.cb_tw{
    /*padding-left: 20px;*/
}

.cb_t{
    /*display: -webkit-box;*/
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15pt;
    line-height: 1rem;
    vertical-align: 0;
    letter-spacing: -1px;
    color: #000;
}
.cb_o{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 3px;
     font-size: 10pt;
    line-height: 1rem;
    vertical-align: 0;
    letter-spacing: -1px;
    color: #888;
}


.menuBar{    
    white-space:nowrap; 
    border-bottom:1px #c8c8c8 solid; 
    padding-bottom:3%; 
    padding-top:3%;
    /*-ms-overflow-style: none;*/ 
    overflow-x:auto;
}

.menuBarList {
    padding-bottom:2%;
    text-align:center; 
    text-decoration:none;
}
.menuBar span {font-size:15px; font-weight:bold; margin-left:2%;margin-right:2%;}

::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
/*::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url(`./images/bg.png`) #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}*/


.free_img{
    position:absolute;
    top:0px;
    z-index:5;
    width:18%;
}

/*검색 페이지*/
input[type=search]{
    font-size:15px;
    border: 2px solid #cf0000;
    border-radius: 1px; 
    width:70%; 
    height:36px; 
    padding: 10px 15px; 
    box-sizing: border-box;
    background-color: #f6f6f6;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=search]:focus {
    background-color: #ffffff;

}


.sel_rcell{
    padding-left:2%;display: table-cell; width:80%;vertical-align: middle;
}

.sel_rspan{
    /*padding:3px;*/ border: 1px solid #cf0000; border-radius:12px; color:#cf0000;line-height: 1.6rem;font-size: 0.5rem; padding:3px 7px;
}

.sel_wspan{
    padding-left:2%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    line-height: 2rem;
    vertical-align: 0;
    letter-spacing: -1px;
    color: #000;
}

.sel_arrowBtn{
    display: table-cell; width:20%; padding:5% 3% 5% 8%;
}



/*.searchBox{
    font-size:15px;
    border: 2px solid #cf0000;
    border-radius: 4px; 
    width:60%; height:54px; 
    padding: 10px 15px; 
    box-sizing: border-box;
}*/

/*aside menu*/

aside,  nav {
    display: block;
	font-family: "proxima-nova",'Apple SD Gothic Neo','nanumgothic',NanumGothic,'Malgun Gothic',"Helvetica Neue", Helvetica, Helvetica, Arial,dotum,sans-serif;
}

aside {
    position:fixed; 
    width:80%; 
    height:100%; 
    top:0px; 
    left:0; 
    bottom:0; 
    background-color:#fff; 
    overflow-y:auto;
    -webkit-overflow-scrolling: touch; 
    z-index:1001; 
    left:-80%; 
    /*transition: .8s all cubic-bezier(.19,1,.22,1);
    -webkit-transition: .8s all cubic-bezier(.19,1,.22,1);
    -moz-transition: .8s all cubic-bezier(.19,1,.22,1);
    -o-transition: .8s all cubic-bezier(.19,1,.22,1);
    -ms-transition: .8s all cubic-bezier(.19,1,.22,1);*/
}

aside div {
    width: 100%;
}

aside nav li {
    position: relative;
    /*border-bottom: solid 1px #F2F2F2;*/
    display: list-item;    
    text-align: -webkit-match-parent;
}



aside nav li a {
    display: block;
    height: auto;
    line-height: 45px;
    padding: 0 0 0 20px;
    margin-right: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
}

a {
    color: #1a1a1a;
    text-decoration: none;
}




/* layer popup css */
.layerOverlay {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:10000;}
.layerOverlay {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:99999;}
.layerPop01 {position:absolute; top:0; left:0; width:100%; height:100%; background:none; z-index:100000;}
.layerPop01 .inner {position:relative; margin:0 auto; margin:15px; padding:10px; border-top:2px solid #ff222a; 
    box-shadow:0 0 4px #000;-moz-box-shadow:0 0 4px #000;-webkit-box-shadow:0 0 4px #000;
}
.layerPop01 .inner .innerOverlay {position:absolute; top:0; left:0; width:100%; height:100%; background:#222; opacity:0.7;}
.layerPop01 .inner .popTit {position:relative; padding:0 0 7px 5px; text-align:left; font-size:16px; color:#fff; opacity:1; z-index:110000;}
.layerPop01 .inner .popBody {position:relative;padding:5px 5px 5px 5px; border:1px solid #000; background:#262727; overflow:hidden;
    border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
    box-shadow:0 0 4px #999 inset;-moz-box-shadow:0 0 4px #999 inset;-webkit-box-shadow:0 0 4px #999 inset; z-index:110000;
}
.layerPop01 .inner .popBody .info {color:#3d3d3d; padding:15px 12px;}
.layerPop01 .inner .popBody .info .subTit {color:#000; padding-bottom:7px; letter-spacing:-1px;}
.layerPop01 .inner .popBody .info .text {padding-bottom:7px;}
.layerPop01 .inner .popBody .info .text .red {color:#e12301;}
.layerPop01 .inner .popBody .info .mOllehIconSquare { color:#6d6d6d; padding-top:5px; background-position:0 -141px;}
.layerPop01 .inner .popBody .btnConfirm {padding:2px 0 15px; text-align:center;}
.layerPop01 .inner .popBody .btnConfirm a {padding:0 25px; letter-spacing:0;}
.layerPop01 .inner .popBody .btnClose {position:absolute; bottom:20px; right:15px;}
.layerPop01 .inner .popBody .btnClose .close {display:inline-block; padding:5px 20px 5px 5px; color:#7d7d7d; 
	background:url('../image/btnLayerClose.gif') no-repeat right center;
	background-size:15px 15px; -webkit-background-size:15px 15px;
}
.layerPop01 .inner .popBody .btnClose2 {position:absolute; bottom:8px; right:15px;}
.layerPop01 .inner .popBody .btnClose2 .close2 {display:inline-block; padding:5px 20px 5px 5px; color:#7d7d7d; 
	background:url('../image/btnLayerClose.gif') no-repeat right center;
	background-size:15px 15px; -webkit-background-size:15px 15px;
}
.layerPop01 .inner .popBody .btnClose3 {position:absolute; bottom:0px; right:15px; }
.layerPop01 .inner .popBody .btnClose3 .close3 {display:inline-block; padding:50px 20px 0px 5px; color:#7d7d7d; 
	background:url('../image/btnLayerClose.gif') no-repeat right bottom;
	background-size:15px 15px; -webkit-background-size:15px 15px;
}