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

:global {
  #culture {
    .banner {
      position: relative;
      height: 461px;
      & > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 461px;
      }
      & > h1 {
        position: relative;
        margin: 0 auto;
        width: 680px;
        padding-top: 132px;
        text-align: center;
        line-height: 62px;
        font-size: 38px;
        color: #000;
        z-index: 100;
        text-shadow: #fff 4px 0 18px, #fff 0 4px 18px, #fff -4px 0 18px, #fff 0 -4px 18px;
        -webkit-text-shadow: #fff 4px 0 18px, #fff 0 4px 18px,#fff -4px 0 18px, #fff 0 -4px 18px;
        -moz-text-shadow: #fff 4px 0 18px, #fff 0 4px 18px,#fff -4px 0 18px, #fff 0 -4px 18px;
      }
    }

    .main-box {
      .main {
        & > img {
          margin: 0 0 12px 0;
          padding: 0;
          height: auto;
          width: 100%;
        }
      }
      & .content {
        margin: 60px auto 0;
        height: auto;
        text-align: center;
        font-family: serif;
        font-size: 30px;
        font-weight: 100;
        text-align: center;
        -webkit-font-smoothing: antialiased;
      }
    }
    .address-phone {
      width: 1200px \0; //IE8
    }

    .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 {
          width: @cw;
        }
      }
    }

    body {
      .screen();
    }
  }
}
