@charset "utf-8";
/* CSS Document */

/* index↓ 

common
form
共用模組(switch、page、checkbox、radio、ellipsis行數、gotop、item-row、icon)
Layout
header detail
首頁 detail
footer detail
內頁(關於我們、藝人品牌、Fans Club、留言板、音樂下載、實體周邊、影音、最新消息、會員專區、聯絡我們、聯絡我們、交換區、聊天室)

 index↑*/


/* 尺寸變化

1281px ↑滿版(header style1 )
1024-1280 次版 (header style2 + 右側保留)
1023px ↓手機板 (header style3 + 右側就會被移到最新消息block的下面)


*/


/* //////////////////////////common ↓////////////////////////// */

body {
    -moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
    /* 維持字體在所有瀏覽器上都是一致的 */
}


* {margin: 0; padding: 0; outline: 0;}
*, *:before, *:after { box-sizing: border-box;}

html {height:100%;}
body {
  font-family: Verdana, Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", sans-serif;
  color: #4a4a4a;
  font-size: 16px;
  background:#f2f2f2;
  height:100%;
  padding-top: 113px; /* 與NAV 高度相同 */
  word-break: break-word;
}
/*h1{ color: #466063; font-size: 1.5625rem; margin-bottom: 48px; }*/
h1{color:#466063;  font-size: 1.125rem;}
h4{color: #6b6d70;  font-size: 1.125rem;}
h1:first-of-type,h2:first-of-type,h3:first-of-type{margin-top: 0px;}
h1,h2,h3,h4{margin-bottom: 40px; margin-top: 30px;}
h1, h2, h3, h4, h5, h6{font-weight: 400;}


ol, ul, li {    margin: 0; padding:0; }
ol, ul{-webkit-margin-before: 1em;margin-block-start: 1em;    -webkit-margin-after: 1em;    margin-block-end: 1em;-webkit-padding-start: 25px;-moz-padding-start: 25px;padding-inline-start: 25px;}
p {
  margin: 0 0 20px 0;
  font-size:0.875rem;
  color:#6b6d70;
  line-height: 1.5; 
  /*  word-break:break-all; 強迫長連結換行 */
  word-wrap:break-word;
  
}
button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color; 
}
#page-register p.f18{font-size: 1.125rem;}

a { color: #231815; text-decoration:none; }
a:hover, a:focus{text-decoration:none; color: #ea575f;}
.word-red{color:#ff685d;}
.word-black{color:#4e4e4e;}
.artist{color: #ea575f;}
a.artist:hover{color: #000;}
.xycolor{ color: #eb565f; }

.price .word-red{ padding-right: 4px; }


.alert-block{ color: #ea575f; }
.alert-block a{color:#0000ff;}
.alert-block a:hover{color:#ea575f}
/* form */

.form-control {
    border: 1px solid #c4c4c4;
    color: #7f7f7f;
    font-size: 0.875rem;
    border-radius: 0;
    padding: 0 8px;
    line-height: 1;
    min-height: 28px;
    display: inline-block;
    width: 222px;
    
}
.fake-file-input{
  border: 1px solid #c4c4c4; 
  position: relative; 
  background-color: #fff; 
  height: 31px;
  padding-left: 1px; 
  width: 222px;
  overflow: hidden;
  padding: 1px 0 0 1px;
}
@media screen\0 {

.fake-file-input {padding: 0;}}



.file-input{font-size: 0.875rem;width: auto; background-color: #fff; border:0px; }


.form-control::-webkit-input-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control:-ms-input-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control::-ms-input-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control::-webkit-input-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control::-moz-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control:-ms-input-placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.form-control::placeholder {
  color: #c2c2c2;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

textarea.form-control{ width: 100%; }

.col-form-label{padding-top: 0; padding-bottom: 0;}
.form-group{ text-align: left;  position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;font-size: 0.875rem; }

.form-group label{  font-size: 1.125rem;  color: #6b6d70;  display: block; text-align: right; padding-right: 7px; line-height: 28px;}
.form-group > label{ width: 150px;}
.form-group input{-webkit-appearance: none;}
.form-title{padding:0px 0 10px 150px;}

.form-check-label{text-align: left; padding-left: 0px; padding-left:0rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;} 
.form-check-label label{ text-align: left;  font-size:1.125rem;}

.form-check-label.check-right input[type="radio"] + label span{margin-right: 0; position: absolute;right: 0; top: 6px;}
.form-check-label.check-right{padding-right: 30px;}
.form-check-label.check-right label{line-height: 1;}

.news-publication-upload .form-group > label{ width:75px; }

.form-group .inp-inp{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start ; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% - 150px);}
.form-group .inp-inp input{  height: 28px; margin-right: 10px;}
.form-group .inp-inp input + input{ margin-left: 10px; }
.form-group .inp-inp .inp-ps{display: inline-block; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;  font-size: 0.875rem; line-height: 1; color: #6b6d70; margin-top: 5px; margin-bottom: 5px;}
.form-group .inp-inp .inp-ps.word-red{color: #ea575f;}

.half-width{ width: 50%; }
.full-width{width: 100%;}


.form-group .addr{ -ms-flex-wrap: wrap; flex-wrap: wrap; }
.addr select{margin-right: 10px; margin-bottom: 4px; height: 28px; line-height: 28px;border: 1px solid #c4c4c4;}
.form-group .addr .inp-ps{ display: block; width: 100%; margin-top: 1em;}

.CodeBox img{margin-right: 10px;}
.CodeBox a{color:#0000ff}

select.form-control:not([size]):not([multiple]) {
    height: 28px;
}

.error-control .form-control {border-color:#ea575f;}
.error-control .inp-inp .inp-ps{color: #ea575f;}

/*
.form-group .inp-btn{ display: flex; align-items: center; }
.form-group .inp-btn input{ flex:3;height: 28px;}
.form-group .inp-btn button{flex:1;height: 28px;     min-height:28px; line-height: 28px; padding:0 10px;}
*/

.form-group .view-wording{ font-size: 1.8rem; color: #7f7f7f; 
padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);}


.btn-box{ text-align: center;  }

input:disabled{ background-color: #ebebeb;  color: #a4a4a4; border:1px solid #ebebeb}
.btn-main{ 
            background-color: rgba(71,96,100,1);
            color: #fff;
            font-size: 0.875rem;
            min-width: 54px;
            padding:0px 9px;
            line-height: 28px;
            height: 28px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            border-radius: 0;
            border: 0;
            margin: 2px 0px;
            -webkit-appearance: none;
}
.btn-main img{
  height: 16px;
    padding-right: 5px;
    vertical-align: middle; 
}
.btn-main .icn{ vertical-align: middle;  }
.btn-main.focus, .btn-main:focus, .btn-main:hover ,
.btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show > .btn-primary.dropdown-toggle{
    /*background-color: rgba(71,96,100,.9);*/background-color: rgba(2,103,115,1);
    color: #fff;
}

.btn-album{font-size: 0.875rem; min-height: 40px; line-height:1; line-height: 40px;}
.btn-34h{ font-size: 0.875rem; padding-left:10px; padding-right: 10px; line-height: 34px; height: 34px}
.btn-40h{ font-size: 0.875rem; padding-left:20px; padding-right: 20px; line-height: 40px; height: 40px;}
.btn-min90{min-width: 90px;}
.btn-min120{min-width: 120px;}

.btn-shadow{box-shadow: 2px 2px 4px rgba(0,0,0,.3);}
.btn-primary{ background-color: #ea575f; color:#fff; padding-left: 20px;    padding-right: 20px;}
.btn-primary .icn{  }
.btn-gray{background-color: #6b6d70;}
.btn-fb{background-color:#3a5995;}
.btn-cart{background-color:#026773;}


.btn-cart{display: inline-flex; align-items: center;}
.btn-main .icn-20{ width: 20px; height: 20px;}

.btn-cart.dropdown-toggle::after{display: none;}

.btn-border{ border: 1px solid #fff; padding-left: 15px; padding-right: 15px;}
@media (max-width:1279px) {
 body{padding-top: 60px; /* 與NAV 高度相同 */}

}

@media (max-width:768px) {
 .form-group{display: block;}
 .form-group label{  text-align: left; width: 100%;}
 .form-group .inp-inp{ width: 100%; }
 .form-control,.addr select, .fake-file-input, .file-input,  .half-width, .full-width{ width: 100%; }
.form-group .inp-inp input{margin-right: 0; height: 40px;}

.fake-file-input{
  height: 40px;
  padding-top: 5px;
  padding-left: 4px;
}

.CodeBox{padding-top: 10px;}
.addr select, select.form-control:not([size]):not([multiple]) {height: 40px;}
.addr select{margin-right: 0px; margin-bottom: 10px;}
.form-title{padding-left:0px;}

}


/* //////////////////////////common ↑////////////////////////// */


/* //////////////////////////共用模組 ↓////////////////////////// */

/* ====Modul====  plyr.css */
.plyr__control--overlaid {
    background: rgba(234,87,95,.8);
  }
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #ea575f;
}
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
    background: #ea575f;
    color: #fff;
}
.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
    background: #ea575f;/*00b3ff*/
}
.plyr--full-ui input[type=range]{ color:#ea575f ; }
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{  background: #ea575f;}

.plyr__control--overlaid svg{border-radius: 0;}

.side_block video{ width: 100%; }
.plyr--audio{
  position: fixed; bottom: 70px;  left: 10px; z-index: 9999;
  width:500px;
  box-shadow: 0px 0 10px rgba(0,0,0,.2);
  display: none;
}

@media (max-width:414px) {
  .plyr--audio{
width: 100%;
 left: 0px;
 right:   0;
 bottom:  0;
}
}
/* ====Modul==== switch love /love-ed */
.switch {
  position: relative;
  right: 8px;
  width: 20px;
  height: 20px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  left: 0;
  cursor: pointer;
  background:url(../img/icon/love.png) 0 0 no-repeat;
  width: 20px;
  height: 20px;
  background-size: cover;
  -webkit-transition: .4s;
  transition: .4s;
}



.switch input:checked + .slider {
  background:url(../img/icon/love-ed.png) 0 0 no-repeat;
 width: 20px;
  height: 20px;
  background-size: cover;
}

.switch input:focus + .slider {
  background:url(../img/icon/love-ed.png) 0 0 no-repeat;
  width: 20px;
  height: 20px;
  background-size: cover;
}


/* ====Modul==== page */
.page-box{ margin: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.page-box:after{ content: ''; display: block; font-size: 0; clear: both; }
.page-box, .page-box a{font-size: 0.875rem;}

.page-box .dotted{margin-right: 10px;}
.page-box .btn-box {  }
.page-box .num-box{ color: #999999; margin:0 10px}
.page-box .num-box a{background-color:#fff;  margin-top: 5px; margin-bottom: 5px; padding: 2px 7px; color: #466063; display: inline-block; margin-right: 10px; border:1px solid #466063; font-weight: bolder;}
.page-box .num-box a:last-of-type{margin-right: 0;}
.page-box .btn-box a:hover, .page-box .num-box a:hover, .page-box .num-box a.current{ color: #fff; background-color: #466063; }


.page-box .btn-box{  padding: 0; }
.page-box .btn-box a{ padding: 2px 7px;margin-top: 5px; background-color:#fff; margin-bottom: 5px; margin-right: 10px; display: inline-block;border:1px solid #466063;font-weight: bolder;}
.page-box .btn-box a:last-of-type{margin-right:0}
.page-box .btn-box a.disable{ cursor: not-allowed; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; color: #cfd0d0;}
.page-box .btn-box a.disable:hover, .page-box .btn-box a.num:hover{text-decoration: none; background-color: transparent; color:#cfd0d0 ;}

@media(max-width: 480px) {

  .page-box a.ic-page-end, .page-box a.ic-page-start, .page-box .num-box a, .page-box .dotted{display: none;}
  .page-box .num-box a.current, .page-box .num-box a:last-of-type{display: inline-block;
        color: #466063; background-color: transparent;border: 0; padding:  0;}
   .page-box .num-box a.current{margin-right: 0; }
   .page-box .num-box a.current:before{ content: 'page:'; display: inline-block;padding-right: 7px; }
   .page-box .num-box a.current:after{ content: 'of'; display: inline-block;padding-left: 7px;padding-right: 7px;  }
}


/* ====Modul==== checkbox */
input.checkbox[type="checkbox"] {    display:none;}

input.checkbox[type="checkbox"] + label {    color:#777; padding-right:15px; line-height:20px; width:100%; }

input.checkbox[type="checkbox"] + label span {
    display:inline-block;
    width:22px;
    height:22px;
    margin:-2px 5px 0 0;
    vertical-align:middle;
    background:url(../img/form_check.png) left top no-repeat;
    cursor:pointer;
}

input.checkbox[type="checkbox"]:checked + label span {
    background:url(../img/form_check.png) left bottom no-repeat;
}


/* ====Modul==== radio */
input[type="radio"] {
    display:none;
}
input::-webkit-input-placeholder{ color:#d6d6d6;}
input::-moz-placeholder{ color:#d6d6d6;}
input:-ms-input-placeholder{ color:#d6d6d6;}
input::placeholder{ color:#d6d6d6;}

input[type="radio"] + label {
    color:#5f728a;
    font-family:Arial, sans-serif;
  padding-right:15px; line-height:30px; 
  font-family: Arial, Helvetica,"微軟正黑體", Microsoft JhengHei, sans-serif;
}

input[type="radio"] + label span {
    display:inline-block;
     width:22px;
    height:22px;
    margin:-2px 5px 0 0;
    vertical-align:middle;
   background:url(../img/form_radio.png) left top no-repeat;
    cursor:pointer;
  
  
}

input[type="radio"]:checked + label span {
    background:url(../img/form_radio.png) left bottom no-repeat;
}

@media (max-width:768px) {
input[type="radio"] + label {margin-left: 30px;}

}


/* ====Modul==== ellipsis行數 */

/*
<div class="ellipsis-effect rows4">
    <div class="text">XXXXXXXX</div>
</div>

*/

.ellipsis-effect{
 line-height: 1.22em; /* h */
  overflow: hidden;
  display: block;
}

.ellipsis-effect .text{ 
  float: right;
  margin-left: -5px;
  width: 100%;
  font-size: 1em;
  display: block
}

.ellipsis-effect:before{
  float: left;
  width: 5px; /* 與 .wrap .text 屬性 margin-left 一樣  */
  content: '';
}
.ellipsis-effect:after{
  float: right;
  content: "...";
  height: 1.3em;
  line-height: 1;
  padding-right: 5px;
  text-align: right;
  width: 3em;  /* 为三个省略号的宽度 */
  margin-left: -3em; /* 使盒子不占位置 */
  position: relative; /* 移动省略号位置 */
  left: 100%;
  top: -1.22em;
  padding-right: 5px;


  /* 显示更好的效果 */ /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    /* 重要 讓...不要失效 */
    box-sizing: content-box;

}

#page-merchandise .ellipsis-effect:after{ /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}


.inner-sidebar-box.song-list_block .ellipsis-effect:after{ /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}


.ellipsis-effect.nodote:after{ content: ''; }

/* 1行 */
.ellipsis-effect.rows1, .ellipsis-effect.rows1:before {
  height: 1.25em;
  
}

/* 2行 */
.ellipsis-effect.rows2, .ellipsis-effect.rows2:before{
  height: 2.44em; 
  
}

/* 3行 */
.ellipsis-effect.rows3, .ellipsis-effect.rows3:before {
  height: 3.63em; 
}

/* 4行 */
.ellipsis-effect.rows4, .ellipsis-effect.rows4:before {
  height: 4.82em;
}


.ellipsis-multiline{
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ====Modul==== gotop */
.cd-top {

  border-radius: 30px;
  display: inline-block;
  height:40px;
  width: 40px;
  position: fixed;
  right:  0;
  bottom: 60px;
 
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #ea575f url(../img/ic/ic_gototop.png) no-repeat center 50%;
  background-size:cover;
  
  opacity: 0;
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;

  z-index:99999;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.no-touch .cd-top:hover {
  cursor: pointer;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media (max-width:1279px) {
  .cd-top {right: 5px; bottom: 55px;}

}



@media (max-width:768px) {


.m-ellipsis-effect{
 line-height: 1.22em; /* h */
  overflow: hidden;
  display: block;
}

.m-ellipsis-effect .text{ 
  float: right;
  margin-left: -5px;
  width: 100%;
  font-size: 1em;
  display: block
}

.m-ellipsis-effect:before{
  float: left;
  width: 5px; /* 與 .wrap .text 屬性 margin-left 一樣  */
  content: '';
}
.m-ellipsis-effect:after{
  float: right;
  content: "...";
  height: 1.3em;
  line-height: 1;
  padding-right: 5px;
  text-align: right;
  width: 3em;  /* 为三个省略号的宽度 */
  margin-left: -3em; /* 使盒子不占位置 */
  position: relative; /* 移动省略号位置 */
  left: 100%;
  top: -1.22em;
  padding-right: 5px;


  /* 显示更好的效果 */ /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    /* 重要 讓...不要失效 */
    box-sizing: content-box;

}


/* 1行 */
.m-ellipsis-effect.m-rows1, .m-ellipsis-effect.m-rows1:before {
  height: 1.25em;
  
}

/* 2行 */
.m-ellipsis-effect.m-rows2, .m-ellipsis-effect.m-rows2:before{
  height: 2.44em; 
  
}

/* 3行 */
.m-ellipsis-effect.m-rows3, .m-ellipsis-effect.m-rows3:before {
  height: 3.66em; 
}

/* 4行 */
.m-ellipsis-effect.m-rows4, .m-ellipsis-effect.m-rows4:before {
  height: 4.82em;
}



}



/* more */
.more a, .last-more{ font-size: 0.875rem; color: #727171;}
.more a:hover, .last-more:hover{color: #ea575f;}
.more a:after, .last-more:after{ content: ''; display: inline-block; width: 16px; height: 16px; background: url('../img/ic/ic_more.png'); background-size: cover; vertical-align: middle; }
.last-more b{line-height:1;}
/*new-mark */
.new-mark{
  position: absolute;
  top:  0;
  left:  12px;
  background-color: #ff685d;
  
  font-size: 0.875rem;
  color: #fff;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 0px 12px 7px 12px;
    z-index: 2;
}


/* item-row */
.item-row{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.item-row .item{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; text-align: left; }
.item-row .item.item-right{ text-align: right; }






/* icon */
.icn{ 
  display: inline-block; 
  width: 12px; height: 12px; 
  background-position: 0 0; 
  background-size: cover; 
  background-repeat: no-repeat;

   }
.icn-16{width: 16px; height: 16px; }   
.icn-20{width: 20px; height: 20px; }   
.icn-24{width: 24px; height: 24px;}
.icn-28{width: 28px; height: 28px;}
/*.icn:hover{ opacity: .7; cursor: pointer; }*/

.icn_nav-setup{background-image: url('../img/ic/ic_nav-setup.png');}
.icn_nav-user{background-image: url('../img/ic/ic_nav-user.png');}
.icn_nav-logout{background-image: url('../img/ic/ic_nav-logout.png');}
.icn_nav-regist{background-image: url('../img/ic/ic_nav-regist.png');}
.icn_nav-mail{background-image: url('../img/ic/ic_nav-mail.png');}
.icn_nav-money{background-image: url('../img/ic/ic_nav-money.png');}
.icn_nav-cart{background-image: url('../img/ic/ic_nav-cart.png');}
.icn_nav-member{background-image: url('../img/ic/ic_nav-member.png');}


.icn_play2{ background-image: url('../img/ic/ic_play2.png');}
.icn_listen{ background-image: url('../img/ic/ic_listen.png');}
.icn_share{ background-image: url('../img/ic/ic_share.png');}
.icn_cart{ background-image: url('../img/ic/ic_cart.png'); width: 30px;}

.icn_del{background-image: url('../img/ic/ic_del.png');}
.item-remove .icn_del{background-image: url('../img/ic/ic_cart_del.png');}


.icn_remove{background-image: url('../img/ic/ic_remove.png');}




.icn_item_date{ background-image: url('../img/ic/ic_item_date.png');    vertical-align: middle;}
.icn_item_artist{ background-image: url('../img/ic/ic_item_artist.png');}
.icn_btn_mail{background-image: url('../img/ic/ic_btn_mail.png');}

/*
.icn_social_youtube{background-image: url('../img/ic/ic_footer_youtube.png');}
.icn_social_fb{background-image: url('../img/ic/ic_footer_fb.png');}
.icn_social_weibo{background-image: url('../img/ic/ic_footer_weibo.png');}
.icn_social_ig{background-image: url('../img/ic/ic_footer_ig.png');}
.icn_social_mail{background-image: url('../img/ic/ic_social_mail.png');}
.icn_social_b{background-image: url('../img/ic/ic_social_b.png');}
*/
.icn_cart_check{ background-image: url('../img/ic/ic_cart_check.png'); width: 30px;}
.icn_btn_cart{background-image: url('../img/ic/ic_nav-cart_w.png');  }
.icn_btn_cart.icn_cart_check{ background-image: url('../img/ic/ic_nav-cart-check_w.png');width: 25px;}

.btn .icn_btn_add_album{background-image: url('../img/ic/ic_add_album.png'); width: 24px; height:24px;}

.icn_new{background-image: url('../img/ic/ic_new.png');width: 23px; height:11px; margin-right: 15px;}

.icn_btn_exchange{background-image: url('../img/ic/ic_btn_exchange.png');}
.icn_btn_none{background-image: url('../img/ic/ic_btn_none.png');}
.icn_btn_bitcoin{background-image: url('../img/ic/ic_btn_bitcoin.png'); margin-right: 3px;    margin-left:3px}

.icn_alert{background-image: url('../img/ic/ic_alert.png');}

.icn_copy{background-image: url('../img/ic/ic_copy.png'); width: 36px; height: 36px; vertical-align: middle;}


.icn_menm_info{ background-image: url('../img/ic/ic_mem_info.png');}
.icn_menm_record{background-image: url('../img/ic/ic_mem_record.png');}
.icn_menm_music{background-image: url('../img/ic/ic_mem_music.png');}
.icn_menm_message{background-image: url('../img/ic/ic_mem_message.png');}
.icn_menm_activity{background-image: url('../img/ic/ic_mem_activity.png');}
.icn_menm_fansclub{background-image: url('../img/ic/ic_mem_fans-club.png');}
.icn_edit{background-image: url('../img/ic/ic_edit.png');}
.icn_blacklist{background-image: url('../img/ic/ic_blacklist.png'); }



.goods_block .btn-main{display: inline-flex; align-items: center;}


.badge-num{
  background-color:#ff685d; 
  color: #fff; 
  border-radius: 10px; 
  font-size: 0.75rem; 
  position: absolute;
  margin-left: -16px;
  margin-top: -7px;
  white-space:nowrap;
  height: 20px;
  line-height: 20px;
  padding: 0 6px ;
}
.mobile_fake-show .badge-num{background-color:#fff;   color: #ff685d; margin:0; right:40px; }


@media (max-width:767px) {
  .new-mark{left:auto; right:   5px; font-size: 0.75rem;  padding:  0px 7px 2px 7px;}
  .icn{ width: 24px; height: 24px;}
  .icn-16{width: 16px; height: 16px; }   
  .icn-xs{ height: 12px; width: 12px; }

.icn_cart_check {    width: 30px;}
  .btn-main .icn-20{ width: 20px; height: 20px;}
.icn_btn_cart.icn_cart_check{ width: 25px; }
.normal_block .more a:after{ margin-top: -2px; }

}

/* htmleditor 編輯器重置 */
.htmleditor{font-size: 0.875rem;}
.htmleditor h1{color:#466063; font-size: 1.125rem;}
.htmleditor h2{color:#466063; font-size: 1.125rem;font-weight: bold;}


.htmleditor .editor_img_right{float: right; margin-left: 44px; margin-bottom: 20px; width: 45%; margin-top: 7px;}
.htmleditor .editor_img_left{float: left; margin-right: 60px;margin-bottom: 20px;}
.htmleditor .editor_img_right.w56{width: 56%;}

.aboutus_block p{ line-height: 1.85; }
.aboutus_block2{  font-size: 0.875rem; }
.aboutus_block2{ line-height: 2.28; }

.aboutus_block{width: calc(56% - 3%); margin-right: 3%;}
.aboutus_block2{width: calc(44% - 3%); margin-right: 3%;}

.htmleditor img{max-width:100% ;}

#page-aboutus .inner-main-box > .htmleditor{ margin-top: 70px;}
#page-aboutus .inner-main-box > .htmleditor:first-of-type{ margin-top: 0px;}


@media (max-width:767px){
     .htmleditor .editor_img_right, .htmleditor .editor_img_left{display:block; float: none; margin:0 auto 20px auto;}
     .aboutus_block, .aboutus_block2, .htmleditor .editor_img_right.w56, .htmleditor .editor_img_right, .htmleditor .editor_img_left{ width: 100%; margin-right: 0;}
}

/* boostrap modal */

.modal-content{
  border: 0;
  border-radius: 0;
  background-color: #466063;
  box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}
.modal-header {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding:9px 15px 7px 15px;
    border-bottom: 0px solid #e9ecef;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: rgba(255,255,255,.68);
    text-align: center;
    min-height: 31px;
}
.modal-title{  font-size: 0.875rem; color: #ea575f; font-weight: bold;}
.modal-body{
    padding: 10px 20px 0 20px;
    color: #fff;
    font-size: 1.125rem;
}
.modal-body p{color: #fff;    font-size: 0.875rem; margin-bottom: 10px;}
.modal-footer {

    padding:0 10px 10px 10px;
    border-top: 0px solid #e9ecef;
}
.modal-footer .btn-secondary {
    color: #466063;
    background-color: #fff;
    border-width:0px ;
    border-radius: 0;
    padding: 4px 8px;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    margin-right: 5px;margin-left: 5px;
}
.modal-footer .btn-red-w{color: #ea575f;}

.modal-footer .btn-primary{ background-color: #ea575f; color: #fff;}


.modal-backdrop.show {    opacity: 0;    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.modal-body .icn_alert{width: 35px; height: 31px; float: left; margin-right: 10px; margin-bottom: 10px;}
.modal-body .icn_alert + p{margin-left: 45px;}


.modal-center-small .modal-dialog{width: 500px; max-width: 100%;}
.modal-center-small .modal-body{ text-align: center; }
.modal-center-small .icn_alert {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
}
.modal-center-small .modal-footer{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; padding-top: 10px;}
.modal-dialog-centered { margin: 0 auto; }


.share-madal .modal-content{
    padding: 11px 15px;
    background-color: rgba(255,255,255,.8);
    border: 1px solid #466063;
    color: #466063;
}
.share-madal .modal-body p{  color: #466063; }


@media (min-width: 576px){
.modal-dialog-centered {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    min-height: calc(100% - 3.5rem);
   
}
.modal-dialog-centered .modal-content{ width: 100%;}

}
@media (min-width: 992px){
.modal-lg {
    max-width: 700px;
}
}

/* //////////////////////////共用模組 ↑////////////////////////// */





/* //////////////////////////Layout ↓////////////////////////// */
.container{  width:100%;  position:relative; }

.mobile-empty-space{
  width:30px;
  height:   40px;
  display: none;
}

.inner-main-wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.inner-main-box{min-height: 400px;}
.inner-sidebar-box{}

.mobile_visible{ display: none; }

.nav-top{padding:8px 70px;  height: 40px; }
.nav-top a{color:#ea575f;}

.nav-top .lang, .nav-top .lang li{ display: inline-block; margin:0; padding:0;display: -webkit-inline-box ; display:-ms-inline-flexbox; display: inline-flex;}
.nav-top .lang{margin-right: 15px;line-height: 1;
    vertical-align: baseline;
}
.nav-top .lang li a{ color: #6b6d70; }
.nav-top .lang li a.active, .lang li a:hover {    color: #000;}
.nav-top .lang li:after {
    content: '｜';
    display: inline-block;
    font-size: 0.875rem;
    color: #6b6d70;
}
.nav-top .lang li:last-of-type:after{display: none;}



/* 二欄 sidebar在左側 :關於我們、fans club、會員專區*/
.page-sidebar-left{ }
.page-sidebar-left .inner-main-box{ width: calc(100% - 18%); margin-bottom: 0px;}
.page-sidebar-left .inner-sidebar-box{ width: 18%; padding-left:6.5%;  position: sticky;  top: 190px;    }

.page-sidebar-left#page-aboutus .inner-sidebar-box{ top: 205px; }
.page-sidebar-left#page-merchandise .inner-sidebar-box{top:153px;}
.page-sidebar-left#page-membercenter .inner-sidebar-box{ top: 196px; }


.inner-sidebar-box .side_menu_box{margin:0;  padding: 0 10px 0 0px; text-align: left;}
.inner-sidebar-box .side_menu_box li{padding:0; margin:0; list-style-type: none;}
.inner-sidebar-box .side_menu_box a{display: block; color: #000000;  font-size: 1.125rem;  margin-bottom: 46px;}
.inner-sidebar-box .side_menu_box a:hover, .inner-sidebar-box .side_menu_box a:focus, .inner-sidebar-box .side_menu_box a.active{color:#466063}

/* 二欄 sidebar在右側 :音樂下載、影音、最新消息*/
.page-sidebar-right{padding: 30px 40px 48px 25px;   }
.page-sidebar-right .inner-main-box{
  -webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;
  flex-direction: row;
 padding-right: 15px;
 width: calc(100% - 28%);

}
.page-sidebar-right .inner-sidebar-box{width: 28%; }


.inner-sidebar-box .title{display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between; padding: 15px 0px 15px 0px; font-size: 1.125rem; line-height: 1; }
.inner-sidebar-box .title span{ font-size: 1.125rem; color: #231815;  }
.inner-sidebar-box .title .more{line-height: 0; }
.song-list_block .title .more a:after{margin-top: -3px;}

/* 二欄 首頁 */
#page-home{background-color: #fff;}
#page-home .inner-main-box{ width: calc(100% - 22%); }
#page-home .inner-sidebar-box{width: 22%;}

/* 關於我們 */
#page-aboutus .inner-main-box{  padding: 0 33px 0 0; }

/* 註冊頁 */
#page-register{}
#page-register .inner-main-box{width: 100%; padding:85px 21.5% 90px 14.6%}



/* fans club */
#page-fansclub .inner-main-box{padding:125px 170px 80px 170px;width: 100%;}

/* 藝人品牌 */
#page-artist.page-sidebar-left{   padding-top:77px;  margin-bottom: 40px;}
#page-artist.page-sidebar-left .inner-sidebar-box { width: 21.58%;}
#page-artist.page-sidebar-left .inner-main-box {    padding: 0 100px 0 30px;    width: calc(100% - 19.58%);}






#page-artist.page-sidebar-left .inner-sidebar-box, 
#page-merchandise .inner-sidebar-box{padding-left: 26px;}

/* 留言板 */

#commentboad{padding-top: 0;}
#page-commentboad{padding:0px 30px 30px 30px;}
#page-commentboad .inner-main-box{width: 100%;}

#commentboad .nav-top{padding-left: 30px; padding-right: 30px;}


/* 音樂下載 */
#page-download{padding-right: 0;    padding-left: 25px;    padding-top: 30px;}
#page-download .inner-main-box{padding-right: 30px;    padding-left: 0px;    width: calc(100% - 420px); }
#page-download .inner-sidebar-box{     width: 420px; padding-top: 48px; }

/* 實體周邊  */
#page-merchandise{padding:40px 0;}
#page-merchandise .inner-sidebar-box {  width: 21.58%;}
#page-merchandise .inner-main-box {    padding: 0 100px 0 30px;    width: calc(100% - 19.58%);
}



/* 影音  */

#page-artist.page-sidebar-right .video-inner{
  padding-right: 15px;
    padding-left: 0px;
    width: calc(100% - 30%);
    margin-right: 40px;
  }
#page-artist.page-sidebar-right .mv_block{
    width: 30%;
    padding-left: 0px;
  }


/* 最新消息 */
#page-news.page-sidebar-right .inner-main-box,
#page-artist .news-inner{padding-right: 30px;}

#page-news.page-sidebar-right .activity-inner{padding-right: 15px;}


/* 購物車  */
#page-shopping-cart{}
#page-shopping-cart .inner-main-box{width:1170px; max-width: 100%; margin-right: auto; margin-left: auto; padding-top: 70px;}


/* 會員專區  */
#page-membercenter{padding-top: 57px;}
#page-membercenter .inner-sidebar-box{    padding-left: 3.65%; width: 24.2%;}
#page-membercenter.page-sidebar-left .inner-main-box .mem_tb_block{margin-left: 0; width: auto; margin-right: 28.5%;}
#page-membercenter.page-sidebar-left .inner-main-box .accordion_block{margin-left: 0; width: auto; margin-right: 22%;}

/* 聊天室  */
#page-chatroom{}

/* 聯絡我們  */
#page-contactus .inner-main-box{width:1286px; max-width: 100%; margin-right: auto; margin-left: auto; }


/* 交換區  */
#page-exchange{}

/* 聊天室  */
#page-chatroom{width:1164px; max-width: 100%; margin-right: auto; margin-left: auto; padding:42px;}


#mainNavbar .right_block li.mobile_fake-show{display: none;}
#mainNavbar .right_block li.dropdown-right-box.mobile_fake-show{ display: inline-block; }

.min-h400{min-height: 400px;}


/* 欄位標題 文字靠左 */
#page-membercenter .form-group label,
#page-shopping-cart .form-group label,
#page-register  .form-group label{
text-align: left!important;
}





@media (min-width: 1200px){.container {    max-width:100%;}} /* boostrap */

@media (max-width: 1279px){
.mobile-empty-space{ display: inline-block; }

#page-artist.page-sidebar-right .inner-main-box h1{margin-left: 0;}

#page-home .inner-main-box, #page-home .inner-sidebar-box{width: 100%;}

.page-sidebar-right .inner-sidebar-box{padding-top: 20px; margin-right: 20px;}




 .inner-main-wrapper{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.page-sidebar-left, .page-sidebar-right{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}


#page-aboutus .inner-main-box,
#page-contactus  .inner-main-box,
#page-chatroom,
#page-fansclub .inner-main-box, 
#page-news .inner-main-box, 
#page-artist.page-sidebar-left .inner-main-box,
#page-artist.page-sidebar-right .inner-main-box,
#page-download .inner-main-box, 
#page-video .inner-main-box, 
#page-shopping-cart .inner-main-box{ width: 100%; padding: 20px; }

#page-commentboad{ padding:0 20px;}

#commentboad .nav-top{padding-left: 20px; padding-right: 20px;}

#page-news.page-sidebar-right{padding-right: 0; padding-left: 0;}



#mainNavbar .right_block li.dropdown-right-box.mobile_fake-show{ display: none; }



#page-artist, #page-membercenter{ padding: 0px;width: 100%;}
#page-register .inner-main-box{padding:80px 20px 80px 20px;}
#page-download{padding-right: 0px; padding-left:0;}
#page-artist.page-sidebar-left{padding-top: 68px;}

#page-video .inner-main-box, #page-download .inner-main-box{padding-top: 0px;}
#page-download .inner-sidebar-box{padding-top: 28px;}

#page-artist.page-sidebar-left .inner-main-box{ width: calc(100% - 24% -26px); padding-top: 0; }

#page-membercenter .inner-main-box{width: 100%; padding: 20px; padding-left: 0;}
#page-membercenter.page-sidebar-left .inner-main-box .mem_tb_block{margin-right:0;}

#page-membercenter .inner-sidebar-box{padding-top: 20px;}
#page-aboutus .inner-main-box{padding-top: 0; padding-right: 33px;}

}
@media (max-width:1279px){  
#page-home .mobile_visible{ display: block; }
#page-home .mobile_hidden{ display: none; }


#page-artist.page-sidebar-right{padding-top: 0;}
}

 @media (max-width:1023px){
.dropdown.dropdown-right-box{ display: none; }


 #mainNavbar .right_block li.mobile_fake-show{display: block;} 
  .mobile_visible{ display: block; }
.mobile_hidden{ display: none; }

 .page-sidebar-left, .page-sidebar-right{display: block;}
   .page-sidebar-left, .page-sidebar-right{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.page-sidebar-left .inner-sidebar-box, .page-sidebar-right .inner-sidebar-box{display: none;}
.page-sidebar-left .inner-main-box, #page-news .inner-main-box{ width: 100%; padding: 20px; }

#page-news.page-sidebar-right{padding: 0;}

#page-membercenter .inner-main-box{padding-left: 20px;}

#page-merchandise .inner-sidebar-box{ display: block; }

.page-sidebar-right{padding:0}
#page-merchandise{padding-top: 20px;}
#page-merchandise{display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}
#page-merchandise .inner-sidebar-box, #page-merchandise .inner-main-box{ width: 100%;}

#page-merchandise .inner-main-box{padding: 0 30px 0 30px;}
#page-news .inner-main-box{margin-right: 0;}
#page-video {
    padding:0;
}

}
@media (max-width:767px){
  .separate_flex{display: block; }
  .page-sidebar-left .inner-main-box,  
  #page-aboutus .inner-main-box,
  #page-contactus  .inner-main-box,
  #page-chatroom,
  #page-fansclub .inner-main-box, 
  #page-register .inner-main-box, 
  #page-news, 
  #page-commentboad,
  #page-news .inner-main-box,
  #page-artist.page-sidebar-left .inner-main-box,
  #page-artist.page-sidebar-right .inner-main-box, 
  #page-download  .inner-main-box,
   #page-video  .inner-main-box, #page-merchandise .inner-main-box,
   #page-shopping-cart .inner-main-box,  #page-membercenter .inner-main-box, #page-merchandise .inner-main-box{ padding:0 10px; width: 100%; }
   


   #page-download, #page-video, #page-merchandise, #page-membercenter{padding: 0;}

   .min-h400{min-height: auto;}

#page-register,
#page-download,
#page-video,
#page-contactu,
#page-shopping-cart, 
#page-merchandise,
#page-artist.page-sidebar-right,
#page-artist.page-sidebar-left,
#page-news,
#page-chatroom,
#page-contactus{padding-top: 20px!important; padding-bottom: 20px!important;}
#page-commentboad{padding-bottom: 20px;}

#page-chatroom{padding-bottom: 20px;}
#commentboad .nav-top{padding-left: 10px; padding-right: 10px;}
#page-merchandise .inner-sidebar-box{ display: block; padding-right: 26px;}
#page-merchandise{-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}

#page-membercenter .inner-main-box{padding-top: 20px; padding-bottom: 20px;}

}
/* //////////////////////////Layout ↑////////////////////////// */



/* //////////////////////////header detail↓////////////////////////// */

.navbar{background-color: #fff; height: 113px; padding:0px 17px 0 40px; }
.navbar-brand{
  width: 200px; height: 51px;
  background: url('../img/brand-logo.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: 0;
  z-index: 2;
    position: relative;
}
.navbar-toggler{ background-color: #ccc; }
.navbar-toggler , .mobile-nav-show{display:none; padding: 0;}


#mainNavbar{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.left_block{ }
.left_block ul, .left_block li{margin:0px; padding: 0; list-style-type:none ;}
.right_block{ text-align: right; }



.modal-money  .modal-content {
    background-color: rgba(207,208,208,.95);
    line-height: 1;
}
.modal-money .modal-body{padding: 15px 22px;}

.modal-money .modal-body ul{ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding:15px 20px 10px 20px;
  margin:  0;
}
.modal-money .modal-body li{ 
  flex: 1; 
  margin-right: 30px;
  text-align: center;  
  display: inline-flex; 
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
}
.modal-money .modal-body li:last-of-type{ margin-right: 0px; }
.modal-money .modal-body li a{ 
  color: #4c4c4c; 
  margin-bottom: 10px;  
  font-size: 0.875rem; 
  flex:0 0 50%; 
  padding:10px 0;
}
.modal-money .modal-body li a.active{color: #ea575f; }
.modal-money .modal-body li a:hover, #mainNavbar .dropdown-money-box .dropdown-menu li a:focus, #mainNavbar .dropdown-money-box .dropdown-menu li a.active{ color: #ea575f; }

.mobile_fake-show .icn_nav-money{position: relative;}
.mobile_fake-show .arrow{

  display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;

    margin-bottom: -2px;
  }

@media (min-width: 1024px){

#mainNavbar{  position: absolute;  width: calc(100% - 240px);  left: 240px; margin-top: 8px; top: 38px; }
.navbar-brand{margin-top: 11px;}
#mainNavbar .navbar-nav ul, #mainNavbar .navbar-nav li ,#mainNavbar .right_block ul, #mainNavbar .right_block li{  
  margin:0; padding:0; display: inline-block;  position: relative;
}
#mainNavbar .right_block li.mobile-nav-show{display: none;}

#mainNavbar .right_block ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: ; align-content: ; }


#mainNavbar .navbar-nav li{margin-right: 0px;}
#mainNavbar .navbar-nav li:last-of-type{margin-right: 0;}

#mainNavbar .link-other{line-height: 2;}
#mainNavbar .right_block li{margin-left: 0;}

.left_block{font-size: 0;margin:0px; padding: 0; list-style-type:none ;}
.left_block li{ margin:0px; padding: 0; list-style-type:none ; font-size: 1.125rem; }
.left_block li > a{padding:0px 0; font-size: 1.125rem; color: #231815; line-height: 1.5; position: relative;}
.left_block li > a:hover{color:#ea575f;}
.left_block li > a.active{color:#231815; background-color: transparent;}
.left_block li > a.active:before{ 
  content: ''; display: block; 
  position: absolute; bottom: -4px; left: 0; right: 0; 
  border-bottom:2px solid #ea575f;
  border-radius: 2px;
}

/* 將Bootstrap下拉選單變成hover滑入展開 */
.dropdown:hover .dropdown-menu{
    display: block; 
 }




.dropdown-toggle:after {    display: none;}
.dropdown-menu {
      position: absolute!important;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
/*      width: 150px;*/
      min-width: 150px;
      
      margin: 0;

      text-align: left;
      list-style: none;
      background-color: rgba(207,208,208,.7);
      background-clip: padding-box;
      border: 1px solid rgba(242,242,242,0.7);
      border-radius: 0.0001rem;
      padding-top: 0;
      padding-bottom: 0;
      padding:15px 22px;   
    }
.left_block li > a{margin-bottom: 11px;}   
.dropdown-menu .dropdown-item{ padding: 0; margin-bottom: 14px;  text-align: center;}    
.dropdown-menu .dropdown-item:last-of-type{margin-bottom: 0;}
.lang .dropdown-menu{top:auto; left:auto;}    
.navbar-nav .dropdown-menu, .lang .dropdown-menu {left: 50%; transform: translate(-50%, 0%);} /* 與上一個項目置中對齊 */
.right_block .dropdown-menu{top:calc(100% - 10px)}

.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover , .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active{
    color: #ea575f;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
.left_block li a.dropdown-item.active{border: 0; background-color: transparent; color:#ea575f ;}

.left_block {
  margin-left: 80px;
  width: 100%;
  margin-right: calc(100% * 0.22 + 240px * 0.22 + 20px);
}
#mainNavbar .navbar-nav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.right_block{ 
  position: absolute;
  width: calc(100% * 0.22 + 240px * 0.22);
  right: 0;
 top:-46px;
font-size: 1.125rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; 
  -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
  -webkit-box-pack: 
  justify; 
      -ms-flex-pack: 
  justify; 
          justify-content: 
  space-between; 

  padding: 27px 17px 10px 20px;
 height: 113px;
 border-left: 1px solid #E6E6E6;
}

#mainNavbar .right_block li  .icn{ width: 28px; height: 28px;}

#mainNavbar .right_block li  .icn_del{width:12px; height:12px;}
    

    .link-other{width:100%;text-align: right;margin-bottom: 4px;  }
    .link-other, .link-other li{margin:0px; padding: 0; list-style-type:none ;}
    
    .hello{ color: #231815; width: calc(100% - 39.5% - 60px); text-align: left; overflow:hidden;padding-top: 0px;
white-space: nowrap;
text-overflow: ellipsis;}
    .lang{ width: 60px; text-align: center; padding-top: 0px;}
.lang.dropdown:after, .lang.dropdown:before{
 content: '';
 display: inline-block;
 width: 1px;
 height: 17px;
     margin-bottom: -1px;
 background-color: #6b6d70;
}
.lang.dropdown:before{margin-right: 5px;}

/*    .lang{margin:0px; padding: 0; list-style-type:none ; flex:1 1  auto; text-align: center;vertical-align: super; line-height: 2;}*/
    .lang li{margin: 0;padding: 0; }

    .search_box{ width: 39.5%; }


    .link-other a{ font-size: 0; }
    .link-other .dropdown-menu a{font-size:0.875rem;}
    .link-other a{color: #000;}
    .link-other a.btn, .link-other a.btn:hover{color:#fff;}
    .link-other a:hover{color: #ea575f;}
        
        #mainNavbar .right_block .lang-menu{ display: inline-block; }
        .lang .dropdown-menu{ min-width: 122px; width: auto; padding-right: 18px; padding-left: 18px; left: 50%;text-align: center; }
        .lang-menu li:after{ content: '｜'; display: inline-block; color: #6B6D70; }
        .lang-menu li:last-of-type:after{display: none;}
        .lang-menu li a{color:#231815;}
        .lang-menu li a.active, .lang li a:hover{color:#ea575f;}


/* search_box↓ */
.search_box {position: relative;display:inline-flex; align-items:flex-start; justify-content: space-between;}
.search_box form{margin:0; padding:0;display:inline-flex; align-items:flex-start;justify-content: space-between;}

.search_box input, .search_box button{ display: inline-block; height: 99%;  width: 100%;  border: 0;  font-size: 0.875rem; font-family: 'Roboto Condensed', sans-serif,"å¾®è»Ÿæ­£é»‘é«”", Microsoft JhengHei;}
.search_box input{border-radius: 0px; height: 26px; border:1px solid #c4c4c4;font-size: 0.875rem; padding-right:48px}
.search_box input:focus{ box-shadow: 0 0 4px rgba(0, 0,0, .5) }
.search_box button{width: 24px;height: 24px; position: absolute; right: 3px;   top: 1px;    background-color: transparent;  line-height: 1;   border-left:1px solid #c4c4c4;}
.search_box button:hover{ opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; cursor: pointer; } 
.search_box input:valid ~ .search-close { /*有數值 */ border: 0; visibility: visible; margin-right: 24px; background: url('../img/ic/ic_search_close.png') 50% 50% no-repeat; background-size: 16px;}
.search_box input ~ .search-close {  visibility: hidden; margin-right: 20px; right:0; }                

.search_box img{ height: 24px; margin-right: -2px; }
/* search_box↑ */

}

@media (min-width: 1680px){ 
  #mainNavbar .navbar-nav li {
    margin-right: 38px;
}
}

@media (max-width: 1440px){ 
  #mainNavbar .navbar-nav li{margin-right: 10px;} 
  .left_block {   margin-left: 15px;}
  .navbar{padding-left: 30px;}
}


@media  (max-width: 1279px) and (min-width: 1024px){ 

  body{padding-top: 227px; }
  
.navbar-brand {
    margin-top: 34px; margin-left: 2px;
}
  .navbar{ height: 227px; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; padding: 0px 20px 0 60px;}
  #mainNavbar {
    position: absolute;
    width:100%;
    left:0;
    right: 0;
    bottom: 0;
    top: 0;
    margin-top: 0;
  }
  .right_block {
    width: 42%;
    right: 0;
    top: 0;
    height: 113px;
    padding: 28px 17px 10px 20px;
  }
  .left_block{ 
    border-top: 1px solid #E6E6E6;
    position: relative;
    top: 56px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 114px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 0 60px 0 60px;
  }
  .left_block ul{  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -ms-flex-direction: row;  flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%;}
   #mainNavbar .navbar-nav ul{display: -webkit-box;display: -ms-flexbox;display: flex;margin-top: 22px;}

.page-sidebar-left .inner-sidebar-box, #page-merchandise .inner-sidebar-box , #page-artist .inner-sidebar-box{    width: 24%;}
.page-sidebar-right .inner-sidebar-box, #page-video .inner-sidebar-box{width: 40%;}
#page-download .inner-sidebar-box{ width: 25%; }

.left_block li a{margin-bottom:16px }
.left_block li a.active:before{bottom: -16px;}
.dropdown-menu{top:100%;}

.hello{ padding-top: 0; }
.lang{ padding-top: 1px; }
.search_box{margin-top: -1px;}

.page-sidebar-left .inner-sidebar-box{ top: 295px;}
.page-sidebar-left#page-aboutus .inner-sidebar-box{ top: 319px;}
.page-sidebar-left#page-merchandise .inner-sidebar-box{top:267px}
.page-sidebar-left#page-membercenter .inner-sidebar-box{top:253px}
}



@media (max-width: 1023px){ 
  .navbar{background-color: #fff; height: 60px; padding:0px 15px 0 15px; }
  .navbar-header{display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    .navbar-brand{  width: 101px; height: 26px; padding: 0;   margin-right: 0; /*margin-left: 20px;*/}
    .navbar-toggler{ display: inline-block;  margin-right: 10px}
    .mobile-nav-show{ 
      margin:0px; padding: 0; 
      list-style-type:none ;
      display: inline-block; 
      -webkit-box-flex: 1; 
          -ms-flex: 1 1 auto; 
              flex: 1 1 auto; 
      display: -webkit-inline-box; 
      display: -ms-inline-flexbox; 
      display: inline-flex; 
      -webkit-box-pack: end; 
          -ms-flex-pack: end; 
              justify-content: flex-end;
    }

    .mobile-nav-hidden{ display: none; }

    .mobile-nav-show li{ margin:0px; padding: 0; display: inline-block; margin-left: 16px; }
    .mobile-nav-show li .icn{ width: 28px; height: 28px;}

.navbar-header li .icn{ background-color: #e6e6e6; border-radius: 28px; background-size: 70%; background-position: 50% 50%;}

.link-other, .link-other li{margin:0px; padding: 0; list-style-type:none ;}

.dropdown.show .dropdown-toggle:after {
    border-top: 0 solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
}

.link-other .dropdown-toggle:after{ display: none; }


#mainNavbar{
  display: none;
/*  width: 75%; 
  position: fixed; top: 0; left: 0; bottom: 0; */
  box-shadow: 0 0 10px rgba(0,0,0,.6); 
  background-color: #fff; z-index: 2;
  /*margin-left: -75%;*/
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
              -ms-grid-row-align: stretch;
          align-items: stretch;
}

.left_block{width: 50%;padding-bottom: 40px;}
.right_block{width: 50%; background-color:#ea575f;}

.left_block{padding-top: 10px; overflow-y: auto;}
.left_block ul li{ text-align: center; }
.left_block ul li a{ color: #2b2b2b; font-size: 0.875rem; padding:12px 0; display: block; white-space: inherit;}
.left_block ul li a:focus, .left_block ul li a.active, .left_block ul li a:active{ color: #ea575f; }

.left_block .dropdown-menu {
    text-align: center;
   min-width: 100%;
   border-radius: 0;
   padding: 0;
   margin: 0;
   background-color: rgba(0,0,0,.1);
   border: 0;
}
.left_block .dropdown-menu a.dropdown-item:hover, 
.left_block .dropdown-menu a.dropdown-item:focus, 
.left_block .dropdown-menu a.dropdown-item:active, 
.left_block .dropdown-menu a.dropdown-item.active{background-color: transparent;color: #ea575f; }

.right_block, .right_block a{ color: #fff; text-align: left;}



.right_block{padding: 20px 20px;}
.right_block a{padding:12px 0;}
.right_block .hello{padding-bottom:12px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;}

.right_block{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow-y: auto;  font-size: 0.875rem;}
.right_block .link-othe{}
.right_block .link-other li a{ display: block; }
.right_block .link-other .icn{float: right; width: 20px; height: 20px;}
.right_block .lang{ text-align: center;list-style-type:none ; }
.right_block .lang .dropdown-toggle{ font-size: 0; }
#mainNavbar .right_block li.mobile-nav-show{display: block;}
.right_block .lang  .dropdown-menu{ 
  display: block;
  position: static;
    float: none;
    min-width: auto;
    padding:  0;
    margin:  0;
    font-size: 1.125rem;
    color: #fff;
    text-align: left;
    list-style: none;
    background-color: transparent;

    border: 0px;
    border-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.right_block .lang .lang-menu{ font-size: 0.875rem; list-style-type: none; margin:0; padding:0;display: inline-block;}

.right_block .search_box{ display: none; }

.right_block .lang li a{ display: inline-block; }
.right_block .lang li .active:after{ border-bottom:2px solid #fff; content: ''; display: block;}



.right_block .link-other .icn_nav-setup{background-image: url('../img/ic/ic_nav-setup_w.png');}
.right_block .link-other .icn_nav-user{background-image: url('../img/ic/ic_nav-user_w.png');}
.right_block .link-other .icn_nav-logout{background-image: url('../img/ic/ic_nav-logout_w.png');}
.right_block .link-other .icn_nav-regist{background-image: url('../img/ic/ic_nav-regist_w.png');}
.right_block .link-other .icn_nav-mail{background-image: url('../img/ic/ic_nav-mail_w.png');}
.right_block .link-other .icn_nav-money{background-image: url('../img/ic/ic_nav-money_w.png');}
.right_block .link-other .icn_nav-cart{background-image: url('../img/ic/ic_nav-cart_w.png');}

#mainNavbar.navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: -100%;
        width: 80%;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        
    }
    #mainNavbar.navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        right: 50%;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    #mainNavbar.navbar-collapse.collapsing, #mainNavbar.navbar-collapse.show {
        right: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .navbar-toggler{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; background-color: transparent; }
    .navbar-toggler.collapsed{ position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; }

    .mobile-menu.navbar-toggler{position: fixed; right: 0; left: 0; bottom: 0; top: 0; background-color: transparent; width: 100%; display: none;}  
    

    .navbar-toggler .navbar-toggler-icon{position: fixed; top:0; left:   0; margin: 13px 15px; height: 24px; width: 24px; background-image: url('../img/ic/ic_nav-burgur.png'); }
    .navbar-toggler.collapsed .navbar-toggler-icon{ position: relative; margin:  0; }

}



.dropdown-money-box{ line-height: 1;}
.dropdown-right-box .dropdown-menu {
    left:  auto; right:  0;
    background-color: rgba(207,208,208,.85);
    border: 1px solid rgba(242,242,242,0.85);
    line-height: 1;
  }

#mainNavbar .dropdown-right-box .dropdown-menu ul{ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding:15px 20px 10px 20px;
  margin:  0;
}
#mainNavbar .dropdown-right-box .dropdown-menu li{  margin-right: 30px; text-align: left;flex: 1; }
#mainNavbar .dropdown-right-box .dropdown-menu li:last-of-type{ margin-right: 0px; }
#mainNavbar .dropdown-right-box .dropdown-menu li a{ display: block; color: #4c4c4c; margin-bottom: 10px;  font-size: 0.875rem; white-space: nowrap;}
#mainNavbar .dropdown-right-box .dropdown-menu li a.active{color: #ea575f; }
#mainNavbar .dropdown-right-box .dropdown-menu li a:hover, #mainNavbar .dropdown-money-box .dropdown-menu li a:focus, #mainNavbar .dropdown-money-box .dropdown-menu li a.active{ color: #ea575f; }



#mainNavbar .dropdow-member-box .dropdown-item{/*margin-bottom: 14px;0*/}

#mainNavbar .dropdow-message-box .dropdown-menu{padding:0;}
#mainNavbar .dropdow-message-box .dropdown-menu ul, #mainNavbar .dropdow-member-box .dropdown-menu ul{  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column; margin:15px; }
#mainNavbar .dropdow-message-box .dropdown-menu li{margin-right: 0px;}

.dropdow-cart-box .dropdown-menu{
  background-color: #f2f2f2;
    border: 1px solid #fff;
    box-shadow: 4px 4px 10px rgba(0,0,0,.3);
    padding:  8px 18px 2px 10px;
    width: 400px;
}
.dropdow-cart-box .btn-main{ min-width: 35px;width: 35px; padding: 0; height: 24px; line-height: 24px;     margin-left: 10px;    vertical-align: baseline;}

.dropdow-cart-box .dropdown-menu .item-row{  padding: 5px 0; font-size: 0.875rem;-webkit-box-align: start;-ms-flex-align: start;-ms-grid-row-align: flex-start;align-items: flex-start; line-height: 1.25;}

.dropdow-cart-box .dropdown-menu .item{-webkit-box-flex: 1;-ms-flex: auto;flex: auto; font-size: 0.875rem; line-height: 1.4;}
.dropdow-cart-box .dropdown-menu .item:nth-of-type(1){ width: calc(50% - 20px);  }
.dropdow-cart-box .dropdown-menu .item:nth-of-type(2){ width: calc(50% - 25px); }
.dropdow-cart-box .dropdown-menu .item:nth-of-type(3){ width: 45px; }
.dropdow-cart-box .dropdown-menu .item{color:#6b6d70;}

.cart-wrap{ border-bottom: 2px solid #cfd0d0;}
.dropdow-cart-box .dropdown-menu .cart-wrap  .item-row{border-bottom: 1px solid #cfd0d0;}
.dropdow-cart-box .dropdown-menu .cart-wrap .item-row:last-of-type{border:0}
.dropdow-cart-box .dropdown-menu .total-box .item:nth-of-type(1){ width: 30%; }
.dropdow-cart-box .dropdown-menu .total-box .item:nth-of-type(2){ width: 70%; }

.dropdow-cart-box .total-box .word-black{ line-height: 28px;  }

#mainNavbar .navbar-nav li.mobile_visible{ display: none; }


@media (min-width: 1680px){ 

.left_block {
  margin-left: 80px;
  width: 100%;
  margin-right: auto;
  display: inline-block;
}
#mainNavbar .navbar-nav ul{display: inline-block;}

}
@media (max-width: 1023px){ 

  #mainNavbar .navbar-nav li.mobile_visible{ display: block; }
}

@media (max-width: 767px){ 
  .navbar {    padding: 0px 10px 0 10px;}
    .mobile-nav-show li{ display: inline-block; margin-left: 8px;  display: none; /* 修109.1.13 影藏 */}
    .navbar-brand {  margin-left:0px;}
    .navbar-toggler {  margin-right: 0px;}
    .mobile-nav-show li .icn {    width: 24px;    height: 24px;margin-top: 4px;}

}



/* //////////////////////////header detail↑////////////////////////// */












/* //////////////////////////首頁 detail↓////////////////////////// */

#page-home .inner-main-box{min-height: auto;}

/* swiper Bannner block */
.banner-block{}

/* tab-conrol */
.tab-control{margin:10px 0px 0 10px;}
.tab-control .nav-list {    border-bottom: 3px solid #e6e6e6;padding:0 10px; margin-right: 18px;}

.tab-control .nav-list .tab-item{    margin-bottom: 0px; display: inline-block; font-size: 1.125rem;}
.tab-control .nav-list .tab-item.active{
    color: #ea575f;
    background-color: transparent;
    border:0;
    border-radius: 0;
}
.tab-control .nav-list .tab-item {    padding: 8px 20px 5px 20px;border:0; color: #231815;}



.normal_block{margin-bottom: 20px;}
.normal_block .title{ 
  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  font-size: 1.125rem; 
  color: #000;
  display: none;
  padding-right: 10px; 
  line-height: 1;
}



/* 音樂搶先聽 block */
/* 共用 */
.listen-first_box{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;   -webkit-box-pack: justify;   -ms-flex-pack: justify;   justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding:8px 0 0px 0;}
.listen-first_box .cover{width: 160px; margin: 0px 20px 0px 30px; position: relative; }
.listen-first_box .cover img{ width: 100%;}
.listen-first_box .cover-cont{  width: calc(100% - 160px - 23px - 30px);}
.listen-first_box .swiper-wrapper{width: calc(100% - 30px); margin-right: 30px;  padding-bottom: 10px;}
.listen-first_box .swiper-listen-first .swiper-slide{ width: 100%; height: auto; }

.swiper-listen-first .swiper-slide:first-of-type{margin-top: -4px;}

.listen-first_box .item-row{border-bottom:1px solid #e6e6e6; padding-bottom: 4px; padding-top: 3px;}
.listen-first_box .item-row .item{color:#828282; font-size: 0.875rem; padding: 0 5px;
  overflow : hidden;  
  text-overflow : ellipsis;
  white-space : nowrap;
}

.listen-first_box .item-row .item-right{    overflow: inherit;/* 為了要讓分享的dropmenu打開*/}


.listen-first_box .item-row .item  a.artist{color:#ea575f;}
.listen-first_box .item-row .item  a:hover.artist{ color: #000; }
.listen-first_box .item-row .item  a{color:#828282;}
.listen-first_box .item-row .item  a:hover, .listen-first_box .item-row .item.word-black a:hover{color:#ea575f;}
.listen-first_box .item-row .item.word-black, .listen-first_box .item-row .item.word-black a{color:#4c4c4c; }

.listen-first_box .item-row .item .icn{margin-right: 40px; width: 24px; height:24px}
.listen-first_box .item-row .item .icn.icn_cart{margin-right: 30px;width: 30px;}
.listen-first_box .item-row .item .icn.icn_cart.icn_cart_check{margin-right: 30px; }
.listen-first_box .item-row .item:first-of-type .icn{margin-left: 0;}



.swiper-listen-first{ height: 160px;}

/* listen_box 音樂搶先聽 */

.listen_box .item-row .item{-webkit-box-flex: 1; -ms-flex: auto; flex: auto;}
.listen_box .item-row .item:nth-of-type(1){ width:203px }
.listen_box .item-row .item:nth-of-type(2){ width:203px; }
.listen_box .item-row .item:nth-of-type(3){ width: calc(100% - 203px - 203px - 183px - 202px); }
.listen_box .item-row .item:nth-of-type(4){ width: 183px; }
.listen_box .item-row .item:nth-of-type(5){ width: 202px; }


/* MV block */

.mv_box .swiper-listen-first{  }
.mv_box .cover{width: 285px; margin: 0px 20px 0px 30px;  background-color: #d0d0d0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
.mv_box .cover:before, .item-cover:before{ padding-top: 56.25%; content: ''; display: block; } 

.mv_box .cover-cont{  width: calc(100% - 300px - 18px - 30px);}

.mv_box .item-row .item{-webkit-box-flex: 1;-ms-flex: auto;flex: auto;}
.mv_box .item-row .item:nth-of-type(1){ width:calc(100% - 183px - 74px  - 128px );}
.mv_box .item-row .item:nth-of-type(2){ width:calc(183px + 74px) }
.mv_box .item-row .item:nth-of-type(3){ width:128px; text-align: left;}

.item-cover{ display: none; }
.listen-first_box.mv_box .item-row .item .icn.icn_share{margin-right: 30px;}


.mv_box .cover .name{  
  font-size: 0.875rem; color: #fff; font-weight: bolder; 
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
}

.mv_box .cover:after , .item-cover:after{
  content: '';
  display: block;
  width: 60px; height: 60px;
  background: url('../img/ic/ic_play.png') 0 0 no-repeat;
  background-size: cover;
  position: absolute; top: 50%; left: 50%;
  margin-left: -30px; margin-top: -40px;
  cursor: pointer;
}

#swiper-mv, #swiper-video{height: 160px;}





/* 實體周邊 */
#swiper-popular{ height: 343px; }

#swiper-news, #swiper-activity{height: 195px;}
.popular_block, .news_block{margin-left: 10px;margin-top: -10px;margin-right: 10px;}
.normal_block.popular_block .title, .normal_block.news_block .title{ display: -webkit-box; display: -ms-flexbox; display: flex; }
.normal_block.popular_block .title .more, .normal_block.news_block .title .more{ display: none; }
.popular_block .swiper-listen-first .swiper-slide{-webkit-box-align: start;-ms-flex-align: start;-ms-grid-row-align: flex-start;align-items: flex-start; width:235px;}
.popular_block .swiper-listen-first .swiper-slide:first-of-type{margin-top: 0;}

.separate-block{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.separate-block #swiper-popular, .separate-block #swiper-news, .separate-block #swiper-activity{ width: calc(100% - 250px); }
.separate-block .last-more{width: 250px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;   color: #727171;   margin-bottom: 9px;}
.separate-block .last-more:hover{color:#ea575f;}

.popular_blockitem.btn{ display: none; }

.popular_block .cover-box { 
box-shadow: 0px 0 0px rgba(0,0,0,.2);
/*background-color: #dadde2; */
   position: relative;

 width: 100%;
 padding-top: 100%;

  
}


.popular_block .cover-box .hit-area{ 
  position: absolute; left: 0; top: 0; padding-top: 100%; width: 100%;
  /*background-color: #dadde2;*/
  background-position: 50% 0%; 
  background-repeat: no-repeat; 
 background-size:  auto 235px;
 background-image: url('../img/placehoder-img-popular.png');
}
.popular_block .cover-box .info{
  background-color: #fff;
  font-size: 0.875rem;
  padding:10px 5px 0px 5px;
  -webkit-box-align: end;
      -ms-flex-align: end;
              -ms-grid-row-align: flex-end;
          align-items: flex-end;
}

#swiper-popular .icn{width: 24px; height: 24px; margin-right: 40px;}
#swiper-popular .icn.icn_cart{ width: 30px; }
.popular_block .cover-box .info .item-row{ display: block; }
.popular_block .item-row .item{color: #828282;}
.popular_block .item-row .item.word-black{color: #4c4c4c;}
.popular_block .item-row .item:nth-of-type(3){margin-top: 0;}

.popular_block .item-row .item{ color: #828282;text-align: left;    font-size: 0.875rem; text-align: left; margin-top: 5px;}
.popular_block .item-row .btn{ 
  border-radius: 10px;
  background-color: #fff;
  padding: 8px 15px;
  font-size: 1.125rem;
  margin-bottom: 20px;
  color: #818181;
  
}
.popular_block .item-row .btn .icn{width: 28px; height: 28px; vertical-align: bottom;}
.popular_block  .separate-block{margin-left: 6px;}

.popular_block .item-row .price{   
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

width: 235px;  
}

/* 最新消息 */
.news_block.popular_block .title, .normal_block.popular_block .title{ 
   display: -webkit-box; 
   display: -ms-flexbox; 
   display: flex; 
    border-bottom: 3px solid #e6e6e6;
    padding: 5px 30px;
    margin-bottom: 10px;
}
.news_block .cover-box{ padding-top: 56.25%;     box-shadow: 0px 0 0px rgba(0,0,0,.2);

 }

.news_block .cover-box .hit-area{padding-top: 56.25%; background-image: url('../img/news-placeholder.jpg'); background-size: cover;}

.news_block .cover-box .info{ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;   
  box-shadow:inset 0px 0 0px rgba(0,0,0,.2); 
  background-color: transparent; 
  position:absolute;
  top: 100%;
  bottom: auto;
  padding:0 0px 0px;
}
.news_block .cover-box{ background-size: cover; }
/*.news_block .item-row .item .icn{ margin-bottom: -1px; }*/
.news_block .item-row .item .icn_item_date{ margin-bottom: 0px;vertical-align: middle; /*margin-top: -1px;*/}
.news_block .separate-block .last-more{border:0}
.news_block .item-row .item span{display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; line-height: 1;}
.news_block .item-row .item .artist{margin-left: 10px;display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; line-height: 1;}
.news_block .swiper-listen-first .swiper-slide{width: 235px;}

#page-home .inner-sidebar-box .title span{font-size: 1.125rem;}

#page-home .inner-sidebar-box .title span.more a{line-height: 16px; display: inline-flex;}

#swiper-activity .cover-box{      box-shadow: 0px 0 0px rgba(0,0,0,.2);
 
 }

#swiper-activity .cover-box .hit-area{padding-top: 56.25%;background-image: url('../img/activity-placeholder.jpg')}

/* 我要參加 */
.join_block{
  background:#ea575f url(../img/bg_pattern_activity_01.png) 0 0 no-repeat;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
.join_block .mesk{ /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(234,87,95,1) 0%,rgba(234,87,95,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(234,87,95,1) 0%,rgba(234,87,95,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea575f', endColorstr='#00ea575f',GradientType=1 ); /* IE6-9 */
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 17px 20px 20px;
}
.join_block .wording{
  width: calc(100% - 120px);
  font-size: 1.125rem; 
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0,0,0,.4);
  text-align: left;
  white-space: pre-line;
}
.join_block .wording a{ color: #fff; }
/*.join_block .wording a:hover{text-shadow: 0px 0px 0px #000;}*/

.join_block .ellipsis-effect{line-height: 1.5;}
.join_block .ellipsis-effect:after{ background:none; }
.join_block .ellipsis-effect.rows2, .join_block  .ellipsis-effect.rows2:before {
    height: 54px;
}

.join_block button{ 
   
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e98b9b+0,e71f22+100 */
  background: rgb(233,139,155); /* Old browsers */ /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(233,139,155,1) 0%,rgba(231,31,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(233,139,155,1) 0%,rgba(231,31,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e98b9b', endColorstr='#e71f22',GradientType=0 ); /* IE6-9 */

  border: 1px solid #ffbbbb;
  border-radius: 40px;
  padding:7px 17px 7px 20px ;
  color: #fff;
  font-size: 1.125rem;
  font-weight: bolder;

  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
 cursor: pointer;
  outline:none;
}
.join_block button:hover, .join_block button:focus{ box-shadow: 0px 0px 0px rgba(0,0,0,0.5); margin-bottom: -2px; cursor: pointer;}


/* 演唱會倒數 */
.countdown_block{

  padding: 18px 20px;
  color: #878787;
  font-size: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.countdown_block .name{color: #6b6d70;  font-size: 1.125rem; }

.countdown_block .counter{font-size: 0.875rem; width: 100%; padding-top: 6px;}
.countdown_block .counter span{color: #ea575f; font-size: 1.55vw; padding:0 0.35em; line-height: 1;}


/* 上線在聊天室 */
.chatroom_block{
  background-color: #e9585f;
  border-bottom:2px solid #e6e6e6; 
  border-top:2px solid #e6e6e6;
  padding: 6px 17px  6px 20px; 
  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;
   -ms-flex-align: center; align-items: center;
 }
.chatroom_block .cover{
  border: 1px solid #878787;
  width: 88px;
  height: 88px;

  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.chatroom_block .wording{color: #fff; font-size: 1.125rem;  padding:10px; padding-right: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.chatroom_block .wording a{color: #fff; }

/* 左側基本套用 */
.side_block{ color: #231815; }
.side_block .title{display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between; padding: 15px 17px 15px 20px; font-size: 1.125rem; }

/* 影音放送 */
.delivery_block{}


/* 活動訊息 */
.activity_block{}
.activity_block .item-row{  background-color: #f2f2f2; font-size: 0.875rem; margin: 0 0px 13px 0px; padding:12px 12px 9px 12px; text-align: left; display: block; width: 100%;}
.activity_block .item-row .item{ text-align: left;  font-size: 0.875rem; margin-bottom: 0px; color: #828282;}
.activity_block .item-row .item .icn{ margin-bottom: -1px; }
.activity_block .item-row .item .icn_item_date{margin-bottom: 0px; vertical-align: middle;}
.activity_block .item-row .item .artist {    margin-left: 10px; display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; line-height: 1;}

.activity_block .item-row .item span{display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center;  line-height: 1;}



.activity_block .item-row .item:first-of-type{margin-top:0;}
.activity_block .item-row .item{margin-top:5px;}


.activity_block .ellipsis-effect:after{ /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,242,242,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(242,242,242,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 */
}


/* GIF輪播 */
.ad-swiper-block{ width: 100%; }
.ad-swiper-block .swiper-container-horizontal>.swiper-pagination-bullets{padding-left: 20px;}


@media (max-width:1439px){

.listen_box .item-row .item:nth-of-type(1){ width:20% }
.listen_box .item-row .item:nth-of-type(2){ width:20%; }
.listen_box .item-row .item:nth-of-type(3){ width: calc(100% - 20% - 20% - 110px - 202px); }
.listen_box .item-row .item:nth-of-type(4){ width: 110px; }
.listen_box .item-row .item:nth-of-type(5){ width: 202px; }

.mv_box .item-row .item:nth-of-type(1){ width:calc(100% - 110px - 74px - 128px );}
.mv_box .item-row .item:nth-of-type(2){ width:calc(110px + 74px) }
.mv_box .item-row .item:nth-of-type(3){ width:128px;}

}


@media (max-width:1279px){
 .mv_box .cover:after, .item-cover:after{  width: 60px; height: 60px;}

    .tab-control .nav-tabs{padding:0 0px;}
    .news_block.popular_block .title{padding: 5px 40px;}
    


    /* GIF輪播 */
    .ad-swiper-block{ width: 100%; margin:20px auto;}

    .countdown_block .counter span {    font-size: 2.55vw;}
   .countdown_block { border-right:0;}



   #page-home .mobile_visible.separate_flex{  
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -ms-grid-column-align: stretch; 
  justify-items: stretch; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}
.separate_flex .join_block, .separate_flex .countdown_block{-webkit-box-flex:  1;-ms-flex:  1;flex:  1; }
.separate_flex .countdown_block{border-bottom:0;}
.separate_flex .chatroom_block{width: 100%;}

.side_block.activity_block .title{padding-left: 17px; padding-top: 0;}
.side_block.activity_block .item-row{margin-left:17px; margin-right: 17px; width: calc(100% - 17px - 17px);}


/* 倒數 */
.countdown_block .name{overflow:hidden;white-space: nowrap;text-overflow: ellipsis; width: calc(100% - 170px);}
.countdown_block div:nth-of-type(2){overflow:hidden;white-space: nowrap;text-overflow: ellipsis; width: 170px; text-align: right; line-height: 27px;}

}

@media (max-width:1023px){

.listen-first_box .item-row .item .icn,
.listen-first_box .item-row .item .icn.icn_cart,
#swiper-popular .icn{margin-right: 16px; }



.listen_box .item-row .item:nth-of-type(1){ width:20% }
.listen_box .item-row .item:nth-of-type(2){ width:20%; }
.listen_box .item-row .item:nth-of-type(3){ width: calc(100% - 20% - 20% - 110px - 140px); }
.listen_box .item-row .item:nth-of-type(4){ width: 110px; }
.listen_box .item-row .item:nth-of-type(5){ width: 140px; }

.mv_box .item-row .item:nth-of-type(1){ width:calc(100% - 110px - 74px - 66px );}
.mv_box .item-row .item:nth-of-type(2){ width:calc(110px + 74px) }
.mv_box .item-row .item:nth-of-type(3){ width:66px;}


#page-merchandise .mobile_hidden{ display: none; }

}
@media (max-width:767px){



.tab-control{margin-top: 30px;}
.side_block.activity_block .title{padding-left: 10px;}
.side_block.activity_block .item-row{margin-left:10px; margin-right: 10px; width: calc(100% - 10px - 10px);}

    /* tab 在767下 統一展開 */
.countdown_block, .join_block .mesk{ padding: 10px; height: 100px; }

.separate_flex .chatroom_block{padding-top:6px; padding-bottom: 6px;}

   #page-home .mobile_visible.separate_flex{ display: block; }
   .popular_block  .separate-block{margin-left: 0px;}

   .news_block .separate-block .swiper-slide:first-of-type{margin-left: -4px;}
  .join_block, .countdown_block, .chatroom_block{width: 100%;}

    .news_block.popular_block .title{padding: 5px 0px;}

    .tab-control .nav-list{display: none;}

    .jstab{ display: block!important; }

    .normal_block {margin:0 0px 20px 0px;}
    .normal_block .title{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; margin-bottom: 20px; }
.listen-first_box{padding-top: 0;}
.listen_box{margin-bottom: 30px;}

    .listen-first_box .cover { margin-left: 0px; margin-right: 10px;width: 120px;}
    .listen-first_box .cover-cont{  width: calc(100% - 120px - 10px );}

   
    .listen-first_box .swiper-scrollbar{ display: none; }
    .listen-first_box .swiper-wrapper{
      width:100%; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; padding-bottom: 0px;}
    .listen-first_box .swiper-slide{border-right:1px solid #e6e6e6; padding-right: 10px; margin-right: 10px;}
    .listen-first_box .item-row{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; border-bottom:0px solid #e6e6e6; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start;}
    
.mv_box .item-row .item:nth-of-type(1){width: 190px;}
.mv_box .item-row .item:nth-of-type(2){display: none; }
.mv_box .item-row .item:nth-of-type(3){width: auto; margin-top: 6px;}

    .listen-first_box .item-row .item{padding:0 0 3px 0; width: 100%;  }
    .listen-first_box .item-row .item.item-right{text-align: left;    width: auto;}
    .listen-first_box .item-row .item.word-black, .listen-first_box .item-row .item.price{font-size: 0.875rem;    width: 100%;}
    .listen-first_box .item-row .item .icon{margin:0 15px 0 0;}

    .listen-first_box .item-row .item:nth-of-type(3) {    -webkit-box-flex:1;    -ms-flex:1;    flex:1; width: auto;}

    .listen-first_box .item-row .item:nth-of-type(5){overflow:inherit; margin-top: 2px;}
    .listen-first_box .item-row .item .icn {    margin-left: 0px; margin-right: 16px;}
    .listen-first_box.mv_box .item-row .item .icn.icn_share{ margin-right: 16px;}

.listen_box .item-row .item:nth-of-type(1),
.listen_box .item-row .item:nth-of-type(2),
.listen_box .item-row .item:nth-of-type(3),
.listen_box .item-row .item:nth-of-type(4),
.listen_box .item-row .item:nth-of-type(5){ width:100%; }


#swiper-popular .icn{margin-right: 16px;}

    .listen_box .swiper-listen-first .swiper-slide{ width: 160px; margin-top: -4px;}
    .listen-first_box .item-row .item  a.artist{color:#828282;}

.swiper-listen-first{ height: 122px;}

#swiper-mv, #swiper-video{ height: auto;}
.mv_box .cover{display: none;}
.mv_box .cover-cont{  width: 100%;}

.mv_box .swiper-listen-first .swiper-slide{ width: 200px; }

#swiper-mv .swiper-slide:first-of-type, #swiper-video .swiper-slide:first-of-type {    margin-top: 0;}


.mv_box .item-row .item {    overflow: visible;    white-space: pre-wrap; width: 100%; }


.mv_box .swiper-slide {
    border-right: 0px solid #e6e6e6;
}
.item-cover{ 
  display: block; 
  width: 100%;  
  background-color: #d0d0d0;
  background-position: 50% 50%; 
  background-repeat: no-repeat; 
  background-size: cover;
  position: relative;
  
}
.item-cover:after{
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
}


.mv_box  .item-row .item.word-black a.m-name{ height: 53px;/* 約3行 */ line-height: 1.22; display: block; margin-top: 5px;}
.mv_box  .swiper-slide{ margin-right: 0px; padding-right: 0; }

.mv_box  .item-row{padding-top:0; padding-bottom: 0;}
.news_block .separate-block{margin-top: -4px;}


/* 實體周邊 */

.popular_block, .news_block{margin-left: 10px; margin-bottom: 30px;}

.popular_block .item-row .price{ width: 160px;}

.news_block{margin-bottom: 10px;}
.normal_block.popular_block .title .more, .normal_block.news_block .title .more{ display: block; }
.separate-block{display: block;}
.separate-block #swiper-popular, .separate-block #swiper-news, .separate-block #swiper-activity{ width: 100%; }
.separate-block .last-more{ display: none; }

.popular_block .cover-box .info{ 
  display: block; 
  position:absolute;
  top: 100%;
  bottom: auto;
  background-color:transparent; 
  box-shadow: inset 0px 0 0px rgba(0,0,0,0); 
  padding: 0;
}


#swiper-popular{ height: 260px; }
.popular_block .item-row .btn{ display: none; }
.popular_block .item-row .item{color:#828282;}
.popular_block .item-row .item:nth-of-type(2){margin-top: 10px;}
.popular_block .item-row .item:nth-of-type(3){display: block;margin-top: 2px;}
.popular_block .item-row .item .word-red{ color: #ff665e; }
.popular_block .cover-box{box-shadow: 0 0 0 0  rgba(0,0,0,.4); margin:0px;}

.popular_block .item-row .item .icn{margin-right: 16px;}

.popular_block .swiper-listen-first .swiper-slide{width: 160px;}


#swiper-news {   height: 200px; }
.news_block .cover-box .info{   padding: 5px 0 0 0;
  display: block; 
  position: absolute; 
  background-color: #fff; 

  }
.news_block .swiper-listen-first .swiper-slide{width: 200px;}
.news_block .cover-box{box-shadow:  0px 0px 0px rgba(0,0,0,0); margin:4px; margin-bottom: 0;}

.news_block .item-row .item .icn{margin-right: 0px;}
.news_block .item-row .item .icn_item_date{margin-bottom: -2px;}  /* 特殊調整:在網頁板手機看正常，但在實體手機往上跑掉 */

.chatroom_block, .side_block .title{    padding: 10px;  }

.normal_block.popular_block .title{border:0; padding: 0 10px 0 0; margin-bottom: 20px}
.side_block.activity_block .title{padding-bottom: 0px; margin-bottom: 20px; margin-top: 20px;}

.activity_block .item-row {    margin: 10px 10px;    width: calc(100% - 20px);}



.countdown_block .counter span {    padding: 0 0.2em; font-size: 2em;}

.popular_block .cover-box .hit-area{    background-size: auto 160px;}
.news_block .cover-box .hit-area{    background-size: cover;}
}

/* //////////////////////////首頁 detail↑////////////////////////// */


/* //////////////////////////footer detail ↓////////////////////////// */
footer{ background-color: #cfd0d0;  font-size: 0.875rem; color: #3e3533; }
footer .container{ padding:15px 25px; text-align: center;}

footer .f-center{  display: -webkit-box;  display: -ms-flexbox;  display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
footer p{font-size: 0.875rem; float: right; margin-top: -23px; margin-bottom: 0; color: #000000;}


footer .link{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; line-height: 1; margin:0;padding:0; list-style-type:none ;}
footer .link li:after{ content: '｜'; display: inline-block;  font-size: 0.875rem; margin: 0 5px; }
footer .link li:last-of-type:after, footer .link-icon li:after{display: none;}
footer .link li a{font-size: 0.875rem;}

footer .link-icon{margin:0 7px;}
footer .link-icon img{ width: 28px; margin: 0 10px; }




@media (max-width: 1365px){
footer p{ float: none; margin-top: 15px; }
}

@media (max-width:1279px) {
 footer{ background-color:#fff;}
}


@media (max-width:767px){
footer .f-center{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } 

footer .link{margin-top: 15px; }
footer .link li a, footer .link li:after{font-size: 0.875rem;}
footer .link-icon{margin-top: 0px;}


footer p{  margin-top: 5px; }
footer .container {
    padding: 15px 10px;


}
}

/* //////////////////////////footer detail ↑////////////////////////// */



/* //////////////////////////內頁 ↓////////////////////////// */



/* -------關於我們------- */



#page-aboutus{ 
  padding-top: 92px;
  background: url('../img/bg_page_pattern.png') 100% 0 no-repeat; 
  margin-bottom: 80px;
}
#page-aboutus .inner-sidebar-box .side_menu_box a{ line-height: 1.2; margin-bottom: 47px;}
/*
#page-aboutus .history_box{ margin: 0; padding: 0;display: flex; flex-wrap: wrap; justify-content: flex-start; justify-content: flex-start; 
  text-indent: -54px; list-style-type:none ;
  
 }
#page-aboutus .history_box li{ margin: 0; padding: 0;width:calc(50% - 54px); font-size: 0.875rem; margin-bottom: 5px; margin-left: 54px; color: #6b6d70; }
#page-aboutus .history_box li:nth-of-type(odd){ margin-right: 37px; width:calc(50% - 54px - 37px); }
#page-aboutus .history_box li:nth-of-type(even){  width:calc(50% - 54px - 37px); margin-left: 91px; }
*/


/* 解決錨點不對位問題 */
#page-aboutus h2:before{ content: ''; display: block; 
margin-top: -113px; height: 113px; /* 高度 為 NAV 高 */
visibility: hidden; }

.htmleditor .tel-mail-list{list-style-type:none;margin-left: 0;    padding-left: 0;}
.tel-mail-list{margin:0;padding:0; margin-bottom: 5px; }
.tel-mail-list li{ margin:0;padding:0;display: inline-block; margin-right: 20px; color:#6b6d70 ;  font-size: 0.875rem; line-height: 2; }


#page-aboutus .htmleditor-box{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } 
#page-aboutus .htmleditor-box .htmleditor{ width: calc(56% - 3%); }
#page-aboutus .htmleditor-box .htmleditor + .htmleditor{  width: 45%; }

#page-aboutus .htmleditor-box .htmleditor p{margin-bottom: 4px;}


#page-aboutus .aboutus_block2{width:100%;}
/*
#page-aboutus .aboutus_block2 .htmleditor{width: calc(44% - 3%);}
#page-aboutus .aboutus_block2 .htmleditor + .htmleditor{  width: 45%; }*/

@media  (max-width: 1279px) and (min-width: 1024px){ 

  #page-aboutus h2:before{margin-top: -227px; height: 227px; /* 高度 為 NAV 高 */}

}


@media (max-width:767px){
   
#page-aboutus .htmleditor-box { display: block; }
#page-aboutus .htmleditor-box .htmleditor, #page-aboutus .htmleditor-box .htmleditor + .htmleditor{  width: 100%; }
#page-aboutus {
    background: url("../img/bg_page_pattern.png") calc(100% + 8px) 0 no-repeat;  background-size: 50px; padding-top:20px;}
}

/* -------註冊------- */


#page-register {background: url('../img/bg_register.png') 100% 100% no-repeat; padding-bottom: 225px; position: relative;}
#page-register h1{ font-size: 1.125rem; margin-bottom: 30px;}
#page-register p{font-size: 0.875rem; margin-bottom: 20px;}
#page-register .form-top-20{padding-top: 20px; }

/* 登入 */
#page-register .login-form{width: 327px; -webkit-box-flex: 0; -ms-flex: none; flex: none;  }

#page-register .login-form h1, #page-register  .register-wording h1{margin-bottom: 70px;}
.login-form p{font-size: 1.125rem;color: #6b6d70; line-height: 1.8; margin-bottom: 10px;}
.login-form form.small-w, #page-register .flex-row .login-form form.small-w{width: 100%;}

#page-register .login-form-ps{ width: 100%; }
#page-register .small-w{width: 327px;  }


#page-register .login-form-ps h1{margin-bottom: 20px;}


#page-register  .login-form .btn-box{margin-top: 50px;}
#page-register  .login-form .btn-box.box-fb{margin-top: 25px;}

.login-form .small-w .form-group > label{ width: 75px; }
.login-form  .form-group .inp-inp{width: calc(100% - 75px);}
.ic_btn_fb{background-image: url('../img/ic/ic_btn_fb.png'); width: 28px; height: 28px; margin-right: 10px;margin-top: -5px;}

.register-wording{margin-left: 17.8%; color: #6b6d70;  font-size: 1.125rem; }
#page-register .register-wording p{color: #6b6d70; line-height: 2.16; margin-bottom: 70px;}

.forgot a:after{content: '｜'; display: inline-block; font-size: 0.875rem;}
.forgot a:last-of-type:after{display: none;}

/* 註冊 */
#page-register  .redist-right  .btn-box{ margin-top: 20px; margin-bottom: 20px; }
#page-register .redist-right  .btn-box.box-fb{margin-bottom: 0;}
#page-register  .redist-right h1{ margin-bottom: 20px;}
#page-register  .redist-right .small-w{width:100%;  }
.TermsBox h2{ color: #6b6d70;  font-size: 1.125rem; margin-bottom: 20px;}

.TermsBox {margin-top: 20px;}
.TermsScroll{
   border: 1px solid #9fa0a0;
  padding: 30px 60px;
    width:100%;
    height: 420px;
    background-color: #fff;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}
.TermsScroll h4{margin:10px 0;      font-size: 0.875rem;}
.TermsScroll p{margin-bottom: 10px;    font-size: 0.875rem;}
#page-register .TermsScroll p{font-size: 0.875rem;}

#page-register .redist-right{ 
  width:400px; 
  position: absolute; right: 30px; top: 50px; 
  border: 1px solid #6b6d70;
  padding:30px 20px;
 }
#page-register .register_block{padding:85px 430px 90px 14.6%;}

.redist-right .login-form form.small-w{ width: 100%; }

.redist-right h1{ margin-bottom: 10px;}
.redist-right p{font-size: 0.875rem; line-height: 1.5;}


/* 忘記密碼 */
.form-group.label-no-w{-webkit-box-align: center;-ms-flex-align: center;-ms-grid-row-align: center;align-items: center; }
.form-group.label-no-w > label{width: auto;}

@media (max-width: 1279px){
   #page-register  .redist-right{position: relative; top: 0; left: 0; margin:60px auto 20px auto; width: 340px;max-width: 100%;}
  #page-register .register_block{padding-right:10px;padding-left:10px;}

}

@media (max-width: 1023px){
  .register-wording{padding-top: 40px;}
   #page-register{background-size:150px;padding-bottom: 150px;}
  
  #page-register .flex-row{display: block;}
  #page-register .flex-row .login-form{width: 327px; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 0 auto; }
  .register-wording{margin-left: 0; }

#page-register .login-form h1, #page-register .register-wording h1{margin-bottom: 30px;}
  #page-register .register_block{padding:0 10px;}
}


@media (max-width:767px) {

.login-form  .form-group .inp-inp{width:100%;}
.TermsScroll{height: 200px; padding: 15px 30px;}
#page-register .login-form form.small-w, #page-register .flex-row .login-form form.small-w{width: 100%;}
#page-register .flex-row .login-form{width: 100%}
  .redist-right{ width: 100%; }

#page-register .btn{margin-right: auto; margin-left: auto; margin-top: 10px;}
   #page-register{padding-bottom: 200px!important;}
}


/* -------藝人品牌------- */



#page-artist .inner-sidebar-box .side_menu_box,
#page-merchandise .inner-sidebar-box .side_menu_box{margin-bottom: 50px; padding-left: 19%;}

#page-artist .inner-sidebar-box .side_menu_box a,
#page-merchandise .inner-sidebar-box .side_menu_box a{margin-bottom: 35px;    line-height: 1;}

#page-artist .inner-sidebar-box .side_menu_box a.active,
#page-merchandise .inner-sidebar-box .side_menu_box a{color:#026773}

#page-artist .inner-sidebar-box h1,
#page-merchandise .inner-sidebar-box h1{
   background-color: #466063; color: #fff; font-size: 1.125rem;
  height: 40px; line-height: 40px; padding-left: 19%;
  font-weight: bolder;
}


#page-artist p{ color: #000102;}
#page-artist .htmleditor p{line-height: 2.1;}
/*#page-artist h1{margin-bottom: 20px; margin-top: 63px;}*/

.artist_tablink{color: #6b6d70; line-height: 17px;}
.artist_tablink a{ font-size: 0.875rem; color: #6b6d70; display: inline-block;}
.artist_tablink a:hover, .artist_tablink a:focus{  color: #ea575f;}
.artist_tablink a.active{color: #000;}
.artist_tablink a:after{content: '|'; display: inline-block;color: #6b6d70;padding:0 4px;}
.artist_tablink a:last-of-type:after{display: none;}

.artist_block{ -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; margin-bottom: 60px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.artist_block .cover{width: 29%; margin-right: 4%;}
.artist_block .cover > img{width: 100%; box-shadow: 4px 4px 8px rgba(0,0,0,.5);}
.artist_block .icn_block{margin-top: 14px;}
.artist_block .icn_block .icn{margin-right: 16px;}
.artist_block .icn_block .icn img{width: 100%; vertical-align: initial;}
.artist_block .icn_block .icn:last-of-type{margin-right: 0px;}
.artist_block .conts{
  margin-bottom:44px; width: 67%; text-align: left; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;-webkit-box-pack: inherit;-ms-flex-pack: inherit;justify-content: inherit;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.artist_block .conts ul, .artist_block .conts li{margin:0; padding:0; list-style-type: none; line-height: 2; }
.artist_block .conts li{color: #000102;  font-size: 0.875rem;}
.artist_block .conts li.name{ font-size: 1.125rem; font-weight: bolder; color: #ea575f; line-height: 1.4;    margin-bottom: 8px;}
.artist_block .conts .artist_tablink{padding-top: 15px;}


#page-artist .inner-main-box  h1{margin-bottom: 26px; margin-top: 60px;}





.album_info{margin-left:5%; width: 90%; margin-bottom: 40px;}
.album_info .cover{width: 35%; margin-right: 3.3%;}
.album_info .conts{width: calc(100% - 3.3% - 35%); margin-bottom: 0;}
.album_info .cover img{box-shadow: 0px 0px 0px rgba(0,0,0,.5);}
.album_info .conts li{color: #6b6d70; margin-bottom: 3px;}

.album_info .conts li.albun-name{color: #466063; font-size: 1.125rem; font-weight: bolder; line-height: 1.3;   }
.album_info .conts li span{color: #000000; padding-right: 15px;}
.album_info .conts li .price{font-size: 1.125rem;}
.album_info .conts li .price .word-red{color:#ff685d;}
.album_info .conts li strong{color: #000;}
.album_info .share_block{margin:38px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
.album_info .share_block .btn-box {    margin-left: 0px;}
.album_info .artist_tablink{ padding-top: 15px; text-align: right; font-size: 0.875rem;}



.goods_info{ margin-left: 0%;    width: 100%; }
.goods_info .cover{width: 52.8%; margin-right: 2%;}
.goods_info .conts{width: 45%; margin-bottom: 0;}
.goods_info .conts li.price-btn{  flex-direction: column;   align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 23px 0; }


.goods_info .conts li.price-btn .btn-cart, .goods_info .conts li.price-btn .btn-exchange{ margin-top: 1rem; }
.goods_info .conts li.price-btn .btn-exchange .btn-cart{ margin-top: 0rem;}

.goods_info .share_block{ margin-top: -10px;-webkit-box-pack: -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;}


.goods_info .conts li .price{ line-height: 1.2;padding-right: 0; padding-top: 4px;}
.goods_info .conts li .price span{padding-right: 0;}
.goods_info .conts li .price span.word-red{padding-right: 4px;}

.goods_info .htmleditor{ line-height: 1.2;  font-size: 0.875rem;}


.events_block{margin:0; padding:0; list-style-type: none;color: #000102;}
.events_block li{font-size: 0.875rem; margin-bottom: 15px; margin-left: 100px; line-height: 1.2;}
.events_block .year{color:#466063; margin-left: -100px; width:100px; display: inline-block; text-align: left; }


.card-item{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:0; padding:0; list-style-type:none ;}
.card-item .item-row{  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;-webkit-box-align: inherit;-ms-flex-align: inherit;-ms-grid-row-align: inherit; align-items: inherit; margin:0; padding:0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
/*.card-item .conts{  display: flex; flex-direction: column;align-items: stretch;}*/
.card-item .conts .item{line-height: 1.2;}

/*專輯列表*/
.album_block{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin:0 0 -25px -4.5%; }
.album_block .item-row{width: 150px;  margin-bottom: 37px; margin-right:4.5%; margin-left: 4.5%;}
.album_block .cover{text-align: center;}
.album_block .cover a{display: block;}
.album_block .cover img{ width: 150px; height: 150px; margin:0 auto;}
.album_block .conts{color:#000000;font-size: 0.875rem; height: 100%; position: relative; }
.album_block .conts .item{margin-top: 10px;text-align: center; height: calc(100% - 10px - 16px); }
.album_block .conts .item + .item{margin-top: 10px;text-align: center; height: auto;}




/*  音樂下載 */
#page-artist.page-sidebar-right .inner-main-box h1{margin-top: 15px;margin-bottom: 15px; line-height: 1;margin-bottom: 18px;}  
#page-artist.page-sidebar-right .news-inner h1{margin-bottom: 18px;}
#page-artist .map{margin-bottom: 40px;}
.tb_dowload .icn_new{margin-left: -38px;margin-bottom: -1px;}
.tb_dowload .rwd-table td {  padding-top: 8px;    padding-bottom: 3px;}
.tb_dowload .icn{vertical-align: inherit;}

#page-artist.page-sidebar-right .download_block h1{margin-bottom: 40px; margin-left: 5%;}

#page-artist.page-sidebar-right .activity-inner h1.inner-tab{ margin-top: -15px; padding-left: 55px; margin-bottom: 0; }


@media (max-width:1023px){
  #page-artist.page-sidebar-right .inner-main-box h1{margin-top: 0px;}
#page-artist.page-sidebar-right .news-inner h1.inner-tab{ margin-top: -15px; padding-left:24px; margin-bottom: 0; }
}


/* 活動訊息、最新消息 */



.activity_block{}

.activity-inner  .artist_tablink a{font-size:0.875rem;}
.activity_tab{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;     -webkit-box-align: baseline;     -ms-flex-align: baseline;     align-items: baseline; margin-bottom: 25px;}

.news-inner .activity_tab{margin-bottom: 22px;}
.activity_block ul, .activity_block li{margin:0; padding:0; list-style-type: none; color: #6b6d70; font-size: 1.125rem;}
.activity_block ul{border-bottom: 1px solid #cfd0d0;
   padding-bottom: 8px;
    margin-bottom: 8px;}
.activity_block li{margin-bottom: 0;    line-height: 1.55; font-size: 0.875rem;}
.activity_block .name{ color: #ea575f; }
.viewnumber_block{ text-align: right; color: #6b6d70;  font-size: 0.875rem;margin-top: -36px; padding-bottom: 12px; }


#page-artist.page-sidebar-right .inner-sidebar-box  .title{ margin-bottom: 25px; }
#page-artist.page-sidebar-right .video-inner + .inner-sidebar-box .inner-sidebar-box .title{ margin-bottom: 0px; }

.checkmap:before{content: ' ｜ '; line-height: 1.5; display: inline-block;}

/* 影音 */

#page-artist.page-sidebar-right .inner-main-box.video-inner h1{ margin-left: 0; }
.videio_block{position: relative;}
.videio_block:before{padding-top: 56.25%; display: block; content: ''; }
.videio_block video, .videio_block .plyr--video{position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%;}

.video-inner .fb-like{margin:10px 0;}

.share-link_block > label{ width: auto;  font-size: 0.875rem;}
.share-link_block .inp-inp input{ width:400px;  font-size: 0.875rem; max-width: 100%; }

#page-artist.page-sidebar-right .mv_block .title{margin-bottom: 0;}
.video-inner .album_info {
    margin-left: 0%;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
}
.video-inner .album_info .conts{ width: 100%; }

.video-inner .album_info .conts li.albun-name{margin-bottom: 10px;}

.video-inner  .commentboad-item_block{width: 650px; max-width: 100%;}

#page-artist .commentboad-item_block .form-group > label{ width: auto;  font-size: 0.875rem; }
#page-artist .commentboad-item_block .commentboad-item .detail{min-height: 54px; margin-bottom: 10px;}

.commentboad-item_block .commentboad-item {

    padding: 30px 0px 45px 0px;
}
.commentboad-item_block  .commentboad-item .time {    margin-bottom: 5px;}


#page-artist .commentboad-item_block  .commentboad-item .btn-box {    align-self: center;margin-left: 10px;}

.video-inner .commentboad-item_block .commentboad-replay{    border-bottom: 1px solid #cfd0d0;}
.video-inner .commentboad-replay .btn-box {    width: calc(100% - 80px);}
.video-inner .commentboad-item_block .commentboad-item {    padding: 30px 0px 0px 0px;}


.commentboad-item_block  .commentboad-replay .form-group {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.commentboad-item_block  .commentboad-replay .form-group .inp-inp{width: calc(100% - 80px);}

@media (max-width:1279px){
    .video-inner{margin-right:0px;}
.album_info {
   
    margin: 0;
    width: 100%;
    margin-bottom: 40px;
}
.icn_new{width: 23px;    height: 11px;margin-right: 5px;}
.tb_dowload .icn_new {    margin-left: -28px;}

.goods_info{ display: block; }
.goods_info .cover, .goods_info .conts{width: 100%; margin: 0%;}

#page-artist .inner-sidebar-box h1, #page-merchandise .inner-sidebar-box h1{padding-left: 36px;}
#page-merchandise .inner-sidebar-box .side_menu_box, #page-artist .inner-sidebar-box .side_menu_box{margin-left: 36px; padding-left: 0;}

#page-artist.page-sidebar-right .download_block h1{ margin-left: 0;}
}



@media (max-width:1023px){
.activity-inner{margin-right: 0;}
}


@media (max-width:767px){

#page-artist .inner-main-box  h1{ margin-top: 0px;}

  .news-inner{margin-top: 0px;}
  .activity_tab{ display: block; margin-bottom: 15px; }
    #page-artist{   padding-top:20px;  margin-bottom: 20px;}
    .artist_block{display: block;}
    .artist_block .cover{width:100%; margin-right: 0%; text-align: center; margin-bottom: 20px;}
    .artist_block .cover img{width:280px; margin:0 auto;}
    .artist_block .conts{width: 100%; height: calc(100% - 150px);  margin-bottom: 0;}

    .artist_block .conts .artist_tablink{ text-align: center; }

.card-item.album_block {margin-bottom: 20px;  }


.album_info{margin-left:0; width: 100%;}



.tb_dowload td:before , .tb_video td:before {display: none;}
.tb_dowload td.icn-item, .tb_video td.icn-item, .tb_member td.icn-item{display: inline-block;padding: 3px 6px 3px 10px;}
.rwd-table.tb_member td:last-of-type, .rwd-table.tb_video td:last-of-type , .rwd-table.tb_dowload td:last-of-type {
    padding-bottom: 3px;
}

.rwd-table.tb_member td:last-of-type{padding-bottom: 10px;}

.commentboad-item_block .commentboad-replay .form-group .inp-inp {
    width: 100%;
}

.artist_tablink {line-height: 2.5;}
.goods_info .conts li.exchange-area{-webkit-box-orient:  vertical;-webkit-box-direction:  normal;-ms-flex-direction:  column;flex-direction:  column;}
.goods_info .conts li.exchange-area .btn-exchange{ text-align: right; margin:10px 0;}
.goods_info .conts li.exchange-area .icn_btn_bitcoin{width: 20px; height: 20px;}
#page-artist .commentboad-item_block  .commentboad-item .btn-box { text-align: right; padding-bottom: 10px;}


}

@media (max-width:480px){
  .card-item.album_block{ justify-content: space-between; }
  .album_block .item-row{margin-right:0%; margin-left: 4.5%; }
}


/* -------Fans Club------- */
#page-fansclub{
  background-color:#88b927;
  background-position:0 0;
  background-repeat:repeat;
  background-size:cover;
  background-attachment: fixed;　

}

#page-fansclub .flex-row{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#page-fansclub .logo{ width: 36%; margin-top: 25px; margin-right:auto; margin-left: auto; text-align: center;}
#page-fansclub .logo img{ width:420px; max-width: 100%;  }
#page-fansclub .logo .links{ text-align: center; white-space: nowrap; -webkit-padding-start: 0px; -moz-padding-start: 0px; padding-inline-start: 0px;}
#page-fansclub .logo .links li{ display: inline-block; font-size: 0.875rem; }
#page-fansclub .logo .links li a{color: #466063;}
#page-fansclub .logo .links li a:after{content: '｜'; display: inline-block;font-size: 0.875rem; }
#page-fansclub .logo .links li:last-of-type a:after{display: none;}
#page-fansclub .logo .links li a:hover{color: #ea575f;}

.fansclub-title{ color: #000; font-size: 1.125rem; margin-bottom: 28px; }
.fansclub-btn{margin-top: 41px;}
#page-fansclub  .htmleditor{width: calc(100% - 36%); padding-left: 10px;}

#page-fansclub  .htmleditor p{font-size: 0.875rem; margin-bottom: 12px;}

@media (max-width:1023px){
  #page-fansclub .htmleditor{width: 100%; padding-left: 0px;margin-bottom: 20px;}
  #page-fansclub .logo .links{  white-space: normal; text-align: center; }
    #page-fansclub .logo .links li {display:inline-block; line-height: 2;}
  
  #page-fansclub .flex-row{display: block;}
  #page-fansclub .logo{ width:100%; text-align: center; margin-top: 0; margin-bottom: 40px;}
  #page-fansclub .htmleditor{padding-left: 0;}
}


/* -------留言板------- */
#commentboad .lang {  width: auto;}

#commentboad .banner img{ width: 100%; }

.commentboad-name{  font-size: 1.125rem;  color: #466063;}

.func{font-size: 0.875rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%;
  padding: 18px 0 9px 0;
  min-height: 67px;
}

.func button{ margin:0; margin-right: 20px;}
.func ul, .func li{ display: inline-block; }

.func li:after{content: '｜'; display: inline-block;}
.func li:last-of-type:after{ display: none; }
.func .info{ color: #6b6d70; margin:0; padding:0 }
.func .welcome{ color: #000102; margin:0; padding:0}

.commentboad-title{
  background-color: #466063;
  font-weight: bolder;
  font-size: 1.125rem;
  color: #fff;
  padding: 12px 70px 11px 70px;
  line-height: 18px;
  line-height: 1.125rem;
  margin-top: 0px;
}
.commentboad-title a{color: #ea575f;}
.commentboad-title a:hover{ text-decoration: underline; }

#page-commentboad .form-group label{font-size: 1.125rem;}


.commentboad-ps_block{padding:70px 70px 0 70px;  font-size: 0.875rem;}
#page-commentboad h3{color: #466063; font-weight: normal; margin:27px 0 20px 70px;font-size: 1.125rem; }
.commentboad-ps_block h4{color: #466063; font-weight: bolder; margin: 20px 0;font-size: 0.875rem;}

.commentboad-ps_block ul, .commentboad-ps_block ol{margin:0; padding:0 0 0 25px;}


.rwd-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0px 0 10px 0;
}
  .rwd-table th{ color: #fff;  font-size: 1.125rem; font-weight: bolder; text-align: center;padding: 7px 0px;}
  .rwd-table td {
   font-size: 0.875rem;
    padding:12px 0px;
    text-align: center;
    vertical-align: top;
  }
.tb_member td.price span{ display: block; }


.tb_member th{padding: 0px 0px 0px 0px;  font-size: 1.125rem; height: 30px; line-height: 30px;}
.tb_member td{  font-size: 0.875rem;vertical-align: middle;}



.rwd-table th:first-of-type, .rwd-table td:first-of-type{padding-left: 70px;}
.rwd-table th:last-of-type, .rwd-table td:last-of-type{padding-right: 30px;}

.rwd-table .td-left{ text-align: left; }
.rwd-table .td-right{ text-align: right; }
.rwd-table td.price{ text-align: center; }

 .rwd-table thead{ background-color: #466063; }

 .rwd-table tbody tr{border-bottom:1px solid #cfd0d0;}

.tb_video  td:first-of-type{padding-left: 0;}
.tb_video .icn{vertical-align: middle;}

.tb_video .d-flex{display: table!important; }
.tb_video .d-flex > span{display: table-cell; vertical-align: middle;}
.tb_video .d-flex .icn_new{ margin-right: 0; margin-left: 4px;background-size: contain;}
.tb_video .d-flex .cover{ padding-right: 48px; }
.tb_video .d-flex .cover img{width: 192px;}



.tb_video td{vertical-align: middle;}

.tb_mymusic  .icn{ margin-bottom: -4px; }


.tb_video td:first-of-type{padding-right: 10px;}

#page-commentboad a.author, .video-inner a.author{color:#0000ff; }
#page-commentboad a.author.admin, .video-inner a.author.admin{color:#ff9900;}
#page-commentboad a:hover{ text-decoration: underline; }


#page-commentboad .rwd-table td{  font-size: 0.875rem;padding-right: 7px;}
#page-commentboad .rwd-table th{ padding-right: 7px; }

/* 詳細 */
.commentboad-item_block{ /*min-height: 700px; */}

.commentboad-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: row; 
          flex-direction: row; 
  -webkit-box-align: stretch; 
      -ms-flex-align: stretch; 
          align-items: stretch; 
  border-bottom: 1px solid #cfd0d0; 
  padding:30px 20px 30px 70px;

}

#page-commentboad .page-box a:hover{ text-decoration: none; }
.commentboad-item .info, .commentboad-item .info li{margin:0; padding:0; list-style-type: none;  font-size: 0.75rem; }

.commentboad-item .info{width:400px; text-align: left;}
.commentboad-item .conts{-webkit-box-flex: 2;-ms-flex: 2;flex: 2; text-align: left;}
#page-commentboad .commentboad-item .btn-box{ width: 100px;  text-align: right; -ms-flex-item-align: end; align-self: flex-end; padding-right: 17px;}

.commentboad-item .info li{margin-bottom: 8px;}
.commentboad-item .info .account{margin-bottom: 20px; font-size: 1.125rem;}
.commentboad-item .time{font-size: 0.75rem; color: #000000;margin-bottom: 20px; }
.commentboad-item .detail, .commentboad-item .detail p{font-size:0.875rem; line-height: 1.5; color: #000;}
.commentboad-item .detail, .commentboad-item .detail p:last-of-type{margin-bottom: 0;}

.commentboad-item .detail blockquote{ background-color: #fff; padding: 15px 20px; font-size: 0.875rem;}

.commentboad-replay{padding:30px 0 0;}
.commentboad-replay .fake-form-control{ width: 100%; padding: 5px; background-color: #fff;}
.commentboad-replay .form-control{border:0px;}

.commentboad-replay .btn-box{width: calc(100% - 150px); margin-left: auto; margin-right: 0;margin-top: 30px;
    margin-bottom: 30px;}
.commentboad-item_block .page-box{width: calc(100% - 150px); margin-left: auto; margin-right: 0;}


@media (max-width:1023px){
  .func{ display: block; }
  .func ul{margin-top: 10px; text-align: right; width: 100%;}
.func .info{margin-top: 10px;}
  .rwd-table th:first-of-type, .rwd-table td:first-of-type{padding-left: 40px;}
  .rwd-table th:last-of-type, .rwd-table td:last-of-type{padding-right: 40px;}

  .commentboad-title, .commentboad-ps_block{ padding-right: 20px; padding-left: 20px; }
  .commentboad-item{padding: 20px;}
  .commentboad-item .info{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}
  .commentboad-item .conts{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}

  .tb_dowload .icn_new {    margin-left: -28px;}
}

   
@media(max-width: 767px) {
#page-commentboad h3{margin-left:0px}
  .tb_video .d-flex{-webkit-box-align: start;-ms-flex-align: start;-ms-grid-row-align: flex-start;align-items: flex-start;}
.rwd-table thead {
    background-color: #466063;
    height: 15px;
    display: block;
}

.tb_member td.price span{ display: inline-block; }
  .rwd-table tr {
  

  }
   
  .rwd-table th {
      display: none;
  }
   .tb_mymusic .icn{margin-bottom: 0;}
   .rwd-table th:first-of-type, .rwd-table td:first-of-type{padding-left: 10px; padding-top: 10px;}
  .rwd-table th:last-of-type, .rwd-table td:last-of-type{padding-right: 10px;padding-bottom: 10px;}

    .rwd-table td.price{text-align: left;}
 
.rwd-table .td-right{ text-align: left; }
  .rwd-table td {
      display: block;
      padding: 3px 10px;
      border: none;
      
      text-align: left;
  }
   
  .rwd-table td:before {
      content: attr(data-th) " : ";
      float: left;
      padding-right: 5px;
  }
 .tb-cart_block .rwd-table td:before { vertical-align: middle; }
  .tb-cart_block .rwd-table td.td-left-0:before{display: none;}

  .rwd-table td.td-btn:before {
    display: none;
}

.tb_dowload .icn_new {    margin-left: 0px;}

.tb_video .d-flex{display: block!important;}
.tb_video .d-flex .cover{padding-right: 0;width: 100%; margin-bottom: 10px;}
.tb_video .d-flex .cover img{width: 100%;}
.tb_video tbody tr .icn-item, .tb_video tbody tr .icn-item:last-of-type{padding-bottom: 8px;}

.tb_video .d-flex > span {
    display: block;
    vertical-align: middle;
}


.commentboad-item .info li{margin-bottom: 0;}
  .commentboad-item{display: block;}
  #page-commentboad .commentboad-item .btn-box{width: auto;    padding-right: 0px;}
  .commentboad-item .conts{margin-top:20px}
  .commentboad-item .time{margin-bottom: 10px;}


.commentboad-replay .btn-box, .commentboad-item_block .page-box{width:100%; margin-left: auto; margin-right: auto;}


}


/* -------音樂下載------- */
#page-download h1{margin-left: 55px;font-size: 1.125rem; line-height: 1; padding:15px 0; margin-bottom: 0;}
#page-download .rwd-table th{font-size: 1.125rem; font-weight: bold;}

#page-download .rwd-table td , #page-artist .rwd-table td {font-size: 0.875rem;  padding-top: 8px;
    padding-bottom: 8px; vertical-align: middle;}

#page-download h1:empty:before{content: ' '; height: 18px; display: block;}

@media (max-width:767px){ 
#page-download h1:empty{ display: none; }

}
/* -------實體周邊------- */

#page-merchandise .inner-sidebar-box, #page-artist .inner-sidebar-box{position: static;}

.img84-item li a span{display: inline-block; margin-top:5px; margin-bottom: 5px;}

.img84-item img{width: 84px; margin-right: 16px;}

.goods_block{-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; margin: 0 -18px;}
.goods_block .item-row{width: calc(25% - 37px ); margin:0 18px 70px 18px;}
.goods_block .cover{position: relative;}
.goods_block .cover a{display: block; background-color: #fff; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;}
.goods_block .cover a:before{content: ''; display: block; padding-top: 56.25%;}
.goods_block .cover .new, .swiper_block .gallery-top  .new{ position: absolute; left: 17px; top: 0; background-color: #ff685d;color: #fff; font-size: 0.875rem; 
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px; 
padding: 2px 16px 8px;
z-index: 2;
}
.swiper_block .gallery-top  .new{  font-size: 1.125rem;border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px }

.goods_block .conts{color:#000;font-size: 0.875rem; }
.goods_block .conts .item{margin-top: 13px;text-align: left;}
.goods_block .conts .item + .item{text-align: left;margin-top: 9px;}
.goods_block .conts .item .price{margin-left: 0px; display: inline-block;}

.goods_block .btn{margin-bottom: 7px; margin-right: 10px;min-height: 28px;}

.relative_block{}
.relative_block .title{ font-size: 1.125rem; color: #6b6d70; border-bottom: 1px solid #cfd0d0; padding-bottom: 5px; margin-bottom: 20px; }

.relative_block .goods_block{margin: 0 -18px;}

.select-sec-menu{margin: 0 10px 20px 10px;    width: calc(100% - 20px);}


@media (max-width:1023px){

#page-merchandise .mobile_hidden{ display: none; }
}


/* 購物車 */
#page-shopping-cart .btn-box{padding-top:   10px; padding-bottom:  40px;}
#page-shopping-cart h1{margin-bottom: 10px;}
.process_block{margin: 0; padding: 0; list-style-type:none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; counter-reset:num; margin-bottom: 85px;}
.process_block li{
  margin: 0; padding: 0; 
  list-style-type:none;
  display: inline-block; 
  font-size: 1.125rem;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  line-height: 1; 
 
}
.process_block li .title{ }
.process_block li .title:before, .process_block li:after{display: inline-block; content: '';}
.process_block li .title:before{
  counter-increment:num; 
  content:counter(num);
  background-color:  #6b6d70;
  color: #fff;
  text-align: center;
  border-radius: 22px;
  width: 22px;
  height: 22px;
  line-height: 22px; 
  font-size: 0.875rem;
  margin-right: 10px;
 vertical-align: text-bottom;
}
.process_block li.now .title{color: #ea575f;}
.process_block li.now .title:before{  background-color:  #ea575f;}
.process_block li:after{
  display: inline-block; 
  content: ''; 
  width: 10px; height: 18px; 
  background: url('../img/ic/ic_process_arrow.png') 0 50% no-repeat; 
  background-size: cover;
  margin: 0 13px 0 11px;
}

.process_block li:last-of-type:after{display: none;}



.tb-cart_block .rwd-table thead {    background-color: transparent; border-top:1px solid #cfd0d0; border-bottom:1px solid #cfd0d0; color: #;}
.tb-cart_block .rwd-table th {    color: #6b6d70;     font-size: 1.125rem;padding-top: 7px;padding-bottom: 7px;white-space: nowrap; font-weight: normal;}
.tb-cart_block .rwd-table td{vertical-align: middle;font-size: 0.875rem; padding-top: 10px;padding-bottom: 10px;}
.tb-cart_block .rwd-table th:first-of-type, .tb-cart_block  .rwd-table td:first-of-type {    padding-left: 25px;}

.tb-cart_block  .rwd-table td.td-left-0:first-of-type{padding-left: 0px;}
.tb-cart_block .rwd-table .td-left-0 .cover img{width: 126px;}

.tb-cart_block .rwd-table .cover img{width: 86px;margin-right: 10px;}
.tb-cart_block .rwd-table .main-item span{color: #ea575f; }
.tb-cart_block .d-flex {
   /* display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            */
           display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: table !important; 
}
.tb-cart_block .d-flex span{display: table-cell;vertical-align: middle;}

.subtotal_block{  padding-bottom: 10px;font-size: 1.125rem; } 
.subtotal_block .title{width: 74%; display: inline-block; text-align: right;  color: #6b6d70;}/* 100-(5+25)=60,跟著 數量價格寬度%作連動 */
.subtotal_block .price{width: 26%; display: inline-block; text-align: center;  }/* 100-74=26,跟著 數量價格寬度%作連動 */
.include-delete .title{width: 65%;}/* 100-(5+25+10)=60,跟著 數量價格寬度%作連動 */

.total_block{ text-align: right; font-size: 1.125rem; }
.total_block .title{padding-right: 10px;}

.final-total_block {border-top:1px solid #cfd0d0;  font-size: 1.125rem; padding-top: 15px; margin-bottom: 40px;}
.final-total_block .price{font-size: 1.125rem;color: #000; }
.final-total_block .title{color: #000;}



/* payway */

.verticle-tb{margin-bottom: 15px;margin-top: 15px;}
.verticle-tb .title{padding:10px 37px; border-top:1px solid #cfd0d0; border-bottom:1px solid #cfd0d0; color:#026773;  font-size: 1.125rem;}
.verticle-tb .cont{padding:10px 37px; border-bottom:1px solid #cfd0d0;  font-size: 1.125rem;}
.verticle-tb input[type="radio"] + label span{margin-left: -27px;}
.tb-cart_block .ps, .tb-cart_block .ps-inline{ color: #6b6d70; font-size: 0.875rem; line-height: 1.2; }
.tb-cart_block .ps-inline{display: inline;}


.fillin_block{}
.fillin_block .title{color:#026773;  font-size: 1.125rem; padding:20px 0;}
.fillin_block .title input.checkbox[type="checkbox"] + label{display: inline; padding-left: 10px; color: #ea575f;}

.fillin_block .form-group  .inp-ps{color:#6b6d70;  font-size:0.875rem;}
.fillin_block .error-control .inp-ps{color: #ea575f;}

.fwrap{flex-wrap: wrap;}
.verticle-flex-row{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding:0 40px; border-bottom:1px solid #cfd0d0;}
.verticle-flex-row .verticle-tb{ width: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.verticle-flex-row .verticle-tb .title{border:0px; text-align: left;    height: 47px;    padding-left:70px;}
.verticle-flex-row .verticle-tb .cont{border:0px; height: calc(100% - 47px); padding-top: 0;  font-size: 1.125rem; }
.tb-cart_block .rwd-table td input{ width: 50px; text-align: center; height: 38px; line-height: 38px; border: 1px solid #c4c4c4;}
.verticle-flex-row .verticle-tb .cont div{padding:5px; display: flex; align-items: stretch; justify-content: space-between;}
.verticle-flex-row .verticle-tb .stitle{width:calc(115px + 16px) ; padding-right: 16px; position: relative;}
.verticle-flex-row .verticle-tb .conts{ width:calc(100% - 115px); }

.verticle-flex-row .verticle-tb.full{ 
  width: 100%;
  margin: 0;
  margin-top: -20px;
  margin-bottom: 20px;
  padding: 0px 42px; 
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    font-size: 1.125rem;
  }
 .verticle-flex-row .verticle-tb.full .conts{word-break: break-all;}

.verticle-flex-row .verticle-tb .stitle:after{
  content: ':';
  display: inline-block;
  position: absolute;
  right:  0;
  top:  0;
  padding: 0 4px;

}


.verticle-flex-row +  .rwd-table thead{border-top:0;}




/* final */

.warning_block {font-size: 0.875rem; color: #ea575f; width: 620px; margin-right:  0; margin-left: auto; margin-bottom: 70px;}
.warning_block .title{ font-weight: bolder; margin-bottom: 10px;}
.warning_block .cont{line-height: 1.8;}


.qrcode_block .icn_alert{ width: 60px; height: 52px; vertical-align: middle;}

/* finish */

.wording_block p{  font-size: 1.125rem; }
.wording_block p a{color:#ea575f;}
.wording_block p a:hover{text-decoration: underline;}
.wording_block .btn{color: #fff; }
.wording_block .btn:hover{text-decoration:none; }
.black-text{ color: #000; }

.transaction-info_block{ color: #6b6d70; margin-top: 90px; border-bottom:1px solid #cfd0d0; padding-bottom: 10px;font-size: 1.125rem; }
.transaction-info_block div{margin-bottom: 5px;}
.tb-cart_block .rwd-table .main-item .code{display: block; color: #6b6d70;}

.qrcode_block{ display: -webkit-box; display: -ms-flexbox; display: flex; padding:30px 0;  }
.qrcode_block .wording{ padding:0 0 30px ; width: 50%; }
.qrcode_block .qrcode{padding:0 80px; width: 50%; color: #6b6d70; font-size: 1.125rem; display: inline-flex; align-items: center;justify-content: flex-end;}

.qrcode_block .qrcode .inner-center { width: 320px; max-width: 100%; }

.qrcode_block .qrcode .main{width:100%; margin-top:5px; display: block;}

.qrcode_block .title{  font-size: 1.5625rem; color: #ea575f; font-weight: bolder; text-align: center; margin-bottom: 30px;}
.qrcode_block .subtitle{font-size: 1.5625rem;color: #ea575f; font-weight: normal; text-align: center;  margin-bottom: 10px}
.qrcode_block p{color: #6b6d70;font-size: 1.125rem; line-height:2.11; text-align: center; }
.qrcode_block p strong{ color: #ea575f; font-weight: bolder; }

.bitcion .wording{font-size: 1rem; text-align: left; line-height: 2; }
.bitcion p{text-align: left;}
.bitcion .qrcode{ text-align: center;  font-size: 1.125rem; font-weight: bolder;}
.bitcion .qrcode img{margin: 20px 0; }
.bitcion .qrcode p{font-size: 1.125rem; line-height: 1.2;}
.bitcion .qrcode .price{font-size: 1.125rem; font-weight: normal;}

.bitcion .icn_copy{float: right; margin-right: -36px;}
 
.success_block{background-color: #fff;padding:20px 18px;  font-size: 1.125rem; color: #ea575f; line-height: 2; margin-top: 30px; margin-bottom: 60px;}
.success_block a{color: #002bbf;}
.success_block a:hover{text-decoration: underline;}


@media (max-width: 1279px){
.goods_block .item-row{width: calc(50% - 36px ); }
}




@media (max-width:900px){ 


}

@media (max-width:767px){ 
  .relative_block .goods_block {margin: 0 -10px 0 -10px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 
  .relative_block .goods_block .item-row {    width: calc(50% - 20px); margin-right: 10px;margin-left: 10px;margin-top: -2px; margin-bottom: 40px;}

  .goods_block .item-row{width: calc(50% - 36px); }
.swiper_block{display: block;}
.goods_info .cover img{
    width: 100%;
    margin: 0 auto;
}
.goods_block{margin:0 0px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row}
.verticle-flex-row{
  border-bottom: 0px solid #cfd0d0;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; padding: 0 0px;}
.swiper_block .gallery-thumbs {
    padding: 0 0 40px 0;
    margin-left: 0px;
    margin-top: 10px;
}

.qrcode_block .wording, .qrcode_block .qrcode{ width: 100%;justify-content: center; padding: 0 0px; }

.verticle-flex-row .verticle-tb {width: 100%;}
.verticle-flex-row .verticle-tb .cont div{padding-right:0px; padding-left:0px;}
.verticle-tb .title, .verticle-tb .cont, .tb-cart_block .rwd-table td{padding-right:0px; padding-left:0px;}

.warning_block{width: 90%; margin:0 auto 40px auto;}

.process_block{margin-bottom: 40px;}
.process_block li .title{ text-align: center;}
.process_block li .title:before{display: block; margin:0 auto 10px;}
.process_block li{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 0.875rem;}
.process_block li:after{margin:0 8px; height: 11px;}

.tb-cart_block .rwd-table td{ text-align: left; }
.tb-cart_block .rwd-table tr{display: block; position: relative; padding-bottom: 10px;  border-right:0; border-left:0;}
.tb-cart_block .rwd-table tr:first-of-type{border-top: 1px solid #cfd0d0;}
.tb-cart_block .rwd-table thead{display: none;}
.tb-cart_block .rwd-table th:first-of-type, .tb-cart_block  .rwd-table td:first-of-type {    padding-left: 10px;}
.tb-cart_block .rwd-table td{ padding-bottom: 0;}
.tb-cart_block .rwd-table td.main-item:before, .tb-cart_block .rwd-table td.item-remove:before{ display: none; }
.verticle-flex-row .verticle-tb .title,  .tb-cart_block .rwd-table td:first-of-type{padding-left: 0px; width: auto;}



.tb-cart_block .rwd-table td{width:calc(100% - 50px); display: flex; align-items: center;  }
.tb-cart_block .rwd-table td.item-remove{ position: absolute;  top: 38px; right: 0;padding-right: 0px; width: 24px;}
.tb-cart_block .rwd-table .cover img{width: 60px;}
.subtotal_block{ padding-left: 0; text-align: right; }
.subtotal_block .title, .subtotal_block .price{ display: inline; }
.subtotal_block .title{padding-right: 10px;}

.tb-cart_block .no-remove td{width:100%; display: flex; align-items: center;  }

.qrcode_block{display: block; border-top: 1px solid #cfd0d0;}
.qrcode_block.bitcion{border-top: 0px;}
.bitcion .qrcode, .qrcode_block .qrcode {    padding-right: 40px;  padding-left: 40px;}

.subtotal_block{ display: block}
.subtotal_block .title{  font-size: 0.875rem;}
.subtotal_block .price, .total_block .price{ text-align: left; font-size: 0.875rem; width: 200px; display: inline-block; }

.verticle-flex-row .verticle-tb.full{ 

  padding: 0px 0px; 
}


}
@media (max-width:480px){ 
  .goods_block .item-row{
    width: 100%; 
    margin: 0 0 40px 0;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 
    flex-direction: column;
  } 
  .goods_block .conts .item .price{display: block; padding-top: 5px;}
}


/* -------影音------- */
#page-video .inner-tab{margin-left: 55px;margin-bottom: 0px; }
#page-video .inner-tab .nav{margin-top: 0px;}
.inner-tab .active , .inner-tab .active a, .inner-tab a:hover{ color: #ea575f; }


h1.inner-tab a{font-size: 1.125rem; font-weight: bolder;  padding: 15px 16px;  padding:15px 1rem; }
.inner-tab{padding-bottom: 0px;}
.inner-tab a{ color:#000; padding-right:24px;  font-size: 1.125rem; line-height: 1; }
.inner-tab a.active{ color:#ea575f; }

.song-list_block.mv_block .item-row .cover{ width: 34.62%; margin-right: 12px; flex: auto;}
.song-list_block.mv_block .item-row .conts{width: calc(100% - 34.62% - 12px);}

@media (max-width:1023px){
  #page-video .inner-tab{margin-left: 24px; }
}

@media (max-width:767px){ 

#page-video .inner-tab .nav {    margin-top: 0px;margin-bottom: 20px;}
#page-video .inner-tab .nav li a{padding: 0 1rem;}
}
/* -------最新消息------- */
#page-news .inner-main-box h1{margin-bottom: 37px;margin-top: 15px;}
.news-list_block ul, .news-list_block li{margin:0; padding:0; list-style-type:none ;font-size: 1.125rem;}
.news-list_block li{border-bottom:1px solid #cfd0d0;padding-bottom: 19px; margin-bottom: 18px;font-size: 0.875rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.news-list_block li a{font-size: 0.875rem; color:#000;}
.news-list_block li a:hover, .news-list_block li a:focus{color: #ea575f;}
.news-list_block li .date{color:#6b6d70;white-space: nowrap;}

/* 左側 */

.song-list_block {}
#page-news .inner-sidebar-box .title{ line-height: 1;margin-bottom: 25px}
.song-list_block  .item-row{    
  -webkit-box-align: start;    
      -ms-flex-align: start;    
              -ms-grid-row-align: flex-start;    
          align-items: flex-start; 
  border-bottom: 1px solid #cfd0d0;
  padding-bottom: 28px; 
  margin-bottom: 40px;
  
   width: auto;
 }
.song-list_block  .item-row .cover{ -webkit-box-flex:0; -ms-flex:0 0 100px; flex:0 0 100px; margin-right: 17px;}
  .song-list_block  .item-row .cover img{ width: 100%; }
  .song-list_block  .cover .icn {    margin-right: 9px;}

   .song-list_block  .cover .icn_block{margin-top: 9px;height: 24px;}
.song-list_block  .item-row .conts{ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }

.song-list_block  .item-row .word-black{font-size: 0.875rem;}
.song-list_block  .item-row .artist{font-size: 0.875rem;}
.song-list_block  .item-row  .item{font-size: 0.875rem; padding-bottom:3px; line-height: 1.7;}
.song-list_block  .item-row  .item:first-of-type{ line-height: 1; }
.song-list_block  .item-row  .price{font-size: 0.875rem;}

/* 詳頁 */
.KV_block{

/* 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: inline-flex; 

  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: row;
  flex-direction: row; 
  

  -webkit-box-align: stretch; 
  -ms-flex-align: stretch; 
  align-items: stretch;


  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
    */ 
   }
.KV_block img{ vertical-align: top; margin-bottom: 10px; 
 margin-right: 6px;

   width:auto;
   max-width:100%; 
   display: inline-block;
  
 }

.KV_block .map{ margin-bottom: 10px;background-color: #fff;  position: relative; overflow: hidden; display: inline-block; width:300px;}
.KV_block .map:before{ content: ''; display: block; padding-top: 100%; }
.KV_block .map iframe{position: absolute; width: 100%; height: 100%; top: 0;}

.info_block{margin-top:15px; margin-bottom: 30px;  font-size: 0.875rem; color: #828282; text-align: right;}
.info_block .source{ padding-left: 20px; }

.share_block{ margin-top: 140px; text-align: left; }
.share_block .btn-box{display: inline-block; margin-left: 140px;}
.share_block .btn-box a{ padding: 2px 7px;
    color: #466063;
    display: inline-block;
    border: 1px solid #466063;
    font-weight: bolder;

    font-size: 0.875rem;
}
.share_block .btn-box a:hover,.share_block .btn-box a:focus{background-color: #466063; color: #fff;}

#page-news hgroup{margin: 25px 0;}
#page-news h2{  font-size: 1.125rem; color: #000;  }
#page-news .info, #page-news .info li{ margin: 0; padding: 0; list-style-type:none ; display: inline-block; padding-right: 15px;  font-size: 0.875rem;}

.activity_info_block, .activity_info_block li{margin:0; padding:0; list-style-type:none ;font-size: 0.875rem;}

.modal .text-center .modal-footer{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.modal .form-control{border:0;}

#page-news .htmleditor ,#page-news .htmleditor p{font-size: 0.875rem;}


@media (min-width:768px){


.song-list_block  .cover .icn {width: 24px; height: 24px; } 
.song-list_block  .cover .icn.icn_cart_check{ width: 30px; margin-right: 0;}
}
@media (max-width:1023px){

#page-news .inner-main-box h1{margin-top: 0px;}
}
@media (max-width:767px){
.share_block{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.share_block .btn-box{ margin-left: 0px; margin-top: 10px; }
.news-list_block li .date{font-size: 0.875rem;}

.KV_block{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  }
.KV_block img{width: 100%;}
.KV_block .map{ width: 300px;margin: 0 auto; }

.album_info .share_block {    -webkit-box-align:center;    -ms-flex-align:center;    -ms-grid-row-align:center;    align-items:center;}
.album_info .share_block .fb-like{margin-top: 10px;}

.goods_info .share_block{margin-top: 0;}

}
/* -------會員專區------- */
#page-membercenter h1{margin-bottom: 15px; margin-top: 0px;}
#page-membercenter .inner-sidebar-box .side_menu_box{}
#page-membercenter .inner-sidebar-box .side_menu_box a{
    display: block;
    color: #000000;
    font-size: 1.125rem;
    margin-bottom: 30px;
}
#page-membercenter .inner-sidebar-box .side_menu_box a:hover, 
#page-membercenter .inner-sidebar-box .side_menu_box a:focus, 
#page-membercenter .inner-sidebar-box .side_menu_box a.active{ color: #ea575f; }

#page-membercenter .inner-sidebar-box .side_menu_box a:hover .icn, 
#page-membercenter .inner-sidebar-box .side_menu_box a:focus .icn, 
#page-membercenter .inner-sidebar-box .side_menu_box a.active .icn{ background-position: 0 100%;}

#page-membercenter .inner-sidebar-box .side_menu_box .icn{width: 28px; height: 28px; vertical-align: sub; margin-right: 10px;}


#page-membercenter .form-group .inp-inp, #page-membercenter .form-control{ font-size: 1.125rem; }


#page-membercenter  .btn-mem-save{ text-align: left; padding-left: 150px; margin-bottom: 40px;}
.admin-wording{ padding-right: 17px; padding-left: 17px; padding-top: 5px;  color: #6b6d70;  font-size: 0.875rem; text-align: right;}


.mem_block{
  margin-left: 0%;
  width: 600px;
  position: relative;
}

.mem_tb_block{ margin-left: 5%;    width: 85%;}
.mem_tb_block .word-black a{color: #000;}
.mem_tb_block td.word-black:before{display: none;}

.mem_tb_block .inner-tab:first-of-type a{padding-left: 0;}



.photo-righ{   position: absolute;    left: calc(100% - 25px);    top: 0px; width: 216px;}
.photo-righ .cover {margin-bottom: 10px; background: #fff url('../img/dummy/portrait-placeholder.png') 50% 50% no-repeat; background-size: cover;}
.photo-righ .cover:before{ display: block; content: ''; padding-top: 100%; }
.photo-righ .cover img{width: 100%; position: absolute; top: 0;}
.photo-righ a{ color: #466063; font-size: 0.875rem;display: inline-block; }
.photo-righ a:hover{    color: #ea575f;}
.photo-righ a .icn{ vertical-align: sub;  margin-right: 8px;}

.tb_member  th:first-of-type {   padding-left: 150px;}
.tb_member  td:first-of-type {   padding-left: 0px;}

.tb_member .price{font-size: 0.875rem;}

/* 我的私訊 */
.tb_message {color: #6b6d70; }
.tb_message .td-from{border-right:1px solid #cfd0d0; position: relative;}

.tb_message .td-from:before{
content: ''; display: inline-block;
  width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #cfd0d0;
    position: absolute;
    top: 20px;
    right: -20px;
  }

.tb_message .td-from:after{
content: ''; display: inline-block;
  width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #f2f2f2;
    position: absolute;
    top: 20px;
    right: -19px;}

.tb_message  td:first-of-type {   padding-left: 12px;}    
.tb_message .td-from a{color: #6b6d70;  font-size: 0.875rem;}
.tb_message .word-black {    color: #000;}
.tb_message .td-from a:hover{color:#ea575f; }
.tb_message .td-from img{ width: 56px;margin-right: 10px; }

.tb_message .td-mg{padding-left: 30px;  font-size: 0.875rem; line-height: 1.7; padding-top: 10px; padding-bottom: 8px;}
.tb_message .date{  font-size: 0.75rem; }
.fun-link{ text-align: right; float: right; }
.fun-link a{ color: #466063; font-size: 0.875rem;  display: inline-block; margin-left: 16px;}
.fun-link .icn{vertical-align: bottom; margin-right: 4px;}


/* 發送私訊、新增黑名單 modal */
/*.modal-add-message{width: 300px;margin:0 20px 0 auto; top: 196px;}*/

.modal-add-message .modal-body{padding:10px 15px;}
.modal-add-message .inner-tab .nav{margin:0;     -webkit-box-pack: end;     -ms-flex-pack: end;     justify-content: flex-end;}
.modal-add-message .inner-tab a{font-size: 0.875rem; color: #9fa0a0; padding-right: 0; padding-left: 20px;}
.modal-add-message .inner-tab a.active{ color: #fff;}
.modal-add-message .form-group{margin-bottom: 10px;}


.modal-add-message  .form-group label {
    font-size:0.875rem;
    color: #fff;
    margin-bottom: 0;
}
.modal-add-message .form-group > label {    width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap;}
.modal-add-message .form-group .inp-inp {  width: auto; -webkit-box-flex: 5; -ms-flex: 5; flex: 5;}
.modal-add-message .commentboad-replay {    padding: 0; }

.modal-add-message input.checkbox[type="checkbox"] + label{font-size: 12px;font-size: 0.75rem;}
.modal-add-message .form-group .inp-inp input{width: 100%;margin-right: 0px;}
.modal-add-message input.checkbox[type="checkbox"] + label {color: #fff;}


/* 購買資訊 */


.icn_detail_toggle{background-image: url('../img/ic/ic_detail-close.png');margin-right: 4px; width: 12px; height: 12px;vertical-align: middle; }
.collapsed .icn_detail_toggle{background-image: url('../img/ic/ic_detail-open.png'); }

#accordion td, #accordion td a{font-size: 0.875rem; line-height: 1.14; vertical-align: middle;}
#accordion td a:focus{color: #6b6d70;}
#accordion th:first-of-type{ padding-left: 40px;}
#accordion td:first-of-type {
    padding-left: 10px;
}
#accordion th:last-of-type, #accordion td:last-of-type{ padding-right: 10px;}
#accordion .price{font-size: 0.875rem;}
/* 明細 */
#accordion .panel-collapse .cont{padding-right: 10px; line-height: 1.66;}
#accordion .panel-collapse td{ background-color: #fff; text-align: left; color: #6b6d70;  font-size: 0.75rem; vertical-align: middle; text-align: center; }
#accordion .tb_detail{width: 100%;}

.link-red a{font-size: 0.875rem;color: #ea575f;}

#accordion .tb_detail tr{border:0;}

#accordion .tb_detail td, #accordion .tb_detail td:first-of-type{padding:0 0 5px 0; text-align: left;}
#accordion .panel-collapse td span{ padding-right: 10px; display: inline-block; }

#accordion .tb_detail td.sub-staus{width: 15.7%;}

#accordion .tb_detail td:empty:before{content: ' ';}
#accordion .tb_detail td:nth-of-type(1){ width:34%; }
#accordion .tb_detail td:nth-of-type(2){width:28%; text-align: center;}
#accordion .tb_detail td:nth-of-type(3){width:14%; text-align: left;}
#accordion .tb_detail td:nth-of-type(4){width:24%;}

/* 按下分享 的dropdown */
#accordion .panel-collapse td .dropsmallbox, .dropsmallbox{ position: relative;  }
#accordion .panel-collapse td .dropsmallbox > a, .dropsmallbox > a{font-size: 0.75rem; padding: 8px 0px 8px 0px; display: inline-block; color: #ea575f; }
#accordion .panel-collapse td .dropsmallbox > a:focus, .dropsmallbox > a:focus{ color: #ea575f; }
#accordion .panel-collapse td .dropsmallbox .dropdown-item, .dropsmallbox .dropdown-item{ color: #6b6d70; padding: 0 ; margin: 0px 0 8px 0; margin-bottom: 0;}


#accordion .panel-collapse td  .dropdown-menu{
  padding:11px 15px; left:  100%; 
  background-color: rgba(255,255,255,.8); border: 1px solid #466063; border-radius: 0;
  min-width: 84px;
  width: 280px;
}
#accordion .panel-collapse td .dropdown-item{padding:5px; color: #6b6d70;}
#accordion .panel-collapse td .dropdown-item:hover, #accordion .panel-collapse td .dropdown-item:focus{ color: #ea575f; }



.link-red{color:#ea575f;}
.icn_detail-ps{background-image: url('../img/ic/ic_detail-ps.png'); width: 16px; height:   16px; margin-right: 2px;vertical-align: text-top;}

.verticle-column{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.verticle-column > label{ text-align: center; }

.data-th-none:before, .td-mg:before{display: none;}

.ic_download-red{background-image: url('../img/ic/ic_download-red.png'); width: 16px; height:   16px; margin-right: 2px; vertical-align: middle;}
.ic_share-red{background-image: url('../img/ic/ic_share-red.png'); width: 16px; height:   16px; margin-right: 2px; vertical-align: middle;}

#myTabContent .tb_member td:first-of-type{padding-left: 12px;}


@media (max-width:1279px){
    .mem_tb_block{ margin:0 auto; width: 90%;  }

}

@media (max-width:1000px){
.photo-righ{position: relative; left: 150px;  }
}
@media (max-width:767px){

.tb_member .price{font-size: 0.875rem;}
  #page-download h1{margin-left: 0;}

.mw100{width: 100%!important;}
 #page-membercenter  .btn-mem-save{ text-align: center; padding-left: 0px; margin-bottom: 40px;}
 #page-video .inner-tab {margin-left: 0;} 
.mem_block{margin-left: 0%;  width: 100%;}
.mem_tb_block{ margin:0 auto; width: 100%;  }
.photo-righ{ left: 0;  }

.photo-righ a{font-size: 0.875rem;padding: 5px 0; }
.tb_member  th:first-of-type, .tb_member  td:first-of-type{   padding-left:10px;  padding-top:10px;}
.tb_member  td {   padding-left: 0px; padding:0 6px 10px 10px; text-align: left;}
.tb_message tbody tr{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;border:1px solid #cfd0d0; margin-top: 10px; }

.tb_message .td-from{border-bottom:1px solid #cfd0d0; border-right:0px solid #cfd0d0;padding: 10px;  width: 100%; margin-bottom: 5px;}
.tb_message .td-from:before{
    border-color: #cfd0d0 transparent transparent transparent;
    top: auto;
    bottom: -20px;
    left: 30px;
    padding-right: 0px;
  }
.tb_message .td-from:after{
    border-color: #f2f2f2 transparent transparent transparent;
    top: auto;
    bottom: -19px;
    left: 30px;
   
  }
 .tb_message .td-mg{padding:10px; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; padding-left: 15px; width: calc(100% - 105px );}
 .tb_message .td-btn{ width:auto; text-align: right;}
 
 .fun-link{margin-bottom: 5px;}
 .fun-link .icn{width: 20px; height: 20px;}
 .fun-link .icn-28{ width: 24px; height: 24px; }


#accordion .panel-collapse td .dropsmallbox, .dropsmallbox{ position: static;  }
#accordion td, #accordion td:first-of-type{padding:0 10px 10px 10px;}
#accordion td:first-of-type{padding-top: 10px;}
#accordion .td-item{ float: right; }
#accordion .panel-collapse td .link-red  .dropdown-item{  margin-bottom: 5px;}
#accordion .panel-collapse td .link-red  .dropdown-item:last-of-type{margin-bottom: 0px;}

.admin-wording{text-align: left;padding-left: 10px; padding-right: 10px;}
#accordion .panel-collapse td  .dropdown-menu{
  left: 50%!important;
    right: auto!important;
    transform: none!important;
    top: auto!important;
    
    margin-left: -140px;
}


}



/* -------聯絡我們------- */
#page-contactus{
  padding-top: 92px;
  margin-bottom: 40px;
}
.flex-row{display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -ms-flex-direction: row;  flex-direction: row; }
#page-contactus .htmleditor{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}
#page-contactus .htmleditor:first-of-type{}

#page-contactus .icn_btn_mail{ vertical-align: sub; }

@media (max-width:767px){
  .flex-row{display: block;}
  #accordion .tb_detail td:nth-of-type(1),
  #accordion .tb_detail td:nth-of-type(2),
  #accordion .tb_detail td:nth-of-type(3),
  #accordion .tb_detail td:nth-of-type(4){ width: 100%; text-align: left; }
}

/* -------交換區------- */
.btn-exchange{white-space: nowrap;}

.btn-exchange .dropdown-menu{
    background-color: #f2f2f2;
    border: 1px solid #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    padding: 0 6px;
    
    min-width: 180px;
    
  }
.btn-exchange .dropdown-item{text-align: left; top: 2px;padding: 4px 2px; border-bottom: 1px solid #cccccc;margin-bottom: 0; }
.btn-exchange .dropdown-item:hover{ border-bottom: 1px solid #cccccc; background-color: rgba(0,0,0,.1);}
.btn-exchange .dropdown-item:last-of-type, .btn-exchange .dropdown-item:last-of-type:hover{border-bottom:0;}
.btn-exchange .dropdown-item img{ /*height: 17px;*/ } /* 因為要求要視覺上大小一致，故不設置影像高度，須由製圖時就調整好大小。 */

.ic-select-arrow{
  background-image: url('../img/ic/ic_select.png'); 
  margin-left: 13px;
  padding-right: 0px;
  width: 20px; height: 20px; 
  background-position: 0 50%;
  background-size: contain;
  position: relative;
}
.ic-select-arrow:before{display: inline-block;    border-left: 1px solid #ffffff;position: absolute;  top: -5px;  bottom: -3px;content: '';margin-left: -14px;}

/* -------聊天室------- */
#page-chatroom{ background-color: #466063; min-height: calc(100% - 60px) ; position: relative;}
#page-chatroom .inner-main-box{width: 100%; height: 100%;  }
#page-chatroom .banner{margin-top: -18px;}
#page-chatroom .banner img{width: 100%;}
#page-chatroom h1{ color: #fff; margin: 35px auto 50px auto; text-align: center; font-weight: normal; }

.send-message-box{ 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: row; 
          flex-direction: row; 
  -webkit-box-pack: justify; 
      -ms-flex-pack: justify; 
          justify-content: space-between; 
  -webkit-box-align: stretch; 
      -ms-flex-align: stretch; 
          align-items: stretch; 
  color: #fff; 
  height: 25px;
  font-size: 0.875rem;
  width: 57%;
  margin: 0 auto;

}
.send-message-box .title{ padding-right: 18px;width: 66px;}
.send-message-box .form-control{ border:0; min-height:auto;   margin: 0; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; border:1px solid #c4c4c4;}
.send-message-box button{ line-height: 1; margin: 0; margin-left: 5px; width: 66px;    height: 25px;}

.send-message-box .form-control::-webkit-input-placeholder{color:transparent;}

.send-message-box .form-control::-moz-placeholder{color:transparent;}

.send-message-box .form-control:-ms-input-placeholder{color:transparent;}

.send-message-box .form-control::placeholder{color:transparent;}

.send-message-box .form-control:focus , .send-message-box button:focus{
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 10px rgba(255, 104, 93, 1);
}

.count-box{  font-size: 0.875rem; color: #fff; text-align: right; margin-bottom: 3px;}



.chatbox{ background-color: #f2f2f2; padding: 30px;  height: calc(100% - 350px); min-height: 160px; overflow-y: auto;}
.chatbox .data{margin-bottom: 10px;  font-size: 0.875rem;}

#ChatEmotes-flag{
  cursor: pointer; 
  width: 23px; 
  height: 23px;  
  text-align: center; 
  display: inline-block; 
  background-color:transparent;/*#fbb03b*/ 
   border-radius: 23px;
   margin-left: 5px; 
   position: relative;
 }

#ChatEmotes-flag .dropdown-menu{ right: 0!important; left: auto!important; }


.empty-box{ text-align: center; background-color: #fff; padding: 30px;}
.empty-box .ic-status-empty{ background-image: url('../img/ic/ic-status-empty.png'); width: 200px; height: 200px; margin-top: 15px; }
.empty-box .title{font-size: 1.125rem; color: #ea575f; margin:15px 0;}
.empty-box .wording{font-size: 0.875rem; color: #466063;margin:15px 0;}

@media (max-width:1279px){
#page-chatroom .banner{margin-top: 0;}
}

@media (max-width:767px){
  #page-chatroom{  height: auto; }
  .send-message-box{ width: 100%; }
  .count-box{margin-top: 10px;}
  .chatbox{height: 300px; padding: 10px; }
  .send-message-box .title{display: none;}
.send-message-box .form-control::-webkit-input-placeholder{color:#ccc;}
.send-message-box .form-control::-moz-placeholder{color:#ccc;}
.send-message-box .form-control:-ms-input-placeholder{color:#ccc;}
.send-message-box .form-control::placeholder{color:#ccc;}
#ChatEmotes-flag, .send-message-box button{margin-left: 16px;}
.send-message-box button{padding-left: 5px; padding-right: 5px;}
}

/* //////////////////////////內頁 ↑////////////////////////// */




/****************************
        給html編輯器使用 
****************************/

.htmleditor{ color: #000000; font-size: 14px; line-height: 1.4;}
.htmleditor ul{
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 30px;
}

.htmleditor  ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 30px;
}

.htmleditor li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.htmleditor table, .htmleditor td, .htmleditor th {
    border: 1px solid black;
}

.htmleditor  td {
    display: table-cell;
    vertical-align: inherit;
}

.htmleditor  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.htmleditor th {
display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
}

.htmleditor  thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.htmleditor tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.htmleditor p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.htmleditor  b , .html strong{
    font-weight: bold;
}

.htmleditor h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.html h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.htmleditor h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.htmleditor h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.htmleditor h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.htmleditor h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
