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

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

  /* 픽스 버튼 */
  .fix-btn {
    height: 82px;
    box-shadow: 0px 4px 12px 0px #00000026;
  }
  .fix-btn .inner-box {
    width: 360px;
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 20px;
  }
  .fix-btn .inner-box .left-box .text-img-box {
    width: 184px;
  }
  .fix-btn .inner-box .right-box .btn-box {
    width: 114px;
    height: 46px;
    gap: 3px;
  }
  .fix-btn .inner-box .right-box .btn-box .img-box {
    width: 16px;
  }
  .fix-btn .inner-box .right-box .btn-box h1 {
    font-size: 16px;
    line-height: 16px;
  }
  .fix-btn .inner-box .right-box .btn-box h2 {
    font-size: 16px;
    line-height: 16px;
  }

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

  /* 메인 비주얼 영역 */
  .main-visual-area {
    margin-top: 82px;
    height: 828px;
  }
  .main-visual-area .bg-wrap {
    width: 922px;
  }
  .main-visual-area .bg-wrap .gra-box {
    display: none;
  }
  .main-visual-area .bg-wrap .gra-box-3 {
    height: 321px;
  }
  .main-visual-area .con {
    max-width: 334px;
  }
  .main-visual-area .img-box-1 {
    width: 311px;
    top: 47px;
  }
  .main-visual-area .part-img-box {
    width: 298px;
    top: 175px;
  }
  .main-visual-area .card-bg-box {
    width: 200px;
    top: 371px;
  }
  .main-visual-area .card-img-box {
    width: 113px;
    top: 202px;
  }
  .main-visual-area .card-img-box-1 {
    right: 59.5px;
  }
  .main-visual-area .card-img-box-2 {
    left: 59.5px;
  }
  .main-visual-area .list-wrap {
    top: 425.85px;
  }
  .main-visual-area .list-wrap .uniform-img-box {
    width: 90px;
    top: -35.85px;
    right: -10.5px;
  }
  .main-visual-area .list-wrap .list-inner .list-box > h1 {
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    line-height: 13px;
  }
  .main-visual-area .list-wrap .list-inner .list-box > h1::after {
    width: 14px;
    height: 100%;
    left: calc(100%);
  }
  .main-visual-area .list-wrap .list-inner .list-box .cnt-wrap {
    padding: 33px 12px 12px 12px;
  }
  .main-visual-area .list-wrap .list-inner .list-box .cnt-wrap h1 {
    font-size: 14px;
  }
  .main-visual-area .list-wrap .list-inner .list-box .cnt-wrap h1 > span.mini {
    font-size: 11px;
  }

  /* list-box-1 */
  .main-visual-area .list-wrap .list-inner .list-box-1 .cnt-wrap .text-wrap {
    gap: 6px;
  }
  .main-visual-area .list-wrap .list-inner .list-box-1 .cnt-wrap .text-wrap .img-box {
    width: 20px;
    min-width: 20px;
  }

  /* list-box-2 */
  .main-visual-area .list-wrap .list-inner .list-box-2 .cnt-wrap .text-wrap {
    gap: 6px;
  }
  .main-visual-area .list-wrap .list-inner .list-box-2 .cnt-wrap .text-wrap .text-box {
    gap: 2px;
  }
  .main-visual-area .list-wrap .list-inner .list-box-2 .cnt-wrap .text-wrap .text-box > span {
    padding-left: 15px;
    font-size: 11px;
  }

  .main-visual-area button {
    top: 709px;
  }
  .main-visual-area button .inner-box {
    height: 54px;
  }
  .main-visual-area button .inner-box h1 {
    font-size: 16px;
    line-height: 16px;
  }
  .main-visual-area p {
    top: 774px;
    font-size: 11px;
    line-height: 13px;
    text-shadow: 0px 2px 4px #0000005c;
  }

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

  /* 컨텐츠 영역-1 */
  .cnt-area-1 {
    padding: 26px 0;
  }
  .cnt-area-1 .con {
    gap: 18px;
    max-width: 360px;
    padding: 0 18px;
  }
  .cnt-area-1 .title-wrap {
    gap: 18px;
  }
  .cnt-area-1 .title-wrap .title-img-box {
    width: 83px;
  }
  .cnt-area-1 .list-wrap {
    backdrop-filter: blur(18px);
  }
  .cnt-area-1 .list-wrap .list-inner .list-box > h1 {
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    line-height: 13px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box > h1::after {
    width: 14px;
    height: 21px;
    left: calc(100%);
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap {
    padding: 34px 12px 12px 12px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap h1 {
    font-size: 14px;
    line-height: 20px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap h1 > span.mini {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .date-wrap {
    gap: 6px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .date-wrap .date-box {
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 13px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .date-wrap p {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .star-text-wrap {
    gap: 2px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .star-text-wrap > li .text-1 {
    font-size: 11px;
    line-height: 115%;
    width: 7px;
    min-width: 7px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .star-text-wrap > li .text-2 {
    font-size: 11px;
    line-height: 115%;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .num-text-wrap {
    gap: 8px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .num-text-wrap > li {
    gap: 4px;
  }
  .cnt-area-1 .list-wrap .list-inner .list-box .cnt-wrap .num-text-wrap > li .num-img-box {
    width: 9px;
    min-width: 9px;
  }

  /* 🟡 컨텐츠 영역-1-1 */
  /* 🟠 list-box-1 */
  .cnt-area-1-3 .list-wrap .list-inner .list-box-1 .cnt-wrap .text-wrap .star-text-wrap {
    margin-top: 2px;
  }
  /* 🟠 list-box-2 */
  .cnt-area-1-3 .list-wrap .list-inner .list-box-2-coupon > h1 {
    gap: 4px;
  }
  .cnt-area-1-3 .list-wrap .list-inner .list-box-2-coupon > h1 > .img-box {
    width: 11px;
  }
  .cnt-area-1-3 .list-wrap .list-inner .list-box-2-coupon .cnt-wrap {
    padding: 29px 0 0 0;
  }
  .cnt-area-1-3 .list-wrap .list-inner .list-box-2-coupon .cnt-wrap > .img-box {
    width: 100%;
  }

  /* 🟡 컨텐츠 영역-1-2 */
  .cnt-area-1-2 .title-wrap .text-img-box {
    width: 244px;
  }
  /* 🟠 list-box-1 */
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .text-wrap .num-text-wrap > li .text-box .date-wrap {
    margin-top: 6px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .star-text-wrap {
    margin-top: 4px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-title-wrap {
    width: 310px;
    min-width: 310px;
    margin-top: 12px;
    margin-left: -18px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-title-wrap h2 {
    width: 104px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-option-wrap {
    margin-top: 10px;
    margin-left: -18px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-option-wrap .select-benefit-option-box {
    width: 155px;
    min-width: 155px;
    gap: 8px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-option-wrap .select-benefit-option-box h3 {
    font-size: 14px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .select-benefit-option-wrap .select-benefit-option-box h3 > span {
    font-size: 10px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .btn-wrap {
    width: 310px;
    min-width: 310px;
    margin-top: 8px;
    margin-left: -18px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .btn-wrap button {
    width: 155px;
    height: 31px;
    gap: 4px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .btn-wrap button > span {
    font-size: 11px;
    line-height: 13px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .benefit-wrap {
    width: 310px;
    min-width: 310px;
    margin-top: 10px;
    margin-left: -18px;
    gap: 2px;
    border-radius: 8px;
    padding: 5px 0;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .benefit-wrap > span {
    font-size: 11px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .benefit-wrap > p {
    font-size: 11px;
    letter-spacing: -0.5px;
  }
  .cnt-area-1-2 .list-wrap .list-inner .list-box-1 .cnt-wrap .benefit-wrap > p > span {
    font-size: 14px;
    line-height: 18px;
  }

  /* 🟡 컨텐츠 영역-1-3 */
  .cnt-area-1-3 .title-wrap .text-img-box {
    width: 260px;
  }
  /* 🟠 list-box-3 */
  .cnt-area-1-3 .list-wrap .list-inner .list-box-3 .cnt-wrap .text-wrap .num-text-wrap > li .text-box .date-wrap {
    margin-top: 6px;
  }

  /* 🟡 컨텐츠 영역-1-4 */
  .cnt-area-1-4 .title-wrap .text-img-box {
    width: 236px;
  }

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

  /* 컨텐츠 영역-2 */
  .cnt-area-2 {
    box-shadow: 0px 4px 12px 0px #00000026;
  }
  .cnt-area-2 .con {
    max-width: 360px;
    padding: 24px;
  }
  .cnt-area-2 .cloud-img-box-1 {
    width: 220px;
    top: 24px;
    left: 24px;
  }
  .cnt-area-2 .cloud-img-box-2 {
    width: 198px;
    top: 24px;
    right: -61px;
  }
  .cnt-area-2 .img-box-1 {
    width: 145px;
  }
  .cnt-area-2 .img-box-2 {
    width: 113px;
    margin-top: 11.5px;
  }

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

  /* 컨텐츠 영역-3 */
  .cnt-area-3 {
    padding: 26px 0 36px 0;
  }
  .cnt-area-3 .con {
    max-width: 360px;
    padding: 0 20px 0 12px;
  }
  .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: 20px;
  }
  .cnt-area-3 .text-area {
    gap: 10px;
  }
  .cnt-area-3 .text-area > li > h2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .cnt-area-3 .text-area > li .text-box > li {
    padding-left: 18px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .cnt-area-3 .text-area > li .text-box > li:not(.text-ef-1):after {
    width: 3.5px;
    height: 3.5px;
    top: 6.25px;
    left: 7.5px;
  }
  .cnt-area-3 .text-area > li .text-box > li.text-ef-1::after {
    font-size: 12px;
    left: 3.25px;
  }

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

  /* 모달 영역 */
  .modal-wrap {
    backdrop-filter: blur(14px);
  }
  .modal-wrap .modal-box {
    width: 326px;
    padding: 24px 12px;
    backdrop-filter: blur(18px);
  }
  .modal-wrap .modal-box .title-img-box {
    width: 226px;
  }
  .modal-wrap .modal-box .text-wrap {
    gap: 8px;
    margin-top: 18px;
  }
  .modal-wrap .modal-box .text-wrap > li {
    gap: 4px;
  }
  .modal-wrap .modal-box .text-wrap > li .img-box {
    width: 9px;
    min-width: 9px;
  }
  .modal-wrap .modal-box .text-wrap > li p {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }

  .bg-box {
    height: 751px;
  }
  .bg-img-bot {
    bottom: -80px;
  }

  .top-cnt {
    padding: 23px 12px 12px 12px !important;
  }

  .deco-wrap {
    width: 360px;
  }
  .txt-deco {
    width: 88px;
  }

  .txt-deco.kv {
    width: 60px !important;
  }
}