@charset "utf-8";

@import "../initial";
.verticalhome{
  position: relative;
  width: 100%;
  background-color: #fff;
}
.internal-page{
  .layout-content{
    background: #F8F9FA;
    padding-top: 1em;
  }
}
.big-banner{
  width: 100%;
  position: relative;
}
.layout-content {
  position: relative;
  min-height: 42.5em;
  background: #fff;
  .container {
    @extend .response-container;
  }
}
.layout-content-inner{
  overflow: hidden;
}
.video-banner{
  max-width: 850px;
}
.homebanner{
    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -ms-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out;
}
.fa, .fas{
    font-family: "FontAwesome";
    font-weight: 900;
    font-style: normal;
}
.fab{
    font-family: "Font Awesome 5 Brands";
}
.padding0{
  .layout-content-box{
    &:hover{
      opacity: .8;
      transition: all .3s;
    }
  }

  a{
    color: #fff;
  }
  .layout-content-box{
    padding: 0;
  }
    padding: 0 1em;
}
.image-carousel{
  padding: 15px 0px 25px 0px;
}
.hide0{
  opacity: 0;
  -webkit-transform: translateY(15%) translateZ(0);
  -moz-transform: translateY(15%) translateZ(0);
  -o-transform: translateY(15%) translateZ(0);
  -ms-transform: translateY(15%) translateZ(0);
  transform: translateY(15%) translateZ(0);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
}
.animationvisible{
  opacity: 1;
  -webkit-transform: translateY(0) translateZ(0);
  -moz-transform: translateY(0) translateZ(0);
  -o-transform: translateY(0) translateZ(0);
  -ms-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
}
.swiper-banner{
  .ba-banner-widget-1 {
    .ad-overlay{
          background-image: none!important;
    }
    ul.button-mid .next-button{
          color: #E4002B!important;
          background: none!important;
    }
    ul.button-mid .prev-button{
          color: #E4002B!important;
          background: none!important;
    }
  }
}
.information{
  .informationicon{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    @media(max-width: $screen-xs){
      width: 50%;
      padding: 1em;

    }
    &:hover{
      color: $theme-color-second;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
    }
    i{
      font-size: 2.5em;
      padding-bottom:10px;
    }
    strong{
      width: 100%;
    }
    span{
      width: 100%;
    }
  }
}
//內頁
.contentwrap{
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #F8F9FA;
  padding-bottom: 4em;
  padding-top: 4em;
   p{
   padding-bottom: 1em;
  }
}
.contentwrap1{
  overflow: hidden;
  position: relative;
  width: 100%;
  // background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0);
  margin-top: 4em;
  margin-bottom: 4em;
}
.contentwrap2{
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 4em;
  margin-bottom: 4em;
}
.iconwrap{
      padding: 4em 0 0;
}
.kenopacity{
  .box{
    &:hover{
      opacity: .8;
      transition: all .3s;
    }
  }
}
.kenopacity{
      padding-bottom: 1em;
}
.zero{
  transition: opacity 0.25s linear;
  padding: 0;
  &:hover{
    opacity: .8;
    cursor: pointer;
  }
  a{
    color: #fff;
    font-weight: bold;
  }
}