fgu_d1/assets/stylesheets/template/modules/announcement.scss

@charset "utf-8";

@import "../initial";

//
// Widget
//

// Announcement widget
// ## Gerneral styles for widgets
#category_select_box{
      width: 160px;
}
.w-annc__wrap {
    clear: both;
}
.w-annc{
  margin-top: 1em;
  .nav_tabs_filter{
    justify-content: end;
    @media(max-width:768px){
      width: 100%;
      justify-content: flex-start;
    }
  }
}
h3.w-annc__widget-title {
    float: left;
}
.w-annc .w-annc__category{
    padding: 0.15rem 0.6rem;
    border-radius: 5px;
    background-color: $theme-color-second;
    color: #fff;
}
td.w-annc__category {
    background-color: transparent !important;
    color: #333 !important;
}
.w-annc__postdate-wrap,.w-annc__category-wrap{
  i{
    display: none;
  }
}
.article-thumbs {
    margin-bottom: 1em;
}
.w-annc__entry-title {
    padding: 0;
    font-size: 1em;
}
.widget-title-a{
  display: block;
}
.w-annc__content-wrap{
  height: auto!important;
}
.s-annc__show-title{
  span{
        justify-content: center;
    &:before{
      display: none!important;
    }
    &:after{
      display: none!important;
    }
  }
}
.w-annc__item_inner{
  position: relative;
}
.VivaTimeline{
  z-index: 1;
  position: relative;
}
.w-annc__table{
      // border: 0.0625em solid #ddd !important;
  .w-annc__th{
    @extend .i-title;
  }
}
.w-annc__status{
  line-height: 1 !important;
}
.w-annc__status-wrap{
  // display: flex;
}
.i-annc__status-wrap{
  float: left;
}
.i-annc__th--date{
  min-width: 6em;
}

.w-annc tr {
    border: 0.0625em solid #ddd !important;
}
.w-annc__item{
  padding-bottom: 1em;
}
.w-annc .w-annc__subtitle,.w-annc p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -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;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        td{
          width: 100%;
        }
    }
  }
}
.w-annc__item {
  // backdrop-filter: blur(5px);
  // background: #ffffff59;
  list-style: none;
  @media(max-width: $screen-xs){
    padding-right: 0.5em;
    padding-left: 0.5em;
  }
}
.w-annc {
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  clear: both;
  .w-annc__widget-title {
    @extend .unity-title;
        display: block;
  }
  .transitionfade {
    border-radius: 1em;
  }

  .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 {
    @extend .i-subtitle;
  }
  .w-annc__status-wrap,
  .w-annc__postdate-wrap,
  .w-annc__category-wrap {
    @extend .i-title;
  }
  .w-annc__meta {
    display: flex !important;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    .w-annc__postdate-wrap{
      margin-right: 0.5em;
    }
    .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;
      display: flex;
      align-items: center;
    }

    i {
      color:$theme-color-main;
      font-size: medium;
      padding-right: 0.3em;
    }
  }

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

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

  .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%);
    }
  }
}
.w-annc__item_inner{
  border-radius: 1em;
}
.w-annc__img-wrap {
    border-radius: 1em;
    overflow: hidden;
}
.w-annc__inner {
    clear: both;
}
img.w-annc__img {
    border: 1px solid #cacaca;
    border-radius: 1em;
}
.w-annc__postdate {
    min-width: 7.5em;
}
.w-annc__table{
  @media(max-width:768px){
    thead{
      display: none;
    }
  }
}
.i-annc__item_inner{
  border-radius: 1em;
}
.i-annc__img-wrap {
    border-radius: 1em;
    overflow: hidden;
}
.i-annc__inner {
    clear: both;
}
.i-annc__img {
    border: 1px solid #cacaca;
    border-radius: 1em;
}
.i-annc__postdate-wrap {
    min-width: 6.5em;
}
.i-annc__table{
  @media(max-width:768px){
    thead{
      display: none;
    }
  }
}
// Widget-1
.widget-announcement-1 {
  .w-annc .w-annc__subtitle,.w-annc p{
    -webkit-line-clamp: 6!important;
  }
  .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__content-wrap{
    padding: 1em;
  }
  .w-annc__item{
    background-color: #fff;
    border: 1px solid #dedcdc;
    margin-bottom: 1em;
    padding: 0;
    border-radius: 1em;
    &: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;
  }
}

