@media screen and (max-width: 680px) {
  body {
    min-width: 360px;
  }
  * {
    letter-spacing: -0.5px;
  }

  /* ------------------------------------------------------------------------------- */

  /* 픽스 버튼 */
  .fix-btn {
    height: 76px;
    box-shadow: 0px 4px 12px 0px #00000026;
  }
  .fix-btn .inner-box {
    width: 360px;
    box-sizing: border-box;
    padding-right: 12px;
    padding-left: 16px;
  }
  .fix-btn .inner-box .left-box .text-box {
    gap: 8px;
  }
  .fix-btn .inner-box .left-box .text-box .money-img-box {
    width: 51px;
  }
  .fix-btn .inner-box .left-box .text-box > .text-img-box {
    width: 156px;
  }
  .fix-btn .inner-box .btn-box {
    width: 93px;
    height: 52px;
  }
  .fix-btn .inner-box .btn-box > div {
    border-radius: 10px;
    padding-left: 16px;
  }
  .fix-btn .inner-box .btn-box > div > .text-box {
    gap: 1px;
  }
  .fix-btn .inner-box .btn-box > div > .text-box h1 {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: -0.08em;
  }
  .fix-btn .inner-box .btn-box > div .img-box {
    width: 65px;
  }

  /* ------------------------------------------------------------------------------- */

  /* 메인 비주얼 영역 */
  .main-visual-area {
    margin-top: 76px;
    height: 680px;
    background: #a7e9ff;
    overflow: hidden;
  }
  .main-visual-area .bg-img-box {
    width: 360px;
    top: 0;
  }
  .main-visual-area .bg-slide-area {
    width: 360px;
  }
  .main-visual-area .bg-slide-area .swiper .swiper-slide .bg-img-box {
    width: 324px;
    top: 207.28px;
  }
  .main-visual-area .bg-box {
    height: 226px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .main-visual-area .bg-box .img-box {
    width: 360px;
    top: -42px;
  }
  .main-visual-area .con {
    max-width: 360px;
  }
  .main-visual-area .con > h1 {
    font-size: 13px;
    top: 34.33px;
  }
  .main-visual-area .con > .ef-img-box-1 {
    width: 16px;
    left: 80.75px;
    top: 53.33px;
  }
  .main-visual-area .con > .ef-img-box-2 {
    width: 21px;
    right: 79.96px;
    top: 119.07px;
  }
  .main-visual-area .con > .text-img-box {
    width: 159px;
    top: 57.33px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .ef-img-box-1 {
    width: 28px;
    left: 66px;
    top: 200px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .ef-img-box-2 {
    width: 16px;
    right: 66px;
    top: 224px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .title-img-box {
    width: 158px;
    top: 184px;
  }
  .title-1-1 {
    width: 51px !important;
  }
  .title-1-2 {
    width: 76px !important;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .childs-img-box {
    width: 106px;
    top: 340px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .card-img-box {
    width: 181px;
    top: 232.98px;
    border-radius: 8px;
    border: 1px solid #222;
    padding: 4px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .text-wrap {
    width: 320px;
    top: 484.98px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .text-wrap > li {
    gap: 8px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .text-wrap > li:not(:last-child)::after {
    height: 43px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide .text-wrap > li > h2 {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 13px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-1 .text-wrap > li.text-box-1 > .img-box,
  .main-visual-area .slide-area .swiper .swiper-slide-1 .text-wrap > li.text-box-2 > .img-box {
    width: 47px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-1 .text-wrap > li.text-box-3 > .img-box {
    width: 65px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-2 .text-wrap > li.text-box-1 > .img-box {
    width: 44px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-2 .text-wrap > li.text-box-2 {
    padding-top: 9px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-2 .text-wrap > li.text-box-2 > .img-box {
    width: 59px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-2 .text-wrap > li.text-box-3 > .img-box {
    width: 65px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-3 .text-wrap > li.text-box-1 {
    padding-top: 33px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-3 .text-wrap > li.text-box-1 > .img-box {
    width: 72px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide-3 .text-wrap > li.text-box-2 > .img-box {
    width: 65px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide button {
    top: 576.98px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide button .inner-box {
    width: 320px;
    height: 50px;
    gap: 7px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide button .inner-box > .text {
    font-size: 14px;
    line-height: 20px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide button .inner-box > .img-box {
    width: 9px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide p {
    width: 320px;
    top: 636.98px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide p > span {
    font-size: 11px;
    line-height: 13px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide p .text-1 {
    width: 9px;
  }
  .main-visual-area .slide-area .swiper .swiper-slide p .text-2 {
    width: calc(100% - 9px);
  }
  .main-visual-area .slide-area .swiper .swiper-button-prev,
  .main-visual-area .slide-area .swiper .swiper-button-next {
    width: 38px;
    height: 38px;
    top: 271.28px !important;
  }
  .main-visual-area .slide-area .swiper .swiper-button-prev {
    left: 9.79px !important;
  }
  .main-visual-area .slide-area .swiper .swiper-button-next {
    right: 9.79px !important;
  }
  .main-visual-area .slide-area .swiper .swiper-button-prev > .img-box,
  .main-visual-area .slide-area .swiper .swiper-button-next > .img-box {
    width: 19px;
  }

  /* ------------------------------------------------------------------------------- */

  /* 컨텐츠 영역-1 */
  .cnt-area-1 {
    padding: 28px 0;
  }
  .cnt-area-1 .con {
    max-width: 360px;
    padding: 0 14px;
  }
  .cnt-area-1 .box-1 > h1 {
    width: 49px;
    height: 25px;
    border-radius: 20px;
    font-size: 12px;
  }
  .cnt-area-1 .box-1 > .img-box-1 {
    margin-top: 8px;
    width: 166px;
  }
  .cnt-area-1 .box-1 > .img-box-2 {
    margin-top: 16px;
    width: 230px;
  }
  .cnt-area-1 .box-2 {
    margin-top: 24px;
    padding: 24px 20px;
  }
  .cnt-area-1 .box-2 .list-wrap {
    gap: 16px;
  }
  .cnt-area-1 .box-2 .list-wrap > li .title-box {
    gap: 4px;
    margin-bottom: 8px;
  }
  .cnt-area-1 .box-2 .list-wrap > li .title-box > .title-img-box {
    height: 13px;
  }
  .cnt-area-1 .box-2 .list-wrap > li .title-box > .text {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: -0.08em;
  }
  .cnt-area-1 .box-2 .list-wrap > li h1 {
    font-size: 14px;
    line-height: 20px;
  }
  .cnt-area-1 .box-2 .list-wrap > li h1 > .ef-text > .bg-box {
    height: 11px;
  }
  .cnt-area-1 .box-2 .list-wrap > li h1 > .ef-text > .bg-box-2 {
    width: 7.31px;
  }
  .cnt-area-1 .box-2 .list-wrap > li p.p-1 {
    font-size: 11px;
    line-height: 16px;
  }
  .cnt-area-1 .box-2 .list-wrap > li p.p-2 {
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
  }
  .cnt-area-1 .box-2 .list-wrap > li p.p-2 > .ef-text {
    padding: 1px 3px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 16px;
  }
  .cnt-area-1 .box-2 .list-wrap > li .benefit-img-box {
    height: 9px;
  }
  .cnt-area-1 .box-2 .list-wrap > li.list-box-2 > h1,
  .cnt-area-1 .box-2 .list-wrap > li.list-box-3 > .benefit-img-box {
    margin-top: 8px;
  }
  .cnt-area-1 .box-2 .list-wrap > li.list-box-3 > h1,
  .cnt-area-1 .box-2 .list-wrap > li.list-box-4 > h1 {
    margin-top: 2px;
  }

  /* ------------------------------------------------------------------------------- */

  /* 컨텐츠 영역-3 */
  .cnt-area-3 {
    padding: 26px 0 36px 0;
  }
  .cnt-area-3 .con {
    max-width: 360px;
    padding: 0 24px 0 14px;
  }
  .cnt-area-3 .title-box {
    gap: 6px;
    padding-left: 8px;
    margin: 0 0 10px 0;
  }
  .cnt-area-3 .title-box .img-box {
    width: 18px;
  }
  .cnt-area-3 .title-box h1 {
    font-size: 14px;
    line-height: 17px;
  }
  .cnt-area-3 .text-area {
    gap: 10px;
  }
  .cnt-area-3 .text-area > li > h2 {
    font-size: 13px;
    margin-bottom: 4px;
    padding-left: 18px;
  }
  .cnt-area-3 .text-area > li .text-box > li,
  p.title {
    padding-left: 18px;
    font-size: 13px;
    line-height: 19px;
  }
  .cnt-area-3 .text-area > li .text-box.mini > li {
    font-size: 12px;
    line-height: 16px;
  }
  .cnt-area-3 .text-area > li .text-box.mini > li > br {
    display: block;
  }
  .cnt-area-3 .text-area > li .text-box > li:not(.text-ef-1):after {
    width: 3px;
    height: 3px;
    top: 8px;
    left: 7.5px;
  }
  .cnt-area-3 .text-area > li .text-box.mini > li:not(.text-ef-1):after {
    top: 6.5px;
  }
  .cnt-area-3 .text-area > li .text-box > li.text-ef-1::after {
    font-size: 13px;
    left: 3.25px;
  }

  .caption-txt {
    padding-left: 8px;
    font-size: 14px;
  }
  .caption-txt::before {
    top: 8px;
    width: 3px;
    height: 3px;
  }

  .min-cap-1 {
    width: 25px !important;
  }
  .min-cap-2 {
    width: 17px !important;
  }
}