/* =============================================================================
   .PROG-INFO IMG & TEXT
   ========================================================================== */

/*    .PROG-INFO IMG & TEXT    */

.prog85 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-85.jpg);}
.prog85 .prog-info-text h2:before {content:'大香港早晨';}
.prog83 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-83.jpg);}
.prog83 .prog-info-text h2:before {content:'熱血政治';}
.prog07 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-7.jpg);}
.prog07 .prog-info-text h2:before {content:'耶教異聞錄';}
.prog12 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-12.jpg);}
.prog12 .prog-info-text h2:before {content:'少女熱線';}
.prog13 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-13.jpg);}
.prog13 .prog-info-text h2:before {content:'Game民力量';}
.prog02 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-2.jpg);}
.prog02 .prog-info-text h2:before {content:'腐女民主連線';}
.prog25 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-25.jpg);}
.prog25 .prog-info-text h2:before {content:'腐女人妻媒體';}
.prog23 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-23.jpg);}
.prog23 .prog-info-text h2:before {content:'索書號';}
.prog21 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-21.jpg);}
.prog21 .prog-info-text h2:before {content:'宅文化研究';}
.prog35 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-35.jpg);}
.prog33 .prog-info-text h2:before {content:'港豬想旅行';}
.prog34 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-34.jpg);}
.prog34 .prog-info-text h2:before {content:'The Crazy Ones';}
.prog36 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-36.jpg);}
.prog36 .prog-info-text h2:before {content:'深宵FOOL人信箱';}
.prog43 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-43.jpg);}
.prog43 .prog-info-text h2:before {content:'腹黑議事廳';}
.prog14 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-14.jpg);}
.prog14 .prog-info-text h2:before {content:'熱血神奇膠';}
.prog04 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-4.jpg);}
.prog04 .prog-info-text h2:before {content:'麻甩建港聯盟';}
.prog05 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-5.jpg);}
.prog05 .prog-info-text h2:before {content:'笑死朕';}
.prog51 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-51.jpg);}
.prog51 .prog-info-text h2:before {content:'實戰攻擋';}
.prog54 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-54.jpg);}
.prog54 .prog-info-text h2:before {content:'靈鏡MMR';}
.prog62 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-62.jpg);}
.prog62 .prog-info-text h2:before {content:'熱血親子團';}
.prog61 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-61.jpg);}
.prog61 .prog-info-text h2:before {content:'咬蔗幫';}
.prog72 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-72.jpg);}
.prog72 .prog-info-text h2:before {content:'古惑仔俱樂部';}
.prog15 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-15.jpg);}
.prog15 .prog-info-text h2:before {content:'人妻先修班';}
.prog01 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-1.jpg);}
.prog01 .prog-info-text h2:before {content:'奇奧研究社';}
.prog73 .prog-info-logo {background-image: url(https://www.passiontimes.hk/images/tn/picon-73.jpg);}
.prog73 .prog-info-text h2:before {content:'熱血劇場';}

/* =============================================================================
   .PROG-WRAP
   ========================================================================== */

.progWrap {
  margin: 2em auto;
}
.progWrap > .maxWrapper {
  position: relative;
  padding-right: 23.75rem;
}
.progEp-list-wrap {
  clear: both;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 1280px) {
  .progWrap {
    margin: 1.5em auto;
  }
  .progWrap > .maxWrapper {
    padding-right: 21.75rem;
  }
}
@media screen and (max-width: 1200px) {
  .progWrap {
    margin: 1.25em auto;
  }
  .progWrap > .maxWrapper {
    padding-right: 21.25rem;
  }
}
@media screen and (max-width: 1024px) {
  .progWrap {
    margin: auto -1rem 1rem;
  }
  .progWrap > .maxWrapper {
    max-width: 100%;
    padding: 0 1rem;
  }
  .progEp-list-wrap {
    padding: 0 2rem;
  }
}
@media screen and (max-width: 768px) {
  .progEp-list-wrap {
    padding: 0 1.5rem;
  }
}
@media screen and (max-width: 568px) {
  .progEp-list-wrap {
    padding: 0 1.25rem;
  }
}

/* =============================================================================
   PROG HEADER
   ========================================================================== */

.prog-header-wrap {}
.prog-header {
  position: relative;
}
          .prog-header .prog-banner {
  height: 0;
  padding-top: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid hsl(97, 3%, 80%);
  border-bottom: none;
}
body.dark .prog-header .prog-banner {
  border-color: hsl(97, 3%, 20%);
}
.prog-header .prog-banner-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: auto;
  width: 500px;
  max-width: 80%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 1280px) {
  .prog-header .prog-banner {
    padding-top: 240px;
  }
}
@media only screen and (max-width: 1024px) {
  .prog-header .prog-banner {
    padding-top: 220px;
    border: none;
  }
}
@media only screen and (max-width: 768px) {
  .prog-header .prog-banner {
    padding-top: 200px;
  }
}
@media only screen and (max-width: 400px) {
  .prog-header .prog-banner {
    padding-top: 50%;
  }
}

/* =============================================================================
   PROG BANNER BACKGROUND & LOGO (TEMP IMG EDIT ME LATER)
   ========================================================================== */

/*宅文化研究*/
.prog21 .prog-banner {
  background-image: url(../img/top_banner_21n.png);
}
.prog21 .prog-banner-logo {
  background-image: url(../img/top_banner_21nl.png);
}

/*古惑仔俱樂部*/
.prog72 .prog-banner {
  background-image: url(../img/teddyboy.jpg);
}
.prog72 .prog-banner-logo {
  background-image: url(../img/top_banner_72l.png);
}

/*實戰攻擋*/
.prog51 .prog-banner {
  background-image: url(../img/top_banner_51n.png);
}
.prog51 .prog-banner-logo {
  background-image: url(../img/top_banner_51nl2.png);
}

/*大香港早晨*/
.prog85 .prog-banner {
  background-image: url(../img/top_banner_85n.png);
}
.prog85 .prog-banner-logo {
  background-image: url(../img/top_banner_85nl.png);
}

/* =============================================================================
   .PROG-INFO-WRAP
   ========================================================================== */

/*    .PROG-INFO-WRAP    */

.prog-info-wrap {
  position: absolute;
  top: 0;
  right: 2em;
  width: 300px;
}
@media only screen and (max-width: 1280px) {
  .prog-info-wrap {
    right: 1.5em;
  }
}
@media only screen and (max-width: 1200px) {
  .prog-info-wrap {
    right: 1.25em;
  }
}
@media only screen and (max-width: 1024px) {
  .prog-info-wrap {
    position: static;
    width: auto;
    padding: 0;
  }
}
@media only screen and (max-width: 768px) {
  .prog-info-wrap {
    width: auto;
  }
}

/*    .PROG-INFO    */

.prog-info {
  padding: 2em 0 1em;
  background-color: rgba(0, 0, 0, 0.75);
}
.prog-info-logo {
  width: 8rem;
  height: 8rem;
  margin: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*    TEMP IMG DELETE ME LATER    */
  background-image: url(../img/prog-th-51.png);
}
@media screen and (max-width: 1024px) {
  .prog-info {
    padding: 0;
  }
  .prog-info-logo {
    display: none;
  }
}

/*    .PROG-INFO-TEXT    */

          .prog-info-text {
  position: relative;
  margin: auto;
  padding: 0.75em 1em;
  text-align: center;
}
          .prog-info-text h2,
body.dark .prog-info-text h2 {
  font-size: 1.25rem;
  color: hsl(97, 3%, 95%);
}
          .prog-info-text h4,
body.dark .prog-info-text h4 {
  color: hsl(97, 3%, 70%);
}
          .prog-info-text h5,
body.dark .prog-info-text h5 {
  margin-top: 0.25rem;
  color: hsl(97, 3%, 70%);
}

@media screen and (max-width: 1024px) {
  .prog-info-text {
    padding: 0;
  }
  .prog-info-text h5,
  .prog-info-text h4,
  .prog-info-text h2 {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .prog-info-text h5 {
    margin: auto;
  }
}

/*    .PROG-SOCIAL    */

.prog-social {
  margin: 0.5em auto;
  text-align: center;
}
.prog-social a {
  display: inline-block;
  color: hsl(97, 3%, 70%);
}
.prog-social a ~ a {
  margin-left: 0.5em;
}
@media screen and (min-width: 1025px) {
  .prog-social a:hover {
    color: hsl(97, 3%, 95%);
  }
}
@media screen and (max-width: 1024px) {
  .prog-social {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    margin: auto;
    width: 66.6666666666%;
  }
            .prog-social a {
    float: left;
    width: 50%;
    margin: auto;
    border-left: 1px solid hsl(97, 3%, 90%);
    color: hsl(97, 3%, 50%);
  }
  body.dark .prog-social a {
    border-color: hsl(97, 3%, 20%);
    color: hsl(97, 3%, 70%);
  }
  .prog-social a ~ a {
    margin-left: auto;
  }
  .prog-social a i {
    line-height: 40px;
  }
}

/* =============================================================================
   PROG-INFO-MOBILE
   ========================================================================== */

.pInfoM-toggle,
.pInfoM-content,
.pRaiseLink {
  display: none;
}

/*    .PROG-INFO-MOBILE-TOGGLE    */

.pInfoM-toggle {}
.pInfoM-toggle:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
          .pInfoM-toggle li {
  float: left;
  width: 50%;
  font-size: 0.875rem;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
  color: hsl(97, 3%, 20%);
  background-color: hsl(97, 3%, 90%);
  border-bottom: 1px solid hsl(97, 3%, 80%);
  cursor: pointer;
  -webkit-user-select: none;
}
body.dark .pInfoM-toggle li {
  color: hsl(97, 3%, 95%);
  background-color: hsl(97, 3%, 20%);
  border-color: hsl(97, 3%, 20%);
}
          .pInfoM-toggle li.active {
  background-color: hsl(97, 3%, 97%);
  border-bottom: 1px solid hsl(97, 3%, 97%);
}
body.dark .pInfoM-toggle li.active {
  background-color: #000;
  border-color: #000;
}
          .pInfoM-toggle li ~ li {
  border-left: 1px solid hsl(97, 3%, 80%);
}
body.dark .pInfoM-toggle li ~ li {
  border-color: hsl(97, 3%, 20%);
}

/*    .PROG-RAISE-LINK    */

          .pRaiseLink {
  font-size: 0.875em;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid hsl(97, 3%, 90%);
  color: hsl(97, 3%, 20%);
}
body.dark .pRaiseLink {
  border-color: hsl(97, 3%, 20%);
  color: hsl(97, 3%, 95%);
}

@media screen and (max-width: 1024px) {
  .pInfoM-toggle,
  .pRaiseLink {
    display: block;
  }
  .pInfoM {
    font-size: 1rem;
  }
  .pTextM {
    min-height: 205px;
    font-size: 1rem;
    padding: 1em;
  }
            .pTextM h5 {
    margin-top: 0.25em;
    color: hsl(97, 3%, 50%);
  }
  body.dark .pTextM h5 {
    color: hsl(97, 3%, 70%);
  }
}

/* =============================================================================
   PROG HOST
   ========================================================================== */

/*    PROG HOST    */

          .prog-host {
  position: relative;
  padding: 0.5em 1em;
  font-size: 0.75em;
  line-height: 1.75;
  font-weight: bold;
  text-align: center;
  background-color: hsl(97, 3%, 97%);
  border: 1px solid hsl(97, 3%, 80%);
}
body.dark .prog-host {
  background-color: hsl(97, 3%, 10%);
  border-color: hsl(97, 3%, 20%);
}
.prog-host .header {
  color: hsl(97, 3%, 70%);
}
body.dark .prog-host .header {
  color: hsl(97, 3%, 70%);
}
.prog-host .header:before {
  content: '節目主持：';
}
.prog-host .header > i {
  display: none;
}
@media screen and (min-width: 1025px) {
  .prog-host .pInfoM,
  .prog-host .host-wrap,
  .prog-host .host-wrap-inner {
    display: inline;
  }
}
@media screen and (max-width: 1024px) {
  .prog-host {
    padding: 0;
    border-left: none;
    border-right: none;
  }
  .prog-host .host-wrap-inner {
    display: none;
    overflow-x: scroll;
    overflow-y: hidden;
    width: auto;
    padding: 1.5em 0;
    white-space: nowrap;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prog-host .header {
    display: block;
    width: 33.3333333333%;
    line-height: 40px;
    text-align: center;
    color: hsl(97, 3%, 50%);
    cursor: pointer;
  }
  .prog-host .header:before {
    content: '節目簡介';
  }
  .prog-host .header > i {
    display: inline-block;
  }
}

/*    PROG HOST .HOST    */

.prog-host .host {
  display: inline-block;
  position: relative;
  font-weight: bold;
  color: #bea22f;
  cursor: pointer;
}
.prog-host .host:after {
  content: '、';
  color: hsl(97, 3%, 70%);
  pointer-events: none;
}
.prog-host .host:last-child:after {
  content: none;
}
@media screen and (max-width: 1024px) {
  
  /*    .PROG-HOST .HOST-WRAP    */
  
            .prog-host .host-wrap {
    position: fixed;
    max-height: 75%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    width: 500px;
    max-width: 80%;
    height: 297px;
    margin: auto;
    text-align: left;
    background-color: hsl(97, 3%, 97%);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1), 0 0 0.25em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: bottom center;
       -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
         -o-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
       -moz-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
        -ms-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
         -o-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
            transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
    -webkit-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -moz-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
         -o-transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
            transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    /* easeOutExpo */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }
  body.dark .prog-host .host-wrap {
    background-color: #000;
  }
  
  /*    BODY.HOST-ACTIVE    */
  
  body.host-active {
    overflow: hidden;
    pointer-events: none;
  }
  body.host-active .dd-overlay {
    opacity: 0.5;
    pointer-events: auto;
  }
  body.host-active .prog-host .host-wrap {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale3d(1, 1, 1) translateY(0);
       -moz-transform: scale3d(1, 1, 1) translateY(0);
        -ms-transform: scale3d(1, 1, 1) translateY(0);
         -o-transform: scale3d(1, 1, 1) translateY(0);
            transform: scale3d(1, 1, 1) translateY(0);
  }
  
  /*    .PROG-HOST .HOST-WRAP .HOST    */
  
  .prog-host .host {
    display: inline-block;
    min-width: 8rem;
    text-align: center;
    white-space: normal;
  }
  .prog-host .host:after {
    content: none;
  }
            .prog-host .host ~ .host {
    border-left: 1px solid hsl(97, 3%, 90%)
  }
  body.dark .prog-host .host ~ .host {
    border-color: hsl(97, 3%, 20%)
  }  
  .prog-host .host span {
    display: none;
  }
  
  /*    .PINFOM-CONTENT.ACTIVE    */
  
  .pInfoM-content.active {
    display: block;
  }
}
@media screen and (max-width: 568px) {
  .prog-host .host-wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    top: auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/*    .PROG-HOST .MEDIA    */

@media screen and (min-width: 1025px) {
  .prog-host .media:before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    z-index: 10;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: hsl(97, 3%, 97%) transparent transparent transparent;
  }
  .prog-host .media {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 10;
    margin: auto;
    margin-bottom: 0.75em;
    width: 8rem;
    padding: 0.75em 0.75em;
    text-align: center;
    box-shadow: 0 0.3125rem 0.75rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    background-color: #fff;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translateY(2em) translateX(-50%);
       -moz-transform: translateY(2em) translateX(-50%);
        -ms-transform: translateY(2em) translateX(-50%);
         -o-transform: translateY(2em) translateX(-50%);
            transform: translateY(2em) translateX(-50%);
  }
  .prog-host .host.active .media,
  .desktop .prog-host .host:hover .media {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  
  /*    TRANSITION    */

  .prog-host .media {
    -webkit-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
       -moz-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
        -ms-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
         -o-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
            transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
  }
}
@media screen and (max-width: 1024px) {
            .prog-host .media,
  body.dark .prog-host .media {
    padding: 0 2em;
    background: transparent;
  }
}

/*    .PROG-HOST .MEDIA .IMGBOX    */

.prog-host .media .imgBox {
  width: 4rem;
  height: 4rem;
  margin: 0.5em auto;
  border-radius: 50%;
}
@media screen and (max-height: 320px) {
  /*    HIDE PROG-HOST IMGBOX WHEN THE DEVICE HEIGHT IS TOO SHORT    */
  .prog-host .media .imgBox {
    display: none;
  }
  .pTextM {
    min-height: 125px;
  }
}

/*    TEMP IMG DELETE ME LATER    */

.prog-host .media#host01 .imgBox {
  background-image: url(../img/host/Chrono.jpg);
}
.prog-host .media#host02 .imgBox {
  background-image: url(../img/host/%E5%B0%8F%E8%8F%9C.jpg);
}

/*    .PROG-HOST .MEDIA .TEXTBOX    */

.prog-host .media .textBox {
  font-size: 1rem;
}
.prog-host .media .textBox h4 {
  line-height: 1.3125;
}
.prog-host .media .textBox h6 {
  margin-top: 0.25rem;
}

/*    .PROG-HOST .MEDIA .HOST-SOCIAL    */

.prog-host .media .host-social i {
  padding: 0.25em;
  font-size: 1.25em;
  color: hsl(97, 3%, 50%);
}
.prog-host .media .host-social i:hover {
  color: #bea22f;
}
.prog-host .media .host-social a + * {
  margin-left: 0.25em;
}

/*    .PROG-HOST .MEDIA BUTTON    */

.prog-host .media .textBox button {
  margin-top: 0.75rem;
}
@media screen and (max-width: 1024px) {
  .prog-host .media .textBox button {
    max-width: 5rem;
  }
}

/* =============================================================================
   PROG-RAISE
   ========================================================================== */

/*    .PROG-RAISE    */

          .prog-raise {
  margin-top: 2em;
  padding: 1em;
  text-align: center;
  border: 1px solid hsl(97, 3%, 80%);
  background-color: hsl(97, 3%, 92%);
}
body.dark .prog-raise {
  border-color: hsl(97, 3%, 20%);
  background-color: hsl(97, 3%, 10%);
}
.prog-raise-logo {
  width: 100%;
  height: 90px;
  margin-top: -0.25em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/raise-logo2.png);
}
.prog-raise-head {
  font-size: 0.875em;
  text-align: center;
  color: hsl(97, 3%, 50%);
}
.prog-raise-list {
  margin: 0.5em auto 1em;
  padding-left: 1.25em;
  text-align: left;
}

