.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden;
  background: url(../image/top/bg_top.jpg) center center no-repeat;
  background-size: cover;
}

.loading .loading_back {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  -webkit-transform: rotate(-14deg) translate(-50%, -50%);
      -ms-transform: rotate(-14deg) translate(-50%, -50%);
          transform: rotate(-14deg) translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.loading .loading_line {
  position: fixed;
  left: 0;
  top: 0;
  width: 110%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: rotate(-14deg);
      -ms-transform: rotate(-14deg);
          transform: rotate(-14deg);
  -webkit-transform-origin: 50% 80%;
      -ms-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
}

.loading .loading_line:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #000;
}

.loading.start .loading_line:after {
  width: 80%;
  -webkit-transition: width 2s ease;
          transition: width 2s ease;
}

.loading.start.load .loading_line:after {
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: width .2s linear, opacity .4s ease .5s;
          transition: width .2s linear, opacity .4s ease .5s;
}

@media screen and (max-width: 767px) {
  .loading .loading_line {
    width: 118%;
  }
  .loading .loading_back {
    background-size: auto 100%;
  }
  .loading .loading_line:after {
    height: 1px;
  }
}