@media screen and (max-width: 500px){
  body {font-family: 'Pre'; background: var(--wt_f8);}
  .container {padding: 0vw 6vw; box-sizing: border-box;}
  #wrap {max-width: 100vw; width: 100%; margin: 0 auto; box-sizing: border-box; box-shadow: 0vw 0.8vw 6vw 0vw 0vw 0vw 0vw 0.02vw;}
  section {padding-top: 26vw; padding-bottom: 11vw; background: var(--wt_f5);}
  /* tit-box */
  .tit-box {margin-bottom: 10vw; text-align: center;}
  .tit-box .tit {margin-bottom: 2vw; font-size: 5.6vw; font-weight: bold; line-height: 1; letter-spacing: -0.11vw; color: var(--black_3);}
  .tit-box .sub {font-size: 3.2vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_6);}
  /* tit-box2 */
  .tit-box2 {display: flex; align-items: center; justify-content: space-between; margin-bottom: 6vw;}
  .tit-box2 .tit {font-size: 4vw; font-weight: bold; line-height: 1; letter-spacing: -0.08vw; color: var(--black_3);}
  .tit-box2 select {width: 36vw; height: 8vw; padding: 0vw 2.4vw; box-sizing: border-box; border: 0.2vw 0vw 0vw; border-radius: 0.8vw; appearance: none; background: 0vw 0vw 0vw 2.4vw 10vw; background-size: 2vw 1.2vw; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9);}
  /* pager */
  .pager {width: 100%; height: auto; margin-top: 14vw;}
  .pager ul {display: flex; align-items: center; justify-content: center; gap: 3.2vw;}
  .pager ul .arrow {}
  .pager ul .arrow a {display: flex; align-items: center; justify-content: center; width: 6.4vw; height: auto; aspect-ratio: 1/1;}
  .pager ul .arrow a img {}
  .pager ul .num {}
  .pager ul .num a {display: flex; align-items: center; justify-content: center; width: 6.4vw; height: auto; aspect-ratio: 1/1; font-size: 2.8vw; font-weight: 400; line-height: 1.2; letter-spacing: 0.01vw; color: var(--gray_9);}
  .pager ul .num.active a {border-radius: 100%; background: var(--black_3); color: var(--wt);}
  /* popup */
  .dim {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.85); z-index: 19;}
  .popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; max-width: 72vw; width: 100%; height: auto; border-radius: 4vw; box-shadow: 0vw 0.8vw 8vw 0vw 0vw 0vw 0vw 0.05vw; background-color: var(--white); overflow: hidden; z-index: 20;}
  .popup .popup_hd {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 12vw; background: var(--wt_f5);}
  .popup .popup_hd .tit {font-size: 3.6vw; font-weight: 600; line-height: 1; letter-spacing: -0.07vw; color: var(--gray_9);}
  .popup .popup_hd .close_btn {position: absolute; top: 50%; right: 4vw; transform: translateY(-50%); width: 4vw; height: auto;}
  .popup .popup_hd .close_btn img {width: 100%; height: auto;}
  .popup .popup_body {padding: 10.2vw 8vw; box-sizing: border-box; background: var(--wt); text-align: center;}
  .popup .popup_body .tit {margin-bottom: 2vw; font-size: 4vw; font-weight: bold; line-height: 1; letter-spacing: -0.08vw; color: var(--black_3);}
  .popup .popup_body .txt {font-size: 2.8vw; font-weight: 500; line-height: 1.4; letter-spacing: -0.06vw; color: var(--gray_9);}
  .popup .popup_body .input-box {margin-top: 6vw;}
  .popup .popup_body .input-box .d-flex {display: flex; align-items: center; gap: 0.8vw;}
  .popup .popup_body .input-box .d-flex input {max-width: 36vw; width: 100%; height: 8vw; border-radius: 0.8vw; border: 0.2vw 0vw 0vw; padding: 0vw 2.4vw; box-sizing: border-box; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--black_3);}
  .popup .popup_body .input-box .d-flex input::placeholder {color: var(--gray_6);}
  .popup .popup_body .input-box .d-flex .submit_btn {display: flex; align-items: center; justify-content: center; width: 19.2vw; height: 8vw; border-radius: 0.8vw; background: var(--black_3); font-size: 2.4vw; font-weight: 400; line-height: 1; letter-spacing: -0.05vw; color: var(--wt);}


  /***** form *****/
  .sec_login {display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; padding: 0;}
  .sec_login .container {width: 100%;}
  .sec_login2 {height: 0vw 0vw 26vw;}
  .login_logo {margin: 0vw auto 14.4vw; width: 36.2vw; height: auto;}
  .login_logo img {width: 100%; height: auto;}
  /* input-box2 */
  form {width: 100%;}
  .input-box2 {display: flex; flex-flow: column; gap: 2vw; width: 100%; margin-bottom: 5vw;}
  .input-box2:last-of-type {margin-bottom: 0;}
  .input-box2 .tit {font-size: 3.2vw; font-weight: 600; line-height: 1; letter-spacing: -0.06vw; color: var(--black_3);}
  .input-box2 input {width: 100%; height: 11.2vw; padding: 0vw 4vw; box-sizing: border-box; background: var(--wt); border-radius: 1.6vw; border: 0.2vw 0vw 0vw; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9);}
  .input-box2 select {width: 100%; height: 11.2vw; padding: 0vw 4vw; box-sizing: border-box; background: var(--wt); border-radius: 1.6vw; border: 0.2vw 0vw 0vw; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9); appearance: none; background: url(./../img/select_icon.png) no-repeat calc(100% - 2.4vw) 50%; background-size: 2vw 1.2vw; background-color: var(--wt);}
  /* submit_btns */
  .submit_btns {}
  .submit_btns button {display: flex; align-items: center; justify-content: center; width: 100%; height: 10.8vw; border-radius: 1.6vw; background: var(--black_3); font-size: 3.2vw; font-weight: 500; line-height: 1; letter-spacing: -0.06vw; color: var(--wt);}
  form .copyright {margin-top: 16.4vw; text-align: center; font-size: 2.8vw; font-weight: 400; line-height: 1.6; letter-spacing: -0.11vw; color: var(--gray_9);}
  /* form_box */
  .form_box {width: 100%; height: auto; padding: 10.4vw 4.8vw; box-sizing: border-box; background: var(--wt); border-radius: 4vw;}
  /* search_box */
  .search_box form {display: flex; align-items: center; justify-content: center; gap: 1vw;}
  .search_box input {width: 100%; height: 8vw; padding: 0vw 2vw; box-sizing: border-box; border: 0.2vw 0vw 0vw; border-radius: 1vw; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--black_3);}
  .search_box input::placeholder {color: var(--gray_9);}
  .search_box button {min-width: 15vw; width: 15vw; height: 8vw; border-radius: 1vw; background: var(--black_3); box-sizing: border-box; font-size: 2.8vw; font-weight: 400; line-height: 1.2; letter-spacing: 0.07; color: var(--wt);}

  /**** header *****/
  header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 100vw; width: 100%; height: 16vw; background: var(--wt);}
  header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
  header.header2 .container {justify-content: center;}
  header .logo {width: 18.2vw; height: auto;}
  header .logo img {width: 100%; height: auto;}
  header .h_btn {display: flex; align-items: center; justify-content: center; width: 19.2vw; height: 6.8vw; border-radius: 0.8vw; background: var(--black_3); font-size: 2.4vw; font-weight: 400; line-height: 1; color: var(--wt); z-index: 10;}
  /* header3 */
  header.header3 {justify-content: space-between;}
  header nav {}
  header nav ul {display: flex; align-items: center; gap: 6vw;}
  header nav ul li {}
  header nav ul li a {font-size: 3.6vw; font-weight: 600; line-height: 1; letter-spacing: -0.07vw; color: var(--black_3);}
  header nav ul li a.btn {display: flex; align-items: center; justify-content: center; width: 18.2vw; height: 7.8vw; border: 0.2vw 0vw 0vw; border-radius: 12vw; box-sizing: border-box; font-size: 3.2vw; font-weight: 500; line-height: 1; letter-spacing: -0.06vw; color: var(--black_3);}
  /* menu */
  .menu {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 100vw; width: 100%; height: auto; z-index: 10;}
  .menu nav {width: 100%; height: auto;}
  .menu nav ul {display: flex; align-items: center; justify-content: center; height: 26vw;}
  .menu nav ul li {width: 100%; height: 100%;}
  .menu nav ul li a {display: flex; align-items: center; flex-flow: column; justify-content: center; gap: 3vw; width: 100%; height: 100%; background: var(--black_3);}
  .menu nav ul li.active a {background: var(--wt);}
  .menu nav ul li a .icon-box {width: 9.2vw; height: auto;}
  .menu nav ul li a .icon-box img {width: 100%; height: auto;}
  .menu nav ul li a .icon-box img.off {display: block;}
  .menu nav ul li.active a .icon-box img.off {display: none;}
  .menu nav ul li a .icon-box img.on {display: none;}
  .menu nav ul li.active a .icon-box img.on {display: block;}
  .menu nav ul li a .txt {font-size: 3.2vw; font-weight: 500; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_de);}
  .menu nav ul li.active a .txt {color: var(--black_3);}

  /**** footer *****/
  footer {width: 100%; height: auto; padding: 10vw 0vw 30vw; background: var(--wt); text-align: center;}
  footer .logo {width: 18.2vw; height: auto; margin: 0vw 0vw 2.8vw;}
  footer .logo img {width: 100%; height: auto;}
  footer .address {font-size: 2.8vw; font-weight: 400; line-height: 1.6; letter-spacing: -0.11vw; color: var(--gray_9);}
  footer .address span {vertical-align: text-top; padding: 0vw 1.8vw; font-size: 2vw; line-height: 1.6; letter-spacing: -0.08vw; color: rgba(153, 153, 153, 0.5);}
  footer .copyright {padding-top: 4.8vw; margin-top: 6vw; border-top: 0.2vw 0vw 0vw; font-size: 2.8vw; font-weight: 400; line-height: 1.6; letter-spacing: -0.11vw; color: var(--gray_9);}

  /**** visual *****/
  .visual {overflow: hidden; text-align: center; padding-top: 26vw; background-image: linear-gradient(to bottom, var(--wt), #f2f2f2 200%);}
  .visual .txt-box {margin-bottom: 10vw;}
  .visual .txt-box .tit {margin-bottom: 4vw; font-size: 6.4vw; font-weight: bold; line-height: 1.3; letter-spacing: -0.38vw; color: var(--black_3);}
  .visual .txt-box .sub {margin-bottom: 4vw; font-size: 3.2vw; font-weight: 600; line-height: 1.4; letter-spacing: -0.13vw; color: var(--black_3);}
  .visual .txt-box .txt {font-size: 2.8vw; font-weight: 400; line-height: 1.5; letter-spacing: -0.11vw; color: var(--gray_6);}
  .visual .img-box {max-width: 52vw; width: 100%; height: auto; margin: 0 auto;}
  .visual .img-box img {width: 100%; height: auto;}

  /**** style *****/
  .stamp_list {position: relative; width: 100%; height: 0vw 0vw 48.4vw; padding: 0vw 6vw 10vw; box-sizing: border-box; background: var(--wt); box-shadow: 0vw 0.8vw 6vw 0vw 0vw 0vw 0vw 0.02vw; border-radius: 8vw 8vw 0vw 0vw; overflow: auto; overflow-x: hidden;}
  .stamp_list:before {position: sticky; top: 0; content: ''; display: block; width: 100%; height: 10vw; background: var(--wt); z-index: 5;}
  .stamp_list::-webkit-scrollbar,
  .stamp_list::-webkit-scrollbar-thumb,
  .stamp_list::-webkit-scrollbar-track {display:none;}
  .stamp_tit {display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 8vw; background: var(--wt); position: sticky; top: 10vw; z-index: 5;}
  .stamp_tit .txt-box {}
  .stamp_tit .txt-box .tit {margin-bottom: 1.6vw; font-size: 4vw; font-weight: bold; line-height: 1; letter-spacing: -0.08vw; color: var(--black_3);}
  .stamp_tit .txt-box .sub {font-size: 2.4vw; font-weight: 400; line-height: 1; letter-spacing: -0.05vw; color: var(--gray_6);}
  .select_box {}
  .select_box select {width: 36vw; height: 8vw; padding: 0vw 2.4vw; box-sizing: border-box; border: 0.2vw 0vw 0vw; border-radius: 0.8vw; appearance: none; background: 0vw 0vw 0vw 2.4vw 10vw; background-size: 2vw 1.2vw; font-size: 2.8vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9);}
  .stamp_list .stamp_item {width: 100%; height: auto; padding-bottom: 9vw; margin-bottom: 9vw; border-bottom: 0.2vw 0vw 0vw;}
  .stamp_list .stamp_item:last-of-type {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;}
  .stamp_list .stamp_item ul {display: flex; align-items: center; flex-wrap: wrap; gap: 4.4vw 0vw; margin: 0vw -1vw; text-align: center;}
  .stamp_list .stamp_item ul li {width: calc(100% / 5); height: auto; aspect-ratio: 1/1; padding: 0vw 1vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li .child-box {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 100%; z-index: 1; border: 0.6vw 0vw 0vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li .child-box:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 0vw 0vw 1.4vw; height: auto; aspect-ratio: 1/1;  background: url(./../img/stamp_dashed2.png)no-repeat 50% 50%; background-size: cover; z-index: -1;}
  .stamp_list .stamp_item ul li .child-box .num {font-size: 4vw; font-weight: 500; line-height: 1; letter-spacing: -0.08vw; color: var(--gray_9);}
  .stamp_list .stamp_item ul li.stamp_c .child-box {border: 0.6vw 0vw 0vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li.stamp_c .child-box:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 0vw 0vw 1.4vw; height: auto; aspect-ratio: 1/1; background: url(./../img/stamp_dashed.png)no-repeat 50% 50%; background-size: cover; z-index: -1;}
  .stamp_list .stamp_item ul li.stamp_c .child-box .img-box {width: 0vw 0vw 3.6vw; height: auto;}
  .stamp_list .stamp_item ul li.stamp_c .child-box .img-box img {width: 100%; height: auto;}
  .stamp_list .stamp_item ul li.stamp_c .child-box {}
  .stamp_list .stamp_item ul li.stamp_c .child-box .img-box {}
  .stamp_list .stamp_item ul li.stamp_c .child-box .img-box img {}
  .stamp_list .stamp_item ul li.event .child-box {border: 0.6vw 0vw 0vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li.event .child-box:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 0vw 0vw 1.4vw; height: auto; aspect-ratio: 1/1;  background: url(./../img/stamp_dashed2.png)no-repeat 50% 50%; background-size: cover; z-index: -1;}
  .stamp_list .stamp_item ul li.event .child-box .txt {font-size: 2.8vw; font-weight: 600; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9);}
  .stamp_list .stamp_item ul li.available .child-box {flex-flow: column; gap: 0.8vw; border: 0.6vw 0vw 0vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li.available .child-box:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 0vw 0vw 1.4vw; height: auto; aspect-ratio: 1/1;  background: url(./../img/stamp_dashed3.png)no-repeat 50% 50%; background-size: cover; z-index: -1;}
  .stamp_list .stamp_item ul li.available .child-box .img-box2 {width: 4vw; height: auto;}
  .stamp_list .stamp_item ul li.available .child-box .img-box2 img {width: 100%; height: auto;}
  .stamp_list .stamp_item ul li.available .child-box .txt {font-size: 2.8vw; font-weight: 600; line-height: 1; letter-spacing: -0.06vw; color: var(--pr);}
  .stamp_list .stamp_item ul li.available .child-box .state {position: absolute; bottom: -2.2vw; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 12vw; height: 4.4vw; border-radius: 12vw; background: var(--pr); font-size: 2.4vw; font-weight: bold; line-height: 1; letter-spacing: -0.05vw; color: var(--wt);}
  .stamp_list .stamp_item ul li.completion .child-box {flex-flow: column; gap: 0.8vw; border: 0.6vw 0vw 0vw; box-sizing: border-box;}
  .stamp_list .stamp_item ul li.completion .child-box:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 0vw 0vw 1.4vw; height: auto; aspect-ratio: 1/1;  background: url(./../img/stamp_dashed2.png)no-repeat 50% 50%; background-size: cover; z-index: -1;}
  .stamp_list .stamp_item ul li.completion .child-box .txt {font-size: 2.8vw; font-weight: 600; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_a6);}
  .stamp_list .stamp_item ul li.completion .child-box .state {position: absolute; bottom: -2.2vw; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 12vw; height: 4.4vw; border-radius: 12vw; background: var(--gray_a6); font-size: 2.4vw; font-weight: bold; line-height: 1; letter-spacing: -0.05vw; color: var(--wt);}
  /* coupon_list */
  .coupon_list {width: 100%; height: auto;}
  .coupon_list ul {display: flex; flex-flow: column; gap: 3vw;}
  .coupon_list ul li {width: 100%; height: auto; cursor: pointer;}
  .coupon_list ul li .child-box {width: 100%; height: auto; padding: 5vw 4vw; box-sizing: border-box; background: var(--wt); border-radius: 1.6vw;}
  .coupon_list ul li .child-box .d-flex {display: flex; align-items: center; justify-content: space-between; gap: 1vw;}
  .coupon_list ul li .child-box .d-flex .txt-box {}
  .coupon_list ul li .child-box .d-flex .txt-box .tit {margin-bottom: 1.2vw; font-size: 3.6vw; font-weight: bold; line-height: 1; letter-spacing: -0.07vw; color: var(--black_3);}
  .coupon_list ul li .child-box .d-flex .txt-box .sub {margin-bottom: 1.2vw; font-size: 2.8vw; font-weight: 500; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_6);}
  .coupon_list ul li .child-box .d-flex .txt-box .sub2 {margin-bottom: 4vw; color: var(--blue);}
  .coupon_list ul li .child-box .d-flex .txt-box .sub3 {margin-bottom: 4vw; color: var(--red);}
  .coupon_list ul li .child-box .d-flex .txt-box .date {font-size: 2.4vw; font-weight: 500; line-height: 1; letter-spacing: -0.05vw; color: var(--gray_be);}
  .coupon_list ul li .child-box .d-flex .img-box {min-width: 14vw; width: 14vw; height: auto; aspect-ratio: 1/1;}
  .coupon_list ul li .child-box .d-flex .img-box2 {min-width: 10vw; width: 10vw;}
  .coupon_list ul li .child-box .d-flex .img-box img {width: 100%; height: 100%; object-fit: cover;}
  .coupon_list ul li .child-box .c_btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 7.2vw; border-radius: 0.8vw; background: var(--black_3); margin-top: 4vw; font-size: 2.4vw; font-weight: 500; line-height: 1; letter-spacing: -0.05vw; color: var(--wt);}
  /* cs_list */
    .cs_list {width: 100%; height: auto; margin-top: 4vw;;}
  .cs_list ul {display: flex; flex-flow: column; gap: 3vw;}
  .cs_list ul li {width: 100%; height: auto;}
  .cs_list ul li .child-box {display: flex; flex-flow: column; gap: 4vw; border-radius: 2.4vw; padding: 4vw 5vw; box-sizing: border-box; background: var(--wt);}
  .cs_list ul li .child-box .top {display: flex; align-items: center; justify-content: space-between;}
  .cs_list ul li .child-box .top .hp {font-size: 4vw; font-weight: 600; line-height: 1; letter-spacing: -0.08vw; color: var(--black_3);}
  .cs_list ul li .child-box .top .btns {display: flex; align-items: center; gap: 1.2vw;}
  .cs_list ul li .child-box .top .btns button {padding: 1.4vw 2.8vw; box-sizing: border-box; border-radius: 0.8vw; font-size: 2.8vw; font-weight: 500; line-height: 1; letter-spacing: -0.06vw;}
  .cs_list ul li .child-box .dl-box {width: 100%; height: auto;}
  .cs_list ul li .child-box .dl-box dl {display: flex; align-items: center; gap: 7.4vw; margin-bottom: 2.4vw;}
  .cs_list ul li .child-box .dl-box dl:last-of-type {margin-bottom: 0;}
  .cs_list ul li .child-box .dl-box dl dt {min-width: 16.4vw; width: 16.4vw;; font-size: 3.2vw; font-weight: 600; line-height: 1; letter-spacing: -0.06vw; color: var(--gray_9);}
  .cs_list ul li .child-box .dl-box dl dd {font-size: 3.2vw; font-weight: 400; line-height: 1; letter-spacing: -0.06vw; color: var(--black_3);}
}