@charset "utf-8";

@import "../initial";

//
// Widget
//

// Announcement widget
// ## Gerneral styles for widgets
.w-annc__table{
      // border: 0.0625em solid #ddd !important;
  .w-annc__th{
    @extend .i-title;
  }
}
// .w-annc__th{
//   border-bottom:0.0625em solid #ddd!important;
// }
.w-annc tr {
    border: 0.0625em solid #ddd !important;
}
.w-annc__item{
  padding-bottom: 1em;
}
.w-annc .w-annc__subtitle{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  padding-bottom:0;
  // height: 2.5em;
}
.w-annc__table{
  background-color: #fff;
  .w-annc__th{
    border-bottom: 0.125em solid #ddd;
  }
  tr{
    @media(max-width: $screen-xs){
    margin-bottom: 10px;
    }
  }
}
.w-annc__item {
  background-color: #fff;
  list-style: none;
  @media(max-width: $screen-xs){
    padding-right: 0.5em;
    padding-left: 0.5em;
  }
}
.w-annc {
  position: relative;
  z-index: 1;
  .w-annc__widget-title {
    @extend .unity-title;
  }

  .w-annc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 1.25em;
  }


  .label {
    font-size: 0.75rem;
    font-weight: normal;
  }
  .w-annc__postdate,
  .w-annc__category {
    white-space: nowrap;
    @extend .i-subtitle;
  }
  .w-annc__status-wrap,
  .w-annc__postdate-wrap,
  .w-annc__category-wrap {
    @extend .i-title;
  }
  .w-annc__meta {
    .w-annc__status-wrap,
    .w-annc__postdate-wrap,
    .w-annc__category-wrap {
      // display: inline-block;
      // margin-right: 0.2em;
      @extend .i-title;
      color: $theme-color-main;
      font-weight: normal;
    }

    i {
      color:$theme-color-main;
    }
  }

  .w-annc__subtitle {
    @extend .i-title;
    color: $theme-color-main;
  }

  .w-annc__entry-title {
    margin-bottom: 0.625em;
    margin-top: 0.5em;
  }

  .w-annc__title {
    font-family: $sub-font;
    text-decoration: none;
    @extend .i-title;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      // color: darken($theme-color-main, 10%);
    }
  }
}