/*    .PROG-RAISE-LIST .MEDIA    */

.prog-raise-list .media {
  position: relative;
}
.prog-raise-list .media ~ .media {
  margin-top: 0.75em;
}
.prog-raise-list .media:before {
  position: absolute;
  top: 0;
  left: -1.25rem;
  bottom: 0;
  font-size: 0.75em;
  line-height: 2.5rem;
  color: hsl(97, 3%, 20%);
}
.prog-raise-list .media:nth-child(1):before { content: '1'; }
.prog-raise-list .media:nth-child(2):before { content: '2'; }
.prog-raise-list .media:nth-child(3):before { content: '3'; }
.prog-raise-list .media:nth-child(4):before { content: '4'; }
.prog-raise-list .media:nth-child(5):before { content: '5'; }
.prog-raise-list .media:nth-child(6):before { content: '6'; }
.prog-raise-list .media:nth-child(7):before { content: '7'; }
.prog-raise-list .media:nth-child(8):before { content: '8'; }
.prog-raise-list .media:nth-child(9):before { content: '9'; }
.prog-raise-list .media:nth-child(10):before { content: '10'; }
.prog-raise-list .media:nth-child(11):before { content: '11'; }

/*    .PROG-RAISE-LIST .IMGBOX   */

.prog-raise-list .imgBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  -webkit-filter: grayscale(0.5);
          filter: grayscale(0.5);
}
.prog-raise-list .media:hover .imgBox {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

/*    TEMP IMG DELETE ME LATER    */

.prog-raise-list .media:nth-child(1) .imgBox { background-image: url(../img/host/%E9%BB%83%E6%B4%8B%E9%81%94.jpg); }
.prog-raise-list .media:nth-child(2) .imgBox { background-image: url(../img/host/%E9%99%B3%E5%9B%9B.jpg); }
.prog-raise-list .media:nth-child(3) .imgBox { background-image: url(../img/host/Chrono.jpg); }
.prog-raise-list .media:nth-child(4) .imgBox { background-image: url(../img/host/%E6%9C%AB%E6%97%A5%E7%8B%BC.jpg); }
.prog-raise-list .media:nth-child(5) .imgBox { background-image: url(../img/host/%E5%B0%8F%E8%8F%9C.jpg); }
.prog-raise-list .media:nth-child(6) .imgBox { background-image: url(../img/host/%E9%99%B3%E7%A7%80%E6%85%A7.jpg); }
.prog-raise-list .media:nth-child(7) .imgBox { background-image: url(../img/host/%E9%98%BFBi.jpg); }

/*    .PROG-RAISE-LIST .HOST-SPEECH   */

.prog-raise-list .host-speech:before {
  /*    SPEECHBUBBLE POINTER    */
  content: ' ';
  position: absolute;
  bottom: -8px;
  left: 0.5em;
  border-width: 0 0 8px 12px;
  border-style: solid;
  border-color: transparent #fff;
  -webkit-transform: skew(-10deg);
     -moz-transform: skew(-10deg);
      -ms-transform: skew(-10deg);
       -o-transform: skew(-10deg);
          transform: skew(-10deg);
}
.prog-raise-list .host-speech {
  position: absolute;
  left: 1.5rem;
  bottom: 2rem;
  z-index: 100;
  width: auto;
  margin: auto;
  padding: 0.5em;
  font-size: 0.75em;
  line-height: 1.3125;
  font-weight: bold;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
  color: hsl(97, 3%, 30%);
  -webkit-animation-duration: 400ms;
          animation-duration: 400ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-transform-origin: 16px 16px;
          transform-origin: 16px 16px;
  -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
       -o-transition: all 300ms ease;
          transition: all 300ms ease;
  pointer-events: none;
  opacity: 0;
}
.prog-raise-list .host-speech span {
  display: inline-block;
}
.prog-raise-list .media:hover .host-speech {
  opacity: 1;
  -webkit-animation-name: speechBubble;
          animation-name: speechBubble;
}

/*    TRANSITION (SPEECHBUBBLE KEYFRAMES)    */

@-webkit-keyframes speechBubble {
  from {
    -webkit-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
       -moz-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
        -ms-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
         -o-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
            transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
  }
  25% {
    -webkit-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
       -moz-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
        -ms-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
         -o-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
            transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
  }
  50% {
    -webkit-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
       -moz-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
        -ms-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
         -o-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
            transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
  }
  75% {
    -webkit-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
       -moz-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
        -ms-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
         -o-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
            transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
  }
  to {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
       -moz-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
         -o-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
            transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
  }
}
   @-moz-keyframes speechBubble {
  from {
    -webkit-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
       -moz-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
        -ms-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
         -o-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
            transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
  }
  25% {
    -webkit-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
       -moz-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
        -ms-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
         -o-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
            transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
  }
  50% {
    -webkit-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
       -moz-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
        -ms-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
         -o-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
            transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
  }
  75% {
    -webkit-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
       -moz-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
        -ms-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
         -o-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
            transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
  }
  to {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
       -moz-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
         -o-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
            transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
  }
}
    @-ms-keyframes speechBubble {
  from {
    -webkit-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
       -moz-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
        -ms-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
         -o-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
            transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
  }
  25% {
    -webkit-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
       -moz-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
        -ms-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
         -o-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
            transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
  }
  50% {
    -webkit-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
       -moz-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
        -ms-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
         -o-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
            transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
  }
  75% {
    -webkit-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
       -moz-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
        -ms-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
         -o-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
            transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
  }
  to {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
       -moz-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
         -o-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
            transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
  }
}
     @-o-keyframes speechBubble {
  from {
    -webkit-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
       -moz-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
        -ms-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
         -o-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
            transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
  }
  25% {
    -webkit-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
       -moz-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
        -ms-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
         -o-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
            transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
  }
  50% {
    -webkit-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
       -moz-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
        -ms-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
         -o-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
            transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
  }
  75% {
    -webkit-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
       -moz-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
        -ms-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
         -o-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
            transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
  }
  to {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
       -moz-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
         -o-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
            transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
  }
}
        @keyframes speechBubble {
  from {
    -webkit-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
       -moz-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
        -ms-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
         -o-transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
            transform: scale(0, 0) translate3d(-20%, 0, 0) rotate(-20deg);
  }
  25% {
    -webkit-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
       -moz-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
        -ms-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
         -o-transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
            transform: scale(1.5, 1.75) translate3d(6%, 0, 0) rotate(6deg);
  }
  50% {
    -webkit-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
       -moz-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
        -ms-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
         -o-transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
            transform: scale(0.95, 0.75) translate3d(-10%, 0, 0) rotate(-10deg);
  }
  75% {
    -webkit-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
       -moz-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
        -ms-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
         -o-transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
            transform: scale(1.25, 1.25) translate3d(3%, 0, 0) rotate(3deg);
  }
  to {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
       -moz-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
        -ms-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
         -o-transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
            transform: scale(1, 1) translate3d(0, 0, 0) rotate(0);
  }
}

/*    .PROG-RAISE-LIST .TEXTBOX   */

.prog-raise-list .textBox h4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  padding-left: 3.25rem;
  padding-right: 2.5rem;
  line-height: 2.5rem;
  color: hsl(97, 3%, 20%);
}
.prog-raise-list .raise-status {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0 0.3125em 0 0.25em;
  height: 1.75em;
  font-size: 0.75em;
  line-height: 1.75;
  border-radius: 3px;
  color: hsl(97, 3%, 50%);
}
.prog-raise-list .raise-status.up {
  color: hsl(97, 3%, 95%);
  background-color: #bea22f;
}
.prog-raise-list .raise-status.down {
  color: hsl(97, 3%, 95%);
  background-color: hsl(97, 3%, 50%);
}