// Widget-2
.widget-announcement-2 {
    .w-annc .w-annc__subtitle,.w-annc p{
    -webkit-line-clamp: 6!important;
  }
  .widget-title-a-inner{
    display: block;
    padding-top: 0.2em;
  }
  // @media(min-width: 768px){
  // .col-sm-4{
  //   width: 33.33333333%;
  //   float: left;
  // }
  // .col-sm-8{
  //   width: 66.66666667%;
  //   float: left;
  // }
// }
  .w-annc__item{
    margin-bottom: 1em;
    padding: 0.2em;
    overflow: hidden;
        border-radius: 1em;
    &:hover{
      transition: all .3s;
      transform: translate(-5px, -10px);
      box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
  }
  .i-annc__img-wrap {

    padding: 0;
  }
  .w-annc__content-wrap {
    padding: 1em;
    @media(max-width: $screen-xs){
      padding-right: 0.9375em;
      padding-left: 0.9375em;
    }
  }
  .w-annc__img-wrap {
    margin:0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
    
  }

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

// Widget-3
.widget-announcement-3 {
    .w-annc .w-annc__subtitle,.w-annc p{
    -webkit-line-clamp: 6!important;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
  }
  .w-annc__item{
    margin-bottom: 1em;
    padding: 0;
    overflow: hidden;
    padding-bottom: 0;
    border-radius: 1em;
    &: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: 1em;
    @media(max-width: $screen-xs){
      padding-right: 0.9375em;
      padding-left: 0.9375em;
    }
  }
  .w-annc__item{
    padding-bottom: 0;
  }
  .w-annc__img-wrap {
    margin:0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 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__list > .w-annc__item:nth-child(3n+1) {
    clear: both;
  }
  .w-annc__img-wrap {
    aspect-ratio: 16 / 9;
    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;
    }
  }
  .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{
    padding: 0.5em;
    margin: 0!important;
  }
   .w-annc__item_inner{
     -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: 0;
      margin-bottom: 1em;
     &: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_inner{
      &: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 {
  .w-annc__item{
    padding: 0;
    margin-right: 1em;
    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;
      }
    }
    @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;
  }
  .w-annc__title {
    font-family: $main-font;
    white-space: normal;
  }
  .w-annc__widget-title {     text-align: center; }
 
  .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;
    }
  }
  .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{
    padding: 0.5em;
    margin: 0!important;
  }
  .w-annc__item_inner{
      background: #fff;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      -webkit-box-shadow:none!important;
      box-shadow:none!important;
      margin: 0;
      margin-bottom: 1em;
  }
  .w-annc__item_inner{
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
      .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,p{
    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;
    padding-bottom: 0;
    margin-bottom: 0;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__item{
    @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{
        //   height: 100%;
        // }
          .card:before{
            height:100%;
          }
            .w-annc__subtitle,p{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
    }
    .card{
      position: absolute;
      z-index:0;
      padding: 30px 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 2%, #00000080 89%);
      width: 100%;
    }
    .card:before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 18px;
      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(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;
  }
  .w-annc__title {
    font-family: $main-font;
    white-space: normal;
  }
  .w-annc__widget-title {     text-align: center; }
 
  .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;
    color: #fff;
    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;
    }
  }
  .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{
    padding: 0.5em;
    margin: 0!important;
  }
  .w-annc__item_inner{
      background: #fff;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      -webkit-box-shadow:none!important;
      box-shadow:none!important;
      margin: 0;
      margin-bottom: 1em;
  }
  .w-annc__item_inner{
      &:hover{
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
      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,p{
    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;
    padding-bottom: 0;
    margin-bottom: 0;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__item{
    @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,p{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
    }
    .card{
      position: absolute;
      z-index:0;
      padding: 30px 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 2%, #00000080 89%);
      width: 100%;
    }
    .card:before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 18px;
      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%;
    padding: 1em;
  }
  .w-annc__list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .w-annc__meta{
    background-color:#dfdfdf;
    display: flex;
    align-items: center;
    padding:0.5em 1em;
  }
  h4,p{
    padding: 0;
  }
  .w-annc__title {
   font-family: $main-font;
   font-weight: bold;
 }
 .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;
    border-radius: 1em;
    @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;
    }
 }
}
//  Widget-23
.widget-announcement-23 {
  .w-annc__list{
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        .w-annc__item{
          @media(min-width:769px){
            margin: 0.5em;
              width: calc(25% - 1em)!important;
          }
        }
      .w-annc__item:first-child{
        @media(min-width:769px){
            width: calc(50% - 1em)!important;
        }
      }
      .w-annc__item:nth-child(2){
        @media(min-width:769px){
            width: calc(50% - 1em)!important;
        }
      }
  }
  .w-annc__more-wrap{
    display: none;
  }

  .w-annc__title {
    font-family: $main-font;
  }
  .w-annc__img-wrap {
    margin-bottom: 0.5em;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    .w-annc__img{
      width: 100%;
      position: relative !important;
    }
  }
  .w-annc__item{
    margin-bottom: 1em;
    padding: 0;
    background-color: transparent!important;
    &:hover{
        .w-annc__img{
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
          filter: brightness(40%);
        }
    }
  }
  .w-annc__entry-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .w-annc__meta{
    padding-top: 1em;
    display: none;
  }
}
//  Widget-24
.widget-announcement-24 {
  .w-annc__widget-title{
    display: block;
  }
  .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;
    flex-wrap: wrap;
  }
  .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;
  }
  .w-annc__title {
    font-family: $main-font;
  }
  .w-annc__widget-title {     text-align: center; }
 
  .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;
    }
  }
  .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;
   color: #fff;
   &: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){

    }
      &: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;
      }
      .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,p{
    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;
    padding-bottom: 0;
    margin-bottom: 0;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__img-wrap {
    img{
      // height: 100% !important;
      width:100%!important;
      @media(max-width:767px){
      }
    }
  }
  .w-annc__item{
    padding: 0;
    margin-right: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 1em;
    position: relative !important;
    @media(min-width:768px){
      &:nth-child(1){
        width: calc(200% / 3 - 1em)!important;
      }
      &:nth-child(2){
        width: calc(100% / 3 - 1em)!important;
      }
      &:nth-child(3){
        width: calc(100% / 3 - 1em)!important;
      }
      &:nth-child(4){
        width: calc(200% / 3 - 1em)!important;
      }
    }
    @media(max-width:767px){

      &:nth-child(2){
        width: calc(100% / 2 - 1em) !important;
        margin-right: 0.5em;
      }
      &:nth-child(3){
        width: calc(100% / 2 - 1em) !important;
        margin-left: 0.5em;
      }
    }

    @media(max-width: $screen-xs){
      width: 100% !important;
    }
    @media(min-width: 1100px){
       height: 22em;
      .w-annc__img-wrap{
          height: 22em;
      }
    }
    @media(min-width: 821px)and(max-width: 1100px){
       height: 22em;
      .w-annc__img-wrap{
        height: 22em;
      }
    }
    @media(min-width: $screen-xs)and(max-width: 820px){
      height: 15em;
     .w-annc__img-wrap{
       height: 15em;
     }
   }
    @media(max-width: $screen-xs){
      height: 10em;
     .w-annc__img-wrap{
       height: 10em;
     }
    }
  }
      li{
      &:hover{
          .card:before{
            height:100%;
          }
            .w-annc__subtitle,p{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
    }
    .card{
      position: absolute;
      z-index:0;
      padding: 30px 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 2%, #00000080 89%);
      width: 100%;
      @media(max-width:$screen-xs){
        padding: 10px;
        .w-annc__title{
          font-size: medium;
        }
      }
    }
    .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-26
.widget-announcement-26 {
  .status-top i{
    color: #fff!important;
  }
  .widget-title-a {
    display: inline!important;
  }
  .w-annc__item{
    padding: 0;
  }
  .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__subtitle,p{
    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;
    padding-bottom: 0;
    margin-bottom: 0;
    @media(min-width:1920px){
      font-size: 1.2em;
    }
  }
  .w-annc__img-wrap {
    img{
      width: auto!important;
      position: relative !important;
      width: 100% !important;
      height: 100%!important;
      margin: 0 !important;
    }
  }
  .w-annc__item{
     margin-bottom: 0em;
  }

  .w-annc__title {
    font-family: $main-font;
    line-height: 1.3;
    font-size: 1.2rem;
  }
  .w-annc__img-wrap {
    height: 100%;
  }
  .w-annc__meta i{
    color: #fff;
  }
  .w-annc__list{
    @media(min-width: $screen-sm){
        display: grid;
        grid-template-areas:
        "g1 g2 g3"
        "g1 g4 g5";
        grid-gap: 2% 1%;
        grid-template-columns:32.3% 32.3% 32.3%;
    }
    @media(max-width: $screen-sm-max){
      .w-annc__item{
        margin-bottom: 1em;
      }
    }
    li{
      &:hover{
          .card:before{
            height:100%;
          }
            .w-annc__subtitle,p{
              max-height: 100px;
              opacity: 1;
            }
      }
      position: relative;
      @media only screen and (max-width: 769px) and(min-width:500px){
       flex: 0 0 50%;
      }
      &:nth-child(1){
        grid-area: g1;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column-span: 7;
      }
      &:nth-child(2){
        grid-area: g2;
       -ms-grid-row: 1;
       -ms-grid-column: 9;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
      &:nth-child(3){
        grid-area: g3;
       -ms-grid-row: 1;
       -ms-grid-column: 17;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
      &:nth-child(4){
        grid-area: g4;
        -ms-grid-row: 3;
        -ms-grid-column: 9;
        -ms-grid-row-span: 1;
        -ms-grid-column-span: 7;
      }
      &:nth-child(5){
        grid-area: g5;
       -ms-grid-row: 3;
       -ms-grid-column: 17;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
    }
  }
  .card{
    position: absolute;
    z-index: 2;
    padding: 30px 25px;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2%, rgba(0, 0, 0, 0.501961) 89%);
    width: 100%;
    color: #fff;
  }
  .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 27
.widget-announcement-27 {
  .btn-right,.btn-left{
    background-color: $theme-color-second;
    &:hover{
      background: rgba(0, 0, 0, 0.45) !important;
    }
  }
  .w-annc__list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0 2.5rem; 
    box-sizing: border-box;
  }

  .w-annc__item {
    overflow: hidden;
    background-color: #fff;
    border: none;
    border-left: 4px solid $theme-color-second;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;

    @media(min-width: 1025px) {
      width: calc(33.333% - 0.7rem) !important;
    }
    @media(max-width: 1024px)and(min-width:480px) {
      width:calc(50% - 0.7rem)  !important;
    }
    @media(max-width: 480px) {
      width: 100% !important;
    }

    &:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
    }
  }

  .w-annc__content-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
  }
  .w-annc__status-wrap{
    @media(max-width:1900px){
     width: 100%;
    }
  }
  .w-annc__meta {
    background: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0;

  }
  .w-annc__category-wrap {
    margin-left: auto;
    padding-left: 0.5rem;
  }

  .w-annc__category {
    color: #fff;
  }
  .w-annc__postdate-wrap {
    display: block;
  }

  .w-annc__postdate {
    color: #535353;
  }

  h4, .w-annc__entry-title {
    padding: 0;
    margin: 0.2rem 0 0.6rem;
  }

  .w-annc__title {
    font-family: $main-font;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;

    &:hover {
      color: $theme-color-second;
    }
  }

  // 描述隱藏
  .w-annc__subtitle {
    display: none;
  }

  // 左右箭頭美化
  .btn-left,
  .btn-right {
    &:hover {
      background: rgba(0, 0, 0, 0.45) !important;
    }

    &:focus {
      outline: 2px solid #2980b9;
      outline-offset: 2px;
    }
  }

  // 標題區
  .w-annc__widget-title {
    float: left;
  }

  .w-annc__more-wrap {
    @media(max-width: 768px) {
      display: none;
    }
  }

  // RWD 手機
  @media(max-width: 767px) {
    .w-annc__list {
      padding: 0;
    }

    .w-annc__item {
      margin-bottom: 0.75rem;
    }
  }
}
// Widget-30
.widget-announcement-30 {
  .w-annc__item{
    &:hover{
      .w-annc__subtitle{
      opacity: 1;
      transition: max-height .6s, opacity .6s;
      max-height: 100px;
      }
    }
  }
  .w-annc__list {
    @media(min-width: $screen-sm) {
      display: grid;
      grid-template-areas:
        "g1 g2 g3"
        "g1 g4 g5";
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 1.25rem;
    }

    @media(max-width: $screen-sm-max) {
      display: flex;
    }

    li {
      list-style: none;

      >a{
        @media(min-width:769px){
        background: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
        border-radius: 12px;
        overflow: hidden;
        }

        &:hover {
          box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
          transform: translateY(-2px);
        }
      }



      &:nth-child(1) { grid-area: g1; }
      &:nth-child(2) { grid-area: g2; }
      &:nth-child(3) { grid-area: g3; }
      &:nth-child(4) { grid-area: g4; }
      &:nth-child(5) { grid-area: g5; }

      // 第一張大卡：圖片佔滿上半，文字在下
      &:nth-child(1) {
        display: flex;
        flex-direction: column;

        .w-annc__img-wrap {
          flex: 1;
          min-height: 200px;
        }

        .w-annc__title {
          font-size: 1.5rem;
          font-weight: 700;
          line-height: 1.3;
        }

        .w-annc__subtitle {
          font-size: 1.2rem;
          min-height: 187px;
          opacity: 1;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      // 小卡：圖片在上，內容在下
      &:nth-child(n+2) {
        display: flex;
        flex-direction: column;

        .w-annc__img-wrap {
          height: 200px;
          flex-shrink: 0;
        }

        .w-annc__title {
          font-weight: 600;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }

  // 圖片滿版
  .w-annc__img-wrap {
    overflow: hidden;

    a {
      display: block;
      height: 100%;
    }

    img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      display: block;
      position: relative !important;
      margin: 0 !important;
      transition: transform 0.3s ease;
    }

    &:hover img {
      transform: scale(1.03);
    }
  }

  .card {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #ffffff;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
  }

  .w-annc__category {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-weight: 600;
    background: #ffe0ec;
    color: #c0155a;
  }

  .w-annc__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    i {
      display: none; 
    }
  }

  .w-annc__postdate {
    color: #535353;
  }

  .w-annc__title {
    color: #1a1a1a;
    text-decoration: none;
    font-family: $main-font;

    &:hover {
      color: #c0155a;
    }
  }

  .w-annc__entry-title {
    margin: 0.2rem 0;
        min-height: 3em;
  }

  .w-annc__subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s, opacity 0.6s;
  }

  .w-annc__item {
    margin-bottom: 0;
        padding-bottom: 0 !important;
  }

  // 更多按鈕
  .w-annc__more-wrap {
    margin-top: 1rem;
  }

  // RWD 手機版
  @media(max-width: $screen-sm-max) {
    .w-annc__list li {
      margin-bottom: 0;


      .w-annc__img-wrap {
        height: 200px;
      }

      .w-annc__subtitle {
        max-height: 100px;
        opacity: 1;
      }
    }
  }
}
// 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 {
      background: #f5f5f5;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
  .w-annc__entry-title {
    @media(min-width: 769px){
    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 {
      background: #f5f5f5;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
  .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 {
    @media(min-width: 769px){
    margin: 0;
    }
  }

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

  .w-annc__status {
    display: inline-block;
  }
}
// Widget-31
.widget-announcement-31 {
  .w-annc__category-wrap,.w-annc__postdate-wrap{
    width: fit-content;
    @media(max-width: 768px){
    padding: 0.5em;
    }
  }
}
// ## Gerneral styles for table widgets



// Widget-8
// ## Table
.widget-announcement-8 {
  @media(min-width:769px){
    .w-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .w-annc__th--category,
    .w-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .w-annc__th--date,
    .w-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  td {
    padding-bottom: 0.8em;
    padding-top: 0.8em;
  }

  .w-annc__th {
    white-space: nowrap;
    background: #fff;

    @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__status {
    display: inline-block;
    font-size: 0.75rem;
  }

  td {
    font-size: 1em;
  }

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

// Widget-9
.widget-announcement-9 {
  @media(min-width:769px){
    .w-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .w-annc__th--category,
    .w-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .w-annc__th--date,
    .w-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }


  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 {
  .table>tbody>tr>td{
    border: 0;
  }
  .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{
    height: auto;
  }
  .w-annc__inner{
    @media(min-width:769px){
      display: flex;
    }
  }
  .w-annc__list{
    @media(min-width:769px){
      padding-left: 1em!important;
    }
  }
  .w-annc__img-wrap {
      margin-bottom: 0;
      padding: 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 {
  .w-annc__item_inner{
    -webkit-box-shadow: 0 1px 2px 0 #0000002e;
    box-shadow: 0 1px 2px 0 #0000002e;
  }
  .cycle-carousel-wrap {
    align-items: stretch;
  }
  .w-annc__item {
    display: flex;
    flex-direction: column;
  }

  .w-annc__item_inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* 撐滿父層高度 */
  }

  .w-annc__content-wrap {
    display: flex;
    flex-direction: column;
    flex: 1; /* 內容區塊自動填滿剩餘空間 */
    white-space: normal;
  }
   .w-annc__item{
    @media (max-width: $screen-xs) {
      width: 93vw !important;
      // margin-left: 0 !important;
      // margin-right: 0 !important;
    }
 }
  .w-annc__meta {
    display: flex;
    flex-wrap: wrap;
  }
  .cycle-slide-active{
    opacity: 1!important;
  }
  .w-annc__title {
   font-family: $main-font;
 }

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

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

 .w-annc__img-wrap {
   margin: 0;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   aspect-ratio: 16 / 9;
  //  @media(min-width:480px)and(max-width:820px){
  //   height: 9.5em;
  //  }
  //   @media(min-width:821px)and(max-width:1024px){
  //   height: 12.5em;
  //  }
  //  @media(min-width:1025px){
  //  height: 15.5em;
  //  }
  // @media(max-width:480px){
  //  height: 14.5em;
  //  }
 }
 .w-annc__item{
    padding: 0.5em;
    margin: 0!important;
    opacity: 1 !important;
 }
 .w-annc__content-wrap {
    padding: 1.5em;
}
 .w-annc__item_inner{
    -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: 0;
    margin-bottom: 1em;
    &: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;
    }
 }
}
//Widget 16
.widget-announcement-16 {
  img.w-annc__img{
    height: auto;
  }
  .prev-button{
    float: left;
    height: 2.5em;
    width: 2.5em;
    position: absolute;
    transition: 0.3s;
    left: 0.6%;
    color: rgb(255, 255, 255);
    border-radius: 50%;
  }
  .next-button{
    float: right;
    height: 2.5em;
    width: 2.5em;
    position: absolute;
    transition: 0.3s;
    right: 0.6%;
    color: rgb(255, 255, 255);
    border-radius: 50%;
  }
  .prev-button,.next-button{
    background-color: $theme-color-second;
    border-radius: 2em;
    color: #fff;
    &:hover{
      background: rgba(0, 0, 0, 0.45) !important;
    }
  }
  .w-annc__item{
    // padding-right: 1em;
  }
  .w-annc__img{
    width: 100%;
  }
  .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__img-wrap {
   margin: 0 0 0.5rem 0;
   aspect-ratio: 16 / 9;
 }
}

// 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: 2em;
  // }
  .w-annc__img-wrap {
    aspect-ratio: 16 / 9;
    margin:0;
    overflow: hidden;
  }
  .w-annc__content-wrap{
    background-color: #fff;
    padding: 1.5em;
  }
   .w-annc__item{
     @media(min-width: 769px){
       width: calc(33.3333% - 2em);
     }
     @media(max-width:768px)and (min-width:$screen-xs){
          width: calc(50% - 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;
      }
    }
  }
}

//widget 19
.widget-announcement-19 {
  .w-annc__title{
    white-space: normal;
  }
  .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__list > .w-annc__item:nth-child(3n+1) {
   clear: both;
 }

 .w-annc__list {
  @media(max-width: 768px){
    align-items: baseline;
  }
 }
.w-annc__subtitle{
   -webkit-line-clamp: 2;
}
 .w-annc__img-wrap {
   height: 13.5em;
   margin: 0 0 1em 0;
   overflow: hidden;
 }
.w-annc__item{
  vertical-align: top;
  @media(max-width:768px){
    width: 100%!important;
  }
  .w-annc__content-wrap{
      padding:1em;
      margin-bottom: 1em;
      margin-top: 1em;
      border-radius: 6px;
      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;
      white-space: normal;
      border-left: 4px solid $theme-color-second;
  }
} 


}
//widget 28
.widget-announcement-28 {
  .btn-right,.btn-left{
    background-color: $theme-color-second;
    &:hover{
      background: rgba(0, 0, 0, 0.45) !important;
    }
  }
  .w-annc__title{
    white-space: normal;
  }
  .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__list > .w-annc__item:nth-child(3n+1) {
   clear: both;
 }

 .w-annc__list {
  @media(max-width: 768px){
    align-items: baseline;
  }
 }
.w-annc__subtitle{
   -webkit-line-clamp: 2;
}
 .w-annc__img-wrap {
   height: 13.5em;
   margin: 0 0 1em 0;
   overflow: hidden;
 }
.w-annc__item{
  vertical-align: top;
  .w-annc__content-wrap{
      padding:1em;
      margin-bottom: 1em;
      margin-top: 1em;
      border-radius: 6px;
      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;
      white-space: normal;
      border-left: 4px solid $theme-color-second;
  }
} 


}
// 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: 1em 0.5em;
    @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 {
    list-style: none;
    padding: 1em 0;
    // 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__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-subtitle;
  }
  .i-annc__status{
    margin-right: 0.5em;
  }
  .i-annc__status-wrap {
    span {
      display: inline-block;
      padding: .2em .6em .3em;

      &:last-child {
        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 {
    display: flex !important;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    .i-annc__status-wrap{
      width:100% ;
    }
    .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;
      display: flex;
      align-items: center;
      margin-right: 0.5em;
    }

    i {
      color: $theme-color-main;
      font-size: medium;
      padding-right: 0.3em;
    }
  }

  .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;
    // text-overflow: ellipsis;
    // overflow: hidden;
    // clear: both;
  }

  .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;
  display: none;
}
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;
  display: none;
}
.i-annc__table .child span.dtr-data li {
  padding: 0 0.5em;
}
.i-annc{
  tr{
    border: 0.0625em solid #ddd !important;
  }
}
// Index-1
// Index-2
.index-announcement-1,
.index-announcement-2 {
  .i-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    width: 100%;
    &: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;
    }
  }
  .i-annc__postdate-wrap,.i-annc__category-wrap{
    width:fit-content;
  }
  // .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-subtitle;
    color: #666666;
  }

  .i-annc__status {
    @extend .i-subtitle;
  }
}

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

  .i-annc__item {
    margin-bottom: 0;
    padding-bottom: 0.8em;
    float: none;
    &: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;
    }
  }
  .i-annc__postdate-wrap,.i-annc__category-wrap{
    width:fit-content;
  }

  .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;
  }

}

// Index-5
.index-announcement-5{
  .i-annc__img-wrap {
    margin:0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
    
  }
  .i-annc__item {
    width: 100%;
    &:hover{
      .i-annc__title{
        color:$theme-color-second;
      }
      .i-annc__img{
        transform: scale(1.05) !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;
      }
    }
  }
  .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__img-wrap {
    margin:0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
    
  }
  .i-annc__item {
    width: 100%;
    &:hover{
      .i-annc__title{
        color:$theme-color-second;
      }
      .i-annc__img{
        transform: scale(1.05) !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;
      }
    }
  }
  .i-annc__title {
    font-family: $main-font;
  }
}
// Index-7
.index-announcement-7 {
  .i-annc__item{
    border:0;
    &:hover{
      .i-annc__title{
        color:$theme-color-second;
      }
      .i-annc__img{
        transform: scale(1.05) !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;
      }
    }
  }
  .i-annc__list {
    display: flex;
    flex-wrap: wrap;
  }
  .i-annc__title {
    font-family: $main-font;
  }
  .i-annc__list > .i-annc__item {
    width:calc( 100%/3);
    @media (max-width: $screen-xs) {
      width: 100%!important;
      min-height: unset;
      margin: 0;
      margin-bottom: 1em;
    }

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

  }
  .i-annc__content-wrap{
    margin: 0.5em;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 1em 0.5em;
    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);
    @media (max-width:767px) {
      width: calc( 100%/2);
      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__content-wrap{
    margin: 0.5em;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 0.5em;
    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 {

}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control{
  padding-left:1em;
}
table.dataTable>tbody>tr.child ul.dtr-details{
  width: 100%;
}
// Index-11
.index-announcement-11 {
  .i-annc__category{
    display: table-cell!important;
  }
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  @media(min-width:769px){
    table{
    border: 0.0625em solid #ddd !important;
    }
  }
  @media(max-width:768px){
   tr{
    margin-bottom: 1em;
   }
   td{
     border: 0;
   }
  }
  @media (max-width: 768px) {
    .i-annc__view-count::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      content: "\f06e"; /* fa-eye (regular) */
      margin-right: 4px;
    }
  }

  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
    }
    .i-annc__th--title{
      width:50%!important;
    }
  }
}

// Index-12
.index-announcement-12 {
  table.dataTable > tbody > tr.child {
    padding: 0;
    display: none;
  }
  td{
    display: table-cell!important;
  }
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  @media(min-width:769px){
    table{
    border: 0.0625em solid #ddd !important;
    }
  }
  @media(max-width:768px){
   tr{
    margin-bottom: 1em;
   }
   td{
     border: 0;
   }
  }
  @media (max-width: 768px) {
    .i-annc__view-count::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      content: "\f06e"; /* fa-eye (regular) */
      margin-right: 4px;
    }
  }

  .child{
    li{
      list-style: none;
    }
  }
  @media(max-width: $screen-xs){
    .i-annc__th--date{
      width:50%!important;
    }
    .i-annc__th--title{
      width:50%!important;
    }
  }
}
// Index-13
.index-announcement-13 {
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  .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;
    }
  }
}
// Index-14
.index-announcement-14 {
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  .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;
    }
  }
}
// Index-15
.index-announcement-15 {
    table.dataTable > tbody > tr.child {
    padding: 0;
    display: none;
  }
  td{
    display: table-cell!important;
  }
  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  @media(min-width:769px){
    .i-annc__table {
      table-layout: auto !important;
    }
  
    th, td {
      width: auto;
    }

    // 類別欄：縮到剛好容納內容
    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    // 日期欄：同樣縮到最小
    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
  @media(min-width:769px){
    table{
    border: 0.0625em solid #ddd !important;
    }
  }
  @media(max-width:768px){
   tr{
    margin-bottom: 1em;
   }
   td{
     border: 0;
   }
  }
  @media (max-width: 768px) {
    .i-annc__view-count::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      content: "\f06e"; /* fa-eye (regular) */
      margin-right: 4px;
    }
  }
  .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;
    }
  }
}
// Index-16
.index-announcement-16 {
  table.dataTable > tbody > tr.child {
    padding: 0;
    display: none;
  }
  td {
    display: table-cell !important;
  }

  @media(min-width: 769px) {
    .i-annc__table {
      table-layout: auto !important;
    }

    th, td {
      width: auto;
    }

    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-right: 1em;
    }

    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  @media(min-width: 769px) {
    .i-annc__table {
      table-layout: auto !important;
    }

    th, td {
      width: auto;
    }

    .i-annc__th--category,
    .i-annc__category {
      width: 1% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }

    .i-annc__th--date,
    .i-annc__postdate {
      width: 10% !important;
      white-space: nowrap;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  @media(min-width: 769px) {
    table {
      border: 0.0625em solid #ddd !important;
    }
  }

  @media(max-width: 768px) {
    tr {
      margin-bottom: 1em;
    }
    td {
      border: 0;
    }
  }

  @media (max-width: 768px) {
    .i-annc__view-count::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      content: "\f06e";
      margin-right: 4px;
    }
    .i-annc__th {
      border: 0 !important;
    }
    .i-annc__files,.i-annc__links{
      display:flex !important;
    }
    [data-list="bulletin_files"],[data-list="bulletin_links"]{
      width: 80%;
    }
    // ✅ 新增：RWD < 769 時顯示 data-label 作為前綴標題
    .i-annc__files[data-label]::before,
    .i-annc__links[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        font-weight: bold;
        margin-right: 0.5em;
        color: #333;
        font-size: 1em;
        background: #ccc;
        height: fit-content;
        padding: 0.2em;
        border-radius: 0.2em;
    }
  }

  li {
    list-style: none !important;
  }

  td ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

// Index-17
.index-announcement-17 {
  @media(max-width: $screen-xs){
    .i-annc__table{
          border: 0 !important;
    }
    tr{
        margin-bottom: 10px;
        border: 0.0625em solid #ddd !important;
    }
    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;
  }
}
// Index-21
.index-announcement-21{

  .i-annc__postdate-wrap{
    margin-right: 0!important;
    justify-content: center;
    border-radius: 1em;
    overflow: hidden;
    min-width: unset;
  }
  .i-annc__meta{
    justify-content: center;
    padding: 0;
    margin-bottom: 1em;

  }
  @media(min-width: 768px)and(max-width: 1023px){
    .col-sm-10{
      width:73.333333%;
      float: left;
    }
    .col-sm-2{
      width: 16.66666667%;
      float: left;
    }
  }
  .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__related-file {
    margin-bottom: 0.9375em;
  }

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

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

  .s-annc__related-link-list,
  .s-annc__related-file-list {
    display: inline-block;
    width: 100%;
  }
  .s-annc__flie-title{
        width: 100%;
  }
  .s-annc__flie-title,.s-annc__link-title {
    padding-left: 0;
    // white-space: nowrap;
    // width: 100%;
    margin-right: 0.5em;
    text-align: justify;
    color: $theme-color-second!important;
    background-color: rgba($theme-color-second, 0.08);
    margin-bottom: 0.5em;
    padding: 0.5em;
    &:hover{
      background:$theme-color-second;
      color: #fff!important;
      i,a{
        color: #fff!important;
      }
    }

  }
.carousel_images {
    .w-ba-banner .controlplay .resume-slide.active i{
      color: #32D9C3;
    }
    .w-ba-banner .controlplay .pause-slide.active i{
      color: #ff4500;
    }
   .carousel_images_slide{
      margin-top: -2.5em !important;
    }
  .w-ba-banner__slide{
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    text-align: center;
    background-color: rgba($theme-color-second, 0.1)!important;
    .w-ba-banner__image{
      width: auto;
      height: 100%;
    }
    .banner-overlay{
      text-shadow: unset;
      padding-top: 0.5em;
      min-height: 7em;
      background-color: rgba($theme-color-second, 0.1)!important;
      position: relative;
      display:block;
      background-image: unset;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      .carousel__description{
        color: #333;
      }
      p{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
  }
    .carousel_img-wrap {
        position: relative;
        display: block;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background-color: $theme-color-second;
            z-index: 1;
            pointer-events: none; // ✅ 讓點擊穿透遮罩，img 仍可點擊
        }
    }

    .carousel_img {
        display: block;
        width: 100%;
    }
}

.carousel__description {
    position: relative;
    z-index: 2;
    color: #333;
}

.carousel__description {
    position: relative;
    z-index: 2;
    color: #333;
}
.carousel__description{
  color: #333;
}
.carousel_images3{
  p {
    padding-top: 1em;
    padding-bottom: 1rem;
    margin-bottom: 0;
  }
  .carousel_image{
        background-color: rgba($theme-color-second, 0.1);
        margin-bottom: 1em;
        border-radius: 1em;
    > a{
      display: block;
      position: relative;
      overflow: hidden;
      border-radius: 1em;
    }
       &:hover{
        img{
        transform: scale(1.05) !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;
        }
      }   
  } 

  img{
    border-radius: 1em;
    width: 100%;
  }
  @media (min-width: 768px) {
    display: block !important;
    column-count: 2;
    column-gap: 16px;
    .carousel_image{
      break-inside: avoid;
      padding: 0;
      display: inline-block;
      width: 100% !important;

    }
  }
}
.s-annc__post-wrap{
  .s-annc__subtitle {
    margin-bottom: 1em;
    // width: 60%;
    // background-color: rgba($theme-color-second, 0.1);
    // border-bottom: 1px solid #c3c3c3;
  }
}
// .s-annc__sub-img.pull-right{
//   width: 38%;
//   @media(max-width:768px){
//     width: 100%;
//   }
// }
// .s-annc__sub-img.pull-left{
//   width: 38%;
//   @media(max-width:768px){
//     width: 100%;
//   }
// }
.s-annc {
  .s-annc__date-wrap,.s-annc__author-wrap,.s-annc__tag-wrap {
      list-style: none;
      float: 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 {
      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;
        background-color: $theme-color-second;
      }
    }
  }
.full-size-img {
    width: 100%!important;
}
  .s-annc__post-wrap {
    @include clearfix;
    margin-bottom: 2em;
    .s-annc__sub-img {
      background-color: rgba($theme-color-second, 0.1);
      border-radius: 1em;
      width: 40%;
          margin-bottom: 1em;
      @media(max-width:768px){
        width: 100%;
      }
      img{
      width: 100%;
      }

      @media(max-width:480px){
        width: 100%;
      }
      // background: #eee;
      // padding: 0.5em;
      // border: 1px solid #e2e0e0;
      img { padding: 0;     border-radius: 1em;}
      .s-annc__img_description {
        @media(max-width:768px){

        }
        padding:1em;
        margin:0;
        display: block;
      }
    }
  }


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



  .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: #c2c2c2;
}

.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;
  z-index: 100;
}

.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: $theme-color-second;
  border: 2px solid #494949;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%
}

.VivaTimeline dl dd .time {
  position: absolute;
  top: 31px;
  left: 50%;
  display: inline-block;
  width: fit-content;
  padding: 10px 20px;
  color:$theme-color-second;
}

.VivaTimeline dl dd .events {
  position: relative;
  width: 47%;
  padding: 10px 0 0;
  margin-top: 31px;
  padding: 20px;
    border: solid 1px #dfdfdf;
    border-radius: 5px;
  @media(max-width:768px){
    padding:1em;
  }
}

.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;
      border-radius: 1em;
    margin: 0.5em 0;
}