// Widget-1
.widget-announcement-1 {
  .w-annc__more-wrap{
    display: none;
  }

  .w-annc__title {
    font-family: $main-font;
  }
  .w-annc__img-wrap {
    margin-bottom: 0.5em;
    .w-annc__img{
      width: 100%;
      position: relative !important;
    }
  }
  .w-annc__item{
    background-color: #fff;
    border: 1px solid #dedcdc;
    margin-bottom: 1em;
    padding: 0;
    &:hover{
      transition: all .3s;
      transform: translate(-5px, -10px);
      box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
  }
  .w-annc__entry-title{

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .w-annc__meta{
    padding:  1em;
    display: none;
  }
  .w-annc__subtitle{
    padding:1em;
  }
  .w-annc__entry-title{
    padding: 0 1em;
  }
}

// Widget-2
.widget-announcement-2 {
  // @media(min-width: 768px){
  // .col-sm-4{
  //   width: 33.33333333%;
  //   float: left;
  // }
  // .col-sm-8{
  //   width: 66.66666667%;
  //   float: left;
  // }
// }
  .w-annc__item{
    background-color: #fff;
    border: 1px solid #dedcdc;
    margin-bottom: 1em;
    padding: 0;
    &:hover{
      transition: all .3s;
      transform: translate(-5px, -10px);
      box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
  }
  .w-annc__content-wrap {
    padding-top: 1em;
    @media(max-width: $screen-xs){
      padding-right: 0.9375em;
      padding-left: 0.9375em;
    }
  }
  .w-annc__item{
    padding-bottom: 0;
  }
  .w-annc__img-wrap {
    height: 12.5em;
    margin:0;
  }

  .w-annc__title {
    font-family: $main-font;
  }
}

// Widget-3
.widget-announcement-3 {
  .w-annc__item{
    background-color: #fff;
    border: 1px solid #dedcdc;
    margin-bottom: 1em;
    padding: 0;
    &:hover{
      transition: all .3s;
      transform: translate(-5px, -10px);
      box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
  }
  .w-annc__content-wrap {
    padding-top: 1em;
    @media(max-width: $screen-xs){
      padding-right: 0.9375em;
      padding-left: 0.9375em;
    }
  }
  .w-annc__item{
    padding-bottom: 0;
  }
  .w-annc__img-wrap {
    height: 12.5em;
    margin:0;
  }

  .w-annc__title {
    font-family: $main-font;
  }
}

// Widget-4
.widget-announcement-4 {
  .w-annc__title {
    font-family: $main-font;
    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
  }
  .w-annc__more { margin-top: 1.5em; }
  .w-annc__list > .w-annc__item:nth-child(3n+1) {
    clear: both;
  }
  .w-annc__entry-title {
    height: 2.5em;
  }
  .w-annc__img-wrap {
    height: 14.5em;
    margin:0;
    .w-annc__img{
      width: 100%;
    }
  }
  .w-annc__content-wrap{
    padding: 1.5em;
    div{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .clearfix{
    // text-align: center;
    // display: flex;
    // justify-content: center;
    // margin-bottom: 2em;
  }
  .w-annc__content-wrap {
   &:after {
     content: '';
     display: block;
     margin-top: 5px;
     height: 4px;
     width: 0;
     background: transparent;
     transition: width .5s ease, background-color .5s ease;
   }
  }
   .w-annc__item{
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     background: #fff;
      -webkit-box-shadow: 0 1px 2px 0 #0000002e;
      box-shadow: 0 1px 2px 0 #0000002e;
      margin-right: 0.5em;
      margin-left: 0.5em;
      margin-bottom: 1em;
      padding: 0;
     &:hover{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
         .w-annc__content-wrap:after{
           width: 100%;
          background: $theme-color-main;
         }
     }
     @media(max-width: $screen-xs){
       margin-left: 0!important;
       margin-right: 0!important;
       width: 100% !important;
     }
   }
  .w-annc__item{
    // @media(min-width:  $screen-lg){
    //   width:382px !important;
    // }
    // @media(max-width: 1025px)and(min-width: 821px){
    //   width: 30.5vw !important;
    // }
    // @media(max-width: 820px)and(min-width: 768px){
    //   width: 356px!important;
    // }
    // @media (max-width: $screen-xs) {
    //   width: 94vw !important;
    //   margin-left: 0 !important;
    //   margin-right: 0 !important;
    // }
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      img{
          // transform: scale(1.2);
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
      }
      .transitionfade{
        height: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.4);
        -webkit-transition: .3s ease-out;
        -moz-transition: .3s ease-out;
        -ms-transition: .3s ease-out;
        -o-transition: .3s ease-out;
        transition: .3s ease-out;
      }
    }
  }
}

//  Widget-20
.widget-announcement-20 {
  .cycle-carousel-wrap{
    display: flex;
    align-items: baseline;
  }
  .w-annc__entry-title{
    margin: 0;
  }
  .w-annc__meta i{
    color: #fff!important;
  }
  .w-annc__list{
    display: flex;
    justify-content: center;
  }
  .w-annc__postdate-wrap{
    color: #fff!important;
  }
  .w-annc__status-wrap{
    color: #fff!important;
  }
  .w-annc__category-wrap{
    color: #fff!important;
  }

  .w-annc__title{
    color: #fff;
    @media(min-width:1920px){
      font-size: 1.6rem!important;
    }
  }
  .w-annc__title {
    font-family: $main-font;
  }
  .w-annc__widget-title {     text-align: center; }
  .w-annc__more { margin-top: 1.5em; }
  .w-annc__list > .w-annc__item:nth-child(3n+1) {
    clear: both;
  }

  .w-annc__img-wrap {
    margin:0;
    height: auto;
  }
  .w-annc__content-wrap{
    padding: 1.5em;
    div{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .clearfix{
    // text-align: center;
    // display: flex;
    // justify-content: center;
  }
  .w-annc__subtitle {
    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
  }
  .w-annc__content-wrap {
   display: inline-block;
   &:after {
     content: '';
     display: block;
     margin-top: 5px;
     height: 4px;
     width: 0;
     background: transparent;
     transition: width .5s ease, background-color .5s ease;
   }
  }
   .w-annc__item{
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     padding-bottom: 1em;
     @media (max-width: $screen-xs) {
       margin: 0;
     }
     &:hover{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
         .w-annc__content-wrap:after{
           width: 100%;
          background: #f2f2f2;
         }
     }
   }
  .w-annc__item{
    @media(max-width: $screen-xs){
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);

      .w-annc__img-wrap{
        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      }
      img{
          // transform: scale(1.2)!important;
          // -webkit-transition: .3s ease-out;
          // -moz-transition: .3s ease-out;
          // -ms-transition: .3s ease-out;
          // -o-transition: .3s ease-out;
          // transition: .3s ease-out;
      }
      .transitionfade{
        height: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.4);
        -webkit-transition: .3s ease-out;
        -moz-transition: .3s ease-out;
        -ms-transition: .3s ease-out;
        -o-transition: .3s ease-out;
        transition: .3s ease-out;
      }
    }
  }
  .w-annc__subtitle{
    color: #fff;
    font-size: 1rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0;
    opacity: 0;
    -webkit-transition: max-height .6s,opacity .6s;
    transition: max-height .6s,opacity .6s;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__img-wrap {
    img{
      height: 100% !important;
      width: auto!important;
      max-width: unset;
      position: relative !important;
      margin: 0 !important;
      // transform: translateX(-7%);
    }
  }
  .w-annc__item{
    padding: 0;
    margin-right: 0.5em;
    margin-left: 0.5em;
    overflow: hidden;
    position: relative !important;
    @media(max-width: $screen-xs){
      width: 100% !important;
    }
    @media(min-width: 1600px){
       height: 28em;
      .w-annc__img-wrap{
          height: 28em;
      }
    }
    @media(min-width: $screen-xs)and(max-width: 1599px){
       height: 20em;
      .w-annc__img-wrap{
        height: 20em;
      }
    }
    @media(max-width: $screen-xs){
      height: 20em;
     .w-annc__img-wrap{
       height: 20em;
     }
    }
  }
      li{
      &:hover{
          .card:before{
            height:100%;
          }
            .w-annc__subtitle{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
    }
    .card{
      position: absolute;
      z-index:0;
      padding: 20px 25px;
      bottom: 0;
      left: 0;
      background-color: transparent;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
      background-image: linear-gradient(
      180deg
      , #ffffff00 32%, #00000080 89%);
      width: 100%;
    }
    .card:before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: $theme-color-second;
      z-index: -1;
      -webkit-transition: height .6s;
      transition: height .6s;
    }
}
//widget-21
.widget-announcement-21 {
  .w-annc__item{
    padding: 0;
    margin-right: 1em;
    overflow: hidden;
    position: relative !important;
    @media(max-width: $screen-xs){
      width: 100% !important;
    }
    @media(min-width: 1600px){
       height: 28em;
      .w-annc__img-wrap{
          height: 28em;
      }
    }
    @media(min-width: $screen-xs)and(max-width: 1599px){
       height: 20em;
      .w-annc__img-wrap{
        height: 20em;
      }
    }
    @media(max-width: $screen-xs){
      height: 20em;
     .w-annc__img-wrap{
       height: 20em;
     }
    }
  }
  .w-annc__item{
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
  }
  .w-annc__entry-title{
    margin: 0;
  }
  .w-annc__meta i{
    color: #fff!important;
  }
  .w-annc__list{
    display: flex;
    justify-content: center;
  }
  .w-annc__postdate-wrap{
    color: #fff!important;
  }
  .w-annc__status-wrap{
    color: #fff!important;
  }
  .w-annc__category-wrap{
    color: #fff!important;
  }

  .w-annc__title{
    color: #fff;
    @media(min-width:1920px){
      font-size: 1.6rem!important;
    }
  }
  .w-annc__title {
    font-family: $main-font;
    white-space: normal;
  }
  .w-annc__widget-title {     text-align: center; }
  .w-annc__more { margin-top: 1.5em; }
  .w-annc__list > .w-annc__item:nth-child(3n+1) {
    clear: both;
  }

  .w-annc__img-wrap {
    margin:0;
    height: auto;
  }
  .w-annc__content-wrap{
    padding: 1.5em;
    div{
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .clearfix{
    // text-align: center;
    // display: flex;
    // justify-content: center;
  }
  .w-annc__subtitle {
    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
  }
  .w-annc__content-wrap {
   display: inline-block;
   &:after {
     content: '';
     display: block;
     margin-top: 5px;
     height: 4px;
     width: 0;
     background: transparent;
     transition: width .5s ease, background-color .5s ease;
   }
  }
   .w-annc__item{
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     padding-bottom: 1em;
     @media(min-width:  $screen-lg){
       width:382px !important;
     }
     @media(max-width: 1025px)and(min-width: 821px){
       width: 30.5vw !important;
     }
     @media(max-width: 820px)and(min-width: 768px){
       width: 356px!important;
     }
     @media (max-width: $screen-xs) {
       width: 94vw !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
     }
     &:hover{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
         .w-annc__content-wrap:after{
           width: 100%;
          background: #f2f2f2;
         }
     }
   }
  .w-annc__item{
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);

      .w-annc__img-wrap{
        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      }
      img{
          // transform: scale(1.2)!important;
          // -webkit-transition: .3s ease-out;
          // -moz-transition: .3s ease-out;
          // -ms-transition: .3s ease-out;
          // -o-transition: .3s ease-out;
          // transition: .3s ease-out;
      }
      .transitionfade{
        height: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.4);
        -webkit-transition: .3s ease-out;
        -moz-transition: .3s ease-out;
        -ms-transition: .3s ease-out;
        -o-transition: .3s ease-out;
        transition: .3s ease-out;
      }
    }
  }
  .w-annc__subtitle{
    color: #fff;
    font-size: 1rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0;
    opacity: 0;
    -webkit-transition: max-height .6s,opacity .6s;
    transition: max-height .6s,opacity .6s;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__img-wrap {
    img{
      height: 100% !important;
      width: auto!important;
      max-width: unset;
      position: relative !important;
      margin: 0 !important;
      // transform: translateX(-7%);
    }
  }
  .w-annc__item{
    padding: 0;
    margin-right: 0.5em;
    margin-left: 0.5em;
    overflow: hidden;
    position: relative !important;
    @media(min-width: 1600px){
      height: 28em;

      .w-annc__img-wrap{
          height: 28em;

      }
    }
    @media(min-width: $screen-xs)and(max-width: 1599px){
      height: 20em;

      .w-annc__img-wrap{
          height: 20em;

      }
    }
  }
      li{
      &:hover{
          .card:before{
            height:100%;
          }
            .w-annc__subtitle{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
    }
    .card{
      position: absolute;
      z-index:0;
      padding: 20px 25px;
      bottom: 0;
      left: 0;
      background-color: transparent;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
      background-image: linear-gradient(
      180deg
      , #ffffff00 32%, #00000080 89%);
      width: 100%;
    }
    .card:before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: $theme-color-second;
      z-index: -1;
      -webkit-transition: height .6s;
      transition: height .6s;
    }
}
//widget 22
.widget-announcement-22{
  .w-annc__postdate-wrap{
        padding-right: 0.5em;
  }
  .w-annc__content-wrap{
    .fa, .fa-classic, .fa-regular, .fa-solid, .far, .fas{
      display: none;
    }
  }

  .w-annc__subtitle{
        -webkit-line-clamp: 2;
  }
  .w-annc__content-wrap{
    width: 100%;
  }
  .w-annc__list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .w-annc__meta{
    background-color:#dfdfdf;
    display: flex;
    align-items: center;
    padding: 0 1em;
  }
  h4,p{
    padding: 0 1em;
  }
  .w-annc__title {
   font-family: $main-font;
   font-weight: bold;
 }
 .w-annc__widget-title { float: left; }
 .w-annc__more {
   margin-top: 1.5em;
   display: none;
 }
 .w-annc__more-wrap{
   @media(max-width: 768px){
           display: none;
   }

 }
 .w-annc__list > .w-annc__item:nth-child(3n+1) {
   clear: both;
 }

 .w-annc__list {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
 }

 .w-annc__item{
   overflow: hidden;
    background-color: #fff;
    border: 1px solid #dedcdc;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    margin-right: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 1em;
    padding: 0;
    display: flex!important;
    @media(min-width: 768px){
        width: calc(50% - 1.25em)!important;
        // --heightC: 50vh;
        // height: calc(var(--heightC)* 0.25 - 0.5rem);
    }
    @media (max-width: 767px) {
      width: 100%!important;
      margin-left: 0;
      margin-right: 0;
    }
 }
}
// Widget-5
.widget-announcement-5 {
  .w-annc__title {
    font-family: $main-font;
  }

  .w-annc__item {
    border-bottom: 0.0625em solid #ddd;
    padding: 1em;
    &:hover{
      background-color: #adb5bd33;
      padding-left: 1rem;
      -webkit-transition: .3s ease-out;
      -moz-transition: .3s ease-out;
      -ms-transition: .3s ease-out;
      -o-transition: .3s ease-out;
      transition: .3s ease-out;
    }
  }
}

// Widget-6
.widget-announcement-6 {

  .w-annc__entry-title {
    margin: 0;
  }


  .w-annc__status {
    display: inline-block;
  }
  .w-annc__item{
    margin-bottom: 0;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
    border-bottom: 0.0625em solid #ddd;
    &:hover{
      background-color: #adb5bd33;
      padding-left: 1rem;
      -webkit-transition: .3s ease-out;
      -moz-transition: .3s ease-out;
      -ms-transition: .3s ease-out;
      -o-transition: .3s ease-out;
      transition: .3s ease-out;
    }
    @media(max-width: $screen-xs){
      margin: 0;
    }
  }
}

// Widget-7
.widget-announcement-7 {
  .w-annc__item {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__item {
    margin-bottom:0;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
    border-bottom: 0.0625em solid #ddd;
  }

  .w-annc__entry-title {
    margin: 0;
  }

  // .w-annc__category-wrap,
  // .w-annc__status,
  // .w-annc__title,

  .w-annc__status {
    display: inline-block;
  }
}

// ## Gerneral styles for table widgets



// Widget-8
// ## Table
.widget-announcement-8 {
  td{
    padding-bottom: 0.8em;
    padding-top: 0.8em;
  }
  .w-annc__th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  .w-annc__item {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__th {
    background: #fff;
  }

  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }

  td {
    font-size: 1em;
  }

  a:hover {
    text-decoration: none;
  }
}

// Widget-9
.widget-announcement-9 {
  td{
    padding-bottom: 0.8em;
    padding-top: 0.8em;
  }
  .w-annc__th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  tr {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__th {
    background: #fff;
  }

  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }

  a:hover {
    text-decoration: none;
  }
}

// Widget-10
.widget-announcement-10 {
  .w-annc__item {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
    border-bottom: 0.0625em solid #ddd;
  }

  .w-annc__entry-title {
    margin: 0;
  }

  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }
}

// Widget-11
.widget-announcement-11 {
  .w-annc__item {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc{
        padding-bottom: 1em;
  }
  .w-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
    border-bottom: 0.0625em solid #ddd;
  }

  .w-annc__entry-title {
    margin: 0;
  }


  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }
}

// Widget-12
// ## Table
.widget-announcement-12 {
  .w-annc__th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  tr {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__th {
    background: #fff;
  }

  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }

  td {
    font-size: 1em;
  }

  a:hover {
    text-decoration: none;
  }
}

// Widget-13
// ## Table
.widget-announcement-13 {
  .w-annc__th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  tr {
        &:hover{
          background-color:#adb5bd33;
          padding-left: 1rem;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
  }
  .w-annc__th {
    background:#fff ;
    white-space: nowrap;
  }

  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }

  td {
    font-size: 1em;
  }

  a:hover {
    text-decoration: none;
  }
}


// Widget-14
.widget-announcement-14 {

  .w-annc__img-wrap {
    height: 18.75em;
    margin-bottom: 0.9375em;

    @media (min-width: $screen-md) {
      height: 12.5em;
      margin-bottom: 0;
    }
  }

  .w-annc__item {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 0.0625em solid #ddd;
  }

  .w-annc__entry-title {
    margin: 0 0 0.625em 0;

    @media (min-width: $screen-md) {
      margin-bottom: 0;
    }
  }


  .w-annc__status {
    display: inline-block;
  }

}
//widget 15
.widget-announcement-15 {
  .cycle-carousel-wrap{
    display: flex;
    align-items: baseline;
  }
  .w-annc__title {
   font-family: $main-font;
 }
 .w-annc__widget-title { float: left; }
 .w-annc__more { margin-top: 1.5em; }
 .w-annc__list > .w-annc__item:nth-child(3n+1) {
   clear: both;
 }

 .w-annc__list {
  justify-content: center;
  display: flex;
 }

 .w-annc__img-wrap {
   height: 17.5em;
   margin: 0;
   overflow: hidden;
 }
 .w-annc__item{
    background: #fff;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    -webkit-box-shadow: 0 1px 2px 0 #0000002e;
    box-shadow: 0 1px 2px 0 #0000002e;
    margin-right: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 1em;
    padding: 0;
    @media(min-width:  $screen-lg){
      width:382px !important;
    }
    @media(max-width: 1025px)and(min-width: 821px){
      width: 30.5vw !important;
    }
    @media(max-width: 820px)and(min-width: 768px){
      width: 356px!important;
    }
    @media (max-width: $screen-xs) {
      width: 94vw !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
 }
 // .cycle-slide{
 //    width:25vw !important;
 // }
 // .cycle-carousel-wrap{
 //   margin-left:0.5em !important;
 // }
}
//Widget 16
.widget-announcement-16 {
  .w-annc__content-wrap{
    padding: 1em;
  }
  .slide-button{
    margin-bottom: 0.5em;
  }
  .w-annc__entry-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .w-annc__title {
   font-family: $main-font;
 }
 .w-annc__item { padding: 0; }
 .w-annc__img-wrap {
   margin: 0 0 0.5rem 0;
 }
}

// Widget-17
.widget-announcement-17 {
  .w-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
    border-bottom: 0.0625em solid #ddd;
    &:hover{
      background-color:#adb5bd33;
      padding-left: 1rem;
      -webkit-transition: .3s ease-out;
      -moz-transition: .3s ease-out;
      -ms-transition: .3s ease-out;
      -o-transition: .3s ease-out;
      transition: .3s ease-out;
    }
  }

  .w-annc__entry-title {
    margin: 0;
  }


  .w-annc__status {
    display: inline-block;
    font-size: 0.75rem;
  }
}
// Widget-18
.widget-announcement-18 {
  .w-annc__title {
    font-family: $main-font;
    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
  }
  .w-annc__entry-title {
    height: 2.5em;
  }
  .w-annc__img-wrap {
    height: 12.5em;
    margin:0;
    overflow: hidden;
    @media (max-width: $screen-xs) {
      height: 12.5em;
    }
  }
  .w-annc__content-wrap{
    background-color: #fff;
    padding: 1.5em;
  }
   .w-annc__item{
     @media(min-width: 769px){
       width: calc(33.3333% - 1em);
     }
     @media (min-width: $screen-xs) {
       margin-right: 0.5em;
       margin-left: 0.5em;
     }
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     background: #fff;
      -webkit-box-shadow: 0 1px 2px 0 #0000002e;
      box-shadow: 0 1px 2px 0 #0000002e;
      margin-bottom: 1em;
      padding: 0;
     &:hover{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
         .w-annc__content-wrap:after{
           width: 100%;
          background: $theme-color-main;
         }
     }
   }
  .w-annc__item{
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
        box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
      img{
          // transform: scale(1.2);
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
      }
      .transitionfade{
        height: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.4);
        -webkit-transition: .3s ease-out;
        -moz-transition: .3s ease-out;
        -ms-transition: .3s ease-out;
        -o-transition: .3s ease-out;
        transition: .3s ease-out;
      }
    }
  }
  .w-annc_read_more{
    padding-bottom: 0;
    padding-left: 0;
    a{
          padding: 0.375em 1.125em;
      margin-bottom: 1em;
      font-size: 0.8125rem;
      -webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
      -moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
      -ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
      -o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
      transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
      background: none;
      border: none;
      color: $theme-color-main;
      box-shadow: $theme-color-main 0 0px 0px 2px inset;

      &:hover {
        color: #fff;
        box-shadow:$theme-color-main 0 0px 0px 40px inset;
        border: 0;
      }
    }

  }
}

//widget 19
.widget-announcement-19 {
  .cycle-carousel-wrap{
        display: flex;
  }
  .w-annc__th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  overflow: hidden;
  .w-annc__title {
   font-family: $main-font;
 }
 .w-annc__widget-title { float: left; }
 .w-annc__more { margin-top: 1.5em; }
 .w-annc__list > .w-annc__item:nth-child(3n+1) {
   clear: both;
 }

 .w-annc__list {
  justify-content: center;
  display: flex;
  @media(max-width: 768px){
    align-items: baseline;
  }
 }
.w-annc__subtitle{
   -webkit-line-clamp: 2;
}
 .w-annc__img-wrap {
   height: 12.5em;
   margin: 0 0 1em 0;
   overflow: hidden;
 }
.w-annc__item{
      padding: 30px 40px!important;
      margin-bottom: 1em;
      margin-top: 1em;
      border-radius: 30px!important;
      background: rgba(255,255,255,0.6)!important;
      box-shadow: 0px 0px 4px 0px #00000033!important;
      margin-right: 0.5em;
      margin-left: 0.5em;
      height: 14em;
  @media(min-width:  $screen-lg){
    width:579px !important;
  }
  @media(max-width: 1025px)and(min-width: 821px){
    width: 30.5vw !important;
  }
  @media(max-width: 820px)and(min-width: $screen-xs){
    width: 356px!important;
  }
  @media (max-width: $screen-xs) {
    width: 90vw!important;
  }
 }

}
// widget-23
.widget-announcement-23 {
  li.i-annc__item.col-md-4:nth-child(3n){
            clear: unset!important;
  }
 .i-annc__meta .i-annc__status-wrap,.i-annc__meta .i-annc__postdate-wrap, .i-annc__meta .i-annc__category-wrap{
    color: #fff;
    display: none;
  }
  .i-annc__subtitle{
      display: none;
  }
  .i-annc__title,.i-annc__subtitle{
    color: #fff!important;
  }
  .homecard2{
    transform: perspective(2500px) rotateY(-100deg);
    overflow: hidden;
    position: relative;
  }
  .homecardanimate{
    transform: perspective(2500px) rotateY(0);
    transition-timing-function: ease;
    transition-duration: 1s;
  }
  //類別變色
  .全部{
    background-color: #cb804b;
    border: 3px solid #cb804b!important;
    }
  .公告{
      background-color: #ddc080;
      border: 3px solid #ddc080!important;
  }
  .公告1{
      background-color: #94506e;
      border: 3px solid #94506e!important;
  }
  .公告2{
      background-color: #599cf6;
      border: 3px solid #599cf6!important;
  }
  .公告3{
      background-color: #80b885;
      border: 3px solid #80b885!important;
  }
  .公告4{
      background-color: #6e4626;
      border: 3px solid #4b2c12!important;
  }


  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .i-annc__item{
      margin-left: 0.5em;
      margin-right: 0.5em;
      border-radius: 10px;
      transition: all 0.3s;
      width: calc( 100%/5 - 1.5em);
      &:hover{
          box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.5);
          transform: translateY(-5px);
      }
      @media(max-width: 768px){
        width:calc( 100%/2 - 1em);
      }
    }
  }
  .i-annc__title {
    font-family: $main-font;
  }
  .i-annc__list > .i-annc__item {
    @media (max-width:767px) {
      min-height: unset;
      padding: 0;
    }

  }
  .i-annc__list > .i-annc__item:nth-child(3n+1) {
    clear: both;

  }
  .i-annc__content-wrap{
    padding: 0 0.5em;
  }
  .i-annc__item{
      padding: 0;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    height: 14.5em;
    margin: 0 0 1em 0;
    @media (max-width:$screen-xs) {
      height: 7em;
    }
    img {
      @media (max-width:767px) {
       transform: scale(1) !important;
      }
    }
  }
}
// Announcement index
// ## General style for index pages
.i-annc {
  .i-annc__page-title {
    @extend .unity-title;
  }

  .i-annc__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .i-annc__widget-title {
    @extend .unity-title;
  }

  .i-annc__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none;
    overflow: hidden;
    border-bottom: 1px solid #bbb;
    padding: 1em;
    // box-shadow: #0000004d 0 0 4px;
    // background: #fff;
    @media(min-width: $screen-xs){
      float: left;
    }
    &:hover{
      // border: 1px solid $theme-color-second;
      // box-shadow: #1a1b20e6 0 0 4px;
    }
  }

  .i-annc__img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .i-annc__table{

  }
  .i-annc__th {
    color: $theme-color-main;
    @extend .i-title;
    white-space: nowrap;
  }

  .i-annc__postdate,
  .i-annc__category,
  .i-annc__view-count {
    font-family: $main-font;
    @extend .i-title;
  }
  .i-annc__status-wrap {
    span {
      display: inline-block;
      padding: .2em .6em .3em;

      &:last-child {
        margin: 0 0.3125em 0.1875em 0;
        display: inline-block;
      }
    }
  }
  tr{
      border: 0.0625em solid #ddd!important;
  }
  td {
    font-size: 1rem;
    // border-top: 0.0625em solid #ddd!important;
  }

  .i-annc__title:hover {
    text-decoration: none;
  }

  .label {
    font-size: 0.75rem;
    font-weight: normal;
  }

  .i-annc__meta {
    .i-annc__status-wrap,
    .i-annc__postdate-wrap,
    .i-annc__category-wrap {
      margin-right: 0.2em;
      font-size: 1em;
      color: $theme-color-main;
      font-weight: normal;
    }

    i {
      color: $theme-color-main;
    }
  }

  .i-annc__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    color: $theme-color-main;
  }

  .i-annc__entry-title {
    margin-bottom: 0;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .i-annc__title {
    font-family: $main-font;
    color: $theme-color-main;
    text-decoration: none;
    @extend .i-title;
    &:hover {
      color:  $theme-color-second;
    }
  }
}
// control datatable css
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
  background-color: $theme-color-second !important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
  background-color: $theme-gray !important;
}

.i-annc__table .child span.dtr-data li {
  padding: 0 0.5em;
}

// Index-1
// Index-2
.index-announcement-1,
.index-announcement-2 {
  .i-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    border-bottom: 0.0625em solid #ddd;
        width: 100%;
  }
  // .i-annc__title {
  //   &:before {
  //     content: "•";
  //     color: #cccccc;
  //     padding: 0 0.5em;
  //   }
  // }
  .i-annc__entry-title {
    margin: 0;
  }

  .i-annc__category-wrap,
  .i-annc__postdate-wrap {
    @extend .i-title;
    color: #666666;
  }

  .i-annc__status {
    @extend .i-title;
    display: inline-block;
  }
}

// Index-3
// Index-4
.index-announcement-3,
.index-announcement-4 {

  .i-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    border-bottom: 0.0625em solid #ddd;
    float: none;
  }
  .i-annc__title {

  }

  .i-annc__entry-title {
    margin: 0;
  }

  .i-annc__category-wrap,
  .i-annc__postdate-wrap {
    @extend .i-title;
    color: #666666;
  }

  .i-annc__status {
    @extend .i-title;
    display: inline-block;
  }

}

