.pic01 {
  width: 100%;
  height: 502px;
  background-image: url(../../Wra_web/img/pic01.jpg);
}
.pic02 {
  width: 100%;
  height: 502px;
  background-image: url(../../Wra_web/img/pic02.jpg);
}
.pic03 {
  width: 100%;
  height: 502px;
  background-image: url(../../Wra_web/img/pic03.jpg);
}
.pic04 {
  width: 100%;
  height: 502px;
  background-image: url(../../Wra_web/img/pic04.jpg);
}
.pic05 {
  width: 100%;
  height: 502px;
  background-image: url(../../Wra_web/img/pic05.jpg);
}
@media (min-width: 320px) and (max-width: 700px) {
  .login_area {
    width: 125px;
    height: 125px;
    right: 8%;
    top: 9%;
  }
  .flexslider .slides > li {
    height: 155px;
  }
  .pic01 {
    background-image: url(../../Wra_web/img/pic01_mobile.jpg);
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 40%;
    background-size: 100%;
    background-position: center;
  }
  .pic02 {
    background-image: url(../../Wra_web/img/pic02_mobile.jpg);
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 40%;
    background-size: 100%;
    background-position: center;
  }
  .pic03 {
    background-image: url(../../Wra_web/img/pic03_mobile.jpg);
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 40%;
    background-size: 100%;
    background-position: center;
  }
  .pic04 {
    background-image: url(../../Wra_web/img/pic04_mobile.jpg);
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 40%;
    background-size: 100%;
    background-position: center;
  }
  .pic05 {
    background-image: url(../../Wra_web/img/pic05_mobile.jpg);
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 40%;
    background-size: 100%;
    background-position: center;
  }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .flexslider .slides > li {
    height: 300px;
  }
  .login_area {
    width: 220px;
    height: 220px;
    right: 6%;
    top: 14%;
    display: none;
  }
  .pic01 {
    width: 100%;
    background-image: url(../../Wra_web/img/pic01.jpg);
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 40%;
  }
  .pic02 {
    width: 100%;
    background-image: url(../../Wra_web/img/pic02.jpg);
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 40%;
  }
  .pic03 {
    width: 100%;
    background-image: url(../../Wra_web/img/pic03.jpg);
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 40%;
  }
  .pic04 {
    width: 100%;
    background-image: url(../../Wra_web/img/pic04.jpg);
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 40%;
  }
  .pic05 {
    width: 100%;
    background-image: url(../../Wra_web/img/pic05.jpg);
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 40%;
  }
}