div.container {
}

.zipsign-box {
  position: relative;
  height: 693px;
  }
  @media only screen and (max-width: 1630px) {
    .zipsign-box {
      height: 594px;
	  }
	  }
  @media only screen and (max-width: 1400px) {
    .zipsign-box {
      height: 495px;
	  }
	  }
  @media only screen and (max-width: 1175px) {
    .zipsign-box {
      height: 396px;
	  }
	  }
  @media only screen and (max-width: 950px) {
    .zipsign-box {
      height: 297px;
	  }
	  }
  @media only screen and (max-width: 720px) {
    .zipsign-box {
      height: 277px;
	  }
	  }
  @media only screen and (max-width: 640px) {
    .zipsign-box {
      height: 198px;
	  }
	  }
  @media only screen and (max-width: 480px) {
    .zipsign-box {
      height: 158px;
	  }
	  } 

.banner {
  box-sizing: border-box;
  position: relative;
  height: 693px;
  width: 1592px;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  }
  @media only screen and (max-width: 1630px) {
    .banner {
      height: 594px;
      width: 1364px;
	  }
	  }
  @media only screen and (max-width: 1400px) {
    .banner {
      height: 495px;
      width: 1136px;
	  }
	  }
  @media only screen and (max-width: 1175px) {
    .banner {
      height: 396px;
      width: 910px;
	  }
	  }
  @media only screen and (max-width: 950px) {
    .banner {
      height: 297px;
      width: 682px;
	  }
	  }
  @media only screen and (max-width: 720px) {
    .banner {
      height: 277px;
      width: 636px;
	  }
	  }
  @media only screen and (max-width: 640px) {
    .banner {
      height: 198px;
      width: 456px;
	  }
	  }
  @media only screen and (max-width: 480px) {
    .banner {
      height: 158px;
      width: 364px;
	  }
	  }

.banner-content {
  position: absolute;
  background-color: #fff;
  height: 630px;
  width: 1120px;
  left: 236px;
  top: 31px;
  }
  @media only screen and (max-width: 1630px) {
    .banner-content {
      height: 540px;
      width: 960px;
      left: 202px;
      top: 27px;
	  }
	  }
  @media only screen and (max-width: 1400px) {
    .banner-content {
      height: 450px;
      width: 800px;
      left: 168px;
      top: 22px;
	  }
	  }
  @media only screen and (max-width: 1175px) {
    .banner-content {
      height: 360px;
      width: 640px;
      left: 135px;
      top: 18px;
	  }
	  }
  @media only screen and (max-width: 950px) {
    .banner-content {
      height: 270px;
      width: 480px;
      left: 101px;
      top: 13px;
	  }
	  }
  @media only screen and (max-width: 720px) {
    .banner-content {
      height: 252px;
      width: 448px;
      left: 94px;
      top: 12px;
	  }
	  }
  @media only screen and (max-width: 640px) {
    .banner-content {
      height: 180px;
      width: 320px;
      left: 68px;
      top: 9px;
	  }
	  }
  @media only screen and (max-width: 480px) {
    .banner-content {
      height: 144px;
      width: 256px;
      left: 54px;
      top: 7px;
	  }
	  }

.handle {
  position: absolute;
  top: 0; }

.handle-image {
  background: url(../images/handle.png) no-repeat;
  background-size: 472px 693px;
  width: 236px;
  height: 693px;
  display: block;
  }
  @media only screen and (max-width: 1630px) {
    .handle-image {
      background-size: 404px 594px;
      width: 202px;
      height: 594px;
	  }
	  }
  @media only screen and (max-width: 1400px) {
    .handle-image {
      background-size: 336px 495px;
      width: 168px;
      height: 495px;
	  }
	  }
  @media only screen and (max-width: 1175px) {
    .handle-image {
      background-size: 270px 396px;
      width: 135px;
      height: 396px;
	  }
	  }
  @media only screen and (max-width: 950px) {
    .handle-image {
      background-size: 202px 297px;
      width: 101px;
      height: 297px;
	  }
	  }
  @media only screen and (max-width: 720px) {
    .handle-image {
      background-size: 188px 277px;
      width: 94px;
      height: 277px;
	  }
	  }
  @media only screen and (max-width: 640px) {
    .handle-image {
      background-size: 136px 198px;
      width: 68px;
      height: 198px;
	  }
	  }
  @media only screen and (max-width: 480px) {
    .handle-image {
      background-size: 108px 158px;
      width: 54px;
      height: 158px;
	  }
	  }

.handle.left {
  left: 0; }

.handle.right {
  right: 0;
  background-color: #8bc53f;
  }
  .handle.right .handle-image {
    background-position: -236px 0;
	}
    @media only screen and (max-width: 1630px) {
      .handle.right .handle-image {
        background-position: -202px 0;
		}
		}
    @media only screen and (max-width: 1400px) {
      .handle.right .handle-image {
        background-position: -168px 0;
		}
		}
    @media only screen and (max-width: 1175px) {
      .handle.right .handle-image {
        background-position: -135px 0;
		}
		}
    @media only screen and (max-width: 950px) {
      .handle.right .handle-image {
        background-position: -101px 0;
		}
		}
    @media only screen and (max-width: 720px) {
      .handle.right .handle-image {
        background-position: -94px 0;
		}
		}
    @media only screen and (max-width: 640px) {
      .handle.right .handle-image {
        background-position: -68px 0;
		}
		}
    @media only screen and (max-width: 480px) {
      .handle.right .handle-image {
        background-position: -54px 0;
		}
		}