// Index-5
.index-announcement-5{
  .i-annc__content-wrap{
    @media(max-width: 768px){
      padding-top: 0.5em;
    }
  }
  .i-annc__title {
    font-family: $main-font;
  }
}
// Index-6
.index-announcement-6 {
  .i-annc__title {
    font-family: $main-font;
  }
}
// Index-7
.index-announcement-7 {
  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
  }
  .i-annc__title {
    font-family: $main-font;
  }
  .i-annc__list > .i-annc__item {
    margin-right: 0.9375em;
    width: calc( 100%/3 - 1.5em );
    margin-bottom: 1em;
    border-bottom: 0;
    @media (max-width:767px) {
      width: calc( 100%/2 - 1.25em );
      min-height: unset;
      margin: 0;
            margin-bottom: 1em;
    }
    @media (max-width: $screen-xs) {
      width: 100%!important;
    }

  }
  .i-annc__list > .i-annc__item:nth-child(3n+1) {
    clear: both;

  }

  .i-annc__img-wrap {
    overflow: hidden;
    height: 12.5em;
    margin: 0 0 1em 0;
    img {
      @media (max-width:767px) {
       transform: scale(1) !important;
      }
    }
  }
}
// Index-19
.index-announcement-19 {
  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
  }
  .i-annc__title {
    font-family: $main-font;
  }
  .i-annc__list > .i-annc__item {
    width: calc( 100%/4 - 1.5em );
    margin-bottom: 1em;
    margin-right: 0.5em;
    margin-left: 0.5em;
    @media (max-width:767px) {
      width: calc( 100%/2 - 1.25em );
      min-height: unset;
      margin: 0;
            margin-bottom: 1em;
    }
    @media (max-width: $screen-xs) {
      width: 100%!important;
    }

  }
  .i-annc__list > .i-annc__item:nth-child(4n+1) {
    clear: both;

  }

  .i-annc__img-wrap {
    overflow: hidden;
    height: 12.5em;
    margin: 0 0 1em 0;
    img {
      @media (max-width:767px) {
       transform: scale(1) !important;
      }
    }
  }
}
// Index-8
.index-announcement-8 {
  .i-annc__title {
    font-family: $main-font;
  }

  .i-annc__item {
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
  }
}

