$shape-height: 162px
$shape-withs: 559px, 644px, 644.1px, 559.1px
$shape-size: 115%, 100.01%, 100.011%, 115.01%
$shape-position: 50% 0.01%, 50% 33%, 50% 67%, 50% 100%

.bl-story
  padding: $block-padding
  .overview
    .big-title
      padding-right: 70px
      white-space: nowrap
    h2
      line-height: 40px
  .detail
    .item
      margin-top: 3px
      @for $i from 1 through 4
        @if $i == 1 or $i == 3
          &:nth-child(#{$i})
            .child-bl:before
              background-color: $primary-color
        @if $i == 2 or $i == 4
          &:nth-child(#{$i})
            .child-bl
              align-items: flex-end
            .child-bl:before
              background-color: $red-color
      .child-bl
        @extend .ease-animated
        display: flex
        flex-direction: column
        justify-content: center
        position: relative
        height: $shape-height
        width: 50%
        &.show
          width: 40%
        &:before
          content: ''
          width: 100%
          height: 2px
          position: absolute
          bottom: 0
        > div
          width: 200px
          max-height: 100%
          overflow: hidden
          .big-character
            font-size: 100px
            line-height: 100px
          .small-text
            font-size: 18px
            padding-left: 7px
        .shape
          position: absolute
          height: 100%
          background-repeat: no-repeat!important
          background-position: top left
        @each $position in $shape-position
          $i: index($shape-position, $position)
          .shape-#{$i}
            background-position: $position
        @each $size in $shape-size
          $i: index($shape-size, $size)
          .shape-#{$i}
            background-size: $size

        @each $with in $shape-withs
          $i: index($shape-withs, $with)
          .shape-#{$i}
            width: $with
            background-image: url("../img/shape.png") !important
            @if $i == 1 or $i == 3
              left: calc(100% - calc(#{$with} / 2))
            @if $i == 2 or $i == 4
              right: calc(100% - calc(#{$with} / 2))

$shape-withs768: 330px, 380px, 380.1px, 330.1px
$shape-height768: 95px
@include responsive_768
  .bl-story
    .detail
      .item
        .child-bl
          height: $shape-height768
          .shape
          @each $with in $shape-withs768
            $i: index($shape-withs768, $with)
            .shape-#{$i}
              width: $with
              @if $i == 1 or $i == 3
                left: calc(100% - calc(#{$with} / 2))
              @if $i == 2 or $i == 4
                right: calc(100% - calc(#{$with} / 2))
          >div
            width: 150px
            .big-character
              font-size: 37px
              line-height: 37px
            .small-text
              font-size: 16px
              padding-left: 4px
              line-height: 16px
          &.show
            width: 60%

$shape-withs992: 330px, 380px, 380.1px, 330.1px
$shape-height992: 95px
@include responsive_992
  .bl-story
    .detail
      .item
        .child-bl
          height: $shape-height992
          .shape
          @each $with in $shape-withs992
            $i: index($shape-withs992, $with)
            .shape-#{$i}
              width: $with
              @if $i == 1 or $i == 3
                left: calc(100% - calc(#{$with} / 2))
              @if $i == 2 or $i == 4
                right: calc(100% - calc(#{$with} / 2))
          >div
            width: 150px
            .big-character
              font-size: 40px
              line-height: 40px
            .small-text
              font-size: 16px
              padding-left: 4px
              line-height: 16px

$shape-withs1024: 360px, 416px, 416.1px, 360.1px
$shape-height1024: 104px
@include responsive_1024
  .bl-story
    .detail
      .item
        .child-bl
          height: $shape-height1024
          .shape
          @each $with in $shape-withs1024
            $i: index($shape-withs1024, $with)
            .shape-#{$i}
              width: $with
              @if $i == 1 or $i == 3
                left: calc(100% - calc(#{$with} / 2))
              @if $i == 2 or $i == 4
                right: calc(100% - calc(#{$with} / 2))
          >div
            width: 150px
            .big-character
              font-size: 50px
              line-height: 50px
            .small-text
              font-size: 16px
              padding-left: 4px
              line-height: 16px

$shape-withs1200: 400px, 464px, 464.1px, 400.1px
$shape-height1200: 115px
@include responsive_1200
  .bl-story
    .detail
      .item
        .child-bl
          height: $shape-height1200
          .shape
          @each $with in $shape-withs1200
            $i: index($shape-withs1200, $with)
            .shape-#{$i}
              width: $with
              @if $i == 1 or $i == 3
                left: calc(100% - calc(#{$with} / 2))
              @if $i == 2 or $i == 4
                right: calc(100% - calc(#{$with} / 2))
          >div
            width: 150px
            .big-character
              font-size: 47px
              line-height: 47px
            .small-text
              font-size: 16px
              padding-left: 4px
              line-height: 16px