@import "../../styles/variable";

:global {
  #contact {
    .banner {
      min-width: 1200px;
      & > img {
        width: 100%;
      }
    }
    .address-phone {
      min-width: 1200px;
      .address-phone-box {
        margin: 0 auto;
        padding: 90px 0;
        width: 1200px \0; //IE8
      }
      .address-phone-left {
        padding-top: 88px;
        width: 33%;
        background: url(../../images/logo-footer.png) no-repeat;
        & > div {
          position: relative;
          margin-top: 30px;
          color: #999;
          & > p {
            margin-left: 50px;
            line-height: 30px;
            font-size: 18px;
            color: #999;
            & > span {
              font-family: monospace;
              font-size: 16px;
              color: #000;
            }
          }
        }
      }
      .address-map {
        margin-top: 34px;
        width: 67%;
        height: 354px;
        background: url(images/map.jpg) no-repeat center center;
        background-size: cover;
      }
    }

    .screen() {
      .media(@screen-width-small, @container-width-small);
      .media(@screen-width, @container-width);
      .media(@screen-width-large, @container-width-large);

      .media(@sw, @cw) {
        @media screen and (min-width: @sw) {
          .rules(@cw);
        }
      }

      .rules(@cw) {
        .address-phone-box {
          width: @cw;
        }
        //.banner {
        //  width: @cw;
        //}
      }
    }

    body {
      .screen();
    }
  }
}