// Index-9
.index-announcement-9 {

  .i-annc__content-wrap {
    padding:1em;
  }
  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .i-annc__entry-title, .i-annc__meta {
    margin-top: 0;
    padding-left: 0.5em;
  }
  .i-annc__title {
    font-family: $main-font;
    font-size: 1.125rem;
  }

  .i-annc__item {
    border-bottom: 1px dashed #f3f4f5;
    margin-bottom: 1em;
    width: calc(100%/3 - 1em);
    padding: 0;
    &:nth-child(odd) {
      border-left: 8px solid $theme-color-second;
    }
    &:nth-child(even) {
      border-left: 8px solid darken($color: $theme-color-second, $amount: 10);
    }

    @media (max-width:767px) {
      width: 100%;
    }
  }
  .i-annc__subtitle {
    text-align: left;
    font-size: 1em;
  }
}
// Index-10
.index-announcement-10 {

}
// Index-11
.index-announcement-11 {
  table{
  border: 0.0625em solid #ddd !important;
}

  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
    }
    .i-annc__th--title{
      width:50%!important;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
}
// .dtr-details{
//   display: flex!important;
//   li{
//         width: 50%;
//   }
// }
// Index-12
.index-announcement-12 {

  table{
  border: 0.0625em solid #ddd !important;
}
  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
    }
    .i-annc__th--title{
      width:50%!important;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
}
// Index-13
.index-announcement-13 {
  thead{
        border-bottom: 0.125em solid #ddd;
  }
  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
      border: 0;
    }
    .i-annc__th--title{
      width:50%!important;
      border: 0;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
}
// Index-14
.index-announcement-14 {
  thead{
        border-bottom: 0.125em solid #ddd;
  }
  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
      border: 0;
    }
    .i-annc__th--title{
      width:50%!important;
      border: 0;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
}
// Index-15
.index-announcement-15 {
  table{
    border: 0.0625em solid #ddd !important;
}
  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
      border: 0;
    }
    .i-annc__th--title{
      width:50%!important;
      border: 0;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
}
// Index-16
.index-announcement-16 {
  table{
    border: 0.0625em solid #ddd !important;
}
    li{
      list-style: none!important;
    }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
      border: 0;
    }
    .i-annc__th--title{
      width:50%!important;
      border: 0;
    }
  }
  table tr{
    flex-wrap: unset!important;
  }
  td ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

