$first-screen-font-size = 2rem;
$first-screen-icon-size = 1.6rem;

$temp-img = hexo-config('style.first_screen.background_img');
$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg';

.first-screen-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: url($first-screen-img) center center / cover no-repeat;

  .content {
    position: relative;
    padding: 30px;
    width: 80%;
    height: 80%;

    .description {
      font-weight: bold;
      font-size: $first-screen-font-size;
      line-height: 1.8;
      text-align: center;

      +keep-tablet() {
        font-size: $first-screen-font-size * 0.9;
      }
    }

    .s-icon-list {
      position: absolute;
      bottom: $component-interspace;
      font-size: $first-screen-icon-size;
      left: 50%;
      transform: translateX(-50%);

      +keep-tablet() {
        font-size: $first-screen-icon-size * 0.9;
      }

      .s-icon-item {
        float: left;
        margin-right: 25px;
        cursor: pointer;
        line-height: 1.6;

        &:last-child {
          margin-right: 0;
        }

      }

    }
  }
}