/* Banner Text Animation : START */
.opacity-0 {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
}
.activate {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
}
/*fade in left*/
.fadeinleft {
  animation-name: banner_title_effect;
  -webkit-animation-name: banner_title_effect;
  -moz-animation-name: banner_title_effect;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes banner_title_effect {
  0% {
    transform: translateX(-150px);
    -webkit-transform: translateX(-150px);
    -moz-transform: translateX(-150px);
    -ms-transform: translateX(-150px);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    opacity: 0;
  }
  20% {
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    -ms-opacity: 0.3;
    opacity: 0.3;
  }
  100% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }
}
/*fade in right*/
.fadeinright {
  animation-name: banner_content_effect;
  -webkit-animation-name: banner_content_effect;
  -moz-animation-name: banner_content_effect;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.1, 0.9);
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes banner_content_effect {
  0% {
    transform: translateX(150px);
    -webkit-transform: translateX(150px);
    -moz-transform: translateX(150px);
    -ms-transform: translateX(150px);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    opacity: 0;
  }
  10% {
    transform: translateX(150px);
    -webkit-transform: translateX(150px);
    -moz-transform: translateX(150px);
    -ms-transform: translateX(150px);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }
}
/* Banner Text Animation : END */
/* Banner Slick Arrow : START */
figure.banner-btn {
  display: none;
}
figure.banner-btn img {
  display: none;
}
/* Banner Slick Arrow : START */
@media (min-width: 992px) {
  figure.banner-btn {
    z-index: 10;
    /*flex make element centered*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    /*other*/
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3em;
    cursor: pointer;
  }
  figure.banner-btn img {
    display: block;
    opacity: 0.7;
    transition: all 0.4s;
    /*arrow*/
    width: 2em;
    height: 2em;
  }
  figure.banner-btn:active {
    outline: none;
    border: none;
    -moz-outline-style: none;
  }
  figure.banner-btn:focus {
    outline: none;
    border: none;
    -moz-outline-style: none;
  }
  figure.banner-btn:hover img {
    opacity: 1;
  }
  figure.banner-btn-left {
    left: 10px;
  }
  figure.banner-btn-right {
    right: 10px;
  }
}
/* css箭頭往內收縮 */
@media (min-width: 1280px) {
  figure.banner-btn-left {
    left: 80px;
  }
  figure.banner-btn-right {
    right: 85px;
  }
}
@media (min-width: 1440px) {
  figure.banner-btn-left {
    left: 100px;
  }
  figure.banner-btn-right {
    right: 100px;
  }
}
@media (min-width: 1600px) {
  figure.banner-btn-left {
    left: 150px;
  }
  figure.banner-btn-right {
    right: 150px;
  }
}
@media (min-width: 1920px) {
  figure.banner-btn img {
    /*arrow*/
    width: 2.3em;
    height: 2.3em;
  }
}
/* Banner Slick Arrow : END */
/* Banner Slick Dots : START */
section.banner-sec .slick-dots {
  bottom: 7px;
}
.slick-dots li button:before {
  /*DOTS*/
  font-size: 32px;
  color: #d4d4d4;
  opacity: 0.7;
  text-shadow: 0 0 1px #888888;
}
.slick-dots li.slick-active button:before {
  color: #ffffff;
}
@media (min-width: 768px) {
  section.banner-sec .slick-dots {
    bottom: 20px;
  }
  .slick-dots li button:before {
    /*DOTS*/
    font-size: 40px;
  }
}
/* Banner Slick Dots : END */
/* -----------------Mobile--------------------------------------*/
body section.banner-sec {
  display: block;
  position: relative;
  min-height: 300px;
}
body section.banner-sec div.container-wide {
  /*Carousel Slider*/
}
body section.banner-sec div.container-wide div.banner-slider-area {
  /*item*/
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block {
  min-height: 300px;
  position: relative;
  background-size: cover;
  background-position: center center;
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block {
  margin-top: 2em;
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.title-box h1 {
  color: #ffffff;
  font-weight: 600;
  text-align: left;
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.content-box h3 {
  color: #ffffff;
  font-weight: 300;
  text-align: left;
  font-size: 1em;
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.btn-box {
  display: none;
}
body section.banner-sec div.container-wide div.banner-slider-area div.slider-block > a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* -----------------Pad--------------------------------------*/
@media only screen and (min-width: 768px) {
  body section.banner-sec {
    min-height: 500px;
  }
  body section.banner-sec div.container-wide {
    /*Carousel Slider*/
  }
  body section.banner-sec div.container-wide div.banner-slider-area {
    /*item*/
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block {
    min-height: 500px;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block {
    margin-top: 5em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.title-box h1 {
    margin-bottom: 0.3em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.content-box {
    margin-bottom: 1.3em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.content-box h3 {
    font-size: 1.3em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.btn-box {
    display: block;
    margin-bottom: 2em;
    padding-left: 0.1em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.btn-box button.btn-style {
    border: 1px solid #ffffff;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.btn-box button.btn-style p {
    color: #ffffff;
  }
}
/*---------------Desktops and laptops-------------------------*/
@media only screen and (min-width: 992px) {
  body section.banner-sec div.container-wide {
    /*Carousel Slider*/
  }
  body section.banner-sec div.container-wide div.banner-slider-area {
    /*item*/
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block {
    margin-top: 6em;
    padding-left: 3em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.content-box {
    margin-bottom: 1.5em;
  }
  body section.banner-sec div.container-wide div.banner-slider-area div.slider-block div.slogan-block div.content-box h3 {
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
  }
}
/*---------------Desktops-1200--------------------------------*/
@media only screen and (min-width: 1200px) {
  body section.banner-sec div.container-wide {
    /*Carousel Slider*/
  }
  body section.banner-sec div.container-wide div.banner-slider-area {
    /*item*/
  }
}
/*---------------Desktops-1920--------------------------------*/
@media only screen and (min-width: 1920px) {
  section.banner-sec div.container-wide {
    /*Carousel Slider*/
  }
  section.banner-sec div.container-wide div.banner-slider-area {
    /*item*/
  }
}