@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;
    line-height: 15px;
  }
  .h2 {
    font-size: 14px;
    line-height: 14px;
  }
  .h2.bold {
    line-height: 20px;
  }
  .h3 {
    font-size: 13px;
    line-height: 17px;
  }
  .caption1 {
    font-size: 12px;
    line-height: 16px;
  }
  .caption2 {
    font-size: 11px;
    line-height: 13px;
  }
  .caption2.bold {
    line-height: 11px;
  }
  .caption3 {
    font-size: 10px;
    line-height: 13px;
  }
  

  /* fixed_top_button */
  .fixed_top_button {
    width: 360px;
    height: 100px;
    left: calc(50% - 180px);
    padding: 14px 8px;
  }
  .fixed_inner {
    padding-left: 16px;
    padding-right: 18px;
    border: 0.5px solid #D9BC90;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 13px 0px #00000066;
    box-shadow: 0px 5px 13px 0px #00000066;
  }
  .fxd_deco {
    width: 12px;
    height: 12px;
  }
  .fixed_inner > .flex_row.grow {
    gap: 8px;
  }
  .fxd_txt_1 {
    width: 54px;
  }
  .fxd_txt_2 {
    width: 195px;
  }
  .fxd_divid {
    width: 0.8px;
    height: 30px;
  }
  .fxd_btn {
    padding: 10px 18px;
    border-radius: 3px;
  } 
  .fxd_btn_txt {
    height: 14px;
  }
  
  /* main */
  .main {
    height: 764px;
  }
  .mask1 {
    height: 764px;
    /* width: 202px;
    height: 101px; 
    top: 75px;
    left: calc(50% - 226px); */   
    mask-size: 202px 101px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: calc(50vw - 226px) 75px;
    -webkit-mask-size: 202px 101px;
  }
  .mask2 {
    height: 764px;
    /* width: 202px;
    height: 177px; 
    top: 176px;
    left: calc(50% - 226px); */
    mask-size: 202px 177px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: calc(50vw - 226px) 176px;
    -webkit-mask-size: 202px 177px;
  }
  .mask3 {
    height: 764px;
    mask-size: 202px 265px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: calc(50vw - 226px) 353px;
    -webkit-mask-size: 202px 265px;
  }
  .main_img {
    width: 263px;
    top: 150px;
    left: calc(50% - 70px);
  }
  .logo {
    width: 38px;
    top: 2px;
    right: calc(50% - 38px / 2 - 150px);
  }
  .main_title {
    width: 163px;
    top: 142px;
    left: calc(50% - 148px);
  }
  .main_title p {
    line-height: 18px;
  }
  .main_title > img {
    width: 149px;
    margin-top: 7px;
  }
  .card_w {
    width: 94px;
    top: 322px;
    left: calc(50% - 149px);
    border-radius: 3px;
    -webkit-box-shadow: -5.71px 8.57px 11.43px 0px #0000005C;
    box-shadow: -5.71px 8.57px 11.43px 0px #0000005C;
  }
  .benefits_wrap {
    top: 488px;
    width: 340px;
    gap: 12px;
  }
  .benefits_wrap > .flex_row {
    width: 100%;
    /* height: 183px; */
    gap: 4px;
  }
  .benefit {
    border-top: 1px solid #DBBF92;
    backdrop-filter: blur(20px);
    border-radius: 2px;
    gap: 12px;
    padding: 12px 0px 16px;
  }
  .benefit .flex_col {
    gap: 8px;
  }
  .benefit > .flex_col:first-child {
    /* height: 65px; */
    padding-bottom: 8px;
  }
  .kv_divid {
    height: 0.6px;
  }
  .kv_divid_ver {
    height: 21px;
    width: 0.6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%, rgba(255, 255, 255, 0.00) 100%);
  }
  .kv_icon {
    width: 28px;
    height: 28px;
  }
  .kv_icon_logo {
    height: 40px;
  }
  .kv_sub_tit {
    font-size: 7px;
    line-height: 7px;
    bottom: 3px;
  }
  .kv_sub_tit.sec {
    bottom: -10px;
  }
  .benefit .caption3 {
    height: 26px;
  }
  .kv_txt_long {
    height: 21px;
  }
  #go_detail {
    height: 54px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 12px 0px #0000005C;
    box-shadow: 0px 5px 12px 0px #0000005C;
  }
  .icon_btn {
    width: 15px;
    height: 10px;
    margin-left: 9px;  
  }
  /* eve_banner */
  .banner-button {
    max-width: 332px;
    padding: 18px 20px;
    border-radius: 6px;
    border-left: 7px solid #60B0E3;
    border-right: 7px solid #D00E31;
  }
  .banner_box {
    gap: 8px;
  }
  #go_banner .card {
    width: 40px;
  }
  .banner_title {
    gap: 4px;
  }
  .banner_sec_title {
    height: 15px;
  }
  .banner_title_img {
    height: 40px;
  }
  .banner_btn {
    padding: 8px 6px;
    border-radius: 3px;
  }
  .banner_btn_txt {
    height: 12px;
  }

  /* event */
  .eve_bg {
    height: 672px;
  }
  .eve_wrap {
    width: 360px;
    padding: 20px 14px;
  }
  .eve_box {
    backdrop-filter: blur(18px);
    border-top: 1px solid #DBBF92;
    border-radius: 4px;
    padding: 28px 20px;
    gap: 14px;
  }
  .eve_title {
    gap: 12px;
  }
  .eve_title .flex_col {
    gap: 4px;
  }
  .eve_sec_title {
    height: 14px;
  }
  .eve_sec_title_divid {
    width: 43px;
    height: 0.5px;
  }
  .eve_img {
    height: 103px;
  }
  .eve_img_3 {
    height: 78px;
  }
  .eve_title_img {
    height: 28px;
  }

  .eve_cont {
    gap: 18px;
  }
  .eve_cont > .flex_col {
    gap: 10px;
  }
  .eve_cont_divid {
    height: 0.6px;
    margin-top: 8px;
  }
  .eve_star_li {
    padding-left: 12px;
    margin-top: 2px;
  }
  .step_wrap {
    gap: 12px;
  }
  .btn_body {
    gap: 4px;
  }
  .step_wrap .flex_col {
    gap: 2px;
  }
  .title-eve {
    height: 12px;
  }
  .title-eve.title-high {
    height: 16px;
  }
  .step_wrap_min {
    gap: 4px;
  }
  .step_wrap > .flex_row {
    gap: 8px;
  }
  .step_wrap > .flex_row > img {
    width: 20;
    height: 26;
  }
  .step_wrap > .flex_row > .grow {
    gap: 4px;
  } 
  .gray_tag {
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 4px;
  }
  .table {
    width: 264px !important;
    border-top: 1px solid #0000005E; 
  }
  .table .table_h.flex_row, .table .table_r.flex_row {
    height: 46px;
  }
  .table .table_c {
    width: 88px;
    height: 46px;
  }
  .table .table_c.caption2.bold {
    line-height: 15px;
  }
  .step_wrap > p.caption2.gold {
    margin-top: 6px;
  }

  /* footer */
  .footer_wrap {
    padding: 26px 20px 36px 12px;
    gap: 10px;
  }
  .footer_title {
    gap: 6px;
    padding-left: 8px;
  }
  .alert {
    width: 18px;
  }
  .footer ul p {
    padding-left: 20px;
    margin-bottom: 4px;
  }
  .footer ul li {
    position: relative;
  }
  .footer .li_txt {
    padding-left: 12px;
  }
  .footer ul li.default {
    padding-left: 8px;
  }
  .footer ul li.default::before {
    width: 4px;
    height: 4px;
    top: 6px;
  }
  .footer ul li.default.star::before {
    top: 0px;
  }
  .footer .dashed_wrap {
    padding-left: 24px;
  }

  ul.list_wrap li {
    position: relative;
  }
  .list_wrap .li_txt {
    padding-left: 8px;
  }
  ul.list_wrap li.default {
    padding-left: 3px;
  }
  ul.list_wrap li.default::before {
    width: 3px;
    height: 3px;
    top: 7px;
  }
  .list_wrap .dashed_wrap {
    padding-left: 24px;
  }

  .plus_img_y {
    width: 24px;
  }
  span.cap_txt {
    padding: 1px 3px;
    border-radius: 2px;
  }
  .min-title {
    height: 15px;
  }
  .kv_cap {
    padding: 0 25px;
  }
  .kv-icon-plus-wrap {
    width: 136px;
  }
  .kv-icon-plus {
    width: 20px;
  }
  .twoline {
    padding-top: 5px;
  }
  .twoline p {
    line-height: 16px !important;
  }
  .pb {
    padding-bottom: 4px;
  }
  .caption_wrap {
    gap: 6px;
  }
}