@media only screen and (max-width: 1024px) {
  .prog-raise {
    display: none;
  }
}

/* =============================================================================
   PROGEP AD
   ========================================================================== */

.prog-ad {
  margin-top: 2em;
}
.prog-ad .media {
  width: 100%;
}
.prog-ad .adWrap img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.prog-ad .rectAd250 {
  display: none;
}
.prog-ad .rectAd250 .adWrap img {
  max-width: 250px;
  max-height: 250px;
}
.prog-ad .rectAd300 .adWrap img {
  max-width: 300px;
  max-height: 250px;
}
.prog-ad .adInfo {
  padding-top: 0.75em;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
  color: hsl(97, 3%, 50%);
}
@media only screen and (max-width: 1024px) {
  .prog-ad {
    display: none;
  }
}

/* =============================================================================
   .PAGE-NAVBAR
   ========================================================================== */

.page-Navbar {
  clear: both;
  margin: 0.5em auto;
  margin: auto;
}
.page-Navbar.pagination {
  margin: 1em auto auto;
  background-color: transparent;
  border: none;
}
@media screen and (min-width: 1025px) {
            .page-Navbar {
    background-color: hsl(97, 3%, 97%);
    border: 1px solid hsl(97, 3%, 80%);
  }
  body.dark .page-Navbar {
    background-color: hsl(97, 3%, 10%);
    border-color: hsl(97, 3%, 20%);
  }
  .page-Navbar .prev-page {
    left: 1rem;
  }
  .page-Navbar .next-page {
    left: auto;
    right: 1rem;
  }
  .page-Navbar h3 {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .page-Navbar {
    margin: 0.5em auto;
  }
  .page-Navbar h3 {
    display: block;
  }
}

/* =============================================================================
   PROGEP LIST
   ========================================================================== */

/*    PROGEP LIST    */

.progEp-list {
  margin-top: 0.5em;
  padding: 0 0.75em;
}
.progEp-list:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
@media screen and (max-width: 1024px) {
  .progEp-list {
    margin: -1em -0.75em auto;
    padding: 0;
  }
}
@media screen and (max-width: 640px) {
  .progEp-list {
    margin: -1em -0.5em auto;
  }
}

/* =============================================================================
   PROGEP MODULE & PROGEP MEDIA
   ========================================================================== */

/*    .PROGEP-MODULE    */

.progEp-module {
  float: left;
  width: 33.3333333333%;
  margin-top: 1.25em;
  padding: 0 0.75em;
}
.progEp-module:hover .imgBox {
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  .progEp-module {
    margin-top: 1em;
    padding: 0 0.5em;
  }
}
@media screen and (max-width: 568px) {
  .progEp-module {
    width: 50%;
  }
}
@media screen and (max-width: 420px) {
  .progEp-module {
    width: 100%;
  }
}

/*    .PROGEP .MEDIA    */

.progEp .media {}
.progEp .media.new:before {
  content: 'NEW';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0.5rem;
  font-size: 0.7em;
  line-height: 1.5;
  padding: 0 0.3125em;
  background-color: #bea22f;
  color: #fff;
}

/*    .PROGEP .MEDIA .IMGBOX    */

.progEp .media > a {
  position: relative;
  display: block;
  width: 100%;
  background-color: #000;
}
.progEp .media > a:before {
  /*    PROG ICON WHEN HOVER    */
  content: "\e600";
	font-family: 'pt-icon' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  margin: auto;
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  text-align: center;
  line-height: 3rem;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.75);
     -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
       -o-transform: scale(0.75);
          transform: scale(0.75);
  -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;
}
.progEp .progEp-module:hover .media > a:before {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}
.progEp .media .imgBox {
  width: 100%;
  height: 0;
  /*16:9*/
  padding-top: 56.25%;
  background-size: cover;
  background-color: #000;
  /*    TEMP IMG DELETE ME LATER    */
  background-image: url(../img/thumbnail.jpeg);
  background-image: url(../img/thumbnail3.png);
}

