@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 {
    width: 360px;
    height: 95px;
    padding: 12px;
  }

  .fixed_top_button .logo {
    height: 9px;
  }

  .fixed_top_button .fixed_button {
    height: 58px;
    padding: 16px;
    border-radius: 10px;
  }

.fixed_top_button .fixed_button p {
  font-size: 11px;
  font-weight: 600;
}

  .fixed_top_button .fixed_button .fxd-txt {
    height: 23px;
  }

  .fixed_top_button .fixed_button .btn {
    width: 85px;
    height: 36px;
  }

  .fixed_top_button .fixed_button .btn img {
    height: 14px;
  }

  .main-wrap {
    padding-top: 115px;
    padding-bottom: 13px;
  }

  .main-wrap .main-content-wrap {
    width: 360px;
    padding: 27px 33px 61px;
    gap: 12px;
  }

  .main-wrap .main-content-wrap .kv-sd {
    width: 351px;
    height: 115px;
    top: 625px;
    left: -12px;
  }

  .main-wrap .main-content-wrap .kv-img-paper {
    width: 668px;
    height: 360px;
  }

  .main-wrap .main-content-wrap .kv-img-1 {
    width: 56px;
    height: 47px;
    top: 192px;
    left: -7px;
  }

  .main-wrap .main-content-wrap .kv-img-2 {
    width: 58px;
    height: 60px;
    top: 267px;
    left: 253px;
  }

  .main-wrap .main-content-wrap .kv-img-3 {
    width: 56px;
    height: 62px;
    top: 512px;
    left: 241px;
  }

  .main-wrap .main-content-wrap .main-title-wrap {
    padding: 4px 0;
    gap: 3px;
  }

  .main-wrap .main-content-wrap .main-title-wrap h1 {
    font-size: 14px;
    line-height: 18px;
  }

  .main-wrap .main-content-wrap .main-title-wrap img {
    height: 36px;
    width: 268px;
  }

  .main-wrap .main-content-wrap .main-content {
    gap: 9px;
  }

  .title-text {
    height: 14px;
    width: 99px;
  }

  .main-wrap .main-content-wrap .main-content .card-list {
    gap: 6px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .paper {
    width: 268px;
    height: 147px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card {
    padding: 21px 15px 26px 23px;
    height: 140px;
    gap: 8px;
    cursor: pointer;
  }


  .main-wrap .main-content-wrap .main-content .card-list .card .kv-card-title {
    height: 14px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap {
    gap: 12px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-kpass {
    width: 47px;
    height: 76px;

  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-info {
    gap: 4px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-info .info {
    gap: 4px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-info .info .dot {
    width: 3px;
    height: 3px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-info .info p {
    font-size: 12px;
    line-height: 15px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-info .desc {
    margin-top: 4px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .desc {
    font-size: 10px;
    line-height: 10px;
  }

  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-climate,
  .main-wrap .main-content-wrap .main-content .card-list .card .card-info-wrap .card-happy {
    width: 80px;
    height: 50px;
  }

  .main-wrap .main-content-wrap .description-wrap {
    gap: 4px;
  }

  .main-wrap .main-content-wrap .description-wrap p {
    font-size: 11px;
    line-height: 16px;
  }

  .event-wrap .event-inner-wrap {
    width: 316px;
    padding: 44px 0;
    gap: 28px;
  }

  .event-wrap .event-inner-wrap .event {
    gap: 14px;
  }

  .event-wrap .event-inner-wrap .event .event-title-1 {
    height: 56px;
  }

  .event-wrap .event-inner-wrap .event .eve-img-1 {
    width: 170px;
    height: 95px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap {
    padding: 26px 24px;
    gap: 20px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content {
    gap: 8px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .title-text {
    height: 14px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-target-wrap {
    gap: 6px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h1 {
    font-size: 14px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h1 span {
    font-size: 13px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .description-wrapP {
    gap: 2px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-desc {
    font-size: 11px;
    line-height: 16px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-date-wrap {
    gap: 6px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-date-wrap .title {
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 16px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-date-wrap .date {
    font-size: 13px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h2 {
    font-size: 14px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h2 span {
    font-size: 13px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list {
    gap: 14px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item {
    gap: 8px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .benefit-num {
    width: 18px;
    height: 28px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item {
    gap: 8px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item .title-min-txt {
    height: 11px;
    width: 118px;
    margin-top: 2px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item .event-text-wrap {
    gap: 4px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h3 {

    font-size: 14px;
    line-height: 19px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .event-h3 span {
    font-size: 12px;
    line-height: 16px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-list {
    gap: 10px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-sub-desc {
    font-size: 11px;
    line-height: 16px;
    gap: 1px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-sm {
    gap: 8px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-sm .title-min-txt {
    height: 11px;
    width: 118px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-sm .img-wrap {
    padding: 10px 0;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-sm .img-wrap .eve-cont-img {
    width: 80px;
    height: 83px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-sm .notice-wrap {
    gap: 4px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .btn {
    height: 44px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 18px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item-list .event-item {
    gap: 8px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item .sub-date-wrap {
    gap: 6px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item .sub-date-wrap .title {
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 13px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .benefit-list .benefit-item .event-item .sub-date-wrap .date {
    font-size: 12px;
    line-height: 17px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap>.description-wrap {
    gap: 4px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap>.description-wrap .event-desc {
    font-size: 11px;
    line-height: 16px;
    gap: 4px;
  }

  .event-wrap .event-inner-wrap .event .event-title-2 {
    height: 82px;
  }

  .event-wrap .event-inner-wrap .event .eve-img-2 {
    width: 264px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .sub-desc-wrap {
    gap: 2px;
  }

  .event-wrap .event-inner-wrap .event .event-content-wrap .event-content .sub-desc-wrap .event-sub-desc {
    gap: 1px;
    font-size: 11px;
    line-height: 16px;
  }


  .footer {}

  .footer .footer_content {
    padding: 32px 12px 64px 12px;
    width: 100%;
    gap: 24px;
  }

  .footer .footer_content .title_wrap {
    gap: 6px;
  }

  .footer .footer_content .title_wrap .icon_alert {
    width: 22px;
  }

  .footer .footer_content .title_wrap p {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
  }

  .footer .footer_content ul li {
    font-size: 13px;
    line-height: 18px;
    padding-left: 18px;
  }

  .footer .footer_content ul li::before {
    width: 3px;
    height: 3px;
  }

  .footer .footer_content .sub_title {
    font-size: 13px;
    line-height: 17px;
  }

  .footer .footer_content .sub_title_sm {
    font-size: 12px;
    line-height: 16px;
  }

  .footer .footer_content .btm p {
    gap: 4px;
    font-size: 13px;
    line-height: 19px;
    padding: 0 4px;
  }
}