@require './Layout.styl';

.Main {
  &Bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/public/img/mainBg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity .5s;

    &Show {
      opacity: 1;
    }
  }

  &Slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: width .4s cubic-bezier(0, .4, 0.25, 1), opacity .8s;
    z-index: 1000;

    &Bg {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.9;
      background-color: #0000FF;
    }

    &GoLeft {
      width: 50%;
    }

    &Btn {
      position: absolute;
      top: 50%
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: .9;
      font-size: 20px;
      letter-spacing: 10px;
      color: #ccc;
      border-bottom: 1px solid #999;
      padding: 4px 0px 10px;
      display: inline-block;
      cursor: pointer;
      transition: opacity  .4s;
      z-index: 10;
      width: 272px;
      white-space: nowrap;

      &:after {
        content: '';
        width: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: #fff;
        transition: width 2s;
      }

      &Loaded {
        &:after {
          width: 100%;
        }
      }

      &Hide {
        opacity: 0;
      }
    }

    &Hide {
      opacity: 0;
    }
  }
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) and (orientation:portrait){
  .Main {
    &Bg {
      background-size: 140%;
      background-position: center 450px;
    }

    &Slide {

      &Btn {
        font-size: 5.9vw;
        width: 55%;
        margin-top: -264px;
      }

      &GoLeft {
        width: 100%;
      }
    }
  }
}