/* =============================================================================
   PROGNAV
   ========================================================================== */

/*    .PROGNAV    */

          .progNav {
  position: relative;
  background-color: hsl(97, 3%, 15%);
}
body.dark .progNav {
  box-shadow: 0 1px hsl(97, 3%, 20%);
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .progNav {
    display: none;
  }
}

/*    .PROGNAV-LOGO    */

.prog-logo {
  /*<<<*/
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: auto;
  width: 140px;
  height: 36px;
  opacity: 0;
  pointer-events: none;
}
.topNavCon.stick .prog-logo {
  opacity: 1;
  pointer-events: auto;
}
.prog-logo a {
  display: block;
  width: 140px;
  height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/PASSIONTIMES_LOGO_W_ENG_TRIM.png);
  opacity: 0.95;
}

/*    .TODAYSPROG-WRAP    */

.todaysProg-wrap {
  float: left;
  position: relative;
}

/*    .TODAYSPROG-HEADER    */

.todaysProg-header {
  font-size: 0.875em;
  font-weight: bold;
  line-height: 36px;
  color: hsl(97, 3%, 80%);
  -webkit-user-select: none;
}
.todaysProg-header i {
  float: right;
  display: block;
  width: 20px;
  margin: 0.5em;
  font-size: 1rem;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  background-color: hsl(97, 3%, 30%);
  color: hsl(97, 3%, 80%);
  cursor: pointer;
}
.todaysProg-wrap.active .todaysProg-header i {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}

/*    .TODAYSPROG    */

          .todaysProg {
  position: absolute;
  top: 36px;
  left: -1em;
  z-index: 100;
  width: 260px;
  padding: 0.75em 1em;
  background-color: hsl(97, 3%, 20%);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(97, 3%, 20%);
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: top left;
     -moz-transform-origin: top left;
      -ms-transform-origin: top left;
       -o-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
}
body.dark .todaysProg {
  background-color: #000;
}
.todaysProg-wrap.active .todaysProg {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}

/*    .TODAYSPROG-DAY    */

.todaysProg-day {
  overflow: hidden;
  margin-bottom: 0.75em;
}
.todaysProg-day li {
  float: left;
  text-align: center;
  font-weight: bold;
  line-height: 1.75;
  width: 14.285714286%;
  font-size: 0.7em;
  border-radius: 3px;
  color: hsl(97, 3%, 80%);
  cursor: pointer;
  -webkit-user-select: none;
}
.todaysProg-day li:hover {
  background-color: hsl(97, 3%, 30%);
  color: hsl(97, 3%, 90%);
}
.todaysProg-wrap.day0 .todaysProg-day li:nth-child(1),
.todaysProg-wrap.day1 .todaysProg-day li:nth-child(2),
.todaysProg-wrap.day2 .todaysProg-day li:nth-child(3),
.todaysProg-wrap.day3 .todaysProg-day li:nth-child(4),
.todaysProg-wrap.day4 .todaysProg-day li:nth-child(5),
.todaysProg-wrap.day5 .todaysProg-day li:nth-child(6),
.todaysProg-wrap.day6 .todaysProg-day li:nth-child(7) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}

/*    .TODAYSPROG-PROG    */

.todaysProg-prog {
  display: none;
}
.day0 .todaysProg-prog.day0,
.day1 .todaysProg-prog.day1,
.day2 .todaysProg-prog.day2,
.day3 .todaysProg-prog.day3,
.day4 .todaysProg-prog.day4,
.day5 .todaysProg-prog.day5,
.day6 .todaysProg-prog.day6 { display: block; }
.todaysProg-prog li {
  position: relative;
  font-size: 0.875em;
  line-height: 30px;
  font-weight: bold;
  color: hsl(97, 3%, 80%);
}
.todaysProg-prog li:hover {
  color: hsl(97, 3%, 95%);
}
.todaysProg-prog li ~ li {
  margin-top: 0.25em;
}
.todaysProg-prog li a {
  display: block;
}
.todaysProg-prog li a > span {
  display: block;
  float: left;
  font-size: 0.75em;
  line-height: 30px;
  width: 4em;
}

/*    .TODAYSPROG-PROG LI LIVE BADGE    */

.todaysProg-prog li.live:before {
  content: 'LIVE';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: auto;
  padding: 0 0.25rem;
  padding-left: 1rem;
  height: 1.75em;
  line-height: 1.75;
  font-size: 0.7em;
  border-radius: 3px;
  background-color: #bea22f;
  color: #fff;
}
.todaysProg-prog li.live:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 1.875rem;
  bottom: 0;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: liveBadgeLight 1500ms infinite;
     -moz-animation: liveBadgeLight 1500ms infinite;
      -ms-animation: liveBadgeLight 1500ms infinite;
       -o-animation: liveBadgeLight 1500ms infinite;
          animation: liveBadgeLight 1500ms infinite;
}

/*    .PROG-LIVE    */

.prog-live {
  float: left;
  font-size: 0.875em;
  font-weight: bold;
  line-height: 36px;
  color: hsl(97, 3%, 80%);
  -webkit-user-select: none;
}

/* =============================================================================
   ACCOUNTNAV
   ========================================================================== */

/*    .ACCOUNTNAV    */

.accountNav {
  float: right;
  padding: 5px 0;
}
.accountNav > li {
  position: relative;
  float: left;
  padding: 0 0.5em;
  font-size: 0.875em;
  line-height: 26px;
  font-weight: bold;
  color: hsl(97, 3%, 80%);
  cursor: pointer;
  -webkit-user-select: none;
}
.accountNav > li:hover {
  color: hsl(97, 3%, 95%);
}

/*    .ACCOUNTNAV BUTTON    */

.nav-login {}
.accountNav > .nav-subscribe:hover,
.accountNav > .nav-subscribe {
  margin-left: 0.5em;
  border-radius: 3px;
  background-color: #bea22f;
  color: #fff;
}
.accountNav sup.new {
  margin-left: 0.5em;
  padding: 0.15625em 0.3125em;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 2px;
  color: #fff;
  background-color: #bea22f;
}

/*    .NAV-ACCOUNT    */

