proginn-frontend/assets/css/credit/header.scss

@import '~@/assets/css/scssCommon.scss';

.topArea {
  position: relative;
  width: 100%;
  min-height: 200px;
  .bgImage {
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .topContent {
    position: absolute;
    top: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 85px);

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;

      .titleBox {
        display: flex;
        height: 66px;
        align-items: center;

        .icon {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }

        .title {
          font-size: 47px;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          line-height: 66px;
        }
      }

      .subWord {
        margin-top: 12px;
        font-size: 30px;
        font-weight: 300;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;

        &.sub {
          font-size:16px;
          line-height:22px;
        }
      }
    }

    .right {
      flex-shrink: 0;
      margin-left: 50px;
      position: relative;
      img {
        width: webPxTvw(382);
        height: webPxTvw(353);
      }
      .buttonArea {
        top: 0;
        left: 0;
        position: absolute;
        width: webPxTvw(382);
        height: webPxTvw(353);

        .cell {
          width: webPxTvw(60);
          height: webPxTvw(60);
          position: absolute;
          cursor: pointer;
          &.c1 {
            left:0;
            top: webPxTvw(120)
          }
          &.c2 {
            left: webPxTvw(162);
            top: 0;
          }
          &.c3 {
            right: 0;
            top: webPxTvw(120);
          }
          &.c4 {
            left: webPxTvw(60);
            bottom: 0;
          }
          &.c5 {
            right: webPxTvw(60);
            bottom: 0;
          }
        }
      }
    }
  }
  .query-entrance-wrapper {
    position: absolute;
    width: 1000px;
    height: 40px;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-end;
    .query-entrance {
      width: 120px;
      height: 40px;
      background: #ffffff;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 400;
      color: #222222;
    }
  }

  &.isMobile {
    .bgImage {
      img {
        width: 100vw;
        vertical-align: middle;
      }
    }
    .topContent {
      position: absolute;
      top: pxtovw(10);
      width: 100%;
      height: 175px;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        width: 100%;

        .titleBox {
          display: flex;
          height: pxtovw(66);
          align-items: center;
          justify-content: center;
          .icon {
            width: pxtovw(50);
            height: pxtovw(50);
            margin-right: pxtovw(px);
          }
          .title {
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            font-size:pxtovw(36);
            line-height:pxtovw(51);
          }
        }

        .subWord {
          margin-top: pxtovw(6);
          font-size:pxtovw(16);
          line-height:pxtovw(22);
          text-align: center;

          &.sub {
            font-size:pxtovw(16);
            line-height:pxtovw(22);
          }
        }
      }

      .right {
        flex-shrink: 0;
        margin-left: pxtovw(px);
        img {
          width: 21.22vw;
          height: 19.61vw;
        }
      }
    }
  }
}