.VivaTimeline dl dd .events .events-header {
  min-height: 30px;
  line-height: 20px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.5em;
  @media(max-width:768px){
    padding: 0;
  }
}

.VivaTimeline dl dd .events .events-body {
  overflow: hidden;
  zoom: 1;
}
.VivaTimeline dl dd .events .events-body .row{
  display:none;
      height: auto !important;
}

.VivaTimeline dl dd .events .events-body .events-desc {
  padding: 0 15px;
  @media(max-width:768px){
    padding: 0;
  }
}

.VivaTimeline dl dd .events .events-footer {
  text-align:center;
  display: none;
}
.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: -105px;
  text-align: right
}

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

.VivaTimeline dl dd.pos-right .events:before {
content: "";
    position: absolute;
    top: 32px;
    left: 1px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-color: #fff #fff transparent transparent;
    border-style: solid;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
    box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
}

.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 {
    content: "";
    position: absolute;
    top: 32px;
    left: 1px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-color: #fff #fff transparent transparent;
    border-style: solid;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
    box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
    left: inherit;
    right: 1px;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}

.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: 0;
      right: inherit;
      transform: rotate(-135deg) translateY(-50%);
  }
  .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%;
  }
}

@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;
  }
  .i-annc__item{
      background-color: $theme-color-second;
      border: 3px solid $theme-color-second !important;
      color: #fff;
      a{
        color: #fff;
      }
  }
  // 類別變色（白色文字對比比 4.5:1，符合 WCAG AA）
  // .全部 {
  //     background-color: #9e5a28 !important;
  //     border: 3px solid #9e5a28 !important;
  // }
  // .公告 {
  //     background-color: #8a6d1a !important;
  //     border: 3px solid #8a6d1a !important;
  // }
  // .公告1 {
  //     background-color: #7a2d52 !important;
  //     border: 3px solid #7a2d52 !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);
      margin-bottom: 1em;
      background-color: $theme-color-second;
      border: 3px solid $theme-color-second;
      &: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);
      }
      @media(max-width:480px){
        width:100%;
      }
    }
  }
  .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.5em;
  }
  .i-annc__img-wrap {
    overflow: hidden;
    margin-bottom: 1em;
    img {
      @media (max-width:767px) {
       transform: scale(1) !important;
      }
    }
  }
}
.s-annc__link-title {
  word-break: break-all;
  white-space: break-spaces;
}
.show-publications{
  ul{
    padding: 0;
  }
}
.carousel_img_item img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
}