.nav-account {
  display: none;
}
.nav-account .profilePic {
  position: relative;
  display: block;
  float: left;
  width: 26px;
  height: 26px;
  margin-right: 0.5em;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*    TEMP IMG    */
  background-image: url(../img/host/%E5%B0%8F%E8%8F%9C.jpg);
}
.nav-account .account-badge {
  margin-left: 0.5em;
}
.nav-account .account-badge:before {
  content: '(';
}
.nav-account .account-badge:after {
  content: ')';
}

/*    .ACCOUNT-DD    */

.account-dd:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
          .account-dd {
  overflow: hidden;
  position: absolute;
  top: 31px;
  right: 0;
  z-index: 100;
  width: 260px;
  background-color: hsl(97, 3%, 97%);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transform-origin: top right;
     -moz-transform-origin: top right;
      -ms-transform-origin: top right;
       -o-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
}
body.dark .account-dd {
  background-color: hsl(97, 3%, 10%);
}
.account-dd.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}

/*    .ACCOUNT-DD UL & LI    */

          .account-dd ul {
  padding: 0.5em 0;
  border: 1px solid hsl(97, 3%, 97%);
  border-bottom: none;
}
body.dark .account-dd ul {
  border-color: hsl(97, 3%, 20%);
}
          .account-dd li {
  position: relative;
  width: 100%;
  font-size: 1em;
  line-height: 36px;
  padding: 0 1em;
  color: hsl(97, 3%, 30%);
  cursor: pointer;
}
body.dark .account-dd li {
  color: hsl(97, 3%, 95%);
}
          .account-dd li:hover {
  background-color: hsl(97, 3%, 95%);
}
body.dark .account-dd li:hover {
  background-color: hsl(97, 3%, 20%);
}
.account-dd li .badge {
  display: block;
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  margin: auto;
  padding: 0 0.5em;
  height: 1.5em;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: bold;
  border-radius: 3px;
  background-color: #bea22f;
  color: #fff;
}

/*    .ACCOUNT-DD .ACCOUNT-BUTTON    */

          .account-dd .account-button {
  overflow: hidden;
  clear: both;
  width: 100%;
  padding: 0.5em;
  background-color: hsl(97, 3%, 95%);
  border: 1px solid hsl(97, 3%, 95%);
  border-top: 1px solid hsl(97, 3%, 90%);
}
body.dark .account-dd .account-button {
  background-color: hsl(97, 3%, 0%);
  border-color: hsl(97, 3%, 20%);
}
          .account-dd .account-button > div {
  float: right;
  padding: 0 0.75em;
  font-size: 0.875em;
  font-weight: bold;
  line-height: 30px;
  border: 1px solid hsl(97, 3%, 80%);
  color: hsl(97, 3%, 50%);
  cursor: pointer;
}
body.dark .account-dd .account-button > div {
  color: hsl(97, 3%, 70%);
  border-color: hsl(97, 3%, 20%);
}
.account-dd .account-button > div ~ div {
  margin-right: 0.75em;
}
.account-dd .account-button > div a {
  display: block;
}

/*    .NAV-CART    */

.nav-cart {}
.cart-count {
  margin-left: 0.5em;
}
/*
.cart-count:before {
  content: '(';
}
.cart-count:after {
  content: ')';
}
*/

/*    .NAV-CART-POP    */

.nav-cart-pop {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 1000;
  width: 260px;
  margin-top: 0.75em;
  background-color: hsl(97, 3%, 97%);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(1em) translateZ(0);
     -moz-transform: translateY(1em) translateZ(0);
      -ms-transform: translateY(1em) translateZ(0);
       -o-transform: translateY(1em) translateZ(0);
          transform: translateY(1em) translateZ(0);
}
.nav-cart-pop.active {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0) translateZ(0);
     -moz-transform: translateY(0) translateZ(0);
      -ms-transform: translateY(0) translateZ(0);
       -o-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
}
body.dark .nav-cart-pop {
  background-color: hsl(97, 3%, 10%);
}

/*    .NAV-CART-POP CONTENT    */

.nav-cart-pop .media {
  padding: 1em;
  border: 1px solid #fff;
  border-bottom: none;
}
body.dark .nav-cart-pop .media {
  border-color: hsl(97, 3%, 20%);
}

.nav-cart-pop .imgBox {
  float: left;
  width: 2.5em;
  height: 2.5em;
  margin-right: 1em;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*    TEMP IMG    */
  background-image: url(../img/shop/b-kh2.jpg);
}
.nav-cart-pop .textBox {
  float: left;
}
.nav-cart-pop .textBox h4 {
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  color: hsl(97, 3%, 30%);
}
.nav-cart-pop .textBox h6 {
  font-size: 0.875em;
}
body.dark .nav-cart-pop .textBox h4 {
  color: hsl(97, 3%, 95%);
}
body.dark .nav-cart-pop .textBox h6 {
  color: hsl(97, 3%, 70%);
}
.nav-cart-pop .textBox h6,
.nav-cart-pop .textBox h4 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*    .NAV-CART-POP .CART-CAPTION    */

.nav-cart-pop .cart-caption {
  position: relative;
  font-size: 0.875em;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  color: hsl(97, 3%, 50%);
  background-color: hsl(97, 3%, 95%);
  border: 1px solid hsl(97, 3%, 95%);
  border-top: 1px solid hsl(97, 3%, 90%);
}
body.dark .nav-cart-pop .cart-caption {
  background-color: hsl(97, 3%, 0%);
  border-color: hsl(97, 3%, 20%);
  color: hsl(97, 3%, 70%);
}

/*    .NAV-CART-POP .CART-POP-EXIT    */

.nav-cart-pop .cart-pop-exit {
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  font-size: 1em;
  line-height: 30px;
  color: hsl(97, 3%, 70%);
  text-align: center;
  cursor: pointer;
}

@media screen and (max-width: 1023px) {
  .nav-account .profilePic {
    margin-right: auto;
  }
  .nav-account .text {
    display: none;
  }
  .accountNav > li > a > i {
    display: none;
  }
  .accountNav > li > a > i.inline {
    margin: auto;
  }
}

/*    TRANSITION    */

