/* 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*/  }}