@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: 67px;

    width: 100%;
    max-width: 360px;
    padding: 0 16px;
    gap: 4px;

    top: 12px;
  }

  .fixed_top_button .logo_wrap {
    padding-left: 16px;
    height: 8px;
    position: relative;
  }

  .fixed_top_button .logo_wrap .logo {
    height: 8px;
    position: absolute;
  }

  .fixed_inner {
    width: 100%;
    max-width: 329px;
    height: 55px;
    padding: 0px 10px 0px 16px;
  }

  .fixed_inner .fxd_btn_txt {
    gap: 5px;
    font-size: 17px;
    line-height: 20px;
  }

  .fixed_inner .fxd_btn_txt span {
    font-size: 12px;
    line-height: 20px;
  }

  .fixed_inner .btn_wrap {
    width: 90px;
    height: 36px;
    gap: 2px;
  }

  .fixed_inner .btn_wrap p {
    font-size: 14px;
    line-height: 20px;
  }

  .fixed_inner .btn_wrap img {
    width: 14px;
  }

  .main {
    height: 720px;
    position: relative;
  }

  .main .kv_main {
    max-width: 360px;
    width: 100%;
    gap: 40px;
    position: unset;
  }

  .main .kv_main .main_top {
    width: 100%;
  }

  .main .kv_main .main_top .title_wrap .data-title {
    padding-left: 36px;
  }

  .main .kv_main .main_top .title_wrap .data-title .main_sub_title {
    height: 20px;
  }

  .main .kv_main .main_top .title_wrap .data-title .main_title {
    height: 82px;
  }

  .main .kv_main .main_top .swiper_container {
    width: 100%;
    padding: 0 16px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap .swiper_buttons .swiper_button {
    width: 38px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap .swiper_buttons .swiper_button img {
    width: 24px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap {
    height: 46px;
    width: 100%;
    max-width: 329px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap .swiper_desc {
    gap: 8px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap .swiper_desc .line {
    width: 81.5px;
    height: 1px;
  }

  .main .kv_main .main_top .swiper_container .swiper_desc_wrap .swiper_desc p {
    font-size: 13px;
    line-height: 17px;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper {
    height: 162px;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide-prev::before,
  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide-next::before {
    width: 105px;
    height: 32px;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide-active::before {
    width: 178px;
    height: 62px;
  }

  .main .kv_main .data-cont {
    width: 312px;
    height: 232px;
    gap: 8px;
    padding: 44px 16px 22px;
  }

  .main .kv_main .data-cont .badge {
    width: 125px;
    height: 47.56px;
    left: 26px;
    top: 11px;
  }

  .main .kv_main .data-cont .btn {
    width: 280px;
    height: 54px;
  }

  .main .kv_main .data-cont .btn.primary .text {
    font-size: 17px;
    line-height: 20px;
  }

  .main .kv_main .data-cont .btn.primary .text span {
    font-size: 12px;
    line-height: 20px;
  }

  .main .kv_main .data-cont .btn.primary .arrow {
    font-size: 3px;
  }

  .main .kv_main .data-cont .btn.primary .arrow p {
    font-size: 14px;
    line-height: 20px;
  }

  .main .kv_main .data-cont .btn.primary .arrow img {
    width: 14px;
  }

  .main .kv_main .data-cont .btn.secondary .text {
    font-size: 14px;
    line-height: 20px;
  }

  .main .kv_main .data-cont .btn.secondary img {
    width: 14px;
  }

  .main .kv_main .data-cont .desc {
    font-size: 11px;
    line-height: 14px;
  }

  .event {
    padding: 52px 14px;
    gap: 42px;
  }

  .event>div {
    width: 100%;
    max-width: 332px;
  }

  .event>div .event_top {
    height: 252px;
    gap: 10px;
  }

  .event>div .event_top .eve_sub {
    height: 36px;
  }

  .event>div .event_top .eve_img {
    height: 120px;
  }

  .event>div .event_top .eve_title {
    height: 38px;
  }

  .event .event_body {
    padding: 32px 24px;
    gap: 14px;
  }

  .event .event_body .content_wrap {
    gap: 10px;
  }

  .event .event_body .content_wrap .cont_title {
    height: 19px;
  }

  .event .event_body .content_wrap .content.type1 {
    gap: 4px;
  }

  .event .event_body .content_wrap .content h1 {
    font-size: 14px;
    line-height: 20px;
  }

  .event .event_body .content_wrap .content h1 span {
    font-size: 14px;
    line-height: 20px;
  }

  .event .event_body .content_wrap .content.type1 .desc {
    gap: 2px;
    font-size: 11px;
    line-height: 14px;
  }

  .event .event_body .content_wrap .content.type1 .desc::before {
    font-size: 11px;
    line-height: 14px;
  }

  .event .event_body .content_wrap .content.type2 {
    gap: 6px;
  }

  .event .event_body .content_wrap .content.type2 .title {
    padding: 4px;
    font-size: 12px;
    line-height: 16px;
  }

  .event .event_body .content_wrap .content.type2 .date {
    font-size: 12px;
    line-height: 16px;
  }

  .event .event_body .content_wrap .content.type3 h1 span {
    font-size: 13px;
  }

  .event .event_body .content_wrap .content.type3 .desc {
    display: block;
  }

  .event .event_body .content_wrap .content.type3 .desc span {
    font-size: 12px;
    line-height: 13px;
  }

  .event .event_body .content_wrap .content.type4 {
    gap: 6px;
  }

  .event .event_body .content_wrap .content.type4 .item {
    gap: 8px;
  }

  .event .event_body .content_wrap .content.type4 .item img {
    width: 28px;
    height: 36px;
  }

  .event .event_body .content_wrap .content h2 {
    font-size: 14px;
    line-height: 20px;
  }

  .event .event_body .content_wrap .content h3 {
    font-size: 14px;
    line-height: 20px;
  }

  .event .event_body .caption_wrap {
    gap: 4px;
  }

  .event .event_body .caption_wrap .caption_content_wrap {
    gap: 4px;
  }

  .event .event_body .caption_wrap .caption_title {
    height: 23px;
  }

  .event .event_body .caption_wrap .caption_content_wrap .caption {
    gap: 2px;
  }

  .event .event_body .caption_wrap .caption_content_wrap .caption::before {
    width: 7px;
    font-size: 11px;
    line-height: 14px;
  }

  .event .event_body .caption_wrap .caption_content_wrap p {
    font-size: 11px;
    line-height: 14px;
  }

  .event .event_body .content_wrap .content.type7 {
    gap: 0;
  }

  .event .event_body .content_wrap .content.type5 {
    gap: 2px;
  }

  .event .event_body .content_wrap .content h4 {
    font-size: 13px;
    line-height: 17px;
  }

  .event .event_body .content_wrap .content.type6 {
    gap: 4px;
  }

  .footer {
    padding: 26px 14px;
  }

  .footer .footer_content {
    max-width: 360px;
    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: 18px;
  }

  .footer .footer_content ul li {
    font-size: 13px;
    line-height: 17px;
    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;
  }

  .main .kv_main .main_top .title_wrap {
    height: 102px;
  }

  .main .kv_main .main_top .swiper-container {
    width: 329px;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide {
    width: 101px;
    display: flex;

    justify-content: center;
    align-items: end;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide img {
    width: 80px;
  }

  .main .kv_main .main_top .swiper_container .swiper-wrapper .swiper-slide.active img {
    width: 101px;
  }

  .main .kv_main .data-cont .data-cont-desc-wrap {
    height: 42px;
  }

  .main .main_deco_wrap {
    width: 100%;
    left: 0;
    transform: unset;
  }

  .main .main_deco_wrap>div {
    width: 70px;
    height: 170px;
  }

  .main .main_deco_wrap .main_deco_left {
    width: 40px;
    height: 80px;
    justify-content: start;
  }

  .main .main_deco_wrap .deco_top_left {
    width: 40px;
    height: 80px;
  }

  .main .main_deco_wrap .main_deco_left img:first-child {
    display: none;
  }

  .main .main_deco_wrap .deco_top_right:last-child {
    display: none;
  }

  .main .main_deco_wrap .deco_top_right {
    width: 70px;
    height: 170px;
  }
}