.nav-cart-pop,
.todaysProg,
.progNav,
.progNav li {
  -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
       -o-transition: all 200ms ease;
          transition: all 200ms ease;
}
.nav-cart-pop,
.account-dd,
.todaysProg {
  -webkit-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
     -moz-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
      -ms-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
       -o-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
          transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
}

/* =============================================================================
   TOP NAV
   ========================================================================== */

/*    .NAVWRAP    */

.navWrap {
  position: relative;
  height: 178px;
}
body.index .navWrap {
  height: 264px;
  margin-bottom: 2em;
}
@media screen and (max-width: 1024px) {
  .navWrap {
    height: 178px;
  }
  body.index .navWrap {
    height: 257px;
  }
}
@media screen and (max-width: 768px) {
  body.index .navWrap,
  .navWrap {
    height: 108px;
    background-color: hsl(97, 3%, 20%);
  }
}

/*    .TOPNAVCON    */

.topNavCon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: auto;
  width: 100%;
  box-shadow: 0 1px 0 hsl(97, 3%, 80%);
  -webkit-transition: transform 500ms cubic-bezier(0.770, 0, 0.175, 1);
     -moz-transition: transform 500ms cubic-bezier(0.770, 0, 0.175, 1);
      -ms-transition: transform 500ms cubic-bezier(0.770, 0, 0.175, 1);
       -o-transition: transform 500ms cubic-bezier(0.770, 0, 0.175, 1);
          transition: transform 500ms cubic-bezier(0.770, 0, 0.175, 1);
}
.topNavCon.stick {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.topNavCon.stick.slideup {
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
       -o-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -moz-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      -ms-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -o-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
          transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.topNavCon.stick.slidedown {
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -moz-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      -ms-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -o-transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
          transition: transform 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@media screen and (max-width: 768px) {
  .topNavCon.stick.slideup {
    -webkit-transform: translateY(-100px);
       -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
         -o-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  .topNavCon.stick.slidedown {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

/*    OPACITY    */

.topNavCon.stick.slideup > .utilityNav,
.topNavCon.stick.slideup > .pageNav {
  opacity: 0;
  -webkit-transition: opacity 200ms ease;
     -moz-transition: opacity 200ms ease;
      -ms-transition: opacity 200ms ease;
       -o-transition: opacity 200ms ease;
          transition: opacity 200ms ease;
   -webkit-transition-delay: 300ms;
      -moz-transition-delay: 300ms;
        -o-transition-delay: 300ms;
           transition-delay: 300ms;
}
.topNavCon.stick.slideup > .utilityNav,
.topNavCon.stick.slideup > .pageNav {
  opacity: 1;
  -webkit-transition: opacity 10ms ease;
     -moz-transition: opacity 10ms ease;
      -ms-transition: opacity 10ms ease;
       -o-transition: opacity 10ms ease;
          transition: opacity 10ms ease;
}

@media screen and (max-width: 768px) {
  .topNavCon {
    background-color: hsl(97, 3%, 20%);
    box-shadow: 0 1px 0 hsl(97, 3%, 25%);
  }
}

/*    .TOPNAVCON    */

.topNavCon {
  background-color: hsl(97, 3%, 95%);
}
body.dark .topNavCon {
  background-color: hsl(97, 3%, 0%);
  box-shadow: 0 1px 0 hsl(97, 3%, 20%);
}
/*
@media screen and (max-width: 768px) {
  body.dark .topNavCon {
    box-shadow: none;
  }
}
*/

/*    .UTILITYNAV    */

.pageNav:after,
.utilityNav:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.utilityNav {
  position: relative;
  max-width: 1440px;
  margin: 1.25em auto 0.5em;
  margin: 1.25em auto;
/*  outline: 1px solid lime;*/
}
body.index .utilityNav {
  margin: 2em auto 0.75em;
}
.topNavCon.stick .utilityNav {
  margin: auto;
}
@media screen and (max-width: 768px) {
  body.index .utilityNav,
  .utilityNav {
    margin: auto;
    padding: 10px 0;
    background-color: hsl(97, 3%, 20%);
  }
  body.dark .utilityNav {
    background-color: #000;
  }
}

/*    .NAV-DATE    */

.nav-date {
  display: none;
  clear: both;
  margin-top: 1em;
  padding-top: 1.5em;
  padding-right: 3px;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  border-top: 1px dashed #746551;
  color: #746551;
}
body.dark .nav-date {
  border-color: hsl(97, 3%, 20%);
  color: hsl(97, 3%, 95%);
}
body.index .nav-date {
  display: block;
}
body.index .topNavCon.stick .nav-date,
.topNavCon.stick .nav-date {
  display: none;
}

@media screen and (max-width: 768px) {
  body.index .topNavCon .nav-date,
  .topNavCon .nav-date {
    display: none;
  }
}

/*    .TOPNAV-LOGO    */

           .nav-logo {
  position: relative;
  width: 130px;
  margin: auto;
}
body.index .nav-logo {
  margin: auto;
  width: 260px;
}
          .nav-logo a {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 32.15739484%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/PASSIONTIMES_LOGO_TRIM_S.png);
}
body.index .nav-logo a {
  background-image: url(../img/PASSIONTIMES_LOGO_TRIM.png);
}
body.dark .nav-logo a {
  background-image: url(../img/PASSIONTIMES_LOGO_W_TRIM_S.png);
  opacity: 0.95;
}
body.dark.index .nav-logo a {
  background-image: url(../img/PASSIONTIMES_LOGO_W_TRIM.png);
}
@media screen and (min-width: 769px) {
  .nav-logo {
    margin-left: 1rem;
  }
  .topNavCon.stick .nav-logo {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .nav-logo {
    margin-left: 1.5rem;
  }
}
@media screen and (max-width: 1024px) {
  body.index .nav-logo {
    width: 240px;
  }
}
@media screen and (max-width: 768px) {
  body.index .nav-logo,
  .nav-logo {
    position: relative;
    width: 110px;
    height: 40px;
  }
  .nav-logo a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  body.index .nav-logo a,
  body.dark .nav-logo a,
  .nav-logo a {
    background-image: url(../img/PASSIONTIMES_W_trim.png);
  }
  .topNavCon.stick .nav-logo {
    opacity: 0;
  }
}

/* =============================================================================
   PAGENAV
   ========================================================================== */

/*    .PAGENAV    */

/*.topNavCon.stick .pageNav {*/

.pageNav {
  box-shadow: 0 -1px hsl(97, 3%, 90%);
}
body.dark .pageNav {
  box-shadow: 0 -1px hsl(97, 3%, 20%);
}
body.index .pageNav,
body.index.dark .pageNav {
  box-shadow: none;
}

/*    .TOPNAV-ITEMS    */

.topNav-items:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.topNav-items {
  text-align: center;
  vertical-align: bottom;
}
@media screen and (max-width: 1259px) {
  .topNavCon.stick .search-active .topNav-items,
  body.index .search-active .topNav-items {
    opacity: 0;
  }
}

/*    .TOPNAV-ITEMS LI    */

          .topNav-items li {
  float: left;
  font-size: 1em;
  line-height: 60px;
  font-weight: bold;
  color: #746551;
  -webkit-user-select: none;
}
body.dark .topNav-items li {
  color: hsl(97, 3%, 95%);
}
          .topNav-items li:hover,
          .topNav-items li.hover {
  color: #bea22f;
  box-shadow: inset 0 -4px #bea22f;
}
          .topNav-items li.active {
  color: #746551;
  box-shadow: inset 0 -4px #746551;
}
body.dark .topNav-items li.active {
  box-shadow: inset 0 -4px hsl(97, 3%, 95%);
}
          .topNav-items li a {
  display: block;
  padding: 0 0.75em;
  color: inherit;
}

/*    TRANSITION    */

.topNav-items,
.topNav-items li {
  -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
       -o-transition: all 200ms ease;
          transition: all 200ms ease;
}

/*    .TOPNAV-MORE-DD    */

.topNav-more-dd {
  float: left;
  position: relative;
}
.topNav-more-dd > li {
  display: none;
}

@media screen and (max-width: 1080px) {
  
  /*    .TOPNAV-MORE-DD UL    */
  
  .topNav-more-dd > ul:after {
    /* clearfix */
    content: ' ';
    visibility: hidden;
    height: 0;
    display: table;
    clear: both;
  }
  .topNav-more-dd > ul {
    position: absolute;
    top: 100%;
    left: -3.5em;
    right: -3.5em;
    margin: auto;
    background-color: hsl(97, 3%, 95%);
    border: 1px solid hsl(97, 3%, 80%);
    padding: 0.5em 0.75em;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transform-origin: top center;
       -moz-transform-origin: top center;
        -ms-transform-origin: top center;
         -o-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
         -o-transform: scale(0.8);
            transform: scale(0.8);
  }
  .topNav-more-dd.active > ul {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  body.dark .topNav-more-dd > ul {
    border-color: hsl(97, 3%, 20%);
    background-color: hsl(97, 3%, 10%);
  }

  /*    TRANSITION    */
  
  .topNav-more-dd > ul {
    /*    FALL BACK FROM CHROME    */
    -webkit-transition: all 200ms ease;
       -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
         -o-transition: all 200ms ease;
            transition: all 200ms ease;
  }
  .topNav-more-dd > ul {
    -webkit-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
       -moz-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
        -ms-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
         -o-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
            transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5), opacity 200ms ease, background 200ms ease;
  }
  
  /*    .TOPNAV-MORE-DD LI    */

  .topNav-more-dd > li {
    display: block;
    cursor: pointer;
  }
  .topNav-more-dd.active > li {
    color: #bea22f;
    box-shadow: inset 0 -4px #bea22f;
  }
  
  /*    .TOPNAV-MORE-DD UL LI    */
  
  .topNav-more-dd > ul > li {
    width: 100%;
    line-height: 50px;
  }
  .topNav-more-dd > ul > li ~ li {
    margin-top: 0.5em;
  }
  .topNav-more-dd > li > a > i {
    display: inline;
  }
  .topNav-more-dd > ul > li:hover {
    box-shadow: inset 0 0 0 2px #bea22f;
  }
  .topNav-more-dd > ul > li.active {
    box-shadow: inset 0 0 0 2px #746551;
  }
  body.dark .topNav-more-dd > ul > li.active {
    box-shadow: inset 0 0 0 2px #fff;
  }
}
@media screen and (max-width: 1024px) {
  .topNav-items li i {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pageNav .topNav-items {
    display: none;
  }
}

/* =============================================================================
   PAGENAV-BTN
   ========================================================================== */

/*    .PAGENAV-BTN    */

.pageNav-btn-wrap:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.pageNav-btn-wrap {
  position: relative;
  float: right;
  width: 100%;
  pointer-events: none;
}
.pageNav-btn {
  overflow: hidden;
  float: right;
  pointer-events: auto;
  -webkit-user-select: none;
}

.pageNav-btn {
  margin-top: -70px;
}
.topNavCon.stick .pageNav-btn {
  margin-top: auto;
}
body.index .pageNav-btn {
  margin-top: auto;
}
.pageNav-btn:hover {
  box-shadow: none;
  color: #746551;
}
.pageNav-btn > div {
  position: relative;
  float: left;
  cursor: pointer;
  margin: 12px auto;
  margin-left: 0.75em;
}
          .pageNav-btn i {
  display: block;
  width: 36px;
  height: 36px;
  font-size: 1.125em;
  text-align: center;
  line-height: 36px;
  box-shadow: inset 0 0 0 1px hsl(97, 3%, 80%);
  border-radius: 3px;
  color: #746551;
}
body.dark .pageNav-btn i {
  color: hsl(97, 3%, 95%);
  box-shadow: inset 0 0 0 1px hsl(97, 3%, 20%);
}
.nav-special {}
@media screen and (max-width: 768px) {
  .pageNav {
    background-color: hsl(97, 3%, 20%);
  }
  .topNavCon.stick .pageNav {
    margin-top: -48px;
    margin-top: -60px;
    padding: 0 2.5em;
  }
  body.dark .pageNav {
    background-color: #000;
  }
  .pageNav-btn {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .pageNav-btn-wrap {
    margin-top: -60px;
  }
}

/*    .NAV-SEARCH-BTN    */

.nav-search-btn {
  display: none;
}
.topNavCon.stick .nav-search-btn,
body.index .nav-search-btn {
  display: block;
}
.nav-search-btn .pt-cross {
  display: none;
}
.search-active .nav-search-btn .pt-cross {
  display: block;
  background-color: hsl(97, 3%, 90%);
}
body.dark .search-active .nav-search-btn .pt-cross {
  background-color: hsl(97, 3%, 20%);
}
.search-active .nav-search-btn .pt-search {
  display: none;
}

/* =============================================================================
   TOPNAV SEARCH
   ========================================================================== */

/*    .NAV-SEARCH    */

.nav-search {
  position: relative;
  height: 36px;
  margin: 12px auto;
  pointer-events: auto;
  margin-top: -58px;
}
body.index .nav-search {
  margin-top: auto;
}
.topNavCon.stick .nav-search {
  margin: 12px auto;
}
@media screen and (min-width: 769px) {
  .nav-search {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: auto;

    left: 154px;
    right: auto;
    width: 30%;
    max-width: none;
    min-width: 300px;
  }
  
}
@media screen and (min-width: 1260px) {
  .topNavCon.stick .nav-search,
  body.index .nav-search {
    left: auto;
    right: 6rem;
    width: 20%;
    max-width: 300px;
  }
  .nav-search {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: auto;

    left: 154px;
    right: auto;
    width: 30%;
    max-width: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 1259px) {
  .topNavCon.stick .nav-search,
  body.index .nav-search {
    position: absolute;
    top: 0;
    left: 0;
    right: 9rem;
    width: auto;
    max-width: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(1em);
       -moz-transform: translateY(1em);
        -ms-transform: translateY(1em);
         -o-transform: translateY(1em);
            transform: translateY(1em);
  }
  .topNavCon.stick  .search-active .nav-search,
  body.index .search-active .nav-search {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}
@media screen and (max-width: 768px) {
  .nav-search {
    margin-top: auto;
  }
}

/*    TRANSITION    */

.nav-search {
  -webkit-transition: all 400ms cubic-bezier(0.770, 0, 0.175, 1);
     -moz-transition: all 400ms cubic-bezier(0.770, 0, 0.175, 1);
      -ms-transition: all 400ms cubic-bezier(0.770, 0, 0.175, 1);
       -o-transition: all 400ms cubic-bezier(0.770, 0, 0.175, 1);
          transition: all 400ms cubic-bezier(0.770, 0, 0.175, 1);
}

/*    .NAV-SEARCH INPUT    */

.nav-search input {
  width: 100%;
  height: 36px;
  font-size: 16px;
  line-height: 20px;
  padding: 8px 89px 8px 12px;
  border-radius: 0;
  background-color: hsl(97, 3%, 92%);
  border: 1px solid hsl(97, 3%, 80%);
  box-shadow: none;
}
body.dark .nav-search input {
  color: hsl(97, 3%, 95%);
  border-color: hsl(97, 3%, 20%);
  background-color: hsl(97, 3%, 20%);
  box-shadow: none;
}
.nav-search input:focus {
  background-color: #fff;
  border-color: #bea22f;
}
body.dark .nav-search input:focus {
  border-color: #bea22f;
  background-color: hsl(97, 3%, 10%);
}

/*    .nav-search BUTTON    */

.nav-search button.default {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  margin: auto;
  font-size: 0.875em;
  background-color: #bea22f;
  border-radius: 0;
  color: #fff;
}
body.dark .nav-search button.default {
  box-shadow: inset 0 0 0 1px #bea22f;
}
.nav-search button.default > span {
  display: none;
}
.nav-search button.default > i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  font-size: 1.25em;
}
.nav-search button.default > i.pt-search {
  bottom: 0.0625rem;
}
@media screen and (max-width: 768px) {
  .nav-search {
    float: none;
    display: block;
    width: auto;
    max-width: 100%;
  }
  .stick .nav-search {
    margin: auto;
  }
  .nav-search input {
    padding: 8px 89px 8px 12px;
    background-color: hsl(97, 3%, 90%);
    border-color: hsl(97, 3%, 90%);
  }
  .stick .nav-search input {
    padding: 8px 59px 8px 12px;
  }
  .nav-search button.default {
    box-shadow: none;
  }
  .stick .nav-search button.default {
    width: 50px;
  }
  .nav-search button.default > span {
    display: none;
  }
  .nav-search button.default > i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    font-size: 1.5em;
  }
}

/* =============================================================================
   SIDENAV-TOGGLE & MOBILE CART
   ========================================================================== */

body.dark .mobile-cart-btn,
.mobile-cart-btn,
body.dark .sideNav-toggle,
.sideNav-toggle {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  box-shadow: none;
  width: 60px;
  height: 60px;
  pointer-events: none;
  opacity: 0;
}
body.dark .mobile-cart-btn,
.mobile-cart-btn {
  left: auto;
  right: 0;
}
.mobile-cart-btn i,
.sideNav-toggle i {
  display: block;
  width: 1.5rem;
  height: 60px;
  margin: auto;
  font-size: 1.75rem;
  line-height: 60px;
  text-align: center;
  color: hsl(97, 3%, 95%);
  opacity: 0;
}
.mobile-cart-count {
  /*    cart item count badge    */
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.25em 0.75em;
  padding: 0 0.5em;
  font-size: 0.5em;
  line-height: 1.75;
  text-align: center;
  font-weight: bold;
  border-radius: 10px;
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
  opacity: 0;
}

@media screen and (max-width: 768px) {
  body.dark .sideNav-toggle,
  body.dark .mobile-cart-btn,
  .mobile-cart-btn,
  .sideNav-toggle,
  .mobile-cart-btn i,
  .sideNav-toggle i,
  .mobile-cart-count {
    opacity: 1;
    pointer-events: auto;
  }
}

/* =============================================================================
   TOP NAV DROPDOWN
   ========================================================================== */

/*    .TOPNAV-DROPDOWN    */

          .topNav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  background-color: hsl(97, 3%, 95%);
  border-bottom: 10px solid hsl(97, 3%, 20%);
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(-1em) translateZ(0);
  -moz-transform: translateY(-1em) translateZ(0);
  -ms-transform: translateY(-1em) translateZ(0);
  -o-transform: translateY(-1em) translateZ(0);
  transform: translateY(-1em) translateZ(0);
}
          .topNav-dropdown.active {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0) translateZ(0);
  -moz-transform: translateY(0) translateZ(0);
  -ms-transform: translateY(0) translateZ(0);
  -o-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
}
body.dark .topNav-dropdown {
  border-color: #000;
  background-color: #000;
}
.mobile .topNav-dropdown {
  display: none;
}
.stick ~ .topNav-dropdown {
  position: fixed;
  top: 96px;
}

/*     .TOPNAV-DROPDOWN .DROPDOWN-WRAPPER    */

.topNav-dropdown .dropdown-wrapper {
  width: 100%;
  padding: 0.5em 0 1em;
}
.topNav-dropdown .dropdown-wrapper > div {
  display: none;
}
.topNav-dropdown .dropdown-wrapper > div.active {
  display: block;
}

/*    .TOPNAV-DROPDOWN .DROPDOWN-TOGGLE    */

          .topNav-dropdown .dropdown-toggle {
  overflow: hidden;
  clear: both;
  width: 100%;
  margin-bottom: -0.25em;
  padding-top: 0.25em;
  line-height: 30px;
}
body.dark .topNav-dropdown .dropdown-toggle {
  border-color: hsl(97, 3%, 10%);
}
          .topNav-dropdown .dropdown-toggle li {
  float: left;
  font-size: 0.75em;
  text-align: center;
  color: hsl(97, 3%, 50%);
  cursor: pointer;
}
body.dark .topNav-dropdown .dropdown-toggle li {
  color: hsl(97, 3%, 70%);
}
          .topNav-dropdown .dropdown-toggle li.active {
  color: #746551;
  font-weight: bold;
  background-color: hsl(97, 3%, 90%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
body.dark .topNav-dropdown .dropdown-toggle li.active {
  color: hsl(97, 3%, 95%);
  background-color: hsl(97, 3%, 20%);
}

/*    .TOPNAV-DROPDOWN .DROPDOWN-TOGGLE LI WIDTH    */

.topNav-dropdown .dropdown-toggle.news li {
  width: 11.1111111111%;
}
.topNav-dropdown .dropdown-toggle.life li {
  width: 8.3333333333%;
}
.topNav-dropdown .dropdown-toggle.art  li {
  width: 14.285714286%;
}
.topNav-dropdown .dropdown-toggle.prog li {
  width: 10%;
}

/*    .TOPNAV-DROPDOWN .MEDIA    */

.topNav-dropdown .media {
  float: left;
  display: inline-block;
  padding: 0.25em 0.75em;
}

/*    .TOPNAV-DROPDOWN .DD-WRAP    */

.topNav-dropdown .dd-wrap {
  overflow: hidden;
  padding-top: 0.75em;
}
.topNav-dropdown .dd-wrap.row {
  margin: auto -0.75em;
}
.topNav-dropdown .dd-wrap > div {
  display: none;
}
.topNav-dropdown .dd-wrap > div.active {
  display: block;
}
.topNav-dropdown .dd-5,
.topNav-dropdown .dd-7 {
  clear: both;
}
.topNav-dropdown .dd-5 .media {
  width: 20%;
}
.topNav-dropdown .dd-7 .media {
  width: 14.285714286%;
}

/*    TEMP IMG    */

.topNav-dropdown .media .imgBox {
  height: 0;
  padding-top: 66.66%;
  background-size: contain;
  background-position: center;
}

/*    .TOPNAV-DROPDOWN.IMGTOP .MEDIA .TEXTBOX    */

.topNav-dropdown.imgTop .media .textBox h4 {
  overflow: hidden;
  /*  js dotdotdot  */
  max-height: 3em;
  font-size: 0.8125em;
  line-height: 1.5;
}
.topNav-dropdown.imgTop .media .textBox h6 {
  margin-top: 0.3125em;
}
.topNav-dropdown.imgTop .media .textBox h6 .cat a {
  padding: 0;
  color: #bea22f;
  background-color: transparent;
}
.topNav-dropdown.imgTop .media .textBox h6 .time {
  right: 0.75rem;
}

/*    TRANSITION    */

.dropdown-toggle li,
.topNav-dropdown {
  -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
       -o-transition: all 300ms ease;
          transition: all 300ms ease;
}

/* =============================================================================
   TOP NAV DROPDOWN IMGBOX BACKGROUND & H6 SPAN
   ========================================================================== */

/*    TEMP IMG - DELETE ME LATER    */

.dropdown-wrapper .media:nth-child(2) .imgBox {background-image: url(../img/news2.jpg);}
.dropdown-wrapper .media:nth-child(3) .imgBox {background-image: url(../img/news3.jpg);}
.dropdown-wrapper .media:nth-child(4) .imgBox {background-image: url(../img/news4.jpg);}
.dropdown-wrapper .media:nth-child(5) .imgBox {background-image: url(../img/news5.jpg);}
.dropdown-wrapper .media:nth-child(6) .imgBox {background-image: url(../img/news6.jpg);}
.dropdown-wrapper .media:nth-child(7) .imgBox {background-image: url(../img/news7.jpg);}
.dropdown-wrapper .media:nth-child(8) .imgBox {background-image: url(../img/news8.jpg);}
.dropdown-wrapper #prog-dd-wrap .media .imgBox {background-image: url(../img/thumbnail3.png);}

/*    LATEST PROG IMG 16:9    */

#prog-dd-wrap .media .imgBox {
  padding-top: 56.25%;
}

/*    LATEST PROG IMG 1:1    */

#prog-dd-wrap .prog .media .imgBox {
  padding-top: 100%;
}

/*    #PROG-DD-WRAP .PROG .MEDIA .TEXTBOX    */

#prog-dd-wrap .prog .media .textBox {
  text-align: center;
}
#prog-dd-wrap .prog .media .textBox h6 {
  margin-top: auto;
}
#prog-dd-wrap .prog .media .textBox h6 span {
  float: none;
  margin: auto;
}
#prog-dd-wrap .prog .media .textBox h6 .host {
  font-size: 0.75rem;
}
#prog-dd-wrap .prog .media .textBox h6 .progTime {
  display: block;
  clear: both;
}

/*    PROG IMG EDIT ME LATER    */

/*    #PROG-WEEKDAY-DD 星期一至五    */

#prog-weekday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-81.png);}
#prog-weekday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-82.png);}

/*    #PROG-MONDAY-DD 星期一    */

#prog-monday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-11.png);}
#prog-monday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-12.png);}
#prog-monday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-13.png);}

/*    #PROG-TUESDAY-DD 星期二    */

#prog-tuesday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-25.png);}
#prog-tuesday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-22.png);}
#prog-tuesday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-23.png);}

/*    #PROG-WEDNESDAY-DD 星期三    */

#prog-wednesday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-31.png);}
#prog-wednesday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-32.png);}
#prog-wednesday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-33.png);}

/*    #PROG-THURSDAY-DD 星期四    */

#prog-thursday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-41.png);}
#prog-thursday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-42.png);}
#prog-thursday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-43.png);}

/*    #PROG-FRIDAY-DD 星期五    */

#prog-friday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-51.png);}
#prog-friday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-52.png);}
#prog-friday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-53.png);}

/*    #PROG-SATURDAY-DD 星期六    */

#prog-saturday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-61.png);}
#prog-saturday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-62.png);}
#prog-saturday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-23.png);}

/*    #PROG-SUNDAY-DD 星期日    */

#prog-sunday-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-sunday-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-72.png);}
#prog-sunday-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-33.png);}

/*    #PROG-ARCHIVE-DD 昔日節目    */

#prog-archive-dd .media:nth-child(1) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-archive-dd .media:nth-child(2) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-archive-dd .media:nth-child(3) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-archive-dd .media:nth-child(4) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-archive-dd .media:nth-child(5) .imgBox {background-image: url(../img/prog-th-71.png);}
#prog-archive-dd .media:nth-child(6) .imgBox {background-image: url(../img/prog-th-71.png);}

/*    #PROG-ARCHIVE-DD SHOW MORE 昔日節目 顯示更多    */

#prog-archive-dd .media:nth-child(7) .imgBox {background-image: none; background-color: hsl(97, 3%, 87%);}
#prog-archive-dd .media:nth-child(7) .imgBox {
  position: relative;
}
#prog-archive-dd .media:nth-child(7) .imgBox .more {
  position: absolute;
  top: 5em;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;
  font-size: 1em;
  height: 1em;
  font-weight: bolder;
  line-height: 1;
  text-align: center;
  color: hsl(97, 3%, 60%);
}
#prog-archive-dd .media:nth-child(7) .imgBox .more::before {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  margin: auto;
  margin-top: -0.95em;
  content: "\e600";
  font-family: 'pt-icon';
  font-size: 6em;
  height: 1em;
  color: hsl(97, 3%, 60%);
}

