@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700&display=swap&subset=chinese-traditional);
@font-face {
  font-family: "jf-openhuninn";
  src: url(../font/jf-openhuninn-1.1.ttf) format("truetype");
}
*:focus {
  outline: none !important;
}

body, html {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "Arial", sans-serif;
  font-size: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ra-fixed {
  overflow: hidden !important;
}

.modal-hide {
  display: none !important;
}

button:focus {
  outline: none;
  cursor: pointer;
}

p, span {
  margin: 0;
  line-height: 1.5;
  color: #fff;
  letter-spacing: 1px;
}

.img-fluid {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}
a, a:active, a:visited {
  color: inherit;
}

ul, li {
  padding: 0;
  margin: 0;
}

* {
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

ul {
  list-style-type: none;
}

@media screen and (max-width: 920px) {
  *::-webkit-scrollbar {
    display: none;
  }
}
.chan-title p {
  font-size: 1.375rem;
  letter-spacing: 1px;
}

::-moz-selection {
  background: #289DBA;
  color: #fff;
}

::selection {
  background: #289DBA;
  color: #fff;
}

body {
  background: url("../img/bg_main.jpg") repeat-y;
  background-size: 100% auto;
}
body.locked {
  overflow-y: hidden;
}

.zidx-1 {
  z-index: 1;
}

.zidx-2 {
  z-index: 2;
}

.zidx-3 {
  z-index: 3;
}

.zidx-10 {
  z-index: 10;
}

.zidx-11 {
  z-index: 11;
}

.zidx-12 {
  z-index: 12;
}

.zidx-13 {
  z-index: 13;
}

.scrollbar-transparent::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.popup-modal {
  position: relative;
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.popup-modal.hide {
  display: none;
}
.popup-modal .btn-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.ui-textarea, input[type=text], input[type=number] {
  width: 100%;
  border-radius: 5px;
  font-size: 1rem;
}

.ui-textarea {
  padding: 10px;
}

input[type=text], input[type=number] {
  padding: 5px 10px;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.col-50 {
  width: 50%;
}

.ra-survey-radio[type=radio]:checked, .ra-survey-radio[type=radio]:not(:checked), .ra-survey-radio[type=checkbox]:checked, .ra-survey-radio[type=checkbox]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.ra-survey-radio[type=radio]:checked + label, .ra-survey-radio[type=radio]:not(:checked) + label, .ra-survey-radio[type=checkbox]:checked + label, .ra-survey-radio[type=checkbox]:not(:checked) + label {
  position: relative;
  padding: 4px 0px 4px 25px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.ra-survey-radio[type=radio]:checked + label:before, .ra-survey-radio[type=radio]:not(:checked) + label:before, .ra-survey-radio[type=checkbox]:checked + label:before, .ra-survey-radio[type=checkbox]:not(:checked) + label:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0px;
  width: 20px;
  height: 20px;
  border: 1px solid #289DBA;
  border-radius: 100%;
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.ra-survey-radio[type=radio]:checked + label:after, .ra-survey-radio[type=radio]:not(:checked) + label:after, .ra-survey-radio[type=checkbox]:checked + label:after, .ra-survey-radio[type=checkbox]:not(:checked) + label:after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 12px;
  left: 5px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.ra-survey-radio[type=radio]:checked + label:after, .ra-survey-radio[type=checkbox]:checked + label:after {
  background: #289DBA;
}

.ra-survey-radio[type=radio]:not(:checked) + label:after, .ra-survey-radio[type=checkbox]:not(:checked) + label:after {
  background: #fff;
}

.ra-survey-radio[type=radio]:checked + label span, .ra-survey-radio[type=checkbox]:checked + label span {
  color: #16E7E6;
}

header {
  background: rgba(73, 73, 73, 0.7);
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 2rem;
  width: 100%;
}

.top-menu-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.top-logo {
  width: 170px;
}

.top-menu-list {
    height: 80px;
}

.top-menu-list, .top-login-wrapper, .top-user-name, .ft-menu-list {
  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;
}

.top-login-wrapper {
  position: relative;
}
.top-login-wrapper.hide {
  display: none;
}

.avatar {
  margin-right: 0.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, from(#A9E724), to(#21B5DA));
  background: linear-gradient(to bottom, #A9E724 0%, #21B5DA 100%);
  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;
  cursor: pointer;
}

.top-login-wrapper.loginNotyet .top-user-name {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.top-login-wrapper.loginNotyet .top-user-name span {
  font-size: 1rem;
  padding-left: 5px;
}

.avatar > img {
  width: 36px;
  height: 36px;
}

.top-user-name {
  max-width: 72px;
}
.top-user-name span {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.top-menu-list span, .ft-menu-list span {
  font-size: 1.125rem;
}
.top-menu-list .icon-link, .ft-menu-list .icon-link {
  margin-right: 2rem;
}
.top-menu-list .icon-link:hover > span, .ft-menu-list .icon-link:hover > span {
  color: #98E13B;
}
.top-menu-list .social-link-yt, .top-menu-list .social-link-fb, .ft-menu-list .social-link-yt, .ft-menu-list .social-link-fb, .top-menu-list .social-link-twitter,.ft-menu-list .social-link-twitter {
  margin-right: 0.25rem;
}
.top-menu-list .social-link-yt, .ft-menu-list .social-link-yt {
  margin-left: 0rem;
}
.top-login-wrapper {
  margin-left: 2rem;
}
.top-menu-list a, .ft-menu-list a {
  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;
}

.social-link:before, .icon-link:before {
  content: "";
  display: block;
  width: 34px;
  height: 30px;
  background: url("../img/hdr_fb.svg") no-repeat;
  background-size: auto 30px;
}

.icon-link.li-artist:before {
  background-image: url("../img/hdr_artist.svg");
}

.icon-link.li-coop:before {
  background-image: url("../img/hdr_coop.svg");
}

.icon-link.li-app:before {
  background-image: url("../img/hdr_appdl.svg");
}

.icon-link.li-privacy:before {
    background-image: url("../img/ft_privacy.svg");
}

.icon-link.li-report:before {
  background-image: url("../img/ft_report.svg");
}

.social-link.social-link-yt:before {
  width: 100px;
  background-image: url("../img/hdr_yt.svg");
}

.social-link.social-link-ig:before {
  background-image: url("../img/hdr_ig.svg");
}

.social-link.social-link-twitter:before {
    background-image: url("../img/hdr_twitter.svg");
}

.social-link.social-link-fb:before {
  background-image: url("../img/hdr_fb.svg");
}

.top-login-popup-wrapper {
  position: absolute;
  top: 70px;
  right: 30px;
}
.top-login-popup-wrapper.hide {
  display: none;
}

.popup-modal.top-popup {
  position: static;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: 320px;
  height: auto;
}
.popup-modal.top-popup .btn-popup-close, .popup-modal.top-popup .popup-modal-container {
  position: static;
}
.popup-modal.top-popup .btn-popup-close {
  margin: 10px 10px 0 0;
  top: 0;
  right: 0;
}
.popup-modal.top-popup .popup-modal-container {
  height: auto;
  padding-top: 0;
}

.member-row {
  width: 100%;
  min-height: 40px;
  padding: 5px 0;
  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;
}
.member-row.flex-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 5px;
}

.member-row.member-row-third {
  min-height: 100px;
  max-width: 250px;
  margin: -10px auto 0 auto;
}

.member-row.modal-row-auto-h {
  min-height: 0;
}

.member-edit-area {
  display: block;
}
.member-edit-area.hide {
  display: none;
}

.btn-action, .btn-warning {
  height: 36px;
  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;
  background: #289DBA;
  border-radius: 3px;
}
.btn-action:hover, .btn-warning:hover {
  background: #1B7B93;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn-warning {
  background: #EB0000;
}
.btn-warning:hover {
  background: #C80101;
}

.btn-len-50 {
  width: 48%;
  margin: 0 1%;
}

.btn-len-100 {
  width: 100%;
}

.btn-member-edit {
  width: 64px;
  height: 100%;
  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;
}
.btn-member-edit.active p, .btn-member-edit:hover p {
  color: #289DBA;
}
.btn-member-edit.active::before, .btn-member-edit:hover::before {
  background-image: url("../img/icon_edit_on.svg");
}
.btn-member-edit:before {
  margin-right: 3px;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../img/icon_edit.svg") no-repeat center center;
  background-size: 20px auto;
}

.avatar-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.avatar-list-box {
  width: 240px;
  height: 50px;
  white-space: nowrap;
  overflow: hidden;
}

.avatar-list {
  height: 100%;
}
.avatar-list > .avatar-slide {
  display: inline-block;
  height: 100%;
  width: 250px;
}

.avatar-prev, .avatar-next {
  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;
  opacity: 0.2;
  width: 30px;
  height: 100%;
  cursor: default;
}
.avatar-prev.active, .avatar-prev.active:hover, .avatar-next.active, .avatar-next.active:hover {
  opacity: 1;
  cursor: pointer;
}
.avatar-prev:after, .avatar-next:after {
  font-family: swiper-icons;
  font-size: 24px;
  text-transform: none !important;
  color: #fff;
}

.avatar-next:after {
  content: "next";
}

.avatar-prev:after {
  content: "prev";
}

.btn-avatar {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  padding: 3px;
  margin: 0 2px;
  background: #0F4A58;
}
.btn-avatar:hover, .btn-avatar.active {
  background: -webkit-gradient(linear, left top, left bottom, from(#A9E724), to(#21B5DA));
  background: linear-gradient(to bottom, #A9E724 0%, #21B5DA 100%);
}
.btn-avatar:hover img, .btn-avatar.active img {
  opacity: 1;
}
.btn-avatar img {
  width: 38px;
  height: auto;
  opacity: 0.7;
}

.btn-facebook-login {
  width: 100%;
  height: 40px;
  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;
  border-radius: 4px;
  background-color: #1877F2;
}
.btn-facebook-login::before {
  margin-right: 3px;
  content: "";
  display: block;
  width: 34px;
  height: 30px;
  background: url("../img/hdr_fb.svg") no-repeat center center;
  background-size: auto 30px;
}
.btn-facebook-login.active, .btn-facebook-login:hover {
  background-color: #1160C5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.btn-facebook-login.active::before, .btn-facebook-login:hover::before {
  background-image: url("../img/hdr_fb.svg");
}

.top-app-popup-wrapper, .top-artist-popup-wrapper {
  position: absolute;
  top: 70px;
  right: 300px;
}
.top-app-popup-wrapper.hide, .top-artist-popup-wrapper.hide {
  display: none;
}

.top-artist-popup-wrapper {
  right: 570px;
}

.top-app-popup-wrapper-min, .top-artist-popup-wrapper-min {
  position: absolute;
  top: 70px;
}
.top-app-popup-wrapper-min {
  right: 90px;
}

.top-artist-popup-wrapper-min {
  right: 360px;
}

.popup-body-appdl {
  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;
}
.popup-body-appdl > a {
  width: 46%;
  margin: 0 2%;
}
.popup-body-appdl > a > img {
  width: 100%;
  height: auto;
}

.popup-body-artist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem 0;
}
.popup-body-artist > .chan-avatar-box {
  width: 100px;
}

footer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background: #000;
  padding: 1rem 140px 1rem 0;
}

.footer-wrapper {
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icon-link.li-report {
  margin-right: 0;
}

.ft-copyright {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.menu-prog-open, .menu-prog-main {
  position: fixed;
}

.menu-prog-group-wrapper, .menu-prog-group-box {
  width: 400px;
  height: 100%;
}

.menu-prog-open {
  top: calc(50vh - 100px);
  left: 0;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
          box-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.8);
  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;
}
.menu-prog-open.hide {
  display: none;
}

.prog-open-icon:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/btn_proglist.svg) no-repeat center center;
  background-size: 24px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.prog-open-btn {
  position: relative;
  width: 44px;
  height: 44px;
}
.prog-open-btn.live-mode:before {
  position: absolute;
  content: "LIVE";
  color: #FFBAB6;
  position: absolute;
  bottom: 0;
  left: 10px;
  font-size: 9px;
  letter-spacing: 1px;
}
.prog-open-btn.live-mode .prog-open-icon {
  display: block;
  position: absolute;
  left: 10px;
  top: 3px;
  width: 24px;
  height: 24px;
}
.prog-open-btn.live-mode:after {
  top: -3px;
}

.live-mode::after {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  content: attr(data-live-num);
  background: #EB0000;
  font-size: 10px;
  font-family: "Arial";
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}

.menu-prog-main {
  width: 480px;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: strenth;
      -ms-flex-align: strenth;
          align-items: strenth;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.menu-prog-main.hide {
  left: -480px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.menu-prog-nav {
  width: 80px;
}
.menu-prog-nav ul {
  width: 100%;
  height: 100%;
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.menu-prog-nav .navitem {
  position: relative;
  width: 60px;
  height: 50px;
}
.menu-prog-nav .navitem p {
  font-size: 1rem;
  color: #fff;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.menu-prog-nav .navitem.active .txt-variety {
  color: #90E9FF;
}
.menu-prog-nav .navitem.active .txt-life {
  color: #2C87F1;
}
.menu-prog-nav .navitem.active .txt-games {
  color: #B8996A;
}
.menu-prog-nav .navitem.active .txt-sports {
  color: #FDD001;
}
.menu-prog-nav .navitem.active .txt-music {
  color: #6EB92B;
}

.prog-close-icon:before {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  content: "";
  background: url(../img/btn_proglist_close.svg) no-repeat center center;
  background-size: 20px auto;
}

.menu-prog-group-box {
  padding: 5px 0;
}
.menu-prog-group-box.group-sports {
  background: rgba(114, 93, 0, 0.5);
}
.menu-prog-group-box.group-games {
  background: rgba(89, 75, 55, 0.5);
}
.menu-prog-group-box.group-variety {
  background: rgba(15, 74, 88, 0.5);
}
.menu-prog-group-box.group-life {
  background: rgba(76, 101, 130, 0.5);
}
.menu-prog-group-box.group-artist {
  background: rgba(120, 88, 88, 0.5);
}
.menu-prog-group-box.group-music {
  background: rgba(44, 83, 8, 0.5);
}

.menu-prog-chan-scrollbar-wrapper {
  width: 100%;
  height: 100%;
}

.menu-prog-chan-wrapper {
  width: 100%;
  padding: 0;
  padding-right: 10px;
}

.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #fff;
  opacity: 0.7;
}

.scrollbar-inner > .scroll-element.scroll-y {
  width: 6px;
}

.prog-day-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.prog-text-info {
  height: 60px;
  padding: 10px 20px;
  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;
}
.prog-text-info .pg-time {
  width: 70px;
  text-align: left;
}
.prog-text-info .pg-title {
  width: calc(100% - 80px);
}

.prog-day-hdr {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.25);
}

.prog-day-body > .prog-day-body {
  width: 100%;
}

.prog-dayitem-wrapper {
  display: block;
  border-bottom: 1px dotted #fff;
}
.prog-dayitem-wrapper:hover {
  background: rgba(0, 0, 0, 0.25);
}

.prog-live-img {
  margin: 0 auto;
  width: 320px;
  position: relative;
}

.prog-live-btn {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 36px;
  height: 36px;
  background: -webkit-gradient(linear, left top, left bottom, from(#A9E724), to(#21B5DA));
  background: linear-gradient(to bottom, #A9E724 0%, #21B5DA 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  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;
  padding-left: 3px;
}
.prog-live-btn:before {
  content: "";
  width: 14px;
  height: 14px;
  background: url(../img/btn_tri_right.svg) no-repeat center center;
  background-size: 14px auto;
}

.prog-live-tag {
  position: absolute;
  left: 5px;
  top: 5px;
  background: #EB0000;
  border-radius: 3px;
  width: 46px;
  height: 20px;
  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;
}
.prog-live-tag:before {
  content: "LIVE";
  font-family: "Arial";
  font-size: 12px;
  letter-spacing: 2px;
  padding-bottom: 2px;
}

.live-counter-info {
  width: 100%;
  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;
  margin: 0px 0;
  padding: 5px 0;
}
.live-counter-info span {
  color: #fff;
  font-size: 0.875rem;
}

.icon-eye-info, .icon-ppl-info {
  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;
  width: 40%;
}
.icon-eye-info > *, .icon-ppl-info > * {
  margin-right: 5px;
}
.icon-eye-info:before, .icon-ppl-info:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/icon_live_eye.svg) no-repeat center center;
  background-size: 20px auto;
  margin-right: 5px;
}

.icon-eye-info {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.icon-ppl-info:before {
  background-image: url(../img/icon_live_ppl.svg);
}

.kv-sec {
  background-color: rgba(73, 73, 73, 0.7);
  height: calc(100vh - 100px);
  width: 100%;
  position: relative;
}

.kv-sec-container, .msg-carousell.idx-vod-slider {
  margin: 0 auto;
  max-width: 1240px;
}

.kv-sec-container {
  height: 100%;
}

.kv-sec-container.hide, .kv-sec-container.kv-sec-container-live.hide, .kv-scrolldown-wrapper.hide {
  display: none;
}

.kv-scrolldown-wrapper {
  position: absolute;
  width: 44px;
  height: 44px;
  left: calc(50% - 22px);
  bottom: 0;
  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;
}

.kv-scroll-down {
  width: 100%;
}

.msg-carousell {
  width: 100%;
  height: auto;
}

.ra-swiper-relative {
  border: 0px solid green;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff;
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 1.875rem;
}

.iframe-relative-16to9 {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-relative-16to9 iframe, .iframe-relative-16to9 object, .iframe-relative-16to9 embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ad-wrapper-idx-vod, .idx-vod-title-wrapper {
  width: 720px;
  margin: 0 auto;
}

.ad-wrapper-idx-vod.underVod {
  width: 720px;
}

.ad-wrapper-idx-vod.underPlayerPc {
  width: 720px;
  margin: 0;
}

.ad-wrapper-idx-vod.underIndexPlayer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.idx-vod-title-wrapper {
  height: 95px;
}

.idx-vod-title-box {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.vod-chan-title-wrapper {
  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;
}

.chan-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: url("../dataimg/channel_logo_default.jpg") no-repeat center center;
  background-size: 64px auto;
  margin-right: 1rem;
}

.vod-chan-info {
  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-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.chan-countdown-info, .chan-ct-icon-title, .chan-ct-value {
  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;
}

.chan-ct-icon-title {
  margin-right: 0.5rem;
}
.chan-ct-icon-title:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/icon_vod.svg) no-repeat center center;
  background-size: 20px auto;
  margin-right: 0.5rem;
}

.hlight-num {
  font-size: 150%;
  color: #98E13B;
  padding: 0 0.25rem 0 0.5rem;
}

.btn-donate {
  display: block;
  width: 53px;
  height: 75px;
  background: url("../img/btn_donate_coin.svg") no-repeat center top, url("../img/btn_donate_txt.png") no-repeat center bottom;
  background-size: 53px auto, 53px auto;
  margin: 10px;
}

.btn-donate.btn-flash {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.btn-donate.btn-flash:before {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  width: 30px;
  height: 35px;
  border-radius: 20px;
  left: 0;
  top: 2px;
  opacity: 1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-animation: btnDonateHoverLight 1.5s linear infinite;
          animation: btnDonateHoverLight 1.5s linear infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}

.msg-carousell.idx-vod-slider {
  border: 0px solid red;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.msg-carousell.idx-vod-slider .ra-swiper-relative {
  border: 0px solid blue;
  max-width: calc(100% - 60px);
}
.msg-carousell.idx-vod-slider .swiper-container {
  max-width: 100%;
}
.msg-carousell.idx-vod-slider .swiper-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.msg-carousell.idx-vod-slider .idx-vod-video-wrapper, .msg-carousell.idx-vod-slider .swiper-slide {
  /* 1280x720 px */
  width: 720px;
  height: 405px;
}
.msg-carousell.idx-vod-slider .idx-vod-video-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.msg-carousell.idx-vod-slider .swiper-slide {
  opacity: 0.8;
}
.msg-carousell.idx-vod-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.msg-carousell.idx-vod-slider .swiper-button-prev, .msg-carousell.idx-vod-slider .swiper-button-next {
  top: 50%;
}
.msg-carousell.idx-vod-slider .swiper-button-next {
  right: -30px;
  left: auto;
}
.msg-carousell.idx-vod-slider .swiper-button-prev {
  left: -30px;
  right: auto;
}

.youtube-thumbnail-box {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

.group-sec {
  min-height: 400px;
}

.group-variety {
  background-color: rgba(15, 74, 88, 0.7);
}

.group-life {
  background-color: rgba(76, 101, 130, 0.7);
}

.group-games {
  background-color: rgba(89, 75, 55, 0.7);
}

.group-artist {
  background-color: rgba(120, 88, 88, 0.7);
}

.group-sports {
  background-color: rgba(114, 93, 0, 0.7);
}

.group-music {
  background-color: rgba(44, 83, 8, 0.7);
}

.group-sec-container {
  padding: 2rem 0 2rem 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.group-title-col {
  width: 260px;
  border: 0px solid red;
  padding-top: 10px;
}

.group-chanlist-col {
  border: 0px solid red;
  width: calc(100% - 260px);
}

.group-name-wrapper {
  border: 0px solid red;
  width: 180px;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.group-name-zh {
  color: rgba(255, 255, 255, 0.5);
  font-size: 80px;
  font-weight: 300;
  margin-top: -20px;
}

.group-name-en {
  color: #D7D7D7;
  margin-top: -1rem;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 10px;
}

.idx-chanlist-box {
  padding: 1rem 0;
}

.idx-chanlist-hdr {
  padding: 0 2rem 0.5rem 0rem;
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: url(../img/idx_chan_list_hdr_bg.png) no-repeat center bottom;
  background-size: 100% auto;
}

.idx-chanlist-title-wrapper, .idx-chanlist-cal-wrapper {
  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;
}

.btn-chan-enter::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/btn_chan_enter.svg) no-repeat center center;
  background-size: 18px auto;
  margin-left: 0.5rem;
}

.chan-time-info {
  margin-right: 1rem;
}

.chan-time-icon-note {
  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;
}
.chan-time-icon-note span {
  font-size: 0.875rem;
}
.chan-time-icon-note:before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../img/icon_calendar.svg) no-repeat center center;
  background-size: 15px auto;
  margin-right: 0.5rem;
}

.btn-addcalendar, .btn-normal {
  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;
  background: -webkit-gradient(linear, left top, left bottom, from(#7CA91A), to(#15809A));
  background: linear-gradient(to bottom, #7CA91A 0%, #15809A 100%);
  -webkit-box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
          box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  width: 120px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0 5px 2px 5px;
}
.btn-addcalendar::before {
  content: "+";
  font-family: Arial;
  font-size: 1.125rem;
  color: #fff;
  margin-top: 2px;
  margin-right: 5px;
}
.btn-addcalendar span, .btn-normal span {
  font-size: 0.875rem;
  color: #fff;
  line-height: 1;
  margin-top: 0;
  text-align: center;
}

.msg-carousell.idx-chanlist-slider {
  border: 0px solid red;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.msg-carousell.idx-chanlist-slider .ra-swiper-relative {
  width: 100%;
  padding-left: 50px;
}
.msg-carousell.idx-chanlist-slider .swiper-container {
  width: 100%;
  margin-right: 50px;
}
.msg-carousell.idx-chanlist-slider .swiper-btn, .msg-carousell.idx-chanlist-slider .swiper-button-next, .msg-carousell.idx-chanlist-slider .swiper-button-prev {
  height: 100%;
}
.msg-carousell.idx-chanlist-slider .swiper-button-next, .msg-carousell.idx-chanlist-slider .swiper-button-prev {
  top: 0;
  margin-top: 0;
  width: 60px;
}
.msg-carousell.idx-chanlist-slider .swiper-button-next::after, .msg-carousell.idx-chanlist-slider .swiper-button-prev::after {
  margin-top: -30px;
}
.msg-carousell.idx-chanlist-slider .swiper-button-prev {
  left: 0;
  background: none;
}
.msg-carousell.idx-chanlist-slider .swiper-button-prev::after {
  margin-left: -20px;
}
.msg-carousell.idx-chanlist-slider .swiper-button-next {
  border: 0px solid blue;
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.75)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}
.msg-carousell.idx-chanlist-slider .swiper-button-next:after {
  margin-right: -10px;
}
.msg-carousell.idx-chanlist-slider .swiper-button-disabled {
  opacity: 0;
}

.cl-video-prev-box {
  display: block;
}

.msg-carousell.idx-chanlist-slider .swiper-slide {
  width: 320px;
}
.msg-carousell.idx-chanlist-slider .swiper-slide:last-child {
  width: 350px;
  padding-right: 30px;
}

.cl-video-prev-box {
  width: 100%;
}

.cl-video-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 57%;
  overflow: hidden;
}
.cl-video-thumb-wrapper .thumb-time-len {
  display: block;
  background: #000;
  color: #fff;
  font-size: 0.875rem;
  padding: 3px 3px;
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.cl-video-desc {
  margin-top: 5px;
  width: 100%;
  overflow: hidden;
  padding: 0 5px;
}

.cl-video-desc p {
  font-size: 1.125rem;
  font-weigt: 300;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.type-clamp-two-lines {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}

.layer-float-banner {
  position: fixed;
}

.ad-wrapper-float-banner {
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  right: 10px;
  bottom: 10px;
  width: 120px;
}

.btn-ad-close, .btn-panel-close, .btn-popup-close {
  width: 20px;
  height: 20px;
}
.btn-ad-close:before, .btn-panel-close:before, .btn-popup-close:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/btn_close20.svg) no-repeat center center;
  background-size: 20px auto;
}

.btn-ad-close {
  margin-bottom: 5px;
}

.btn-panel-close {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  margin-top: 5px;
  z-index: 3;
}
.btn-panel-close:before {
  width: 24px;
  height: 24px;
  background-size: 24px auto;
}

.chat-panel-nickeditor {
  margin-top: -24px;
  z-index: 1;
}

.ad-float-banner-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ad-float-banner-img {
  width: 100%;
}

.btn-ad-close.hide, .ad-float-banner-img.hide, .ap-float-banner-shoplink.hide {
  display: none;
}

.ap-float-banner-shoplink {
  width: 100%;
  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;
  background: #000;
  font-size: 0.875rem;
  padding: 5px 0;
}
.ap-float-banner-shoplink:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/icon_shop.svg) no-repeat center center;
  background-size: 20px auto;
  margin-right: 0.25rem;
}

.txt-go-shopping:before {
  content: attr(data-txt-pc);
}

.kv-scroll-top {
  display: block;
  width: 44px;
  bottom: 1rem;
  right: 1rem;
  border-radius: 22px;
}

.kv-sec-container-live {
    max-width: 1360px;
    width: 98%;
    max-width: 90vw;
    width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.kv-live-wrapper {
  width: 100%;
  border: 0px solid blue;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
}

.kv-live-player-wrapper {
  width: calc(100% - 400px);
}

.kv-live-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.67%;
}

.main-video.hide {
  display: none;
}

video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.kv-live-runhorse {
  width: 99%;
  position: absolute;
  left: 0.5%;
  top: 5px;
}

.kv-live-chatroom {
  width: 400px;
  border: 0px solid red;
  background: #000;
}

.kv-live-videotool-wrapper {
  position: absolute;
  right: 0;
  top: 60px;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.5);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.live-vtool-item {
  height: 44px;
  width: 50px;
  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;
}
.live-vtool-item:before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/live/vtool/youtube.svg) no-repeat center center;
  background-size: 24px auto;
}
.live-vtool-item.vtool-admin:before {
  background-image: url(../img/live/chat/admin.svg);
}
.live-vtool-item.vtool-share:before {
  background-image: url(../img/live/vtool/share.svg);
}
.live-vtool-item.vtool-intro:before {
  background-image: url(../img/live/vtool/intro.svg);
}
.live-vtool-item.vtool-angle:before {
  background-image: url(../img/live/vtool/angle.svg);
}
.live-vtool-item.active:before, .live-vtool-item:hover:before {
  background-image: url(../img/live/vtool/youtube_on.svg);
}
.live-vtool-item.vtool-share.active:before, .live-vtool-item.vtool-share:hover:before {
  background-image: url(../img/live/vtool/share_on.svg);
}
.live-vtool-item.vtool-intro.active:before, .live-vtool-item.vtool-intro:hover:before {
  background-image: url(../img/live/vtool/intro_on.svg);
}
.live-vtool-item.vtool-angle.active:before, .live-vtool-item.vtool-angle:hover:before {
  background-image: url(../img/live/vtool/angle_on.svg);
}

.live-vtool-item.vtool-close {
  display: none !important;
}

.live-vtool-item.vtool-close:before {
    background-image: url(/assets/img/btn_close20.svg);
    background-size: 20px auto;
  }

.live-vtool-item.live-mode {
  position: relative;
}
.live-vtool-item.live-mode:after {
  content: " ";
  width: 10px;
  height: 10px;
  top: 5px;
  right: 5px;
}

.live-vtool-item-small {
  height: 20px;
  width: 20px;
  margin-right: 5px;
}
.live-vtool-item-small:before {
  width: 20px;
  height: 20px;
  background-size: 20px auto;
}

.kv-live-videotool-popup-wrapper {
  position: absolute;
  right: 51px;
  top: 60px;
  width: 280px;
}

.popup-modal.vtool-share {
  height: 150px;
}
.popup-modal.vtool-angle {
  height: 300px;
}
.popup-modal.vtool-info {
  height: 260px;
}

.popup-modal-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
}

.popup-header {
  width: 100%;
  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;
  padding: 5px 0 5px 0;
}
.popup-header p {
  line-height: 24px;
}

.popup-body {
  width: 100%;
}

.vtool-share-list {
  margin-top: 2rem;
  width: 100%;
  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;
}

.vtool-share-item {
  height: 36px;
  width: 25%;
  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;
}
.vtool-share-item:hover:before {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.vtool-share-item:before {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: block;
  content: "";
  width: 36px;
  height: 36px;
  background: url(../img/live/vtool/share_fb.svg) no-repeat center center;
  background-size: 36px auto;
}
.vtool-share-item.forFacebook:before {
  background-image: url(../img/live/vtool/share_fb.svg);
}
.vtool-share-item.forLine:before {
  background-image: url(../img/live/vtool/share_line.svg);
}
.vtool-share-item.forTwitter:before {
  background-image: url(../img/live/vtool/share_twitter.svg);
}

.vtool-info-scrollwrapper {
  height: 200px;
}

.vtool-info-body {
  padding: 10px;
  padding-right: 15px;
}
.vtool-info-body p {
  font-size: 0.875rem;
  line-height: 1.2;
  margin-bottom: 10px;
}

.vtool-angle-list > li {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 1rem 0;
}

.btn-angle-ctrl-video-child {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 64px;
}
.btn-angle-ctrl-video-child > span {
  font-size: 0.875rem;
  color: #fff;
}
.btn-angle-ctrl-video-child:after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/live/vtool/angle_item.svg) no-repeat center center;
  background-size: 20px auto;
}
.btn-angle-ctrl-video-child.active > span, .btn-angle-ctrl-video-child:hover > span {
  color: #16E7E6;
}
.btn-angle-ctrl-video-child.active:after, .btn-angle-ctrl-video-child:hover:after {
  background-image: url(../img/live/vtool/angle_item_on.svg);
}

.btn-angle-ctrl-video-parent {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.btn-angle-ctrl-video-parent > img {
  width: 170px;
  border: 2px solid #979797;
  opacity: 0.8;
}
.btn-angle-ctrl-video-parent.active > img, .btn-angle-ctrl-video-parent:hover > img {
  opacity: 1;
  border: 2px solid #16E7E6;
}

.runhorse-wrapper {
  width: 100%;
  height: 40px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.runhorse-fg {
  display: block;
  width: 200%;
  height: 36px;
  position: absolute;
  top: 2px;
  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;
}
.runhorse-fg.animated-marquee {
  -webkit-animation: marquee 10s linear infinite;
          animation: marquee 10s linear infinite;
}

.marquee {
  width: 800px;
  height: 100%;
  overflow: hidden;
  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;
}

.giftbox {
    display: block;
    width: 50px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: left center;
    overflow: hidden;
    background-image: url(/assets/img/live/gift.png);
    background-size: 100px 44px;
}
.giftbox.change-frame {
    background-position: right center;
}

.rh-father-name {
  float: left;
  width: 360px;
  height: 96%;
  margin: 0 5px;
  border-radius: 3px;
  background: -webkit-gradient(linear, left top, left bottom, from(#8DCE40), to(#429321));
  background: linear-gradient(to bottom, #8DCE40 0%, #429321 100%);
  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;
}
.rh-father-name .normal-p {
  font-size: 1rem;
  margin-right: 5px;
}
.rh-father-name .amount {
  font-size: 1.375rem;
  margin: 0 5px;
}
.rh-father-name .normal-p, .rh-father-name .amount {
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.rh-father-words {
  float: right;
  margin-top: 3px;
  padding-left: 20px
}
.rh-father-words > span {
  color: #9AFE34;
  font-size: 1.125rem;
}

.btn-donate-small {
  display: block;
  width: 75px;
  height: 30px;
  background: url("../img/btn_donate_coin.svg") no-repeat left center, url("../img/btn_donate_txt.png") no-repeat right center;
  background-size: 36px auto, 36px auto;
}

.btn-donate-small.btn-flash {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border-top-left-radius: 15px;
}

.btn-donate-small.btn-flash:before {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  width: 25px;
  height: 20px;
  border-radius: 18px;
  left: 0;
  top: 2px;
  opacity: 1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-animation: btnDonateSmallHoverLight 1.5s linear infinite;
          animation: btnDonateSmallHoverLight 1.5s linear infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}

.chat-hdr-donate-wrapper {
  height: 50px;
  padding-left: 0.5rem;
  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;
}

.chat-hdr-donate-people {
  width: 280px;
  height: 50px;
}

.swiper-container.for-chat-hdr-donate-ppl {
  width: 100%;
  height: 100%;
}

.chat-hdr-donate-ppl-slide {
  width: 100%;
  height: 100%;
  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;
}
.chat-hdr-donate-ppl-slide .normal-p {
  font-size: 1rem;
  color: #FEECA8;
}
.chat-hdr-donate-ppl-slide .amount {
  font-size: 1.5rem;
  font-weight: 500;
  color: #FDD001;
  margin-left: 8px;
  margin-right: 8px;
}

.live-counter-info.live-counter-info-chatroom {
  margin-top: 0px;
}
.live-counter-info.live-counter-info-chatroom > * {
  width: 50%;
}
.live-counter-info.live-counter-info-chatroom .icon-eye-info, .live-counter-info.live-counter-info-chatroom .icon-ppl-info {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.chatroom-body-wrapper {
  /* height: 525px; */
}

.chatroom-body-relative {
  position: relative;
  border: 0px solid red;
  width: 100%;
  height: 100%;
}

.ad-wrapper-chat {
  position: absolute;
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  bottom: 0;
}
.ad-wrapper-chat.hide {
  display: none;
}
.ad-wrapper-chat .ad-chat-img {
  width: 100%;
}

.chatroom-bulletin-wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0px;
  border: 0px solid red;
  padding: 0 1%;
}

.btn-chatroom-clear {
  margin-top: 5px;
  margin-left: auto;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #585858;
  opacity: 0.75;
}
.btn-chatroom-clear:hover {
  opacity: 1;
}
.btn-chatroom-clear:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/live/chat/btn_clean.svg) no-repeat center center;
  background-size: 24px auto;
}

.angle-video-child-wrapper {
  width: 100%;
  margin: 5px auto;
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.angle-video-child-wrapper.hide {
  display: none;
}

.small-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.67%;
}
.small-video-wrapper.hide {
  display: none;
}

.btn-chatroom-scrolldown {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, from(#A9E724), to(#21B5DA));
  background: linear-gradient(to bottom, #A9E724 0%, #21B5DA 100%);
}
.btn-chatroom-scrolldown::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/live/chat/btn_scrolldown.svg) no-repeat center center;
  background-size: 30px auto;
}

.chatroom-bulletin {
  width: 100%;
  height: auto;
  margin: 5px auto 0px auto;
  overflow: hidden;
  padding: 0.5rem 1rem 0 1rem;
  border-radius: 5px;
  background: #289DBA;
  cursor: pointer;
}
.chatroom-bulletin.hide {
  display: none;
}
.chatroom-bulletin.mode-one-line {
  height: 32.8px;
}
.chatroom-bulletin.mode-one-line p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chatroom-bulletin p {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  text-align: justify;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.chatroom-bulletin a {
  color: #FFED12;
}
.chatroom-bulletin a:hover {
  text-decoration: underline;
}

.chatroom-body-container-fixheight {
  background: #000;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 10px;
}

.chat-list {
  padding: 0 30px 0 16px;
}
.chat-list li {
  list-style-type: none;
  color: #ddd;
  padding: 5px 0;
}
.chat-list li > span {
  line-height: 18px;
  font-size: 1rem;
  letter-spacing: 0px;
  word-wrap:break-word;
}

.chatroom-input-wrapper {
  height: 48px;
  background: #2F2F2F;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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%;
}

.chatroom-input-box {
  width: 100%;
  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;
  height: 48px;
}
.chatroom-input-box.hide {
  display: none;
}

input[type=button].chat-emoji-small {
  background-color: transparent;
  border: 0;
  font-size: 0;
}

.chat-sticker-small {
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
  width: 70px;
  height: 70px;
}

.chat-emoji-small {
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
  width: 30px;
  height: 30px;
}

.chatNameInView span {
  color: inherit;
}
.chatNameInView span.chat-nick-colon {
  color: #fff;
}

.chatMsgWarning {
  color: #9AFE34;
}
.chatMsgWarning:before {
  content: "-- ";
}
.chatMsgWarning:after {
  content: " --";
}
.chatMsgWarning span {
  color: inherit;
}

.chat-nick-img {
  vertical-align: middle;
  width: auto;
  height: 20px;
}

.chat-message, .chat-nickname {
  padding-left: 5px;
  height: 100%;
  line-height: 48px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: none;
  border: none;
  font-size: 1rem;
  color: #fff;
  outline: none;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: pre;
}

.chat-message:empty:not(:focus):before, .chat-nickname:empty:not(:focus):before {
  content: attr(data-placeholder);
  opacity: 0.5;
}

[contenteditable=true] {
  white-space: nowrap;
  overflow: hidden;
}

[contenteditable=true] > * {
  display: inline-block;
}

.chat-message {
  max-width: calc(100% - 120px);
}
.chat-message.admin-mode {
  max-width: calc(100% - 156px);
}

.chat-nickname {
  line-height: 40px;
  padding: 0 8px;
}

.chat-color-toggle, .chat-icon-toggle, .btn-chat-send, .chat-admin-toggle {
  width: 36px;
  height: 48px;
}
.chat-color-toggle:before, .chat-icon-toggle:before, .btn-chat-send:before, .chat-admin-toggle:before {
  display: block;
  content: "";
  width: 100%;
  height: 48px;
  background: url(../img/live/chat/color.svg) no-repeat center center;
  background-size: 24px auto;
}

.btn-chat-send {
  width: 48px;
}

.chat-color-toggle {
  margin-left: 5px;
}

.chat-color-toggle.active:before, .chat-color-toggle:hover:before {
  background-image: url(../img/live/chat/color_on.svg);
}

.chat-admin-toggle:before {
  background-image: url(../img/live/chat/admin.svg);
}

.chat-admin-toggle.active:before, .chat-admin-toggle:hover:before {
  background-image: url(../img/live/chat/admin_on.svg);
}

.chat-admin-toggle.hide {
  display: none;
}

.chat-icon-toggle:before {
  background-image: url(../img/live/chat/icon.svg);
}

.chat-icon-toggle.active:before, .chat-icon-toggle:hover:before {
  background-image: url(../img/live/chat/icon_on.svg);
}

.btn-chat-send:before {
  background-image: url(../img/live/chat/send.svg);
}

.btn-chat-send:hover, .btn-chat-send.active, .btn-nick-send:hover {
  background-color: #289DBA;
}

.chat-nickname-box {
  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;
  width: 100%;
  height: 40px;
  margin: 0 auto;
}

.chat-nickname {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  background-color: #222222;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-nick-send {
  width: 64px;
  height: 100%;
  background-color: #494949;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-nick-send p {
  line-height: 40px;
  text-align: center;
}

.chat-color-panel, .chat-icon-panel {
  position: absolute;
  width: 100%;
  height: 240px;
  bottom: 48px;
  background: #000;
}
.chat-color-panel > *, .chat-icon-panel > * {
  display: block;
}
.chat-color-panel.hide, .chat-icon-panel.hide {
  z-index: 0;
  height: 1px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.chat-color-panel.hide > *, .chat-icon-panel.hide > * {
  display: none;
}

.chat-color-wrapper {
  width: 100%;
  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-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.chat-color-wrapper .chat-nickname-box {
  margin-top: 5px;
}

.chat-panel-row {
  padding: 10px;
  width: 100%;
}

.chat-icon-wrapper .chat-panel-row {
  padding: 10px 5px;
}

.chat-color-table, .chat-emoji-table {
  padding-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.chat-color-item {
  margin: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.5);
  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;
}

.chat-color-picker {
  cursor: pointer;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.chat-color-item.active, .chat-color-item:hover {
  border: 2px solid #fff;
}

.chat-icon-panel {
  height: 200px;
}

.chat-panel-row.for-tablist {
  padding: 0 10px;
  height: 48px;
  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;
}
.chat-panel-row.for-tablist .btn-panel-close, .chat-panel-row.for-tablist .btn-panel-close:before {
  height: 100%;
}

.chat-icon-tab {
  display: inline-block;
  width: 40px;
  height: 100%;
}
.chat-icon-tab:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/live/chat/emoji.svg) no-repeat center center;
  background-size: 24px auto;
}
.chat-icon-tab.active, .chat-icon-tab:hover {
  border-bottom: 3px solid #289DBA;
}

.chat-icon-tab.for-sticker::before {
  background-image: url(../img/live/chat/sticker.svg);
}

.chat-icon-tab.for-emoji.active:before, .chat-icon-tab.for-emoji:hover:before {
  background-image: url(../img/live/chat/emoji_on.svg);
}

.chat-icon-tab.for-sticker.active:before, .chat-icon-tab.for-sticker:hover:before {
  background-image: url(../img/live/chat/sticker_on.svg);
}

.chat-icon-tabbody, .chat-color-body {
  width: 100%;
  height: 140px;
  overflow-y: auto;
}
.chat-icon-tabbody > *, .chat-color-body > * {
  width: 100%;
}
.chat-icon-tabbody.hide, .chat-color-body.hide {
  display: none;
}

.chat-color-body {
  height: 90px;
}

.chat-emoji-table, .chat-sticker-table {
  padding-top: 0;
}
.chat-emoji-table > span, .chat-emoji-table > input[type=button], .chat-sticker-table > span, .chat-sticker-table > input[type=button] {
  margin: 4px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.chat-emoji-table > span:hover, .chat-emoji-table > input[type=button]:hover, .chat-sticker-table > span:hover, .chat-sticker-table > input[type=button]:hover {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chat-sticker-table {
  padding-left: 5px;
}
.chat-sticker-table > span {
  margin: 0;
  width: 70px;
  height: 70px;
  margin: 5px 2px;
}
.chat-sticker-table > span:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.page-popup-modal-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 20vh;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}
.page-popup-modal-wrapper.hide {
  display: none;
}

.popup-body-admin {
  width: 90%;
  margin: 0.5rem auto 1rem auto;
}

.ui-textarea-note {
  font-size: 0.75rem;
  color: #B6F06C;
  width: 100%;
  text-align: right;
}

.popup-body-admin .member-row {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.err_sec {
  width: 100%;
  height: calc(100vh - 168px);
  min-height: 600px;
  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;
}

.err_wrapper {
  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: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: -50px;
}

.err_img {
  width: 280px;
  height: auto;
}

.err_msg {
  text-align: justify;
  margin-bottom: 16px;
}

.chan-kv-container {
  margin: 0 auto;
  max-width: none;
}

.chan-kv-introbox {
  position: absolute;
  bottom: 0px;
  z-index: 2;
  bottom: 1px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.9)), color-stop(75%, rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%);
  width: 50%;
  height: 300px;
  max-width: none;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1.5rem 0 0 1.5rem;
}
.chan-kv-introbox .btn-donate {
  margin: 0;
}

.kv-sec.kv-sec-channel {
  width: 100%;
  max-height: none;
  min-height: 0;
  height: auto;
}
.kv-sec.kv-sec-channel.chan-kv-max1440 .chan-kv-container {
  max-width: 1440px;
}
.kv-sec.kv-sec-channel.chan-kv-max1440 .chan-kv-introbox {
  max-width: 720px;
  left: calc(50% - 720px);
}
.kv-sec.kv-sec-channel.chan-kv-max1280 .chan-kv-container {
  max-width: 1280px;
}
.kv-sec.kv-sec-channel.chan-kv-max1280 .chan-kv-introbox {
  max-width: 640px;
  left: calc(50% - 640px);
}

.chan-kv-intro-txt-col {
  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: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 2rem;
  width: 100%;
  padding-right: 1rem;
}

.chan-kv-intro-txt-hdr {
  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;
}
.chan-kv-intro-txt-hdr .chan-title {
  margin-right: 2rem;
}

.chan-kv-intro-txt-body-fixheight {
  height: 200px;
  overflow-y: auto;
}

.chan-kv-intro-txt-hdr, .chan-kv-intro-txt-body-fixheight {
  width: 100%;
}

.chan-kv-intro-txt-body {
  padding: 1rem 3rem 0 0rem;
}
.chan-kv-intro-txt-body p {
  margin-bottom: 0.5rem;
  text-align: justify;
}

.group-sec-container.forchannel {
  border: 0px solid red;
  padding: 0 0 3rem 0;
  max-width: 1440px;
  margin: 0 auto;
  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;
}

.group-chanlist-col.forchannel {
  width: 100%;
  max-width: 1380px;
}

.idx-chanlist-box.forchannel {
  width: 100%;
  margin: 1rem 0;
}

.idx-chanlist-hdr.forchannel {
  width: 100%;
  padding-left: 30px;
  padding-top: 30px;
  max-width: 1280px;
  margin: 0rem auto 2rem auto;
}
.idx-chanlist-hdr.forchannel .chan-title {
  padding-bottom: 0.5rem;
}

.msg-carousell.idx-chanlist-slider.forchannel, .msg-carousell.idx-chanlist-slider.forAvatarList {
  width: 100%;
  border: 0px solid red;
}
.msg-carousell.idx-chanlist-slider.forchannel .ra-swiper-relative, .msg-carousell.idx-chanlist-slider.forAvatarList .ra-swiper-relative {
  padding-left: 60px;
  padding-right: 60px;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-container, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-container {
  width: 100%;
  margin-right: 0;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-btn, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-btn {
  height: 100%;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-next, .msg-carousell.idx-chanlist-slider.forchannel .swiper-button-prev, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-next, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-prev {
  height: 100%;
  width: 60px;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-next::after, .msg-carousell.idx-chanlist-slider.forchannel .swiper-button-prev::after, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-next::after, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-prev::after {
  margin-top: 0px;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-prev, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-prev {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.75)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  background: none;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-prev::after, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-prev::after {
  margin-left: 0px;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-next, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-next {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.75)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  background: none;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-next:after, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-next:after {
  margin-right: 0px;
}
.msg-carousell.idx-chanlist-slider.forchannel .swiper-button-disabled, .msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-disabled {
  opacity: 0;
}

.chan-avatarlist-body {
  margin-top: 4rem;
}

.msg-carousell.idx-chanlist-slider.forAvatarList .swiper-button-disabled, .msg-carousell.idx-chanlist-slider.forchannel .swiper-button-disabled {
  opacity: 0.5;
}

.msg-carousell.idx-chanlist-slider.forAvatarList .swiper-slide {
  border: 0px solid blue;
  width: 100px;
  height: 100px;
}
.msg-carousell.idx-chanlist-slider.forAvatarList .swiper-slide.title {
  padding-top: 0.5rem;
}

.chan-avatar-box {
  width: 100%;
  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: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0.5;
}
.chan-avatar-box.active, .chan-avatar-box:hover {
  opacity: 1;
}
.chan-avatar-box .chan-avatar {
  margin: 0 0 0.5rem 0;
  width: 50px;
  height: 50px;
  background-size: 50px auto;
}
.chan-avatar-box .chan-avatar-desc p {
  font-size: 0.875rem;
  text-align: center;
}

.chan-group-name-box {
  width: 100%;
  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: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.chan-group-name-box p.group-name-zh {
  font-size: 2.5rem;
  line-height: 1;
  margin-top: 0;
}
.chan-group-name-box p.group-name-en {
  font-size: 0.875rem;
  letter-spacing: 4px;
  margin-top: 6px;
}

.main-video {
    /* forces the contents to fill the container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sub-video {
    /* forces the contents to fill the container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.swiper-button-disabled {
    display: none;
}