// Index-17
.index-announcement-17 {
  @media(max-width: $screen-xs){
    tr{
        margin-bottom: 10px;
    }
    th{
      width: 100%;
    }
  }
  .i-annc__item {
    margin-bottom: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 0.0625em solid #ddd;
  }
  .i-annc__title {

  }
  .i-annc__entry-title {
    margin: 0;
  }

  .i-annc__category-wrap,
  .i-annc__postdate-wrap {
    font-size: 1rem;
    color: #666666;
  }

  .i-annc__status {
    @extend .i-title;
    display: inline-block;
  }
}
// Index-21
.index-announcement-21{
  @media(min-width: 768px)and(max-width: 1023px){
    .col-sm-10{
      width:73.333333%;
      float: left;
    }
    .col-sm-2{
      width: 16.66666667%;
      float: left;
      max-width: 150px;
      min-width: 150px;
    }
  }
  @media(min-width:1024px){
    .col-sm-10{
      width: 83.33333333%;
      float: left;
    }
    .col-sm-2{
      width: 16.66666667%;
      float: left;
      max-width: 150px;
      min-width: 150px;
    }
  }
  .i-annc__item{
    width: 100%;
  }
  .i-annc__postdate{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        text-align: center;
        background-color: #f15f74;
        padding-bottom: 0.5em;
        color: #fff;
    .new-date{
      width: 100%;
      background-color: #f3f3f4;
      color: #333;
      font-size: 2em;
    }
  }
}
// Announcement show

