/*顯示位置*/


@media (min-width:992px){
.mouse-wrap{
 margin-top:-9%!important;  
}
    .mouse-wrap{
      display:inline-block;
      position:absolute;
      left:50.3%!important;
      
      transform:translate(-50%,-50%);
    }

    .mouse-wrap .mouse {
      top:0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      animation: nudgeMouse 5.5s ease-out infinite;
    }

    .mouse-wrap .mouse:after {
      content: '';
     background-color: #fff0;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
      border-radius: 100%;
      animation: trackBallSlide 5.5s linear infinite;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      transform:translateY(20px);
    }

    .mouse-wrap .mouse .frame {
      width: 100%;
      position: absolute;
      z-index: 1;
    }

    .mouse-wrap .mouse .frame path {
      fill: none;
      stroke: #fff;
      stroke-width: 3;
      opacity:0.5;
    }

    .mouse-wrap .mouse .mouse-left,
    .mouse-wrap .mouse .mouse-right {
      width: 50%;
      position: absolute;
      z-index: 2;
    }

    .mouse-wrap .mouse .mouse-right {
      right: 0;
    }

    .mouse-wrap .mouse .Animate-Draw {
      fill: none;
      stroke: #fff;
      stroke-width: 3;
      fill-opacity: 1;
    }

    .mouse-wrap .mouse .mouse-left .Animate-Draw {
      animation: DrawLine 5.5s ease-out infinite;
    }

    .mouse-wrap .mouse .mouse-right .Animate-Draw {
      animation: DrawLineBack 5.5s ease-out infinite;
    }
}
@keyframes scaleUp {
    from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

@-webkit-keyframes scaleDownUp {
    from {
        opacity: 0;
        -webkit-transform: scale(0.9);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes scaleDownUp {
    from {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes scaleDown {
    from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
    to {
        opacity: 0;
        -webkit-transform: scale(0.9);
    }
}

@keyframes scaleDown {
    from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
    to {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@-webkit-keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/*  --------------------- Codeless Slider Slide Intro Animations ------------------------------ */
@media (min-width:767px){
    /* Cinemagraphs 1 */
    .cl-slide.animation--cinemagraphs_first.start_animation .bg-layer{
        -webkit-animation-name: cinemagraphs_first;
        animation-name: cinemagraphs_first;
    }
    .cl-slide.animation--cinemagraphs_first .bg-layer{
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: cubic-bezier(0,0,0,.93);
        animation-timing-function: cubic-bezier(0,0,0,.93);
        will-change: transform;
        -webkit-transform: scale(1.05) translate3d(-30px, 0, 0);
        transform: scale(1.05) translate3d(-30px, 0, 0)
    }

    @-webkit-keyframes cinemagraphs_first {
        from {
            -webkit-transform: scale(1.05) translate3d(-30px, 0, 0);
            transform: scale(1.05) translate3d(-30px, 0, 0)
        }
        to {
            -webkit-transform: scale(1) translate3d(0, 0, 0);
            transform: scale(1) translate3d(0, 0, 0)
        }
    }
    @keyframes cinemagraphs_first {
        from {
            -webkit-transform: scale(1.05) translate3d(-30px, 0, 0);
            transform: scale(1.05) translate3d(-30px, 0, 0)
        }
        to {
            -webkit-transform: scale(1) translate3d(0, 0, 0);
            transform: scale(1) translate3d(0, 0, 0)
        }
    }


    .cl-slide.animation--cinemagraphs_two.start_animation .bg-layer{
        -webkit-animation-name: cinemagraphs_two;
        animation-name: cinemagraphs_two;
    }
    .cl-slide.animation--cinemagraphs_two .bg-layer{
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: cubic-bezier(0,0,0,.93);
        animation-timing-function: cubic-bezier(0,0,0,.93);
        will-change: transform;
        -webkit-transform:scale(1.1) translateX(0);
        transform:scale(1.1) translateX(0)
    }

    @-webkit-keyframes cinemagraphs_two {
        from {
            -webkit-transform:scale(1.1) translateX(0);
            transform:scale(1.1) translateX(0)
        }
        to {
            -webkit-transform:scale(1.15) translateX(-40px);
            transform:scale(1.15) translateX(-40px)
        }
    }
    @keyframes cinemagraphs_two {
        from {
            -webkit-transform:scale(1.1) translateX(0);
            transform:scale(1.1) translateX(0)
        }
        to {
            -webkit-transform:scale(1.15) translateX(-40px);
            transform:scale(1.15) translateX(-40px)
        }
    }
}


/* Slider Scroll SVG */
@media (max-width:991px){
	.mouse-wrap{
		display:none;
	}
}
@media (min-width:992px){
.home .mouse-wrap{
    margin-bottom: 20px;

}

    .mouse-wrap{
      display:inline-block;
      position:absolute;
      left:50%;
     
      transform:translate(-50%,-50%);
    }

    .mouse-wrap .mouse {
      top:0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      animation: nudgeMouse 5.5s ease-out infinite;
    }

    .mouse-wrap .mouse:after {
      content: '';
    background-color: #fff0;
    border: 2px solid #fff;
    width: 10px;
    height: 10px;
      border-radius: 100%;
      animation: trackBallSlide 5.5s linear infinite;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: -10px;
      margin: auto;
      transform:translateY(20px);
    }

    .mouse-wrap .mouse .frame {
      width: 80%;
      position: absolute;
      z-index: 1;
    }

    .mouse-wrap .mouse .frame path {
      fill: none;
      stroke: #fff;
      stroke-width: 3;
      opacity:0.5;
    }

    .mouse-wrap .mouse .mouse-left,
    .mouse-wrap .mouse .mouse-right {
      width: 40%;
      position: absolute;
      z-index: 2;
    }

    .mouse-wrap .mouse .mouse-right {
      right: 10px;
    }

    .mouse-wrap .mouse .Animate-Draw {
      fill: none;
      stroke: #fff;
      stroke-width: 3;
      fill-opacity: 1;
    }

    .mouse-wrap .mouse .mouse-left .Animate-Draw {
      animation: DrawLine 5.5s ease-out infinite;
    }

    .mouse-wrap .mouse .mouse-right .Animate-Draw {
      animation: DrawLineBack 5.5s ease-out infinite;
    }
}
/*Keyframes*/

@keyframes DrawLine {
  0% {
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  22% {
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  38%{
    stroke-dashOffset: 125;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  38.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
  48%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  64%{
    stroke-dashOffset: 125;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  64.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
  74%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  90%{
    stroke-opacity:1;
    stroke-dashOffset: 125;
    stroke-dasharray: 120;
  }
  90.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
}

@keyframes DrawLineBack {
  0% {
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  22% {
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  38%{
    stroke-dashOffset: -114;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  38.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
  48%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  64%{
    stroke-dashOffset: -114;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  64.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
  74%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:1;
  }
  90%{
    stroke-opacity:1;
    stroke-dashOffset: -114;
    stroke-dasharray: 120;
  }
  90.1%{
    stroke-dashOffset: 0;
    stroke-dasharray: 120;
    stroke-opacity:0;
  }
}

@keyframes nudgeMouse {
  0% {
    transform: translateY(0) translateX(-50%);
  }
  22% {
    transform: translateY(0px) translateX(-50%);
  }
  38%{
    transform: translateY(9px) translateX(-50%);
  }
  48%{
    transform: translateY(0px) translateX(-50%);
  }
  64%{
    transform: translateY(9px) translateX(-50%);
  }
  74%{
    transform: translateY(0px) translateX(-50%);
  }
  90%{
    transform: translateY(9px) translateX(-50%);
  }
}


/*Text*/

@keyframes nudgeText {
  0% {
    transform: translateY(0) translateX(-50%) scaleY(1);
    opacity:1;
  }
  22% {
    transform: translateY(0px) translateX(-50%)  scaleY(1);
    opacity:1;
  }
  38%{
    transform: translateY(5px) translateX(-50%) scaleY(0.9);
    opacity:0.5;
  }
  48%{
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity:1;
  }
  64%{
    transform: translateY(5px) translateX(-50%) scaleY(0.9);
    opacity:0.5;
  }
  74%{
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity:1;
  }
  90%{
    transform: translateY(5px) translateX(-50%) scaleY(0.9);
    opacity:0.5;
  }
}




/*Mouse wheel*/
@keyframes trackBallSlide {
  0% {
    transform:translateY(20px)
      scale(1);
    opacity:1;
  }
  22% {
    transform:translateY(20px)
      scale(1);
    opacity:1;
  }
  26%{
    transform:translateY(30px)
      scale(0.9);
    opacity:1;
  }
  34%{
    transform:translateY(55px)
      scale(0.1);
    opacity:0;
  }
  41%{
    transform:translateY(30px)
      scale(0);
    opacity:0.3;
  }
  48%{
    transform:translateY(20px)
      scale(1);
    opacity:1;
  }
  52%{
    transform:translateY(30px)
      scale(0.9);
    opacity:1;
  }
  60%{
    transform:translateY(55px)
      scale(0.1);
    opacity:0;
  }
  67%{
    transform:translateY(30px)
      scale(0);
    opacity:0.3;
  }
  74%{
    transform:translateY(20px)
      scale(1);
    opacity:1;
  }
  78%{
    transform:translateY(30px)
      scale(0.9);
    opacity:1;
  }
  86%{
    transform:translateY(55px)
      scale(0.1);
    opacity:0;
  }
  93%{
    transform:translateY(30px)
      scale(0);
    opacity:0.3;
  }
  100%{
    transform:translateY(20px)
      scale(1);
    opacity:1;
  }
}