@charset "utf-8";

@import "../initial";
.sitemenu{
  z-index: 1;
  position: relative;
}
.sitemenu1{
  margin-top: 1em;
}
.sitemenu-title{
  @extend .unity-title;
}
.sitemenu-wrap{
  // padding-right: 0.9375em!important;
  // padding-left: 0.9375em!important;
  z-index: 1;
  position: relative;
}
.sitemenu-item{
      list-style: none;
}
.sitemenu-horizontal {
  // padding-left: 1em;
  // padding-bottom: 0.5em;
  @include clearfix;

  .sitemenu-item.level-1 {
    @media(max-width: $screen-xs){
      margin-right: 0.5em;
      margin-bottom: 0.5em;
    }
    font-size: 1rem;
    position: relative;
    float: left;
    margin-right: 1%;
    margin-bottom: 0.5em;
    cursor: pointer;
    background-color: #fff;
    border-radius: 2em;
    color: #686868;
    text-align: center;
    margin-right: 1em;
    border:1px solid #6868688f;
    position: relative;
    padding: 0.5em 1em;

    &:hover {
      background: #adb5bd33;
      a{
        color: $theme-color-second;
      }
      .sitemenu-list.level-2 {
        display: block;
      }
    }
  }

  .sitemenu-link.level-1 {
    margin-right: .25rem;
  }

  .sitemenu-dropdown-toggle {
    font-size: 0.75rem;
    padding: 0.125em .3125rem;
    cursor: pointer;
    color: #fff;
  }
.sitemenu-item.level-2 {
    padding: 0.5em;
}
  // sitemenu dropdown
  .sitemenu-list.dropdown-menu {
        width: max-content;
    margin-top: 0;
    border: none;
    border-radius: .2em;
    border: 1px solid #6868688f;
        padding: 0;
  }

  .sitemenu-link.level-2 {
    color: $theme-white;
    font-size: 1rem;
    padding: 0.25em 0.625rem;

    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
}

.sitemenu-vertical {
      border: 1px solid #6868688f;
      padding: 1em;
      background-color: #fff;
  .sitemenu-list {
    position: relative;
    float: none;
    background-color: transparent;
    box-shadow: none;
  }

  .sitemenu-item.level-1 {
    padding: 0.625em 1.25em;
    position: relative;
    &:hover {
      background: #adb5bd33;
    }
  }

  .sitemenu-link {
    font-size: 1rem;
  }

  .sitemenu-dropdown-toggle {
    font-size: 0.75rem;
    padding: 0.125em .3125rem;
    cursor: pointer;
  }

  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
  }

  .sitemenu-link.level-2 {
    font-size:1rem;
    padding: 0.25em 0.625rem;

    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
}
.sitemenu-title{
  font-weight: bold;
  margin-top: 0;
}
.sitemenu-ul{
      padding: 0.5em 0;
}
.sitemenu-vertical2{
   .sitemenu-item.level-1 {
    &:hover {
      .sitemenu-list.dropdown-menu { display: block; }
    }
    ul{
      padding: 0;
    }
  }

  .sitemenu-link {
    font-size: 1.2em;
    color: #333333;
    vertical-align: top;
    background-image: url(/assets/plan_icon01.png);
    background-position: 15px;
    background-repeat: no-repeat;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    border-bottom: 1px solid #cacaca;
    color: #333333;
    border-radius: 4px;
    //behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 2px solid #DDD;
    padding: 1em;
    margin: 0 0 10px 0;
    width: 100%;
    display: flex;
    &:hover{
          border: 2px solid #333333;
          color: $theme-color-second;
          background: #adb5bd33;
    }
  }

  .sitemenu-dropdown-toggle {
    display: none!important;
  }

  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
    position: relative;
    float: none!important;
    box-shadow: none;
    background: none;
        margin: 0;
  }

  .sitemenu-link.level-2 {
    border: none;
    border-radius: 0;
    background-image: none;
    padding: 10px 5px 4px 15px;
    margin-left: 1em;
    background-image: url(/assets/icon_point.png) !important;
    background-position: 0;

    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
}
.sitemenu4{
   .sitemenu-item.level-1 {
    &:hover {
      .sitemenu-list.dropdown-menu { display: block;     top: 0;}
    }
    ul{
      padding: 0;
    }
  }
  .list-unstyled{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .sitemenu-item{
      width:calc(50% - 5px);
      margin: 5px;
      &:nth-child(odd){
        margin-left: 0;
      }
      &:nth-child(even){
        margin-right: 0;
      }
      @media(max-width:768px){
        &:nth-child(odd){
          margin-left: 0;
        }
        &:nth-child(even){
          margin-right: 0;
        }
      }
    }
  }

  .sitemenu-link {
    font-size:1.2em;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    color: #333333;
    border-radius: 4px;
    //behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 2px solid #DDD;
    padding: 1em;
    margin: 0 0 10px 0;
    width: 100%;
    display: flex;
    &:hover{
          border: 2px solid #333333;
          color: $theme-color-second;
          background: #adb5bd33;
    }
  }

  .sitemenu-dropdown-toggle {
    display: none!important;
  }

  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
    position: relative;
    float: none!important;
    box-shadow: none;
    background: none;
    margin: 0;
  }

  .sitemenu-link.level-2 {
    border: none;
    border-radius: 0;
    background-image: none;
    padding: 10px 5px 4px 15px;
    margin-left: 1em;
    background-image: url(/assets/icon_point.png) !important;
    background-position: 0;

    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
}

.sitemenu5{
   background-color: #fff;
    @media(min-width:769px){
      padding: 0.5em 0;
    }
  .sitemenu-ul{

    ul.sitemenu-list.level-2.dropdown-menu.dropdown-menu {
      display: none !important;
    }
    .sitemenu-dropdown-toggle{
      display: none !important;
    }
  }
  .sitemenu-item{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-link.level-1 {
    margin-right: 0;
  }
  .sitemenu-wrap{
    .sitemenu-brand{
      display: inline-block;
      float: left;
      @media(max-width: 768px){
        display: none;
      }
    }
  }
  ul.sitemenu-list.level-1.list-unstyled{
    @media(min-width:769px){
          margin-left: 16px;
    }
    display: flex;
    align-items: center;
    margin-bottom: 0;
        float: left;
    // &:before{
    // content: '';
    // display: block;
    // background-image: url(/assets/logo-pts.png);
    // width: 100px;
    // height: 70px;   
    // position: relative;
    // background-repeat: no-repeat;
    // background-size: contain;
    // }
  }
  li.sitemenu-item.level-1 {
    border: 0 !important;
    margin: 0;
    padding: 0.5em!important;
  }
}
.sitemenu6{
  padding: 0.5em 0;
  background: linear-gradient(to right, #ff6bab 0%, #406dff 17%, #0061d8 41%, #ea00ff 100%);
  color: #fff;
  .sitemenu-link.level-1 {
    margin-right: 0;
}
  ul.sitemenu-list.level-1.list-unstyled{
    margin-bottom: 0;
  }
  a{
    color: #fff;
  }
  li.sitemenu-item.level-1 {
    background-color: transparent !important;
    border: 0;
    margin: 0;
  }
}
.sitemenu7{

    background: linear-gradient(to right, #ff6bab 0%, #406dff 17%, #0061d8 41%, #ea00ff 100%);
    color: #fff;
  .sitemenu-item{
    &:hover{
      a{
            color: #FF0086!important;
      }
    }
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-link.level-1 {
    margin-right: 0;
  }
  .sitemenu-wrap{
    display: flex;
    flex-wrap: wrap;
    .sitemenu-brand{
      width: 100px;
      padding: 1em;
      @media(max-width: 768px){
        display: none;
      }
    }
  }
  ul.sitemenu-list.level-1.list-unstyled{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    // &:before{
    // content: '';
    // display: block;
    // background-image: url(/assets/logo-pts.png);
    // width: 100px;
    // height: 70px;   
    // position: relative;
    // background-repeat: no-repeat;
    // background-size: contain;
    // }
  }
  li.sitemenu-item.level-1 {
    border: 0 !important;
    margin: 0;
    padding: 0.5em!important;
    background-color: transparent;
    a{
      color: #fff;
    }
  }
}
.sitemenu8{
    background-color: #00a0e9b3;
    @media(min-width:769px){
      padding: 0.5em 0;
    }
  li.sitemenu-item.level-1 {
    &:hover{
      a.sitemenu-link.level-1{
    color: #fffbc7!important;
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
      }
    }
  }
  a.sitemenu-link.level-1{
    color: #fff;
    display: inline-block;
  }
  .sitemenu-ul{

  }
  .sitemenu-item{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-link.level-1 {
    margin-right: 0;
  }
  .sitemenu-link.level-2{
    @media(min-width:769px){
    color: #333!important;
    }
  }


  .sitemenu-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    .sitemenu-brand{
      &:hover{
        -webkit-animation-name: hvr-wobble-top;
        animation-name: hvr-wobble-top;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        .site-logo {
          content: url("/assets/pts_logo.png");
        }
    }
      display: inline-block;
      padding: 0;
      float: left;
      @media(max-width: 768px){
        display: none;
      }
    }
  }
  ul.sitemenu-list.level-1.list-unstyled{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    float: left;
  }
  li.sitemenu-item.level-1 {
    border: 0 !important;
    margin: 0;
    padding: 0.5em!important;
        background: transparent;
  }
  @-webkit-keyframes hvr-wobble-top {
      16.65% {
          -webkit-transform: skew(-12deg);
          transform: skew(-12deg)
      }

      33.3% {
          -webkit-transform: skew(10deg);
          transform: skew(10deg)
      }

      49.95% {
          -webkit-transform: skew(-6deg);
          transform: skew(-6deg)
      }

      66.6% {
          -webkit-transform: skew(4deg);
          transform: skew(4deg)
      }

      83.25% {
          -webkit-transform: skew(-2deg);
          transform: skew(-2deg)
      }

      100% {
          -webkit-transform: skew(0);
          transform: skew(0)
      }
  }

  @keyframes hvr-wobble-top {
      16.65% {
          -webkit-transform: skew(-12deg);
          transform: skew(-12deg)
      }

      33.3% {
          -webkit-transform: skew(10deg);
          transform: skew(10deg)
      }

      49.95% {
          -webkit-transform: skew(-6deg);
          transform: skew(-6deg)
      }

      66.6% {
          -webkit-transform: skew(4deg);
          transform: skew(4deg)
      }

      83.25% {
          -webkit-transform: skew(-2deg);
          transform: skew(-2deg)
      }

      100% {
          -webkit-transform: skew(0);
          transform: skew(0)
      }
  }
}
.sitemenu-ul8{
    li.sitemenu-item.level-1 {
    &:hover{
      a.sitemenu-link.level-1{
    color: #fffbc7!important;
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
      }
    }
  }
  .sitemenu-item.level-1 > a.sitemenu-link.level-1::before {
      font-family: "FontAwesome"; 
      margin-right: 8px;          
      display: inline-block;
  }

  .sitemenu-item.level-1:nth-child(1) > a.sitemenu-link.level-1::before {
      content: "\f27a";
  }

  .sitemenu-item.level-1:nth-child(2) > a.sitemenu-link.level-1::before {
      content: "\f185";
  }
  .sitemenu-item.level-1:nth-child(3) > a.sitemenu-link.level-1::before {
      content: "\f1d8";
  }

  .sitemenu-item.level-1:nth-child(4) > a.sitemenu-link.level-1::before {
      content: "\f005";
  }
}
.mobile-menu{
  .sitemenu-item{
    color: #fff;
    a{
      color: #fff;
          padding: 1em;
    display: inline-block;
    }
  }
  @media (max-width: 769px) {
    .sitemenu-ul {
    padding: 0;
    margin: 0;
    }
    .sitemenu-list.level-2, 
  .sitemenu-list.level-3 {
    display: none; 
    transition: none !important; /* 必須取消，否則 slideDown 會抖動 */
    position: static !important; /* 確保它是垂直推擠下方的元素 */
    transform: none !important;  /* 消滅 translate3d */
    float: none !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden; /* 確保滑動時內容不會溢出 */
    background: rgba(0,0,0,0.05);
  }
    .sitemenu-dropdown-toggle {
         float: right;
        position: absolute;
        right: 0;
        padding: 1em;
        top: 0.2em;
        color: #fff;
    }
    .sitemenu-list.level-2.dropdown-menu {
      width: 100%;
      border: 0;
      padding: 0;
    }

    .channel-list{
      margin: 0;
      width: 100%;
    }
    .channel-item{
      padding: 0 18px!important;
      width: auto;
      height: 60px!important;
      line-height: 60px!important;
      width: 33.3%;
        text-align: center;
    }
    /* 修正父層 li 為相對定位，方便箭頭定位 */
    .sitemenu-item {
        position: relative;
        clear: both;
    }
  }
}
.channel-list {
      padding: 0;
  .is-active {
    background-color: #056bce;
  }
  .channel-item:nth-child(2) {
    border-left: #fff 1px solid;
    border-right: #fff 1px solid;
  }
  a{
    color: #fff;
  }
  .channel-item{
    list-style: none;
        border-radius: 2px;
        height: auto;
        padding: 0 10px;
        line-height: 24px;

    float: left;
    a{

    }
  }
        position: relative;
        top: 0;
        float: left;
        margin: 0 24px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        background-color: #04519c;
}
.tv-program {
  @media(max-width:768px){
    display: none;
  }
    a{
    color: #fff;
  }
  color: #fff;
    position: relative;
    float: left;
    margin-left: 24px;
    padding: 0 10px 0 36px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    background-color: #04519c;
    &:before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 3px;
      left: 10px;
      text-indent: -119988px;
      overflow: hidden;
      text-align: left;
      background-image: url(/assets/ic-tv.svg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      width: 18px;
      height: 17px;
      background-position: center center;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain;
    }
}

.sitemenu9{
  .dropdown-menu{
        background-color: #FFFFFF !important;
    border-color: RGBA(0, 0, 0, 0)!important;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-transform: translateZ(0);
  }
    background: linear-gradient(to right, #ff6bab 0%, #406dff 17%, #0061d8 41%, #ea00ff 100%);
    color: #fff;
  .sitemenu-item{
        &:last-child{
          .dropdown-menu {
            right: 0;
           }
        }
        &:nth-last-child(2){
          .dropdown-menu {
            right: 0;
          }
        }
    a.sitemenu-link.level-2{
      color: #262626!important;
      &:hover{
        color: #FF0086!important;
      }
    }
    &:hover{
      & > .sitemenu-link{
            color: #FF0086!important;
      }
    }
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-link.level-1 {
    margin-right: 0;
  }
  .sitemenu-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    .sitemenu-brand{
      width: 100px;
      padding: 1em;
      @media(max-width: 768px){
        display: none;
      }
    }
  }
  ul.sitemenu-list.level-1.list-unstyled{
    display: flex;
    align-items: center;
    margin-bottom: 0;
        justify-content: flex-end;
    // &:before{
    // content: '';
    // display: block;
    // background-image: url(/assets/logo-pts.png);
    // width: 100px;
    // height: 70px;   
    // position: relative;
    // background-repeat: no-repeat;
    // background-size: contain;
    // }
  }
  li.sitemenu-item.level-1 {
    border: 0 !important;
    margin: 0;
    padding: 0.5em!important;
    background-color: transparent;
    a{
      color: #fff;
    }
  }
}
.sitemenu10{
  &:after {
    content: "";
    display: block;
    background: linear-gradient(90deg, #FF6BAB 0%, #406DFF 23.08%, #0061D8 52.39%, #EA00FF 100.73%);
    height: 4px;
  }
  .dropdown-menu{
        background-color: #FFFFFF !important;
    border-color: RGBA(0, 0, 0, 0)!important;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-transform: translateZ(0);
  }
    background: #262626;
    color: #fff;
  .sitemenu-item{
        &:last-child{
          .dropdown-menu {
            right: 0;
           }
        }
        &:nth-last-child(2){
          .dropdown-menu {
            right: 0;
          }
        }
    a.sitemenu-link.level-2{
      color: #262626!important;
      &:hover{
        color: #FF0086!important;
      }
    }
    &:hover{
      & > .sitemenu-link{
            color: #FF0086!important;
      }
    }
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-link.level-1 {
    margin-right: 0;
  }
  a.sitemenu-link.level-1{
    color: #fff;
    display: inline-block;
  }
  .sitemenu-item{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .sitemenu-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%!important;
    justify-content: space-between;
    
    @media(min-width:769px){
    padding-right: 80px;
    padding-left: 80px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    }
    .sitemenu-brand{
      display: inline-block;
      padding: 0;
      float: left;
      @media(max-width: 768px){
        display: none;
      }
    }
  }
  ul.sitemenu-list.level-1.list-unstyled{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    float: left;
  }
  li.sitemenu-item.level-1 {
    border: 0 !important;
    margin: 0;
    padding: 0.5em!important;
    background: transparent;
  }
}
.sitemenu-ul10{
  @media(max-width:768px){
    .sitemenu-dropdown-toggle{
      display: none;
    }
  }
}