.s-annc {
  .s-annc__date-wrap,.s-annc__author-wrap,.s-annc__tag-wrap {
      list-style: none;
  }
  .s-annc__show-title {
    @extend .unity-title;
  }

  .s-annc__meta-wrap {
    // border-bottom: 0.0625em solid $theme-gray-light;

    @include clearfix;

    .s-annc__meta--item {
      font-size: 0.875rem;
      margin-right: 1em;
      margin-bottom: 0.6em;
      float: left;
      list-style: none;

      i {
        color: darken($theme-gray-light, 10%);
      }
    }

    .s-annc__tag-wrap {
      position: relative;
      margin-right: 0;
      padding-left: 1.6em;
      clear: both;
      float: none;

      i {
        position: absolute;
        top: 0.4375em;
        left: 0;
      }
    }

    .s-annc__tag-wrap {
      .s-annc__tag {
        font-weight: normal;
      }
    }
  }

  .s-annc__post-wrap {
    @include clearfix;
    margin-bottom: 2em;
    .s-annc__sub-img {
      width: 100%;
      padding-bottom: 2em;
      // background: #eee;
      // padding: 0.5em;
      // border: 1px solid #e2e0e0;
      img { padding: 0; }
      .s-annc__img_description {
        margin: 0.5em 0;
        display: block;
        @extend .i-title
      }
    }
  }


  .s-annc__related-wrap {
    padding-top: 1em;
    // border-top: 0.0625em dotted $theme-gray-light;
  }

  .s-annc__related-file {
    margin-bottom: 0.9375em;
  }

  .s-annc__related-file,
  .s-annc__related-link {
    padding-bottom: 0.375em;
    padding-left: 1.6em;
    list-style: none;

    i {
      margin: 0.5em 0 0 -1.6em;
      float: left;
      color: darken($theme-gray-light, 10%);
    }
  }

  .s-annc__related-link-list,
  .s-annc__related-file-list {
    display: inline-block;
  }

  .s-annc__flie-title {
    max-width: 9.375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .s-annc__social > * {
    display: inline-block;
    vertical-align: top;
  }

  .s-annc__social .print-button {
    color: #fff;
    font-size: 0.688em;
    border-radius: 0.25em;
    padding: 0.125em 0.375em;
    background-color: $theme-color-main;
  }

  .s-annc__social .print-button:hover {
    background-color: lighten($theme-color-main, 10%);
  }
}

//index 10
.VivaTimeline dl {
  position: relative;
  top: 0;
  padding: 20px 0;
  margin: 0
}

.VivaTimeline dl:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 100;
  width: 2px;
  margin-left: -1px;
  content: '';
  background-color: #ccd1d9
}

