/*----------------------------
scroll_up �應ｸ九°繧我ｸ翫∈蜃ｺ迴ｾ
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left �懷ｷｦ縺九ｉ蜃ｺ迴ｾ
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
    margin-left: -10%;

}
.scroll_left_one {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  position: absolute;
	width: 62%;
    left: 10%;
    bottom: 0%;
}
.scroll_left_one.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}
.scroll_left_four {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  position: absolute;
	width: 82%;
    left: 10%;
    bottom: 0%;
}
.scroll_left_four.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/*----------------------------
scroll_right �懷承縺九ｉ蜃ｺ迴ｾ
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
    margin-right: -5%;

}
.scroll_right_one {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  position: absolute;
	width: 55%;
    left: 40%;
    bottom: 0%;
}
.scroll_right_one.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/*------- layout -------*/

ul.box_left {
  width: 100%;
  max-width: auto;
  margin: 0 auto;
  /*padding: 10vw;*/
  list-style: none;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}
ul.box_left li {
  margin-top: 10px;
  margin-bottom: 0;
  & img {
  max-width: 100%;
  margin-left: 0;
  }
}
ul.scroll_left {
  position: absolute;
  width: 50%;
}

ul.box_right {
  width: 100%;
  max-width: auto;
  margin: 0 auto;
  /*padding: 10vw;*/
  list-style: none;
  text-align: right;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}
ul.box_right li {
  margin-top: 10px;
  margin-bottom: 0;
  &
  img {
  max-width: 100%;
  overflow: hidden;
  }
}
ul.scroll_right {
  position: absolute;
  width: 50%;
}