/*    .PROGEP .MEDIA .TEXTBOX    */

.progEp .media .textBox {
  position: relative;
  min-height: 58px;
  margin-top: 0.25em;
}
          .progEp .media .textBox h4 {
  /*js dot dot dot*/
  max-height: 4em;
  color: hsl(97, 3%, 20%);
}
body.dark .progEp .media .textBox h4 {
  color: hsl(97, 3%, 95%);
}
.progEp .media .textBox h6 {
  width: 100%;
  margin-top: 0.25em;
}
.progEp-module:hover .textBox h4 {
  color: #bea22f;
  text-decoration: underline;
}
@media screen and (max-width: 420px) {
  .progEp .media .textBox {
    min-height: 0;
  }
}

/*    .PROGEP-INFO    */

.progEp-info {
  display: inline-block;
}
.progEp-info .ep {}
.progEp-info .time {
  position: absolute;
  right: 0;
}
.progEp-info .time i {
  display: none;
}

/*    .PROGEP-SOCIAL    */

.progEp-social {
  display: inline-block;
  margin-left: 0.5em;
}
.progEp-social .action ~ .action {
  margin-left: 0.5em;
}

/*    TRANSITION    */

.progEp .media .imgBox {
  -webkit-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
       -o-transition: all 300ms ease;
          transition: all 300ms ease;
}

/*    .PROGEP-MODULE.PROGEP-AD    */

.progEp-module.progEp-ad {
  width: 100%;
}
.progEp-module.progEp-ad + .progEp-module {
  clear: both;
}

/*    .PROGEP-LIST .RECTAD680    */

          .progEp-list .rectAd680 {
  clear: both;
  padding: 0.75em 1em 0;
  border-top: 1px solid hsl(97, 3%, 90%);
  border-bottom: 1px solid hsl(97, 3%, 90%);
}
body.dark .progEp-list .rectAd680 {
  border-color: hsl(97, 3%, 20%);
}
.progEp-list .rectAd680 > a {
  display: block;
}
.progEp-list .rectAd680 .adInfo {
  padding-top: 10px;
  padding-bottom: 12px;
  font-size: 0.75em;
  line-height: 1;
  text-align: center;
  color: hsl(97, 3%, 60%);
}
.progEp-list .rectAd680 .adWrap img {
  max-width: 680px;
  max-height: 125px;
}

@media screen and (max-width: 568px) {
  .progEp-list .rectAd680 {
    padding: 0;
    border: none;
  }
  .progEp-list .rectAd680 .adInfo {
    display: none;
  }
}