$shape-withs320: 125px, 146px, 146.1px, 125.1px
$shape-height320: 36px
@include responsive_320
  .bl-story
    padding: 25px 0px
    .detail
      .item
        .child-bl
          height: $shape-height320
          width: 77%
          .shape
            z-index: 0
          @each $with in $shape-withs320
            $i: index($shape-withs320, $with)
            .shape-#{$i}
              width: $with
              right: calc(100% - calc(#{$with} / 2))
              left: unset
          >div
            display: flex
            width: 100%
            z-index: 1
            overflow: visible
            .big-character
              font-size: 32px
              line-height: 37px
              flex: 1
              margin-left: -11px
              color: white
            .small-text
              font-size: 14px
              line-height: 16px
              flex: 1.6
              overflow: hidden
              display: block
          &.show
            width: 60%
$shape-withs375: 145px, 170px, 170.1px, 145.1px
$shape-height375: 42px
@include responsive_375
  .bl-story
    padding: 25px 0px
    .detail
      .item
        .child-bl
          height: $shape-height375
          width: 77%
          .shape
            z-index: 0
          @each $with in $shape-withs375
            $i: index($shape-withs375, $with)
            .shape-#{$i}
              width: $with
              right: calc(100% - calc(#{$with} / 2))
              left: unset
          >div
            display: flex
            width: 100%
            z-index: 1
            overflow: visible
            .big-character
              font-size: 32px
              line-height: 37px
              flex: 1
              margin-left: -11px
              color: white
            .small-text
              font-size: 14px
              line-height: 16px
              flex: 1.6
              overflow: hidden
              display: block
          &.show
            width: 60%
$shape-withs425: 145px, 170px, 170.1px, 145.1px
$shape-height425: 42px
@include responsive_425
  .bl-story
    padding: 25px 0px
    .detail
      .item
        .child-bl
          height: $shape-height425
          width: 77%
          .shape
            z-index: 0
          @each $with in $shape-withs425
            $i: index($shape-withs425, $with)
            .shape-#{$i}
              width: $with
              right: calc(100% - calc(#{$with} / 2))
              left: unset
          >div
            display: flex
            width: 100%
            z-index: 1
            overflow: visible
            .big-character
              font-size: 32px
              line-height: 37px
              flex: 1
              margin-left: -11px
              color: white
            .small-text
              font-size: 14px
              line-height: 16px
              flex: 1.6
              overflow: hidden
              display: block
          &.show
            width: 60%
$shape-withs768: 330px, 380px, 380.1px, 330.1px
$shape-height768: 95px
@include responsive_768
  .bl-story
    padding: 25px 0px
    .detail
      .item
        .child-bl
          height: $shape-height768
          width: 77%
          .shape
            z-index: 0
          @each $with in $shape-withs768
            $i: index($shape-withs768, $with)
            .shape-#{$i}
              width: $with
              right: calc(100% - calc(#{$with} / 2))
              left: unset
          >div
            display: flex
            width: 100%
            z-index: 1
            overflow: visible
            .big-character
              font-size: 32px
              line-height: 37px
              flex: 1
              margin-left: -11px
              color: white
            .small-text
              font-size: 14px
              line-height: 16px
              flex: 1.6
              overflow: hidden
              display: block
          &.show
            width: 77%
$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

$shape-withs1200: 400px, 464px, 464.1px, 400.1px
$shape-height1200: 115px
@include responsive_1400
  .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