.compare-block {
  position: relative;
  margin: 0 auto;
  padding-top: 34px;
}

[data-order="first"] {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  z-index: 5;
 }

[data-order="first"] img {
 height: 400px;
 width: 640px;
}

[data-order="rear"] img {
 height: 400px;
  width: 640px;
}

.compare-line {
  background: white;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 2px;
  height: 100%;
  left: 50%;
  cursor: pointer;
  }

.compare-line:before {
  content: url(../img/theta_button.png);
  display: block;
  position: absolute;
  left: -15px;
}

.compare-rail {
    background: url(../img/slider_rail_long.png);
    z-index: 9;
    width: 100%;
    height: 16px;
    position: absolute;
    top: 8px;
}

.compare-rail:before {
  left: -5px;
  position: absolute;
  width: 9px;
  height: 16px;
  content: "";
  background: url(../img/slider_rail_leftend.png);
}
.compare-rail:after {
  right: -5px;
  position: absolute;
  width: 9px;
  height: 16px;
  content: "";
  background: url(../img/slider_rail_rightend.png);
}