.inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ----------------------
    mainContents
   ---------------------- */
#mainContents {
  background: url(../img/spec/bg.jpg) no-repeat;
  background-size: contain;
  width: 100vw;
  height: 686.13333vw;
  overflow: hidden;
}

#spec {
  width: 100vw;
  height: 352.26667vw;
  padding: 17.86667vw 0 0;
  position: relative;
}
#spec h2 {
  background-image: url("../img/spec/spec_title.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 59.73333vw;
  height: 23.86667vw;
  top: 21.6vw;
  left: 15.73333vw;
}
#spec h2.show {
  opacity: 1;
}
#spec .img1 {
  background-image: url("../img/spec/spec_case.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 100vw;
  height: 209.06667vw;
  top: 0.66667vw;
  left: 0;
}
#spec .img1.show {
  opacity: 1;
}
#spec .img2 {
  background-image: url("../img/spec/spec_table.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 100vw;
  height: 209.73333vw;
  top: 142.93333vw;
  left: 0;
}
#spec .img2.show {
  opacity: 1;
}

#flow {
  width: 100vw;
  height: 357.6vw;
  margin: -23.73334vw 0 0;
  position: relative;
}
#flow h2 {
  background-image: url("../img/spec/flow_title.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 82.8vw;
  height: 23.6vw;
  top: -0.53334vw;
  left: 9.06667vw;
}
#flow h2.show {
  opacity: 1;
}
#flow .img1 {
  background-image: url("../img/spec/flow_img1.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 99.6vw;
  height: 54.8vw;
  top: 16.8vw;
  left: 0.26667vw;
}
#flow .img1.show {
  opacity: 1;
}
#flow .img2 {
  background-image: url("../img/spec/flow_img2.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 91.06667vw;
  height: 75.6vw;
  top: 115.46667vw;
  left: 0;
}
#flow .img2.show {
  opacity: 1;
}
#flow .img3 {
  background-image: url("../img/spec/flow_img3.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 55.6vw;
  height: 46.66667vw;
  top: 71.06667vw;
  left: 44.26667vw;
}
#flow .img3.show {
  opacity: 1;
}
#flow .img4 {
  background-image: url("../img/spec/flow_img4.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 100vw;
  height: 154.93333vw;
  top: 194.13333vw;
  left: 0;
}
#flow .img4.show {
  opacity: 1;
}
#flow .arrow1 {
  background-image: url("../img/spec/flow_arrow1.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 18.13333vw;
  height: 66.8vw;
  top: 65.33333vw;
  left: 32.53333vw;
}
#flow .arrow1.show {
  opacity: 1;
}
#flow .arrow2 {
  background-image: url("../img/spec/flow_arrow2.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 18.13333vw;
  height: 22.8vw;
  top: 178.66667vw;
  left: 32.53333vw;
}
#flow .arrow2.show {
  opacity: 1;
}
#flow .arrow3 {
  background-image: url("../img/spec/flow_arrow3.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 16.93333vw;
  height: 24.93333vw;
  top: 109.06667vw;
  left: 54.66667vw;
}
#flow .arrow3.show {
  opacity: 1;
}
#flow .arrow4 {
  background-image: url("../img/spec/flow_arrow4.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 15.46667vw;
  height: 104.4vw;
  top: 108.53333vw;
  left: 84.53333vw;
}
#flow .arrow4.show {
  opacity: 1;
}