@charset "utf-8";
.animate0{
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.animate1{
  -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.animate2{
  -webkit-transition: all 1.5 ease;
    -moz-transition: all 1.5 ease;
    -ms-transition: all 1.5 ease;
    -o-transition: all 1.5 ease;
    transition: all 1.5 ease;
}

.fadeIn{
    opacity: 0;
}
.action .fadeIn{
    opacity: 1;
}
.fadeInUp{
  -webkit-transform: translateY(100px); 
    transform: translateY(100px); 
    opacity: 0;
}

.action .fadeInUp{
    opacity: 1;
  -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
.fadeInDown{
  -webkit-transform: translateY(-100px); 
    transform: translateY(-100px); 
    opacity: 0;
}
.action .fadeInDown{
    opacity: 1;
  -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
.fadeInDownMd{
    -webkit-transform: translateY(-50vw); 
    transform: translateY(-50vw); 
    opacity: 0;
}
.action .fadeInDownMd{
    opacity: 1;
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
.fadeInUpMd{
    -webkit-transform: translateY(50vw); 
    transform: translateY(50vw); 
    opacity: 0;
}
.action .fadeInUpMd{
    opacity: 1;
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
.fadeInRight{
  -webkit-transform: translateX(-100px); 
    transform: translateX(-100px); 
    opacity: 0;
}
.action .fadeInRight{
    opacity: 1;
  -webkit-transform: translateX(0px); 
    transform: translateX(0px);
}
.fadeInRightRot{
    -webkit-transform: translateX(-100px) rotate(30deg); 
    transform: translateX(-100px) rotate(30deg); 
    opacity: 0;
}
.action .fadeInRightRot{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg); 
    transform: translateX(0px) rotate(0deg);
}
.fadeInRightMd{
    -webkit-transform: translateX(-50vw); 
    transform: translateX(-50vw); 
    opacity: 0;
}
.action .fadeInRightMd{
    opacity: 1;
    -webkit-transform: translateX(0px); 
    transform: translateX(0px);
}
.fadeInLeft{
  -webkit-transform: translateX(100px); 
    transform: translateX(100px); 
    opacity: 0;
}
.action .fadeInLeft{
    opacity: 1;
  -webkit-transform: translateX(0px); 
    transform: translateX(0px);
}
.fadeInLeftRot{
    -webkit-transform: translateX(100px) rotate(-30deg); 
    transform: translateX(100px) rotate(-30deg); 
    opacity: 0;
}
.action .fadeInLeftRot{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg); 
    transform: translateX(0px) rotate(0deg);
}
.fadeInLeftMd{
    -webkit-transform: translateX(50vw); 
    transform: translateX(50vw); 
    opacity: 0;
}
.action .fadeInLeftMd{
    opacity: 1;
    -webkit-transform: translateX(0px); 
    transform: translateX(0px);
}
.rotateIn{
    opacity: 0;
    -webkit-transform: rotate(-180deg) ; 
    transform:  rotate(-180deg); 
}
.action .rotateIn{
    opacity: 1;
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
}
.rotateInLeft{
    opacity: 0;
  -webkit-transform: translateX(500px) rotate(180deg); 
    transform: translateX(500px) rotate(180deg); 
}
.action .rotateInLeft{
    opacity: 1;
  -webkit-transform: translateX(0px) rotate(0deg); 
    transform: translateX(0px) rotate(0deg);
}
.rotateInRight{
    opacity: 0;
  -webkit-transform: translateX(-500px) rotate(-180deg); 
    transform: translateX(-500px) rotate(-180deg); 
}
.action .rotateInRight{
    opacity: 1;
  -webkit-transform: translateX(0px) rotate(0deg); 
    transform: translateX(0px) rotate(0deg);
}

.zoomIn{
    opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
}
.action .zoomIn{
    opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.Rot1{
    opacity: 0;
    -webkit-transform:  rotate(20deg);
    transform:  rotate(20deg);
}
.action .Rot1{
    opacity: 1;
    -webkit-transform:  rotate(0deg);
    transform:  rotate(0deg);
}
.Rot2{
    opacity: 0;
    -webkit-transform:  rotate(-20deg);
    transform:  rotate(-20deg);
}
.action .Rot2{
    opacity: 1;
    -webkit-transform:  rotate(0deg);
    transform:  rotate(0deg);
}
.widthIn{
    width: 0;
    opacity: 0;
}
.action .widthIn{
    opacity: 1;
    width: 92%;
}


.heightIn{
    height: 0;
    opacity: 0;
}
.action .heightIn{
    opacity: 1;
    height: 86.5%;
}
/*bgfadeInDown*/
.bgfadeInDown,.bgfadeInBigDown{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -webkit-transform: translateY(-200%); 
     transform: translateY(-200%); 
}
.bgfadeInBigDown{
    -webkit-transform: translateY(-800%); 
     transform: translateY(-800%);  
}
.action .bgfadeInDown,.action .bgfadeInBigDown{
  -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
/*bgfadeInUp*/
.bgfadeInUp,.bgfadeInBigUp{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -webkit-transform: translateY(200%); 
     transform: translateY(200%); 
}
.bgfadeInBigUp{
    -webkit-transform: translateY(800%); 
     transform: translateY(800%);  
}
.action .bgfadeInUp,.action .bgfadeInBigUp{
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}

/*轉*/
.circleani{
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(359deg)
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

