@media screen and (max-width: 680px) {
  .only_pc {
    display: none;
  }
  .only_mo {
    display: block;
  }
  body,
  button,
  p,
  span {
    letter-spacing: -0.05em;
  }
  /* typography */
  .h1 {
    font-size: 15px;
  }
  .h2 {
    font-size: 14px;
    line-height: 20px;
  }
  .h3 {
    font-size: 13px;
    line-height: 17px;
  }
  .caption1 {
    font-size: 12px;
    line-height: 16px;
  }
  .caption2 {
    font-size: 11px;
    line-height: 16px;
  }
  .caption2.mid {
    font-size: 11px;
    line-height: 13px;
  }
  /* fixed_top_button */
  .fixed_top_button {
    height: auto;
    padding: 14px 12px;
  }
  .fixed_top_button .fixed-button {
    width: 100%;
    max-width: 336px;
    border-radius: 10px;
    padding: 9px 12px;
    gap: 6px;
  }
  .fixed_top_button .fixed-button > .hover {
    border-radius: 10px;
  }
  .fixed_top_button .fixed-button .txt-box {
    gap: 8px;
    padding: 4px 10px 10px;
  }
  .fixed_top_button .fixed-button .txt-box .label {
    padding: 4px 6px 5px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .fixed_top_button .fixed-button .txt-box .fxd-btn-txt {
    width: 149px;
    height: 25px;
  }
  .fixed_top_button .fixed-button .btn {
    border-radius: 6px;
    gap: 3px;
    padding: 15px 14px 15px 16px;
  }
  .fixed_top_button .fixed-button .btn .btn-logo {
    width: 81px;
    height: 13px;
  }
  .fixed_top_button .fixed-button .btn .btn-row span {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.5px;
  }
  .fixed_top_button .fixed-button .btn .btn-arrow {
    width: 12px;
    height: 20px;
  }
  /* main */
  .main {
    height: 589px;
  }
  .main .main-content-wrap {
    width: 360px;
    padding-top: 142px;
    gap: 30px;
  }
  .main .main-content-wrap .kv-head {
    gap: 20px;
  }
  .main .main-content-wrap .kv-head .logo {
    width: 127px;
    height: 20px;
  }
  .main .main-content-wrap .kv-head .kv-title {
    width: 268px;
    height: 80px;
  }
  .main .main-content-wrap .kv-head .kv-icon-1 {
    width: 36px;
    height: 30px;
    top: 0px;
    left: -120px;
  }
  .main .main-content-wrap .kv-body {
    gap: 28px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual {
    gap: 14px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .card {
    width: 196px;
    height: 124px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .kv-card-name {
    font-size: 14px;
    line-height: 20px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .kv-icon-2 {
    top: -12px;
    width: 17px;
    height: 17px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .kv-icon-3 {
    width: 69px;
    height: 6px;
    top: 156px;
    left: 61px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .kv-icon-4 {
    width: 28px;
    height: 26px;
    top: 136px;
    left: 133px;
  }
  .main .main-content-wrap .kv-body .kv-card-visual .kv-sd {
    width: 289px;
    height: 56px;
    top: 102px;
    left: -10px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list {
    gap: 6px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item {
    gap: 10px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item .kv-tag-text {
    gap: 3px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item .kv-tag-text .kv-tag-label {
    padding: 4px 6px 5px;
    border-width: 1px;
    font-size: 9px;
    line-height: 9px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item .kv-tag-text .kv-tag-desc {
    font-size: 9px;
    line-height: 10px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item .kv-txt {
    width: 147px;
    height: 29px;
  }
  .main .main-content-wrap .kv-body .kv-tag-list .kv-tag-item .kv-txt.kv-txt-1 {
    height: 64px;
  }
  .main .main-content-wrap .kv-btn-img {
    width: 73px;
    height: 78px;
    top: 416px; 
    left: 215px;
  }
  .main .main-content-wrap .kv-cta {
    gap: 5px;
  }
  .main .main-content-wrap .kv-cta .kv-cta-btn {
    width: 280px;
    height: 54px;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 0px 1px 2px 0px rgba(255, 60, 0, 0.2509803922);
  }
  .main .main-content-wrap .kv-cta .kv-cta-btn p {
    font-size: 16px;
    line-height: 16px;
  }
  .main .main-content-wrap .kv-cta .kv-cta-btn .kv-icon-star.kv-icon-star-1 {
    width: 12px;
    height: 13px;
    top: 8px;
    left: 63px;
  }
  .main .main-content-wrap .kv-cta .kv-cta-btn .kv-icon-star.kv-icon-star-2 {
    width: 8px;
    height: 9px;
    top: 29px;
    left: 207px;
  }
  .main .main-content-wrap .kv-cta .kv-cta-note {
    font-size: 11px;
    line-height: 16px;
  }
  /* event */
  .event .event-inner {
    width: 360px;
    padding: 44px 24px;
    gap: 16px;
  }
  .event .event-inner .event-head {
    gap: 22px;
  }
  .event .event-inner .event-head .body-title {
    width: 254px;
    height: 66px;
  }
  .event .event-inner .event-head .body-img {
    width: 294px;
    height: 199px;
  }
  .event .event-inner .cont-list {
    gap: 18px;
  }
  .event .event-inner .cont-list .cont-item {
    gap: 7px;
  }
  .event .event-inner .cont-list .cont-item .cont-title {
    width: 142px;
    height: 11px;
  }
  .event .event-inner .cont-list .cont-item .cont-txt-box {
    gap: 4px;
  }
  .event .event-inner .cont-list .cont-item h1 {
    font-size: 14px;
    line-height: 18px;
  }
  .event .event-inner .cont-list .cont-item h1 span {
    font-size: 13px;
    line-height: 19px;
  }
  .event .event-inner .cont-list .cont-item .cont-note {
    gap: 2px;
  }
  .event .event-inner .cont-list .cont-item .cont-note p {
    font-size: 11px;
    line-height: 16px;
    gap: 2px;
  }
  .event .event-inner .cont-list .cont-item .cont-note .agree-list {
    gap: 2px;
    padding-left: 8px;
  }
  .event .event-inner .cont-list .cont-item .cont-note .agree-list .agree-item {
    gap: 2px;
  }
  .event .event-inner .cont-list .cont-item .step-list {
    gap: 10px;
  }
  .event .event-inner .cont-list .cont-item .step-list .step-item {
    gap: 7px;
  }
  .event .event-inner .cont-list .cont-item .step-list .step-item .num {
    width: 18px;
    height: 20px;
  }
  .event .event-inner .cont-list .cont-item .step-list .step-item .step-txt {
    gap: 1px;
  }
  .event .event-inner .cont-list .cont-item .step-cont {
    gap: 10px;
  }
  .event .event-inner .cont-list .cont-item .step-cont .benefit-wrap {
    gap: 8px;
  }
  .event .event-inner .cont-list .cont-item .step-cont .benefit-wrap .benefit-list {
    gap: 4px;
  }
  .event .event-inner .cont-list .cont-item .step-cont .benefit-wrap .benefit-list .benefit-item {
    gap: 6px;
  }
  .event .event-inner .cont-list .cont-item .step-cont .benefit-wrap .benefit-list .benefit-item .min-num {
    width: 18px;
    height: 18px;
  }
  .event .event-inner .cont-list .cont-item .step-cont .benefit-wrap .benefit-list .benefit-item h1 {
    line-height: 18px;
  }
  /* footer */
  .footer .footer_content {
    gap: 16px;
    padding: 26px 24px 26px 14px;
  }
  .footer .footer_content .title_wrap {
    gap: 6px;
    padding-left: 8px;
  }
  .footer .footer_content .title_wrap .icon_alert {
    width: 18px;
    height: 18px;
  }
  .footer .footer_content .title_wrap p {
    font-size: 15px;
    line-height: 20px;
  }
  .footer .footer_content ul li {
    font-size: 13px;
    line-height: 19px;
    padding-left: 18px;
  }
  .footer .footer_content ul li::before {
    width: 3px;
    height: 3px;
  }
  .footer .footer_content .sub_title {
    font-size: 13px;
    line-height: 17px;
    margin-bottom: 6px;
  }
  .footer .footer_content .btm p {
    gap: 4px;
    font-size: 13px;
    line-height: 19px;
    padding: 0 4px;
  }

  .check-txt-wrap {
    gap: 4px;
  }
  .body-check-txt {
    width: 145px;
    height: 31px;
  }
}