@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";

.container {
  margin-top: 140px;
  position: relative;

  .arrow {
    position: absolute;
    top: 160px;
  }

  .arrowLeft {
    left: 60px;
  }

  .arrowRight {
    right: 60px;
  }

  .keywordsGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .keywordBox {
      width: 390px;
      height: 97px;
      margin: 20px 40px;
      line-height: 97px;
      letter-spacing: -1px;
      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(2, 3, 3, 0.2);
      border: 1px solid @COLOR_GRAY09;
      background-color: @BG_COLOR_04;
      color: #333;
      .font(@fontFamily: @baseFontBold, @fontSize: 40px);

      > div {
        overflow: unset;
      }

      &:focus-within,
      &:focus {
        box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
          0 0 50px 0 rgba(11, 8, 8, 0.5);
        color: @PRIMARY_COLOR_RED;
        background-color: @BG_COLOR_04;
      }
    }
  }
}