/* =============================================================================
   SIDE NAV
   ========================================================================== */

/*    .SIDENAV    */

.sideNav {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1003;
  width: 16rem;
  max-width: 80%;
  min-height: 100%;
  background-color: hsl(97, 3%, 20%);
  -webkit-transform: translateX(-16rem);
     -moz-transform: translateX(-16rem);
      -ms-transform: translateX(-16rem);
       -o-transform: translateX(-16rem);
          transform: translateX(-16rem);
  -webkit-transition: all 500ms cubic-bezier(0.770, 0, 0.175, 1);
     -moz-transition: all 500ms cubic-bezier(0.770, 0, 0.175, 1);
      -ms-transition: all 500ms cubic-bezier(0.770, 0, 0.175, 1);
       -o-transition: all 500ms cubic-bezier(0.770, 0, 0.175, 1);
          transition: all 500ms cubic-bezier(0.770, 0, 0.175, 1);
}
.mobile .sideNav {
  padding-bottom: 1px;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/*    .SIDENAV-ENG    */

.sideNav-eng {
  font-size: 0.875em;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  background-color: #000;
  color: hsl(97, 3%, 95%);
  border-bottom: 1px solid hsl(97, 3%, 30%);
}
.sideNav-eng a {
  display: block;
  padding: 0.75rem 1rem;
}
.sideNav-eng sup.new {
  margin-left: 0.5em;
  padding: 0.15625em 0.3125em;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 2px;
  background-color: #bea22f;
  color: #fff;
}

/*.    SIDENAV-ACTIVE .SIDENAV    */

.sideNav-active {
  overflow: hidden;
}
.sideNav-active .sideNav {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5), 0 0 3em rgba(0, 0, 0, 0.5);
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}
.sideNav-active .sideNav-overlay {
  opacity: 0.5;
  z-index: 1002;
  pointer-events: auto;
}
.sideNav-logo {
  display: none !important;
  height: 2.75em;
  margin: 2em auto 1em;
  background-image: url(../img/PASSIONTIMES_LOGO_W_TRIM.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/*    .SIDENAV-BTN    */

.sideNav-btn {
  display: none;
  overflow: hidden;
  clear: both;
  width: 16rem;
  margin: auto;
  padding: 1em;
  background-color: hsl(97, 3%, 15%);
  border-top: 1px solid hsl(97, 3%, 20%);
}
.sideNav-btn .btnCon {
  overflow: hidden;
  width: auto;
  margin: auto -0.5em;
}
.sideNav-btn .btn55 {
  float: left;
  padding: 0 0.5em;
  width: 50%;
}
.sideNav-btn a {
  display: block;
  width: 100%;
  font-size: 0.875em;
  text-align: center;
  line-height: 36px;
  font-weight: bold;
  background-color: #bea22f;
  color: hsl(97, 3%, 100%);
}
.sideNav-btn .sideNav-register {
  background-color: hsl(97, 3%, 30%);
}
.sideNav-btn .sideNav-login {}

/*    .SIDENAV .SIDENAV-ACCOUNT    */

.sideNav .sideNav-account {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 1em 1.5em;
  background-color: hsl(97, 3%, 15%);
}
.sideNav .sideNav-account .imgBox {
  width: 6em;
  height: 6em;
  margin: auto;
  border: 3px solid #bea22f;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/host/%E5%B0%8F%E8%8F%9C.jpg);
}
.sideNav .sideNav-account .textBox {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  text-align: center;
}
.sideNav .sideNav-account .textBox h4 {
  font-size: 1em;
  font-weight: bold;
  color: hsl(97, 3%, 95%);
}
.sideNav .sideNav-account .textBox h5 {
  margin-top: 0.125em;
  color: hsl(97, 3%, 70%);
}
.sideNav .sideNav-account .btnCon {
  margin-top: 1em;
}

.sideNav-btn ~ .sideNav-ul,
.sideNav-account ~ .sideNav-ul {
  margin-top: 1em;
}

/*    .SIDENAV LI    */

.sideNav-ul li {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
}
.sideNav-ul li,
.sideNav-ul li > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 50px;
  color: hsl(97, 3%, 70%);
}

/*    .SIDENAV-UL    */

.sideNav-ul {
  width: 100%;
}

/* =============================================================================
   .SIDENAV-LI DD TOGGLE (LEVEL 1 > LEVEL 2)
   ========================================================================== */

/*    .SIDENAV I.PT-ARROW-DOWN    */

.sideNav i.pt-arrow-down {
  position: absolute;
  top: 0;
  left: auto;
  right: 1rem;
  margin: 10px auto;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  line-height: 30px;
  border-radius: 50%;
  color: hsl(97, 3%, 70%);
  background-color: hsl(97, 3%, 30%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.sideNav i.pt-arrow-down.active {
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25);
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* =============================================================================
   .SIDENAV-LI (LEVEL 1)
   ========================================================================== */

/*    .SIDENAV-LI > A    */

.sideNav-li        > a {
  padding: 0 4rem 0 3.75rem;
}
.sideNav-li:hover  > a {
  color: hsl(97, 3%, 95%);
  box-shadow: inset 5px 0 hsl(97, 3%, 40%);
}
.sideNav-li.active > a {
  color: hsl(97, 3%, 95%);
  box-shadow: inset 5px 0 #bea22f;
}

/*    .SIDENAV-LI ICON    */

.sideNav-li > a > i {
  position: absolute;
  top: 0;
  left: 0.75rem;
  margin: auto;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  line-height: 50px;
  text-align: center;
}

/* =============================================================================
   .SIDENAV-LI .SIDENAV-SUBNAV (LEVEL 2)
   ========================================================================== */

/*    .SIDENAV-SUBNAV    */

.sideNav-subNav {
  overflow: hidden;
  width: 100%;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}
.sideNav-subNav.active {
  height: auto;
  visibility: visible;
  pointer-events: auto;
}

/*    .SUBNAV-UL    */

.subNav-ul {
  padding: 0.5rem 0;
  background-color: hsl(97, 3%, 15%);
}
.subNav-ul li a {
  padding: 0 1.5rem;
  line-height: 40px;
}
.subNav-ul > li.active > a {
  color: hsl(97, 3%, 95%);
}

/* =============================================================================
   .SIDENAV-LI .SIDENAV-SUBNAV .DD-HEADER (LEVEL 3)
   ========================================================================== */

.subNav-ul .dd-header > ul {
  display: none;
  height: 0;
  visibility: hidden;
  padding: 0 0 0.5rem 1rem;
}
.subNav-ul .dd-header > ul.active {
  height: auto;
  visibility: visible;
  display: block;
}

/* =============================================================================
   .SIDENAV-SUB
   ========================================================================== */

/*    .SIDENAV-SUB    */

.sideNav-sub {
  padding: 1rem;
}
.sideNav-sub .sub {
  overflow: hidden;
  padding: 1em 1.5em 1.25em;
  text-align: center;
  border-radius: 3px;
  background-color: hsl(97, 3%, 15%);
  box-shadow: inset 0 -1px 3px hsl(97, 3%, 10%);
}
.sideNav-sub .sub h4 {
  font-weight: bold;
  color: hsl(97, 3%, 95%);
  line-height: 1.5;
}
.sideNav-sub .sub button {
  margin-top: 0.75em;
}

/* =============================================================================
   .SIDENAV-FOOTER
   ========================================================================== */

/*    .SIDENAV-FOOTER    */

.sideNav-footer {
  padding: 0 1em 2em;
}
.sideNav-footer button.dark {
  margin-bottom: 1em;
  background-color: hsl(97, 3%, 15%);
  color: hsl(34, 3%, 70%);
}
.sideNav-footer ul {
  text-align: center;
  margin-bottom: 1em;
}
.sideNav-footer li {
  display: inline-block;
  font-size: 0.75em;
  line-height: 2;
  padding: 0 0.5em;
  color: hsl(97, 3%, 50%);
}
body.dark .sideNav-footer h5,
.sideNav-footer h5 {
  font-size: 0.675em;
  text-align: center;
  color: hsl(97, 3%, 50%);
}

/* =============================================================================
   .SIDENAV TRANSITION
   ========================================================================== */

/*    TRANSITION    */

.subNav-ul li,
.subNav-ul li a,
.sideNav i.pt-arrow-down {
  -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
       -o-transition: all 300ms ease;
          transition: all 300ms ease;
}

/* =============================================================================
   .INDEX-MOBILE-LIVE
   ========================================================================== */

.index-mobile-live {
  display: none;
  margin-top: -2rem;
  margin-bottom: 1em;
  padding: 0.75em 0;
  border-top: 2px solid #bea22f;
  border-bottom: 2px solid #bea22f;
  background-color: hsl(97, 3%, 90%);
}
body.dark .index-mobile-live {
  background-color: #000;
  border-color: hsl(97, 3%, 20%);
}
.mobile-live {
  padding: 0 1em;
  font-size: 1em;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  background-color: #bea22f;
  color: #fff;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .index-mobile-live {
    display: block;
  }
}

/* =============================================================================
   LIVE BADGE LIGHT ANIMATION
   ========================================================================== */

/*    LIVE BADGE LIGHT ANIMATION    */

@-webkit-keyframes liveBadgeLight {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
   @-moz-keyframes liveBadgeLight {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
    @-ms-keyframes liveBadgeLight {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
     @-o-keyframes liveBadgeLight {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
        @keyframes liveBadgeLight {
  0%   { opacity: 0; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}