.VivaTimeline dl dt {
  position: relative;
  top: 30px;
  width: 120px;
  padding: 3px 5px;
  margin: 0 auto 30px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  background-color: #aab2bd;
  border-radius: 4px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px
}

.VivaTimeline dl dd {
  position: relative;
}

.VivaTimeline dl dd .circ {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 200;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  background-color: #4fc1e9;
  border: 4px solid #f5f7fa;
  border-radius: 50%;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%
}

.VivaTimeline dl dd .time {
  position: absolute;
  top: 31px;
  left: 50%;
  display: inline-block;
  width: 100px;
  padding: 10px 20px;
  color: #4fc1e9
}

.VivaTimeline dl dd .events {
  position: relative;
  width: 47%;
  padding: 10px 0 0;
  margin-top: 31px;
  background-color: #CCC;
  border-radius: 4px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px
}

.VivaTimeline dl dd .events:before {
  position: absolute;
  top: 12px;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-width: 6px
}

.VivaTimeline dl dd .events .events-object {
  margin: 0 auto;
}

.VivaTimeline dl dd .events .events-header {
  min-height: 30px;
  line-height: 20px;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.5em;
}

.VivaTimeline dl dd .events .events-body {
  overflow: hidden;
  zoom: 1;
  background-color: #EEE;
  padding: 10px;
}
.VivaTimeline dl dd .events .events-body .row{
  display:none;
}

