@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: 8px 6px;
    gap: 6px;
  }

  .fixed_top_button .fixed_button {
    height: 48px;
    padding: 6px 12px ;
    padding-right: 8px;
  }

  .fixed_top_button .fixed_button .left .fxd-btn-badge {
    width: 34px;
    height: 34px;
  }

  .fixed_top_button .fixed_button .left {
    gap: 4px;
  }

  .fixed_top_button .fixed_button .left p {
    font-size: 11px;
    line-height: 15px;
  }

  .logo {
    font-size: 9px;
    line-height: 9px;
    padding: 0 14px;
  }
  .fixed_top_button .fixed_button .right {
    width: 111px;
    height: 36px;
    padding: 8px 6px 8px 12px;
  }

  .fixed_top_button .fixed_button .right p {
    font-size: 11px;
    line-height: 15px;
  }

  .fixed_top_button .fixed_button .right h1 {
    font-size: 12px;
    line-height: 17px;
  }

  .fixed_top_button .fixed_button .right img {
    width: 15px;
    height: 15px;
  }

  .main {
    min-height: 551px;
    width: 100%;
  }

  .main .bg {
    /* width: 878px; */
    height: 766px;
    width: 100%;
    background-position: center -1px;
  }

  .main .wrap {
    max-width: 359px;
    min-height: 563px;
    padding-top: 111px;
    background-size: auto;
  }

  .main .main-content {
    padding: 0 12px 0 32px;
    width: 360px;
    min-height: 403px;
    gap: 18px;
  }

  .main .main-content .main-title {
    width: 224px;
    height: 94px;
    object-fit: contain;
  }

  .main .main-content .content-wrap .left {
    gap: 3px;
    width: 125px;
  }

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

  .main .main-content .content-wrap .left .card {
    width: 125px;
    height: 198px;
  }

  .main .main-content .content-wrap .left .card-sd {
    width: 235px;
    height: 38px;
  }

  .btn-wrap {
    gap: 4px;
  }
  .main .main-content .left .btn {
    width: 125px;
    height: 50px;
    padding: 10px 6px 10px 12px;
  }

  .main .main-content .btn {
    height: 41px;
    gap: 6px;
  }

  .main .main-content .btn .content {
    width: 76px;
  }

  .main .main-content .btn .top {
    font-size: 11px;
    line-height: 15px;
  }

  .main .main-content .btn .bottom p {
    font-size: 13px;
    line-height: 15px;
    letter-spacing: -0.5px;
  }

  .main .main-content .btn .bottom img {
    width: 15px;
    height: 15px;
  }

  .main .main-content .content-wrap .right {
    gap: 4px;
    width: 175px;
  }

  .main .main-content .content-wrap .right .card {
    width: 175px;
    padding: 10px 0;
  }

  .main .main-content .content-wrap .right .card .title-wrap {
    gap: 4px;
  }

  .main .main-content .content-wrap .right .card .title-wrap p {
    font-size: 10px;
    line-height: 14px;
  }

  .main .main-content .content-wrap .right .card .title-wrap h1 {
    font-size: 11px;
    line-height: 15px;
  }

  .main .main-content .content-wrap .right .card .title-wrap .arrow {
    width: 12px;
    height: 12px;
  }

  .content span.diver {
    margin-bottom: 4px;
  }

  .main .main-content .content-wrap .right .card .content {
    padding-left: 43px;
    font-size: 10px;
    line-height: 14px;
  }

  .main .main-content .desc {
    font-size: 11px;
    line-height: 14px;
  }

  .event {
    height: 554px;
    padding-top: 67px;
  }

  .event .event-content {
    width: 312px;
    height: 443px;
    padding: 32px 24px;
    gap: 24px;
    border-radius: 4px;
  }

  .event .event-content .section {
    gap: 8px;
  }

  .event .event-content .title {
    padding: 6px 0;
    font-size: 13px;
    line-height: 15px;
    border-width: 2px;
  }

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

  .event .event-content h1 {
    font-size: 14px;
    line-height: 16px;
  }

  .event .event-content .desc {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: -0.5px;
  }

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

  .event .event-content .date-wrap .title {
    padding: 1px 4px;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: -0.5px;
  }

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

  .event .event-content .event-label {
    width: 124px;
    height: 40px;
    top: -20px;
  }

  .footer {
    padding: 26px 24px 36px 14px;
  }

  .footer .footer-content {
    width: 100%;
    gap: 10px;
  }

  .footer .footer-content .title_wrap {
    padding: 0 8px;
    gap: 6px;
  }

  .footer .footer-content .title-wrap .icon-alert {
    width: 18px;
  }

  .footer .footer-content .title-wrap p {
    font-size: 14px;
    line-height: 16px;
    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 .btm p {
    gap: 4px;
    font-size: 13px;
    line-height: 19px;
    padding: 0 4px;
  }

  .kv-icon {
    width: 26px;
  }
}