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

:global {
    .main {
      width: 100%;
      .banner {
        position: relative;
        width: 100%;
        min-width: 1200px;
        & > img {
          width: 100%;
          //min-width: 990px;
          //height: 450px;
        }
        & > h1 {
          position: absolute;
          top: 200px;
          left: 42%;
          font-size: 40px;
          font-weight: 100;
          font-family: "Serif";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      }
      .lihan {
        margin: 0 auto;
        width: 1200px \0; //IE8
        min-width: 1200px;
        .lihan-box {
          margin: 0 auto;
          padding: 70px 0 220px;
          text-align: center;
          background: url(images/three.png) no-repeat 50% 330px;
          & > h1 {
            font-size: 28px;
            color: #ab0000;
            border-color: #e67e22;
            margin: 0 auto;
          }
          & > p {
            line-height: 38px;
            font-size: 20px;
            color: #777;
          }
        }
      }
      .service {
        position: relative;
        text-align: center;
        width: 100%;
        min-width: 1200px;
        & > img {
          width: 100%;
          //min-width: 990px;
          //height: 570px;
        }
        .service-box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          .service-box-content{
            margin: 0 auto;
            & > h1 {
              margin-top: 70px;
              font-size: 28px;
              border-color: #7b7b7b;
            }
            .category {
              margin: 0 auto;
              width: 950px;
              & > div {
                position: relative;
                margin-right: 50px;
                width: 200px;
                &.last {
                  margin-right: 0;
                }
                & > h2 {
                  margin-bottom: 0;
                  padding-top: 63px;
                  height: 166px;
                  font-size: 48px;
                  color: #e67e22;
                  background: url(images/polygon.png) no-repeat;
                }
                & > p {
                  line-height: 24px;
                  text-align: justify;
                  font-size: 18px;
                  color: #000;
                }
              }
            }
          }
        }

      }
      .investment-field-box {
        margin: 0 auto;
        padding: 54px 0 100px 0;
        width: 1120px \0; //IE8
        text-align: center;
        width: 100%;
        min-width: 1120px;
        & > h2 {
          margin: 0;
          font-size: 28px;
          color: #ab0000;
          border-color: #e67e22;

        }
        & > h3 {
          font-size: 30px;
          color: #b52626;
        }
        .category {
          padding: 0 40px;
          li {
            margin-right: 4%;
            padding-top: 184px;
            width: 22%;
            font-size: 26px;
            &.first {
              background: url(images/pic-01.jpg) no-repeat;
            }
            &.second {
              background: url(images/pic-02.jpg) no-repeat;

            }
            &.three {
              background: url(images/pic-03.jpg) no-repeat;
            }
            &.last {
              margin-right: 0;
              background: url(images/pic-04.jpg) no-repeat;
            }
          }
        }
      }
      .banner-bottom {
        position: relative;
        text-align: center;
        color: #fff;
        min-width: 1200px;
        & > img {
          width: 100%;
          //min-width: 990px;
          //height: 474px;
        }
        & > .banner-bottom-box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          & > h1 {
            margin-top: 8%;
            font-size: 48px;
            line-height: 68px;
            font-weight: normal;
          }
          & > a {
            padding: 8px 50px;
            font-size: 24px;
            border-radius: 20px;
            color: #fff;
            background-color: #b62125;
          }
        }
      }
    }

    .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) {
        .lihan-box,
        .investment-field-box {
          width: @cw;
        }
        .main {
          .service {
            .service-box {
              .service-box-content{
                width: @cw;
              }
            }
          }
          .banner-bottom {
            & > .banner-bottom-box{
              & > h1 {
                font-size: @cw/28.3;
              }
            }
            //width: @cw;
          }
          .investment-field-box{
            width: @cw;
            //min-width: 920px;
          }
        }
      }
    }

    body {
      .screen();
    }
  }


