/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

nav li:after, .con2_form label:after{
  -webkit-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
.secpoin, .load_logo, #cursor > div,
.ab4_gp_img, .f_cta i, .footer a, .logo span,
.ab4_gallery > div, .ser_list_image, .ser_list_name, .ser_list_name:before,
.required, .con2_form b, .mline1, .mline2, .mline3, .mline4, nav ul, nav,
header{
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.hs_aniW, .hs_aniW2, .bigfontAni{
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#home_load > div{
  -webkit-transition: -webkit-transform .8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: -webkit-transform .8s cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform .8s cubic-bezier(0.86, 0, 0.07, 1);
}
.hsec_right > div, .ab3_client_logo img{
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s;
}
.ab4_gp_img span, .ab4_title > div, .homes0_bg > div,
.trend_post img, .trend_post h2,
.ser_main_img > div, .es_bg, .con_main_img,
.ser_sec_2 .scroll_act, .con2_content,
.ser3_content .scroll_act, 
.ser4_content .scroll_act,
.post_block,
.sec_ani, .hsec1_simg, .fadeUp{
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
.scrollPara{
  -webkit-transform: translate3d(0px,0px,0px);
          transform: translate3d(0px,0px,0px);
}
.ser3_content .scroll_act,
.ser4_content .scroll_act{
  opacity: 0;
  -webkit-transform: translateY(50px);
      -ms-transform: translateY(50px);
          transform: translateY(50px);
}
.ser3_content .scroll_act.show,
.ser4_content .scroll_act.show{
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/*一般 fadeIn */
.trend_post h2,
.trend_post .scroll_act,
.trend_list_item .scroll_act,
.con2_content,
.con2_form,
.post_block{
  opacity: 0;
  -webkit-transform: translateY(50px);
      -ms-transform: translateY(50px);
          transform: translateY(50px);
}
.sec_ani.scroll_act.show,
.trend_post h2.show,
.trend_post .scroll_act.show,
.trend_list_item .scroll_act.show,
.con2_content.show,
.con2_form.show,
.post_block.show,
.hsec1_simg.show,
.fadeUp.show{
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.trend_post p,
.con2_form.show{
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  -webkit-transition-delay: .3s;
       -o-transition-delay: .3s;
          transition-delay: .3s;
}
/*圖片進入*/
/*{
  transform: scale(1.5);
}*/
.hsec_right > div.show,
.img_zoom.show{
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
/*---------------
@loader
---------------*/
#es_wrap{
  width: 100%;
  height: 100%;
  top: 500px;
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: absolute;
}
.loaded #es_wrap{
  top: 0;
}
.load_out #es_wrap{
  top: -500px;
}
.loader{
  background: #000;
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.load_logo{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.load_logo svg{
  width: 110px;
  height: 77.53px;
  -webkit-animation: loadlogo 1s infinite;
          animation: loadlogo 1s infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.loaded .loader{
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}
.loaded .load_logo{
  opacity: 0;
} 
.load_out .load_logo{
  opacity: 1;
}
.load_out .loader{
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
}
@-webkit-keyframes loadlogo{
  0%{opacity: 1}
  50%{opacity: .5}
  100%{opacity: 1}
}
@keyframes loadlogo{
  0%{opacity: 1}
  50%{opacity: .5}
  100%{opacity: 1}
}
@-webkit-keyframes bigArrowShake{
  0%{width: 180px;}
  50%{width: 160px;}
  100%{width: 180px;}
}
@keyframes bigArrowShake{
  0%{width: 180px;}
  50%{width: 160px;}
  100%{width: 180px;}
}
@-webkit-keyframes bigArrowShake2{
  0%{right: 0px;}
  50%{right: 20px;}
  100%{right: 0px;}
}
@keyframes bigArrowShake2{
  0%{right: 0px;}
  50%{right: 20px;}
  100%{right: 0px;}
}
@-webkit-keyframes bigCircleRound{
  from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes bigCircleRound{
  from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}