@import '../hyperpoint';

#cfp {
  position: relative;
}

// The Korea Fish

#cfp-bg {
  width: 100vw;
  z-index: -1;
  position: absolute;
  // left: -12px; // offset

  .korea-fish {
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    .sitcon-apple {
      position: absolute;
      margin-top: 360px;
      width: 250px;
    }
    .ellipse {
      position: absolute;
      margin-top: 200px;
      width: 640px;
    }
    .radial {
      width: 1920px;
      position: absolute;
    }
  }
}

@media screen and (min-width: 1921px) {
  #cfp-bg {
    .korea-fish {
      .radial {
        margin-top: calc(576px - 30vw);
        width: 100vw;
      }
    }
  }
}

@include md {
  #cfp-bg {
    .korea-fish {
      .sitcon-apple {
        margin-top: 320px;
        width: 216px;
      }
      .ellipse {
        margin-top: 280px;
        width: 420px;
      }
      .radial {
        margin-top: 0;
        width: 1666px;
      }
    }
  }
}

@include sm {
  #cfp-bg {
    .korea-fish {
      .sitcon-apple {
        margin-top: 288px;
        width: 180px;
      }
      .ellipse {
        margin-top: 240px;
        width: 360px;
      }
      .radial {
        margin-top: -36px;
        width: 1666px;
      }
    }
  }
}

@include xs {
  #cfp-bg {
    .korea-fish {
      .sitcon-apple {
        margin-top: 216px;
        width: 120px;
      }
      .ellipse {
        margin-top: 180px;
        width: 240px;
      }
      .radial {
        margin-top: -180px;
        width: 1666px;
      }
    }
  }
}