.VivaTimeline dl dd .events .events-body .events-desc {
  text-indent: 2em;
  padding: 0 15px;
}

.VivaTimeline dl dd .events .events-footer {
  text-align:center;
}
.VivaTimeline dl dd .events .events-footer ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.VivaTimeline dl dd .events .events-footer ol li {
  background: #32b487;
  border-radius: 5px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  margin: 10px;
  display: inline-block;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.VivaTimeline dl dd .events .events-footer ol .active{
  transform: scale(2);
}

.VivaTimeline dl dd.pos-right .time {
  margin-left: -100px;
  text-align: right
}

.VivaTimeline dl dd.pos-right .events {
  float: right
}

.VivaTimeline dl dd.pos-right .events:before {
  left: -12px;
  border-color: transparent #CCC transparent transparent
}

.VivaTimeline dl dd.pos-left .time {
  margin-left: 0;
  text-align: left
}

.VivaTimeline dl dd.pos-left .events {
  float: left
}

.VivaTimeline dl dd.pos-left .events:before {
  right: -12px;
  border-color: transparent transparent transparent #CCC
}

.VivaTimeline .carousel-indicators{
  bottom: 0;
}

@media screen and (max-width: 767px) {
  .VivaTimeline dl:before {
      left: 90px
  }
  .VivaTimeline dl dt {
      margin: 0 30px 30px
  }
  .VivaTimeline dl dd .circ {
      left: 90px
  }
  .VivaTimeline dl dd .time {
      left: 0;
  }
  .VivaTimeline dl dd.pos-left .time {
      padding: 10px 0;
      margin-left: 0;
      text-align: left
  }
  .VivaTimeline dl dd.pos-left .events {
      float: right;
      width: 73%;
      margin-right: 4%;
  }
  .VivaTimeline dl dd.pos-left .events:before {
      left: -12px;
      border-color: transparent #CCC transparent transparent
  }
  .VivaTimeline dl dd.pos-right .time {
      padding: 10px 0;
      margin-left: 0;
      text-align: left
  }
  .VivaTimeline dl dd.pos-right .events {
      float: right;
      width: 73%;
      margin-right: 4%;
  }
  /*
  .VivaTimeline dl dd .events .events-body {
      display: none;
  }
  .VivaTimeline dl dd .events .events-footer {
      display: none;
  }
  */
}

@media screen and (max-width: 500px) {
  .VivaTimeline dl dd.pos-left .events {
      float: right;
      width: 63%;
      margin-right: 4%;
  }
  .VivaTimeline dl dd.pos-right .events {
      float: right;
      width: 63%;
      margin-right: 4%;
  }
}
// Index-18
.index-announcement-18 {
  li.i-annc__item.col-md-4:nth-child(3n){
            clear: unset!important;
  }
 .i-annc__meta .i-annc__status-wrap,.i-annc__meta .i-annc__postdate-wrap, .i-annc__meta .i-annc__category-wrap{
    color: #fff;
    display: none;
  }
  .i-annc__subtitle{
      display: none;
  }
  .i-annc__title,.i-annc__subtitle{
    color: #fff!important;
  }
  .homecard2{
    transform: perspective(2500px) rotateY(-100deg);
    overflow: hidden;
    position: relative;
  }
  .homecardanimate{
    transform: perspective(2500px) rotateY(0);
    transition-timing-function: ease;
    transition-duration: 1s;
  }
  //類別變色
  .全部{
    background-color: #cb804b;
    border: 3px solid #cb804b!important;
    }
  .公告{
      background-color: #ddc080;
      border: 3px solid #ddc080!important;
  }
  .公告1{
      background-color: #94506e;
      border: 3px solid #94506e!important;
  }
  .公告2{
      background-color: #599cf6;
      border: 3px solid #599cf6!important;
  }
  .公告3{
      background-color: #80b885;
      border: 3px solid #80b885!important;
  }
  .公告4{
      background-color: #6e4626;
      border: 3px solid #4b2c12!important;
  }


  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .i-annc__item{
      margin-left: 0.5em;
      margin-right: 0.5em;
      border-radius: 10px;
      transition: all 0.3s;
      width: calc( 100%/5 - 1.5em);
      &:hover{
          box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.5);
          transform: translateY(-5px);
      }
      @media(max-width: 768px){
        width:calc( 100%/2 - 1em);
      }
    }
  }
  .i-annc__title {
    font-family: $main-font;
  }
  .i-annc__list > .i-annc__item {
    @media (max-width:767px) {
      min-height: unset;
      padding: 0;
    }

  }
  .i-annc__list > .i-annc__item:nth-child(3n+1) {
    clear: both;

  }
  .i-annc__content-wrap{
    padding: 0 0.5em;
  }
  .i-annc__item{
      padding: 0;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    height: 14.5em;
    margin: 0 0 1em 0;
    @media (max-width:$screen-xs) {
      height: 7em;
    }
    img {
      @media (max-width:767px) {
       transform: scale(1) !important;
      }
    }
  }
}
.s-annc__link-title {
  word-break: break-all;
  white-space: break-spaces;
}