/* 超小螢幕（手機，小於 768px） */
@media (min-width: 0px) 
{
    
    /*--- Font Color ---*/
    .tc-orange{
        color:#e86300;
    }

    .tc-black{
        color:#3b3b3b;
    }

    .tc-lightgray{
        color:#808080;
    }

    .tc-fadegray{
        color:#cfcfcf;
    }

    .tc-white{
        color:#fff;
    }

    .tc-lightorange{
        color:#fc7a00;
    }

    /*--- Bg Color ---*/
    .bg-orange{
        background-color:#e86300;
    }

    .bg-lightorange {
        background-color: #fc7a00;
    }

    .bg-black{
        background-color:#3b3b3b;
    }

    .bg-lightgray{
        background-color:#f5f5f5;
    }

    .bg-md-gray{
        background-color:#aeaeae;
    }

    .bg-deep-gray{
        background-color:#4c4c4c;
    }

    .bg-pink{
        background-color:#fb194d;
    }

    .bg-white {
        background-color: #fff;
    }

    .bg-wthite-alpha {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .bg-green{
        background-color:#008160;
    }

    .bg-deep-purple{
        background-color:#10173d;
    }

    .bg-blue{
        background-color:#4a5da6;
    }

    /*--- Border Color ---*/
    .border-orange {
        border:1px solid #e86300;
    }

    .border-gray {
        border:1px solid #cfcfcf;
    }

    .border-none {
        border:0px;
    }

    /*--- Bread Crumbs ---*/
    .bread-crumbs{
        margin-bottom:20px;
    }

    .bread-crumbs a{
        color:#808080;
    }

 	.bread-crumbs ul{
 		padding:0px ;
 	}
    
    .bread-crumbs ul li{
 		float:left;
 		list-style:none;
 	}
 	
    /*--- Title ---*/
    .title{
        margin-bottom:10px;
    }

    .title .title-icon{
        float:left;
    }

    .title .title-txt{
        list-style:none;
        padding:0;
        margin:0;
        float:left;
        margin-left:20px;
    }

    .title .title-txt li{
        float:left;
        line-height:40px;
        margin-right:15px;
    }

    .title .title-txt li a{
        font-size:20px;
        font-weight:bold;
        text-decoration:none;
        color:#3b3b3b;
    }

    .title .title-txt li a:hover,
    .title .title-txt li a.active{
        color:#e86300;
    }

    .title .title-more{
        float:right;
        line-height:40px;
    }

    .title .title-more:hover{
        color:#e86300;
    }

    .title .title-tab-more{
        float:right;
        line-height:40px;
    }

    .title .title-tab-more:hover{
        color:#e86300;
    }    

    /*--- Nav Tabs ---*/
    .nav-tabs{
        margin-bottom:40px;
    }

    .nav-tabs li{
        padding:0;
    }

    .nav-tabs li.active a{
        color:#e86300;
    }

    .nav-tabs li a{
        font-size:16px;
        border:1px solid #ddd;
        background-color:#fafafa;
    }

    .nav-tabs li a:hover{
        color:#e86300;
        border:1px solid #ddd;
    }

    .nav-tabs li.active a:hover{
        color:#e86300;
    }

    .nav-tabs li.active a:focus{
        color:#e86300;
    }
    .nav-tabs li a.disable{
        color:#ababab;
        font-size:16px;
        border:1px solid #ddd;
        background-color:#fafafa;
    }
    .nav-tabs li a.disable:hover{
        color:#ababab;
        font-size:16px;
        border:1px solid #ddd;
        background-color:#fafafa;
    }
    /*--- Charts List ---*/
    .charts-list{
        list-style:none;
        padding:0;
        margin:0;
    }

    .charts-list li{
        padding:5px;
    }

    .charts-list li:nth-child(odd){
        background-color:#f5f5f5;
    }

    .charts-list .charts-control{
        float:right;
        margin-right:5px;
        margin-top:-34px; 
        /* 10/28 套用limitTxt 後發現需要往上移-24px
        因為單行字串使用div後會把 play 往下擠
        */
        border: 0px dashed gray;
    }

    [class*="charts-control-"]{
        width:25px;
        height:25px;
        border:1px solid #e86300;
        background-color:rgba(255, 255, 255, 0.2);
        border-radius:50px;
        cursor:pointer;
    }

    .charts-num{
       width:21px;
       height:42px;
        float:left;
        margin-right:10px;
    }

    .charts-num span{
        width:100%;
        display:block;
    }

    [class*="charts-status-"]{
        width:100%;
        height:42px;
        background-position:bottom;
        background-repeat:no-repeat;
    }
	
	.charts-status-none{
        background-image:url("../images/pubilc/icon_none.png");
    }

    .charts-status-hold{
        background-image:url("../images/pubilc/icon_hold.png");
    }

    .charts-status-const{
        background-image:url("../images/pubilc/icon_hold.png");
    }/* 16/03/31 新增
    這一個樣式與.charts-status-hold 內容一樣
    但因為程式人員要避免與現有程式相衝突,故需改名
    但這個樣式並沒有回寫到靜態html部分,demo html還是使用.charts-status-hold
     */

    .charts-status-new{
        background-image:url("../images/pubilc/icon_new.png");
    }

    .charts-status-up{
        background-image:url("../images/pubilc/icon_up.png");
    }

    .charts-status-down{
        background-image:url("../images/pubilc/icon_down.png");
    }

    .charts-status-none{
        background-image:none;
    }
   

    /*--- Album ---*/
    .album{
        width:100%;
        height:100%;
        position:relative;
        cursor:pointer;
    }

    .album-artist{
        display:block;
        margin-top:0px;
    }
    .album-name{
        display:block;
        margin-top:5px;
    }
    
    .album-control{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.4);
    }
    
    .img-default{
        display: block;
        width: 100%;
        height: 100%;
        background-image:url("https://www.mymusic.net.tw/images/defaults_cd.png");
        background-repeat: no-repeat; 
        background-size: cover;
        background-position: center center;
    }
    /* 專輯頁 左上大專輯圖 功能鍵用 */
    .song-info-img{
        width:100%;
        height:100%;
        position:relative;
        cursor:pointer;
    }
    .album-bigCover-control{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.4);
    }

    [class*="album-control-"]{
        position:absolute;
        top:50%;
        width:44px;
        height:44px;
        border:1px solid #fff;
        background-color:rgba(255, 255, 255, 0.2);
        border-radius:50px;
        cursor:pointer;
    }

    [class*="album-control-"]:hover{
        background-color:rgba(255, 255, 255, 0.5);
    }

    .album-control-plus{
        left:30%;
        margin-left:-22px;
        margin-top:-22px;
        background-image:url("../images/index/icon_plus.png");
        background-position:-1px -1px;
    }

    .album-control-play{
        left:70%;
        margin-left:-22px;
        margin-top:-22px;
        background-image:url("../images/index/icon_play.png");
        background-position:-1px -1px;
    }

    /*--- MV ---*/
    .mvBox{
        width:234px;
        float:left;
        padding:0px 15px;
    }
    .mv{
        width:100%;
        height:100%;
        position:relative;
        cursor:pointer;
    }
    .mv-name{
        display:block;
        margin-top:5px;
    }
    
    .mv-control{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.4);
    }

    [class*="mv-control-"]{
        position:absolute;
        top:50%;
        width:44px;
        height:44px;
        border:1px solid #fff;
        background-color:rgba(255, 255, 255, 0.2);
        border-radius:50px;
        cursor:pointer;
    }

    [class*="mv-control-"]:hover{
        background-color:rgba(255, 255, 255, 0.5);
    }

    .mv-control-plus{
        left:30%;
        margin-left:-22px;
        margin-top:-22px;
        background-image:url("../images/index/icon_plus.png");
        background-position:-1px -1px;
    }

    .mv-control-play{
        left:50%;
        margin-left:-22px;
        margin-top:-22px;
        background-image:url("../images/index/icon_play.png");
        background-position:-1px -1px;
    }

    /*--- Page Number ---*/
    .pagination li a{
        color:#808080;
    }

    .pagination li a:hover{
        color:#e86300;
    }

    .pagination li.active a,
    .pagination li.active a:hover{
        background-color:#e86300;
        border-color:#e86300;
    }
    .f_l{
        float: left;
    }
    .f_r{
        float: right;
    }
    /* 2016/1/6 新增
    調整上下區塊間距,但因為boostrap "row"默認值
    必須強迫覆蓋  */
    .padding-R-0{
        padding-right:0px;
    }
    .padding-L-0{
        padding-left:0px;
    }
    .padding-R-L-0{
        padding-right:0px;
        padding-left:0px;
    }
    .padding-botm-0{
        padding-bottom:0px;
    }
    .padding-top-0{
        padding-top:0px;
    }

    .padding-R-7{
        padding-right:7px;
    }
    .padding-L-7{
        padding-left:7px;
    }
    .padding-R-L-7{
        padding-right:7px;
        padding-left:7px;
    }
    .padding-botm-7{
        padding-bottom:7px;
    }
    .padding-top-7{
        padding-top:7px;
    }

    .padding-R-10{
        padding-right:10px;
    }
    .padding-L-10{
        padding-left:10px;
    }
    .padding-botm-10{
        padding-bottom:10px;
    }
    .padding-top-10{
        padding-top:10px;
    }
    .padding-R-20{
        padding-right:20px;
    }
    .padding-L-20{
        padding-left:20px;
    }
    .padding-botm-20{
        padding-bottom:20px;
    }
    .padding-top-20{
        padding-top:20px;
    }

    .margin-botm-0{
        margin-bottom:0px;
    }
    .margin-top-0{
        margin-top:0px;
    }
    .margin-right-0{
        margin-right:0px;
    }
    .margin-left-0{
        margin-left:0px;
    }
    .margin-bottom-10{
        margin-bottom:10px;
    }
    .margin-top-10{
        margin-top:10px;
    }
    .margin-right-10{
        margin-right:10px;
    }
    .margin-left-10{
        margin-left:10px;
    }
    .margin-right-20{
        margin-right:20px;
    }
    .margin-left-20{
        margin-left:20px;
    }
     .margin-right-40{
        margin-right:40px;
    }
    .margin-left-40{
        margin-left:40px;
    }
    .margin-botm-20{
        margin-bottom:20px;
    }
    .margin-top-20{
        margin-top:20px;
    }
    .margin-botm-30{
        margin-bottom:30px;
    }
    .margin-top-30{
        margin-top:30px;
    }

    /* text align*/
    .txt-alig-c{
        text-align: center;
    }
    .txt-alig-l{
        text-align: left;
    }
    /* patch  -- label link */
    .txt-deco-none{
        text-decoration:none !important;
    }
    
    /* mv卷軸 - mv 調整符合圖檔比例 */
    .carousel-inner .mv{
        height:114px;
        background-color:#000;
    }
    .carousel-inner .mv img{
        height:100%;
        margin:0px auto;
    }
    /* mv 調整符合圖檔比例 */
    .top-mv .mv,
    .artist-mv .mv{
        height:202px;
        background-color:#000;
    }
    .top-mv .mv img,
    .artist-mv .mv img{
        height:100%;
        margin:0px auto;
    }
    /* song 右側邊 mv 調整符合圖檔比例 */
    .side-mv .mv{
        height:135px;
        background-color:#000;
    }
    .side-mv .mv img{
        height:100%;
        margin:0px auto;
    }
        
}
/*影音專區*/
    .mv-zone .mv,
    .artist-mv .mv{
        height:202px;
        background-color:#000;
    }
    .mv-zone .mv img,
    .artist-mv .mv img{
        height:100%;
        margin:0px auto;
    }

/* 小螢幕（平板，大於等於 768px） */
@media (min-width: 768px) 
{

}

/* 中等螢幕（桌面螢幕，大於等於 992px） */
@media (min-width: 992px) 
{
    
}

/* 大螢幕（大桌面螢幕，大於等於 1200px） */
@media (min-width: 1200px) 
{
    
}