.box {
  background-color: $box-bkg;
  border: $box-border;
  box-shadow: $box-shadow;
  padding: 15px 20px 20px;
}

.box-title {
  background-color: $box-title-bkg;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: $box-shadow;
  color: $box-title-txt;
  font-size: $title3-size;
  padding: 15px;
  text-align: center;
}

.insert-box {
  background-color: $box-bkg;
  border: $insert-border;
  height: 210px;
  padding: 10px 30px 15px;
  text-align: left;

  .box-hyphen {
    margin: 10px 0 0 -45px;
  }
}

.box-hyphen {
  border-top-style: solid;
  border-top-width: 3px;
  display: inline-block;
  vertical-align: top;
  width: $small-hyphen-width;
}

.theme-box {
  background-color: $white;
  border-left-style: solid;
  border-left-width: 4px;
  margin: -20px 0 0;
}

.illustration-box {
  width: calc(100% - 2px);

  .image-box {
    background-color: $grey;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 0;
  }

  .content-box {
    color: $white;
    cursor: pointer;
    height: 100%;
    padding: 0 20px;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 4;

    &:hover {
      .rotate-hyphen {
        margin: 0 0 0 -10px;
        transform: rotate(90deg);
      }
    }

    .timeline-box-number {
      color: $timeline-box-number-color;
      font-family: $font-family4;
      font-size: $title1-size;
      letter-spacing: $title-letter-spacing;
      line-height: $line-height-small;
    }
  }

  .color-box {
    background-color: rgba(0, 0, 0, 0.5);
    height: 500px;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 1;
  }

  .box-hyphen {
    margin: 10px 0 0;
    position: absolute;
    z-index: 2;
    top: 59%;
  }

  .rotate-hyphen {
    position: absolute;
    z-index: 3;
    transition: all 0.2s ease-in;
  }
}

.mobile-illustration-box {
  width: calc(100% - 2px);

  .image-box {
    background-color: $grey;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 0;
  }

  .content-box {
    color: $white;
    cursor: pointer;
    height: 100%;
    padding: 0 20px;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 4;
  }

  .color-box {
    background-color: rgba(0, 0, 0, 0.5);
    height: 500px;
    position: absolute;
    width: calc(100% - 2px);
    z-index: 1;
  }

  .box-hyphen {
    margin: 10px 0 0;
    position: absolute;
    z-index: 2;
    top: 50%;
  }
}

@media screen and (max-width: $screen-sm-max) {
  .media-right {
    .box-hyphen {
      display: none;
    }
  }
}
