:root {
    color-scheme: light only;
  }

  @media screen and (min-width: 960px) {
    .web-move-up {
      margin-top: -200px !important;
    }
  }

  /*hybrid-mobile web 시작*/
  @media screen and (min-width: 960px) {
    #wrapper:before {
      content: "";
      position: fixed;
      top: -1px;
      bottom: 0;
      width: 720px;
      border: 1px solid var(--light-semantic-border-tertiary, #e7eaee);
      z-index: 100;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      pointer-events: none;
      max-width: 720px;
    }

    aside.hw {
      display: block !important;
      position: fixed;
      max-width: 720px;
      width: 100%;
      left: 50%;
      margin-left: 300px;
      top: 50%;
      margin-top: -160px;
    }

    aside.hw > div {
      width: 168px;
    }
    aside.hw > div > span {
      display: block;
      width: 82px;
      height: 82px;
      background: url(../../image/mobile/icon_app_icon.png) no-repeat 0 0;
      background-size: contain;
      border: 1px solid #e7eaee;
      border-radius: 16px;
      margin: 0 auto;
    }
    aside.hw > div > p {
      font-size: 20px;
      color: #1e2229;
      text-align: center;
      font-weight: 700;
      margin-top: 24px;
    }
    aside.hw > ul {
      display: block;
      width: 168px;
      margin-top: 24px;
    }
    aside.hw > ul > li {
      display: block;
      width: 100%;
      height: 52px;
      border: 1px solid #e7eaee;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
    }
    aside.hw > ul > li:hover {
      border: 1px solid #d8dde2;
      box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.08);
    }
    aside.hw > ul > li > a {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
    }
    aside.hw > ul > li > a > span.apple {
      width: 32px;
      height: 32px;
      background: url(../../image/mobile/icon_store_apple.png) no-repeat 0 0;
      background-size: contain;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    aside.hw > ul > li > a > span.google {
      width: 32px;
      height: 32px;
      background: url(../../image/mobile/icon_store_google.png) no-repeat 0 0;
      background-size: contain;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    aside.hw > ul > li > a > p {
      width: calc(100% - 52px);
      position: absolute;
      text-align: center;
      top: 8px;
      left: 40px;
    }
    aside.hw > ul > li > a > p > strong {
      font-size: 16px;
      font-weight: 800;
      color: #1e2229;
      display: block;
    }
    aside.hw > ul > li > a > p > em {
      font-size: 11px;
      font-weight: 400;
      color: #353c46;
      display: block;
      margin-top: 2px;
    }
  }
  /*hybrid-mobile web 끝*/

  /*======================================
  1. 공통 요소 영역 (헤더/푸터/퀵메뉴 등)
  ======================================*/
  html {
    width: 100%;
  }
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  legend,
  .blind,
  caption {
    position: absolute;
    top: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
  }
  img {
    vertical-align: middle;
    max-width: 100%;
    display: inline;
  }
  hr {
    border: 0;
    border-top: 1px solid rgba(30, 34, 41, 0.04);
    margin: 16px 0;
  }
  hr.c8 {
    border-top: 1px solid rgba(30, 34, 41, 0.08);
  }
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  label {
    cursor: pointer;
  }

  #sb-site {
    width: 100%;
  }
  #wrapper {
    position: relative;
    max-width: 720px;
    min-height: 1000px;
    margin: 0 auto;
    padding: 48px 0;
    overflow: hidden;
    background-color: #fff;
  }

  #content {
    width: 100%;
    min-height: 300px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  #content > .inner-wrap {
  }

  #snb {
    display: none;
  }

  /* 헤더 */
  #header {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    max-width: 720px;
    height: 48px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    background: var(--Light-Semantic-Background, #fff);
  }

  #header.active {
    border-bottom: 1px solid rgba(30, 34, 41, 0.08) !important;
  }
  #header .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4px;
  }
  #header .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 4px;
  }
  #header > h1 {
    display: none;
    width: 180px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #header > h1 a {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../../image/mobile/logo_navigation_m.png) no-repeat center
      center;
    background-size: contain;
    text-indent: -5000px;
  }
  #header > h1.active {
    display: inline-block;
  }
  #header .back {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_arrow_left.png) center center
      no-repeat;
    background-size: 28px;
    text-indent: -5000px;
    margin-top: 0;
    opacity: 1;
  }
  #header .back.not {
    display: none;
  }
  /* search */
  #header .search {
    position: relative;
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_search.png) no-repeat center center;
    background-size: 28px;
  }
  /*notification*/
  #header .notification {
    position: relative;
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_notification.png) no-repeat center
      center;
    background-size: 28px;
  }
  #header .notification.new:after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    width: 5px;
    height: 5px;
    padding: 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--Red, #fe6060);
  }
  /*set*/
  #header .set {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_setting_gear.png) no-repeat center
      center;
    background-size: 28px;
  }

  #header .item-view-more {
    display: none;
    position: relative;
  }
  #header .item-view-more > button {
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: 24px;
  }
  #header .item-view-more li button {
    display: flex;
    padding: 8px 16px !important;
    width: 100%;
  }
  #header .item-view-more > ul {
    display: none;
    position: absolute;
    top: 34px;
    right: 8px;
    z-index: 10;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  #header .item-view-more.active > ul {
    display: block;
  }
  #header .item-view-more > ul > li {
    color: var(--light-semantic-text-primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  #header .item-view-more > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  #header .item-view-more .tit {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 8px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  #header .item-view-more .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  #header .item-view-more > ul > li button {
    display: flex;
    padding: 10px 16px;
    width: 100%;
  }

  /* home */
  #header .home {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_home_v2.png) no-repeat center
      center;
    background-size: 28px;
  }

  /* cart */
  #header .cart {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_shopping_bag.png) no-repeat center
      center;
    background-size: 28px;
  }

  /* menu */
  #header .menu {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_menu.png) no-repeat center center;
    background-size: 28px;
  }

  /* tel */
  #header .tel {
    display: none;
    width: 40px;
    height: 40px;
  }
  #header .tel span {
    width: 28px;
    height: 28px;
    background: url(../../image/component/icon_call_v2.png) no-repeat 0 0;
    background-size: contain;
  }
  body.active-tel #header .tel {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* page-title */
  #header .page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.048px;
  }

  /* menu-bar */
  #header .menu-bar {
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_menu.png) no-repeat center center;
    background-size: 28px;
  }

  /* mypage */
  #header .mypage {
    display: none;
    width: 28px;
    height: 28px;
    background: url(../../image/component/icon_profile.png) no-repeat center
      center;
    background-size: 28px;
  }

  /* share */
  #header .share {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_upload.png) no-repeat center center;
    background-size: 28px;
  }

  /* upload */
  #header .upload {
    display: none;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_upload.png) no-repeat center center;
    background-size: 28px;
  }

  /* notification-set */
  #header .notification-set {
    position: relative;
    display: none;
  }
  #header .notification-set > button {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: 28px;
    cursor: pointer;
  }
  #header .notification-set > ul {
    display: none;
    position: absolute;
    top: 36px;
    right: 16px;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  #header .notification-set.active > ul {
    display: block;
  }
  #header .notification-set > ul > li {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  #header .notification-set > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  #header .notification-set .tit {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #8f95a1;
  }
  #header .notification-set .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  #header .notification-set input {
    display: none;
  }
  #header .notification-set label {
    display: flex;
    padding: 10px 16px;
    width: 100%;
    cursor: pointer;
  }

  /* chat-set */
  .chat-set {
    position: relative;
    display: none;
    margin: 0 4px 0 0;
  }
  .chat-set > button {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: 28px;
    cursor: pointer;
  }
  .chat-set > ul {
    display: none;
    position: absolute;
    top: 56px;
    right: 4px;
    z-index: 10;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  .chat-set.active > ul {
    display: block;
  }
  .chat-set > ul > li {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .chat-set > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  .chat-set .tit {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 8px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .chat-set .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .chat-set button {
    display: flex;
    padding: 10px 16px;
    width: 100%;
  }

  /* estimate-set */
  .estimate-set {
    position: relative;
    display: none;
    margin: 0 4px 0 0;
  }
  body.active-estimate-set .estimate-set {
    display: inline-block;
  }
  .estimate-set > button {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: 28px;
    cursor: pointer;
  }
  .estimate-set > ul {
    display: none;
    position: absolute;
    top: 38px;
    right: 4px;
    z-index: 10;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  .estimate-set.active > ul {
    display: block;
  }
  .estimate-set > ul > li {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .estimate-set > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  .estimate-set .tit {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 8px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .estimate-set .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .estimate-set button {
    display: flex;
    padding: 10px 16px;
    width: 100%;
  }

  /* estimate-set */
  .estimate-request-set {
    position: relative;
    display: none;
    margin: 0 4px 0 0;
  }
  body.active-estimate-request-set .estimate-request-set {
    display: inline-block;
  }
  .estimate-request-set > button {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: 28px;
    cursor: pointer;
  }
  .estimate-request-set > ul {
    display: none;
    position: absolute;
    top: 38px;
    right: 4px;
    z-index: 10;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  .estimate-request-set.active > ul {
    display: block;
  }
  .estimate-request-set > ul > li {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .estimate-request-set > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  .estimate-request-set .tit {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 8px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .estimate-request-set .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .estimate-request-set button {
    display: flex;
    padding: 10px 16px;
    width: 100%;
  }

  /* 푸터 */
  #footer {
    display: none;
    margin: 0 16px 80px;
  }
  #footer .toggle-btn-fnb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 16px;
  }
  #footer .toggle-btn {
    display: block;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  #footer .toggle-btn:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(../../image/component/icon_arrow_down.png) no-repeat left top;
    background-size: cover;
    margin: -3px 0 0 2px;
    opacity: 0.5;
  }
  #footer.active .toggle-btn:after {
    background: url(../../image/component/icon_arrow_up.png) no-repeat left top;
    background-size: cover;
  }
  #footer .fnb a {
    margin: 0 0 0 16px;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  #footer .fnb a strong {
    color: #686e7b;
  }
  #footer .toggle-box {
    transition: height 0ms 400ms, opacity 400ms 0ms;
    overflow: hidden;
    height: 0;
    opacity: 0;
  }
  #footer.active .toggle-box {
    height: auto;
    opacity: 1;
    margin: 0 0 16px;
  }
  #footer .toggle-box ul {
    padding: 16px;
    border-radius: 8px;
    background: var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  #footer .toggle-box li {
    display: flex;
  }
  #footer .toggle-box li + li {
    margin: 8px 0 0;
  }

  #footer .toggle-box .tit {
    width: 120px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  #footer .toggle-box .con {
    width: calc(100% - 120px);
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  #footer .copyright {
    margin: 0 0 16px;
    color: var(--Text-Sub-Tertiary, #bac1cb);
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }

  /* 하단 네비게이션 바 */
  .footer-fixed-menu {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    max-width: 720px;
    background-color: #fff;
    border-top: 1px solid #d8dde2;
  }
  .footer-fixed-menu ul {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .footer-fixed-menu li {
    display: table-cell;
    vertical-align: middle;
    height: 49px;
    text-align: center;
  }
  .footer-fixed-menu li a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 100%;
    padding: 0;
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .footer-fixed-menu li a.active {
    font-weight: 700;
    color: var(--Text-Secondary, #353c46);
  }
  .footer-fixed-menu li a:before {
    content: "";
    display: block;
    margin: 3px auto;
    width: 24px;
    height: 24px;
    background-size: contain !important;
  }
  .footer-fixed-menu li.n1 a:before {
    background: url(../../image/mobile/gnb_1.png) no-repeat center center;
  }
  .footer-fixed-menu li.n2 a:before {
    background: url(../../image/mobile/gnb_2.png) no-repeat center center;
  }
  .footer-fixed-menu li.n3 a:before {
    background: url(../../image/mobile/gnb_3.png) no-repeat center center;
  }
  .footer-fixed-menu li.n4 a:before {
    background: url(../../image/mobile/gnb_4.png) no-repeat center center;
  }
  .footer-fixed-menu li.n5 a:before {
    background: url(../../image/mobile/gnb_5.png) no-repeat center center;
  }
  .footer-fixed-menu li.n6 a:before {
    background: url(../../image/mobile/gnb_6.png) no-repeat center center;
  }
  .footer-fixed-menu li.n7 a:before {
    background: url(../../image/mobile/gnb_7.png) no-repeat center center;
  }
  .footer-fixed-menu li.n32 a:before {
    background: url(../../image/mobile/gnb_32.png) no-repeat center center;
  }
  .footer-fixed-menu li.n53 a:before {
    background: url(../../image/mobile/gnb_53.png) no-repeat center center;
  }
  .footer-fixed-menu li.n1 a.active:before {
    background: url(../../image/mobile/gnb_1_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n2 a.active:before {
    background: url(../../image/mobile/gnb_2_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n3 a.active:before {
    background: url(../../image/mobile/gnb_3_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n4 a.active:before {
    background: url(../../image/mobile/gnb_4_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n5 a.active:before {
    background: url(../../image/mobile/gnb_5_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n6 a.active:before {
    background: url(../../image/mobile/gnb_6_active.png) no-repeat center center;
  }
  .footer-fixed-menu li.n53 a.active:before {
    background: url(../../image/mobile/gnb_53_active.png) no-repeat center center;
  }

  /* label-radio-checkbox */
  .label-radio-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .label-radio-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .label-radio-checkbox label input {
    border-radius: 50%;
  }

  /*========== 컨텐츠 시작 ==========*/

  .border-top {
    border-top: 1px solid rgba(30, 34, 41, 0.08);
  }
  .border-bottom {
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
  }
  .border-bottom-8 {
    border-bottom: 8px solid rgba(30, 34, 41, 0.04);
  }

  .inactive-border-bottom {
    border-bottom: 0 !important;
  }
  .inactive-border {
    border: 0 !important;
  }

  .bgwhite {
    background-color: #fff;
  }

  textarea.input-regular {
    height: auto;
    line-height: 130%;
    padding: 12px 16px;
  }
  textarea.input-medium {
    padding: 16px;
    height: auto;
    color: var(--Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  textarea.input-medium:disabled {
    background-color: #f3f5f6 !important;
  }

  textarea[readonly] {
    background: var(
      --Light-Semantic-Background-Lowered-Secondary,
      #f2f2f2
    ) !important;
  }

  .textarea-wrap {
    border-radius: 8px;
    border: 1px solid #d8dde2;
    background: #f3f5f6;
    padding: 16px 8px;
  }
  .textarea-wrap textarea.input-regular {
    padding: 0 8px;
    border-radius: 0;
    border: 0;
    background: #f3f5f6;
  }

  /* help-text */
  .help-text {
    margin: 8px 0 0;
    padding-left: 18px;
    position: relative;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #686e7b;
  }
  .help-text p {
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #686e7b;
  }
  .help-text:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(../../image/component/icon_information_circled.png) no-repeat !important;
    background-size: contain !important;
  }
  .help-text.icon {
    padding-left: 18px;
  }
  .help-text.icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(../../image/component/icon_information_circled_red.png)
      no-repeat !important;
    background-size: contain !important;
  }
  /* gray */
  .help-text.gray {
    color: #686e7b !important;
  }
  .help-text.icon.gray:before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../../image/component/icon_information_circled.png) no-repeat !important;
    background-size: contain !important;
  }
  .help-text a {
    display: inline-flex;
    margin: 0 0 0 6px;
  }
  .help-text + .help-text {
    margin: 4px 0 0;
  }
  /* red */
  .help-text.red {
    color: ff223c !important;
  }
  .help-text.icon.red {
    background: url(../../image/component/icon_information_circled_red.png)
      no-repeat !important;
    background-size: contain !important;
  }

  /* help-text-li */
  .help-text-li > li {
    margin: 8px 0 0;
    display: inline-flex;
    gap: 4px;
    color: var(--Info-Text, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  .ellipsis1 {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .ellipsis12 {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .ellipsis3 {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .ellipsis4 {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .ellipsis5 {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .align-left {
    text-align: left !important;
  }
  .align-right {
    text-align: right !important;
  }
  .align-center {
    text-align: center !important;
  }

  /* img-list */
  .img-list {
    margin: 16px 0 0;
  }
  .img-list > ul {
    overflow: hidden;
  }
  .img-list > ul > li {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: url(../../image/mobile/no_image_type_a.png) center center
      no-repeat;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .img-list > ul > li .img-popup {
    margin: 0;
    padding: 0;
  }
  .img-list > ul > li .img-popup .inner-wrap {
    margin: 0;
    padding: 0;
  }
  .img-list > ul > li img {
    width: 80px;
    height: 80px;
  }

  /*인덱스팝업*/
  .index-popup {
    min-width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
  }
  .index-popup .btn-split2 {
    width: 50% !important;
  }
  .index-popup .btn-split2.btn-medium {
    border: 0 !important;
    border-top: 1px solid #e7eaee !important;
    border-radius: 0 !important;
  }
  .index-popup .btn-split2.btn-medium + .btn-split2.btn-medium {
    border-left: 1px solid #e7eaee !important;
  }
  .index-popup .popup-content img {
    width: 100%;
  }

  /*temp-content*/
  .temp-content {
    position: fixed;
    top: 48px;
    width: 100%;
    max-width: 720px;
    height: calc(100% - 48px);
    background: #fff;
    padding: 16px;
    overflow: scroll;
  }
  .temp-content > div {
    height: 100%;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .temp-content.type-b {
    top: 92px;
    height: calc(100% - 100px);
  }
  .temp-content.static {
    position: static;
    padding-top: 0;
  }

  /* cardinfo */
  .cardinfo {
    display: block;
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background-Lower-Secondary, #f8f9fa);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cardinfo .tit {
    display: flex;
    align-items: center;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    white-space: normal;
    word-wrap: break-word;
  }
  .cardinfo .tit span {
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Border-Tertiary, #0096E4);
    background: var(--Background, #fff);
    margin: 0 8px 0 0;
    color: var(--Text-Sub-Primary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .cardinfo .tit .cardname {
    margin: 2px 0 0;
    display: block;
    font-size: 17px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.44px;
    text-align: left;
    color: #5c5c5c;
  }
  .cardinfo .con {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .cardinfo .btn-insert2,
  .cardinfo .btn-changeNadd {
    display: flex;
    height: 28px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid var(--Border-Secondary, #d8dde2);
    background: var(--Background, #fff);
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  /* cardinfo-more */
  .cardinfo-more {
    position: relative;
    margin: -24px 0 0;
  }
  .cardinfo-more > button {
    display: inline-block;
    width: 24px !important;
    height: 24px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      center center;
    background-size: contain;
    cursor: pointer;
    padding: 0 !important;
  }
  .cardinfo-more > ul {
    display: none;
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 1;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  }
  .cardinfo-more.active > ul {
    display: block;
  }
  .cardinfo-more > ul > li {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .cardinfo-more > ul > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }
  .cardinfo-more .tit {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
  }
  .cardinfo-more .tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url() no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .cardinfo-more button {
    display: flex;
    padding: 8px 16px;
    width: 100%;
  }

  /*swiper*/
  .slider .swiper-container {
    height: auto;
  }
  .swiper-slide {
    box-sizing: border-box;
  }
  .swiper-container .swiper-slide img {
    width: 100%;
  }

  /* main-visual */
  .main-visual .swiper-slide a {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 64%;
    height: 0;
    overflow: hidden;
  }
  .main-visual .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper-container-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-custom {
    bottom: 12px !important;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    opacity: 0.4;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
  }
  .swiper-container-horizontal
    > .swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 2px;
  }
  .swiper-pagination {
    max-width: 720px;
    width: 100%;
  }
  .swiper-pagination.swiper-pagination-fraction {
    font-weight: 300;
    border-radius: 50vh;
    font-size: 11px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%) !important;
    margin: 0 auto;
    bottom: 16px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    display: inline-block !important;
    background: rgba(0, 0, 0, 0.4);
  }
  .swiper-pagination.swiper-pagination-fraction > span {
    font-size: 11px;
  }
  .swiper-pagination-total {
    color: var(--light-semantic-fill-reverse-tertiery, #d8dde2) !important;
  }
  .swiper-pagination-fraction {
    bottom: 16px !important;
  }

  /* list-empty */
  .list-empty {
    padding: 126px 0;
    text-align: center;
  }
  .list-empty img {
    margin: 0 auto;
    width: 72px;
    height: 72px;
  }
  .list-empty h1 {
    margin: 16px 0 0;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 127.273% */
    letter-spacing: -0.066px;
  }
  .list-empty div {
    margin: 8px 0 0;
    color: var(--Text-Sub-Tertiary, #bac1cb);
    text-align: center;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .list-empty.small {
    padding: 48px 0 60px;
  }
  .list-empty.large {
    padding: 200px 0;
  }

  /* result-area */
  .result-area {
    padding: 24px 16px 0;
  }
  .result-area.bg {
    background: #fff url(../../image/mobile/icon_confetti.png) no-repeat center
      32px;
    background-size: contain;
  }
  .result-area.medium {
    padding: 110px 16px 0;
  }
  .result-area.large {
    width: 100%;
    padding: 169px 16px;
  }
  .result-area > img {
    margin: 0 auto;
    width: 72px;
    height: 72px;
  }
  .result-area .logo {
    display: block;
    margin: 24px auto 120px;
    width: 300px;
    height: 100px;
  }
  .result-area .logo img {
    width: 100%;
    height: 100%;
  }
  .result-area h1 {
    margin: 8px auto 0;
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .result-area h1 p {
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .result-area .r-guide {
    margin: 12px auto 0;
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .result-area .r-guide p {
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .result-area p strong {
    font-weight: bold;
    color: #8f95a1;
  }
  .result-area .btn-large {
    display: block;
    width: 100%;
    margin: 40px auto 0;
  }
  .result-area .text-decoration {
    font-size: 11px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: -0.33px;
    text-align: center;
    color: #bac1cb;
    margin-top: 16px;
    display: block;
    text-decoration: underline;
  }
  .result-area .BTT > ul {
    padding: 0;
  }

  /*board-list-area*/
  .board-list-area {
    background: #fff;
    padding: 0 16px;
  }
  .board-list-area > .board-list-header {
    clear: both;
  }
  .board-list-area ul {
    display: table;
    width: 100%;
  }
  .board-list-area ul li {
    display: table-cell;
    vertical-align: middle;
  }
  .board-list-area ul li.num {
    width: 12%;
  }
  .board-list-area ul li.chk {
    width: 12%;
  }
  .board-list-area ul li.cate {
    width: 16%;
  }
  .board-list-area .board-list-header ul li {
    padding: 10px 0;
    text-align: center;
    color: var(--light-semantic-text-sub-primary, #666);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    background: #f8f9fa;
  }
  .board-list-area .board-list-header > div {
    width: 100%;
    display: block;
    height: auto;
    background: #f8f9fa;
    padding: 0;
    border-top: 1px solid #d8dde2;
  }
  .board-list-content > div {
    position: relative;
    width: 100%;
    display: block;
    height: auto;
    background: #fff;
    padding: 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .board-list-content > div > ul > li {
    padding: 8px 0;
    height: 50px;
    font-size: 12px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: -0.33px;
    text-align: center;
    color: #666;
  }
  .board-list-content > div > ul > li.subject {
    padding-left: 4px;
    display: flex;
    align-items: center;
  }
  .board-list-content > div > ul > li.subject p {
    color: var(--light-semantic-text-primary, #353c46);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.045px;
    max-width: 95%;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .board-list-content > div > ul > li.subject .cate {
    display: inline-flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Background-Lower-Primary, #f3f5f6);
    background: var(--Border-Quaternary, #f3f5f6);
    color: var(--Text-Sub-Primary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .board-list-content > div > ul > li.subject > a .comn {
    float: left;
    font-size: 11px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: -0.55px;
    text-align: left;
    color: #00548b;
    margin: 0 0 0 8px;
  }
  .board-list-content > div > ul > li.status {
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .board-list-content > div > ul > li.status .btn-small {
    margin: 4px auto 0;
    display: block;
    color: var(--light-semantic-text-primary, #353c46);
  }
  .board-list-content > div > ul > li.term {
    text-align: right;
    color: var(--light-semantic-text-sub-primary, #666);
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .board-list-content > div > ul > li.term span {
    display: block;
    color: #bac1cb;
  }
  .board-list-content > div.notice .num {
    color: var(--light-semantic-text-primary, #353c46);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
  }
  .board-list-content > div.notice ul > li.subject > a p {
    font-weight: 500;
  }
  .board-list-area .btn-group-area {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0;
  }

  /* board-file */
  .board-file {
    margin: 16px 0 0;
  }
  .board-file a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 8px;
    color: var(--Light-Semantic-Text-Secondary, #464646);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    border-radius: 8px;
    border: 1px solid var(--Light-Basic-Gray-150, #f2f2f2);
    background: var(--Light-Basic-Gray-150, #f2f2f2);
  }
  .board-file a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../image/mobile/icon_download.png) no-repeat center center;
    background-size: contain;
  }
  .board-file + .board-file {
    margin: 8px 0 0;
  }

  /* 게시판형 faq */
  .board-list-content .accordion {
    width: auto;
  }
  .board-list-content .accordion > ul > li {
    height: auto;
    position: relative;
    background: #fff;
    padding: 16px;
    vertical-align: top;
  }
  .board-list-content .accordion > ul > li p {
    width: calc(100% - 32px);
    color: var(--light-semantic-text-primary, #353c46);
    text-align: left;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.045px;
    text-decoration: none;
    cursor: pointer;
    display: -webkit-box;
    line-height: 1.7em;
    height: 1.7em;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .board-list-content .accordion .subject > div {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .board-list-content .accordion .subject .status {
    margin-right: 6px;
  }
  .board-list-content .accordion .num {
    width: 10%;
    color: var(--light-semantic-text-primary, #353c46);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
    padding-top: 20px;
  }
  .board-list-content .accordion > ul > li p:after {
    display: block;
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    top: 16px;
    margin-top: 0;
    background: url(../../image/component/icon_arrow_down.png) no-repeat 0 0;
    background-size: contain;
    opacity: 1;
  }
  .board-list-content .accordion .accordion-content {
    background: #fff;
    width: 100%;
    transition: height 0ms 400ms, opacity 400ms 0ms;
    overflow: hidden;
    height: 0;
    min-height: 0;
    opacity: 0;
  }
  .board-list-content .accordion .date {
    margin: 8px 0 0;
    display: flex;
    justify-content: flex-start;
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .board-list-content .accordion.active > ul > li p {
    height: auto;
    -webkit-line-clamp: initial;
  }
  .board-list-content .accordion.active .accordion-content {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background-color: #f8f9fa;
    height: auto;
    opacity: 1;
  }
  .board-list-content .accordion.active > ul > li p:after {
    background: url(../../image/component/icon_arrow_up.png) no-repeat 0 0;
    background-size: contain;
  }
  .board-list-content .accordion .accordion-content {
    position: relative;
    background-color: #fff;
    min-height: auto;
  }
  .board-list-content .accordion .accordion-content p {
    padding: 16px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .board-list-content .accordion .accordion-content p strong {
    display: block;
    margin: 0 0 16px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .board-list-content .accordion .accordion-content img {
    display: block;
    max-width: 100%;
    margin: 16px 0;
    border-radius: 8px;
  }
  .board-list-content .accordion .category {
    display: inline-flex;
    padding: 4px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--Light-Basic-Gray-150, #f2f2f2);
    background: var(--Light-Basic-Gray-150, #f2f2f2);
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }

  /* board-list */
  .board-list > ul > li {
    position: relative;
    border-bottom: 1px solid #e7eaee;
    display: flex;
    align-items: center;
    padding: 16px;
  }
  .board-list > ul > li.out:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .board-list a {
    position: relative;
    display: block;
    width: 100%;
    /* background: url(../../image/component/icon_arrow_right.png) no-repeat right
   center;
   background-size: 20px;
   padding: 0 32px 0 0; */
  }
  .board-list.inactive-arrow a {
    background: url();
    padding: 0;
  }
  .board-list .datetime {
    font-size: 12px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: right;
    color: #bac1cb;
  }
  .board-list .subject {
    color: var(--light-semantic-text-primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .board-list .date-status {
    display: flex;
    align-items: center;
    margin: 4px 0 0;
  }
  .board-list .date-status .date {
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-list .date-status span + span {
    margin-left: 8px;
  }
  .board-list .date-status .status {
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Background-Lower-Primary, #f3f5f6);
    background: var(--Border-Quaternary, #f3f5f6);
    color: var(--Text-Sub-Primary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-list .date-status .status.complete {
    border-radius: 4px;
    border: 1px solid var(--Blue-Lightened, #e5effd);
    background: var(--Blue-Lightened, #e5effd);
    color: var(--Blue-Darkened, #2876e7);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    color: var(--Blue-Darkened, #2876e7);
  }
  .board-list + .btn-group-area {
    padding: 32px 16px 0;
  }
  .board-list .notice {
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    border: 1px solid var(--Background-Lower-Primary, #f3f5f6);
    background: var(--Border-Quaternary, #f3f5f6);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  /* .board-list .notice:before {
   content: "";
   width: 16px;
   height: 16px;
   background: url(../../image/component/icon_notice_bell.png) no-repeat;
   background-size: contain;
   margin: 0 0 0 -4px;
  } */
  .board-list > ul > li.noti {
    background: var(--Light-Basic-Gray-100, #f3f5f6);
    padding: 10px 12px;
  }
  .board-list > ul > li.event {
    background: var(--Light-Basic-Gray-100, #f3f5f6);
    padding: 10px 12px;
  }
  .board-list > ul > li.noti a,
  .board-list > ul > li.event a {
    background: url();
    padding-right: 16px;
    display: flex;
    align-items: center;
  }
  .board-list > ul > li.noti a span {
    margin: 0 8px 0 0;
    width: 36px;
    padding: 4px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--light-semantic-fill-reverse-secondary, #353c46);
    background: var(--light-semantic-fill-reverse-secondary, #353c46);
    color: var(--light-basic-white, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-list > ul > li.event a span {
    margin: 0 8px 0 0;
    width: 38px;
    padding: 4px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--Light-Pink, #fde6f2);
    background: var(--Light-Pink, #fde6f2);
    color: var(--Primary, #0096E4);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .board-list > ul > li.noti .subject,
  .board-list > ul > li.event .subject {
    width: 100%;
    font-size: 14px;
  }
  .board-list .parking {
    margin: 0 0 8px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
  }
  .board-list .cont {
    margin: 0 0 8px;
    color: var(--Light-Semantic-Text-Secondary, #464646);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  /*게시판 보기*/
  .board-view {
    background: #fff;
    padding: 0 16px;
    overflow: hidden;
  }
  .board-view .header {
    position: relative;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 16px 0;
  }
  .board-view .header .couple {
    margin: 0 0 8px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .board-view .header .cate {
    margin: 0 0 4px;
    color: var(--Primary, #b5936e);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .board-view .header h1 {
    color: var(--light-semantic-text-primary, #353c46);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
    word-break: break-all;
  }
  .board-view .header .info {
    margin: 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .board-view .header .info ul {
    display: flex;
    align-items: center;
  }
  .board-view .header .info li {
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    margin: 0 8px 0 0;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-view .header .info li.status.complete {
    height: 20px;
    padding: 0px 6px;
    border-radius: 4px;
    border: 1px solid var(--Blue-Lightened, #e5effd);
    background: var(--Blue-Lightened, #e5effd);
    color: var(--Blue-Darkened, #2876e7);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.03px;
    color: var(--Blue-Darkened, #2876e7);
  }
  .board-view .header .info li a {
    font-size: 11px;
    color: #8f95a1;
    text-decoration: underline;
  }
  .board-view .header .info li.secret {
    width: 18px;
    height: 16px;
    background: url(../../image/mobile/icon_secret.png) no-repeat center center;
    background-size: contain;
  }
  .board-view .header .info .name-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .board-view .header .info .name-btn .name {
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #909094;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-view .header .info .name-btn .btn-regular {
    height: 35px;
    line-height: 33px;
    margin-left: 8px;
  }
  .board-view .header .notice {
    margin: 0 4px 0 0;
    display: inline-flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    border: 1px solid var(--Background-Lower-Primary, #f3f5f6);
    background: var(--Border-Quaternary, #f3f5f6);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .board-view .header .info + .more-layer {
    position: absolute;
    bottom: 16px;
    right: 0;
  }

  .board-view .pndml {
    margin: 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .board-view .pndml .pimg-info {
    display: flex;
    align-items: center;
    width: calc(100% - 40px);
  }
  .board-view .pndml .pimg {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: url(../../image/component/bg_profile.png) no-repeat 0 0;
    background-size: contain;
  }
  .board-view .pndml .pndml-info {
    padding: 0 0 0 12px;
  }
  .board-view .pndml .name {
    margin: 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .board-view .pndml .date {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .board-view .pndml .date span {
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  .board-view .content {
    padding: 16px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    word-break: break-all;
  }
  .board-view .content.small {
    min-height: 100px;
  }
  .board-view .content img {
    display: block;
    width: 100%;
    border-radius: 8px;
  }
  .board-view .editor-input {
    color: var(--light-semantic-text-secondary, #353c46);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    letter-spacing: -0.042px;
    border: 0;
    padding: 0;
  }
  .board-view .img img {
    max-width: 100%;
    height: auto;
  }
  /* pimg-name-tit */
  .board-view .pimg-name-tit {
    display: flex;
    align-items: center;
    margin: 16px 0 0;
  }
  .board-view .pimg img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid var(--color-gray-200, #e7eaee);
    object-fit: cover;
  }
  /* name-tit-date */
  .board-view .name-tit-date {
    display: flex;
    flex-direction: column;
  }
  .board-view .name {
    margin: 0 0 0 12px;
    color: var(--color-gray-700, #353c46);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-view .tit {
    margin: 0 0 0 4px;
    color: var(--color-gray-700, #353c46);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-view .date {
    margin: 0 0 0 12px;
    color: var(--color-gray-600, #8f95a1);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }

  /*board-re*/
  .board-re {
    padding: 16px;
    border-radius: 12px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .board-re > h1 {
    display: flex;
    align-items: center;
    color: var(--light-semantic-text-secondary, #8f95a1);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.042px;
  }
  .board-re > h1 strong {
    margin: 0 8px 0 0;
    display: block;
    color: var(--light-semantic-text-sub-secondary, #464646);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-re > div {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    margin: 8px 0 0;
  }
  .board-re > div > p {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .board-re .answer {
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Blue, #2c81fb);
    background: var(--Blue, #2c81fb);
    color: var(--Text-Dark-Inverted, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    margin-right: 8px;
  }

  /* space-between-title */
  .space-between-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 16px 0;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
  }
  .space-between-title h4 {
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
    white-space: normal;
    word-wrap: break-word;
  }
  .space-between-title h4 img {
    width: 18px;
    height: 18px;
  }
  .space-between-title .right {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    text-align: right;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .space-between-title .right img {
    width: 16px;
    height: 16px;
  }
  .space-between-title .right select.input-small {
    width: 100px;
  }

  /* BTT */
  .BTT > .title {
    margin: 40px 16px 0;
    display: block;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }
  .BTT > .title:first-child {
    margin-top: 16px;
  }
  .BTT > .title.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .BTT > .title.space-between .right {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1e2229);
    text-align: right;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .BTT > .title.space-between .right img {
    width: 18px;
    height: 18px;
  }
  .BTT > .title .address {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .BTT .guide-txt {
    margin: 8px 16px 0;
    color: var(--Dark-Gray, #3f3f3d);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .BTT .guide-txt2 {
    margin: 8px 16px 0;
    color: var(--light-semantic-text-secondary, #464646);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .BTT > .title-center {
    color: var(--light-semantic-text-primary, #353c46);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.054px;
    padding: 28px 0 0;
  }
  .BTT > ul {
    background: #fff;
    padding: 0 16px;
    text-align: left;
  }
  .BTT > ul > li {
    margin: 24px 0 0;
  }
  .BTT > ul > li:first-child {
    margin-top: 16px;
  }
  .BTT > .title + ul > li:first-child {
    margin: 16px 0 0;
  }
  .BTT > ul > li > .tit {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.2px;
  }
  .BTT > ul > li > .tit.map-pin {
    align-items: center;
  }
  .BTT > ul > li > .tit.map-pin:before {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    background: url(../../image/mobile/icon_map_pin.png) no-repeat center center;
    background-size: contain;
  }
  .BTT > ul > li > .tit.law {
    align-items: center;
  }
  .BTT > ul > li > .tit.law:before {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    background: url(../../image/mobile/icon_law2.png) no-repeat center center;
    background-size: contain;
  }
  .BTT > ul > li > .tit.clock {
    align-items: center;
  }
  .BTT > ul > li > .tit.clock:before {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    background: url(../../image/mobile/icon_clock.png) no-repeat center center;
    background-size: contain;
  }
  .BTT > ul > li > .tit.required.space-between::after {
    display: none;
  }
  .BTT > ul > li > .tit.required.space-between > div {
    display: flex;
    align-items: center;
    font-weight: 600;
  }
  .BTT > ul > li > .tit.required.space-between > div::after {
    content: "";
    width: 3.7px;
    height: 3.7px;
    background-color: #ff223c;
    border-radius: 50%;
    margin: -3px 0 0 4px;
  }
  .BTT > ul > li > .icon-tit-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .BTT > ul > li > .icon-tit-btn > div {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .BTT > ul > li > .icon-tit-btn > div > img {
    width: 24px;
    height: 24px;
  }
  .BTT > ul > li > .icon-tit-btn > div > div {
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .BTT > ul > li > .icon-tit-btn .input-small {
    width: 120px;
  }
  .BTT > ul > li > .icon-tit-btn + .con + hr {
    margin-top: 24px !important;
  }
  .BTT > ul > li > .con {
    margin: 8px 0 0;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .BTT > ul > li > .con label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .BTT > ul > li > .con.space-between .unit-wrap {
    width: calc((100% - 24px) / 2);
  }
  .BTT > ul > li > .con .input-medium {
    width: 100%;
    border-radius: 8px;
  }
  .BTT > ul > li > .con .input-medium + textarea.input-medium {
    margin-top: 8px;
  }
  .BTT > ul > li > .con textarea.input-medium {
    font-size: 15px !important;
  }
  .BTT > ul > li > .con input[type="radio"],
  .BTT > ul > li > .con input[type="checkbox"] {
    margin: 0 4px 0 0;
  }
  .BTT .input-medium.btn-add {
    width: calc(100% - 74px) !important;
  }
  .BTT .input-medium.btn-add2 {
    width: calc(100% - 104px) !important;
  }
  .BTT .input-medium.btn-add + button {
    display: inline-flex;
    min-width: auto;
    width: 66px !important;
    margin-left: 8px;
    padding: 0 12px;
  }
  .BTT .input-medium.btn-add2 + button {
    display: inline-flex;
    min-width: auto;
    width: 96px !important;
    margin-left: 8px;
    padding: 0 12px;
  }
  .BTT .input-medium.btn-add3 + button {
    min-width: auto;
    width: 66px !important;
    margin-left: 8px;
    padding: 0 12px;
  }
  .BTT .input-medium.btn-add + button + .input-medium {
    margin: 8px 0 0;
  }
  /* input-btn */
  .BTT .input-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .BTT .input-btn .input-medium {
    min-width: auto !important;
    width: calc(100% - 56px) !important;
  }
  .BTT .input-btn .btn-medium {
    width: 48px;
    padding: 0;
  }
  .BTT .input-medium.unit-add {
    width: calc(100% - 32px);
  }
  .BTT .con textarea.input-medium {
    width: 100%;
    height: auto;
  }
  .BTT > ul > li > .con > label {
    margin: 8px 0 0;
    display: inline-block;
  }
  .BTT > ul > li > .con > label:first-child {
    margin: 0;
  }
  /* type-b */
  .BTT.type-b .title + ul {
    margin-top: 16px;
  }
  .BTT.type-b > ul {
    padding: 0 16px 16px;
    margin: 0;
  }
  .BTT.type-b > ul > li {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #fff;
    margin: 8px 0 0;
  }
  .BTT.type-b > ul > li > * {
    display: table-cell;
    vertical-align: top;
    text-align: left;
  }
  .BTT.type-b > ul > li .tit {
    width: 120px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .BTT.type-b > ul > li .con {
    margin-top: 0;
    width: calc(100% - 120px);
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    letter-spacing: -0.042px;
  }
  .BTT.type-b > ul.last {
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }

  .choose-payment-method {
    margin: 16px 16px 0;
  }
  .choose-payment-method label {
    color: var(--Text-Primary, #1E2229);
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 140% */
  letter-spacing: -0.045px;
  }

  /* Login */
  .login-area {
    background: #fff;
    padding: 16px 24px 0;
    text-align: center;
    overflow: hidden;
  }
  .login-area h1 {
    margin: 12px 0 0;
    color: #0096E4;
    text-align: center;
    font-family: Pretendard;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 121.739% */
    letter-spacing: -0.069px;
  }
  .login-area h1 span {
    color: var(--Primary-Darkened, #ea2a9d);
  }
  .login-area .union {
    margin: 0 auto 12px;
    width: 185px;
    height: 31.991px;
    padding: 6px 0 0;
    display: flex;
    align-items: flex-start;
    background: url(../../image/mobile/union.png) no-repeat 0 0;
    background-size: contain;
    color: var(--Primary, #0096E4);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .login-area .union img {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .login-area .guide-text {
    margin: 12px 0 40px;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.091px;
  }
  .login-area img {
    width: 300px;
    height: 100px;
    margin: 0 auto 16px;
  }
  .login-area .input-medium {
    width: 100%;
  }
  /* .login-area .input-medium.id {
   background: #fff url(../../image/component/icon_mypage_v3.png) no-repeat 12px
   center;
   background-size: 24px;
   padding-left: 48px;
  }
  .login-area .input-medium.pw {
   background: #fff url(../../image/component/icon_lock.png) no-repeat 12px
   center;
   background-size: 24px;
   padding-left: 48px;
  } */
  .login-area li + li {
    margin-top: 8px;
  }
  .login-area .btn-large {
    margin: 16px 0 0;
    width: 100%;
  }
  .login-area button[type="submit"] + .btn-medium {
    margin-top: 16px;
  }
  .login-area .btn-medium {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
  }
  .login-area .btn-medium + .btn-medium {
    margin-top: 8px;
  }
  .login-area .login-join {
    text-align: center;
    margin: 24px 0 0;
    color: var(--light-semantic-text-sub-primary, #666);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    text-decoration: none;
  }
  .login-area .login-join a {
    padding: 0 12px;
    color: var(--light-semantic-text-sub-primary, #0096E4);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 0.8; /* 153.846% */
    letter-spacing: -0.039px;
    text-decoration: underline;
    display: inline-block;
    text-decoration: none;
  }
  .login-area .login-join a + a {
    border-left: 1px solid #e7eaee;
  }
  .login-area .a-group {
    margin: 32px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.8;
  }
  .login-area .a-group a {
    padding: 0 12px;
    color: var(--Text-Sub-Primary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .login-area .a-group a + a {
    border-left: 1px solid #e7eaee;
  }
  .login-area > h1 {
    margin: 16px 0 0;
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .login-area > h1 > p {
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .login-area .l-guide {
    margin: 16px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .login-area .l-guide p {
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .login-area .tab-menu {
  }

  /* login-chk-link */
  .login-chk-link {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .login-chk-link .chk {
    float: left;
  }
  .login-chk-link .chk > label {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    color: var(--Text-Sub-Primary, #8f95a1);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .login-chk-link .chk input {
    margin: 0 4px 0 0;
  }
  .login-chk-link .link {
    float: right;
  }
  .login-chk-link .link a {
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #bac1cb;
    display: inline-block;
    margin-left: 8px;
    white-space: normal;
    word-wrap: break-word;
  }
  .login-chk-link .link a + a {
    padding-left: 8px;
    line-height: 0.9;
    border-left: 1px solid #e7eaee;
  }

  /* member-content */
  .member-content {
    background: #fff;
    padding: 0 16px;
    overflow: hidden;
  }
  .member-content .title {
    margin: 16px 0 0;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .member-content .title p {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .member-content .title .btn-small {
    margin: 4px 0 0;
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .member-content .title-small {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .member-content .member-agree {
    position: relative;
    margin: 16px 0 0;
  }
  .member-content .member-agree .btn-popup-view {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat center
      center;
    background-size: contain;
    opacity: 0.6;
  }
  .member-content .member-agree h1 {
    font-size: 12px;
  }
  .member-content .member-agree .textarea-wrap {
    margin: 8px 0 0;
  }
  .member-content .member-agree textarea.input-regular {
    width: 100%;
    height: 140px;
  }
  .member-content .member-agree label {
    display: flex;
    align-items: center;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .member-content .member-agree .check-all + span {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .member-content label span {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .member-content label input {
    margin: 0 8px 0 0 !important;
  }
  .member-content .member-checked-all {
    margin: 24px 0 0;
  }
  .member-content .btn-group-area {
    padding: 32px 0 0;
  }
  .member-content .guide-text {
    margin: 8px 0 0;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    text-align: left;
  }
  .member-content .guide-text p {
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }

  /* froala-view */
  .froala-view .f-video-editor {
    width: 100%;
    height: auto;
  }
  .froala-view .f-video-editor iframe {
    width: 100%;
    height: 30vh;
  }
  .froala-view ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .froala-view ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .froala-view li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  /* main-notice */
  .main-notice {
    margin: 40px 16px 0;
  }
  .main-notice .h4-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 16px;
  }
  .main-notice .h4-more h4 {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
    white-space: normal;
    word-wrap: break-word;
  }
  .main-notice .h4-more .more {
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: right;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .main-notice > ul > li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 0;
  }
  .main-notice > ul > li .subject {
    width: calc(100% - 86px);
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    padding-right: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .main-notice > ul > li .date {
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .main-notice .empty {
    height: 68px;
    padding: 24px;
    border-radius: 16px;
    background-color: #f3f5f6;
    margin: 16px 0 0;
  }
  .main-notice .empty p {
    font-size: 12px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: center;
    color: #686e7b;
  }

  /* */
  .split2 {
    width: calc((100% - 8px) / 2) !important;
  }
  .split2 + .split2 {
    margin-left: 8px;
  }
  .btn-medium.split2 {
    padding: 0 12px;
  }

  /* split3 */
  .split3 {
    width: calc((100% - 16px) / 3) !important;
  }
  .split3 + .split3 {
    margin-left: 8px;
  }

  /* split4 */
  .split4 {
    width: calc((100% - 24px) / 4) !important;
  }
  .split4 + .split4 {
    margin-left: 8px;
  }

  /* fixed-bottom-wrap */
  .fixed-bottom-wrap {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 102;
    width: 100%;
    max-width: 720px;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
  }
  .fixed-bottom-wrap.inactive-dim {
    top: auto;
    bottom: 0;
    height: auto;
  }
  .fixed-bottom-wrap .fixed-bottom {
    position: absolute;
    bottom: 0;
    max-width: 720px;
    z-index: 99;
    width: 100%;
    border-radius: 16px 16px 0px 0px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    border: 1px solid #d8dde2;
    padding: 32px 16px;
    text-align: left;
  }
  body.active-footer-fixed-menu .fixed-bottom-wrap .fixed-bottom {
    bottom: 0;
  }
  .fixed-bottom-wrap.active {
    display: block;
  }
  .fixed-bottom-wrap .fixed-bottom .title.align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.054px;
  }
  .fixed-bottom-wrap .fixed-bottom .title img {
    width: 18px;
    height: 18px;
  }
  .fixed-bottom-wrap .btn-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 32px;
    height: 32px;
    background: url(../../image/component/icon_close_prohibited_circled.png)
      no-repeat center center;
    background-size: contain;
  }
  .fixed-bottom-wrap .fixed-bottom > ul > li > button {
    height: 47px;
    color: var(--light-semantic-text-primary, #353c46);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .fixed-bottom-wrap .fixed-bottom > .title {
    margin: 0 0 8px;
    color: var(--light-semantic-text-primary, #353c46);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.054px;
  }
  .fixed-bottom-wrap .btn-close-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px auto;
    width: 56px;
    height: 5px;
    border-radius: 999px;
    background: var(--primary-gray-gray300, #dfdfdf);
  }
  .fixed-bottom-wrap .fixed-bottom-wrap-content {
    margin: 8px 0 0;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    text-align: center;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    letter-spacing: -0.042px;
  }
  /* fixed-bottom-wrap.file-upload */
  .fixed-bottom-wrap.file-upload .title {
    margin-bottom: 24px;
  }
  .fixed-bottom-wrap.file-upload button.btn-file {
    display: flex;
    align-items: center;
  }
  .fixed-bottom-wrap.file-upload button.btn-file:before {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
    background: url(../../image/component/icon_file.png);
    background-size: contain;
  }

  .fixed-bottom-wrap.file-upload button.btn-picture {
    display: flex;
    align-items: center;
  }
  .fixed-bottom-wrap.file-upload button.btn-picture:before {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
    background: url(../../image/component/icon_picture_v2.png) no-repeat center
      center;
    background-size: contain;
  }

  /* fixed-bottom */
  .fixed-bottom .BTT > ul {
    padding: 0;
  }
  .fixed-bottom .BTT > ul > li:first-child {
    margin-top: 0;
  }

  /* fixed-bottom-btn */
  .fixed-bottom-btn {
    position: fixed;
    left: auto;
    bottom: 0;
    z-index: 1;
    padding: 16px;
    max-width: 720px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .fixed-bottom-btn > * {
    width: 100%;
  }
  .fixed-bottom-btn.column {
    flex-direction: column;
  }
  .fixed-bottom-btn.more-bar {
    padding-bottom: 0;
  }
  .fixed-bottom-btn.more-bar > div {
    display: inline-flex;
    padding: 21px 8px 8px 8px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #fff;
  }
  .fixed-bottom-btn.more-bar button {
    width: 134px;
    height: 5px;
    border-radius: 999px;
    background: var(--Light-Semantic-Fill-Inverse-Secondary, #0096E4);
  }
  body.active-footer-fixed-menu .fixed-bottom-btn {
    margin: 0 0 49px;
  }

  /* fixed-bottom-right */
  #fixed-bottom-right {
    position: fixed;
    bottom: 117px;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 720px;
    height: 1px;
  }

  .date-search {
    margin: 16px 16px 0;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 활성화 */
  body.active-logo #header > h1,
  body.active-notification #header .notification,
  body.active-search #header .search,
  body.active-cart #header .cart,
  body.active-more #header .more,
  body.active-set #header .set,
  body.active-mypage #header .mypage,
  body.active-menu #header .menu,
  body.active-write #header .write,
  body.active-chat #header .chat,
  body.active-chat-set #header .chat-set,
  body.active-notification-set #header .notification-set,
  body.active-share #header .share,
  body.active-upload #header .upload,
  body.active-item-view-more #header .item-view-more,
  body.active-home #header .home {
    display: inline-block;
  }

  body.background-gradient #wrapper {
    background: linear-gradient(180deg, #fff 45.69%, #efedf3 116.75%);
  }
  body.index #header {
    border-bottom: 0;
  }

  body.overflow-y-scroll #content {
    overflow-y: scroll;
  }

  body.active-logo-center #header > h1 {
    display: inline-block;
    width: 180px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  body.active-logo-center #header > h1 a {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../../image/mobile/logo_navigation_m.png) no-repeat center
      center;
    background-size: contain;
    text-indent: -5000px;
  }

  body.active-footer #footer,
  body.active-footer-fixed-menu .footer-fixed-menu,
  body.active-to-top #to-top {
    display: block;
  }
  body.active-border-bottom-header #header {
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  body.wrapper-bg #wrapper {
    background: linear-gradient(180deg, #fff 0%, #f3f5f6 28.37%);
  }

  body.wrapper-width1200 #wrapper {
    max-width: 1200px !important;
    max-height: 1682px !important;
  }
  body.wrapper-width1200 #wrapper:before {
    width: 1200px !important;
    border: 0;
  }

  /* 비활성화 */
  body.inactive-header #wrapper {
    padding: 0;
  }
  body.inactive-header #header {
    display: none;
  }

  body.inactive-back #header .back,
  body.inactive-push #header .push,
  body.inactive-footer #footer,
  body.inactive-menu #header .menu,
  body.inactive-footer-fixed-menu .footer-fixed-menu {
    display: none;
  }
  body.inactive-footer-fixed-menu #wrapper {
    padding-bottom: 0;
  }
  body.inactive-footer-fixed-menu .fixed-bottom-btn {
    bottom: 0;
  }
  body.inactive-border-bottom-header #header {
    border-bottom: 0;
  }

  /* mypage-menu */
  .mypage-menu {
    padding: 0 16px;
  }
  .mypage-menu article {
    margin-top: 24px;
  }
  .mypage-menu article:last-child {
    border-bottom: 0;
  }
  .mypage-menu > article > h1 {
    margin: 0 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    white-space: normal;
    word-wrap: break-word;
  }
  .mypage-menu > article > h1 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .mypage-menu > article > h1 a:after {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/mobile/icon_arrow.png) no-repeat center center;
    background-size: contain;
  }
  .mypage-menu > article > h1 + h1 {
    margin: 0;
  }
  .mypage-menu > article > ul > li {
    margin: 24px 0 0;
  }
  .mypage-menu > article > ul > li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .mypage-menu > article > ul > li a > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mypage-menu > article > ul > li a > div img {
    width: 24px;
    height: 24px;
  }
  .mypage-menu > article > ul > li a:after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url(../../image/component/icon_arrow_right.png) no-repeat center
      center;
    background-size: contain;
    opacity: 0.6;
  }
  .mypage-menu > article > ul > li > button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--light-semantic-text-primary, #353c46);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .mypage-menu > article > ul > li > button:after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url(../../image/component/icon_arrow_right.png) no-repeat center
      center;
    background-size: contain;
    opacity: 0.6;
  }
  .mypage-menu .profile-info {
    display: flex;
    align-items: center;
    padding: 16px 0 0;
  }
  .mypage-menu .profile-info .img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    background: url(../../image/component/bg_profile.png) no-repeat center center;
    background-size: contain;
    border-radius: 50%;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  .mypage-menu .profile-info .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .mypage-menu .profile-info .info {
    width: calc(100% - 72px);
    padding-left: 12px;
  }
  .mypage-menu .profile-info .name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.048px;
  }
  .mypage-menu .profile-info .email {
    margin: 4px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .mypage-menu .profile-info .account-date {
    margin: 4px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .mypage-menu .profile-info .shop {
    margin: 4px 0 0;
    color: var(--Primary, #0096E4);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .mypage-menu .profile-info .btn-small {
    margin: 8px 0 0;
    padding: 0px 12px 0px 8px;
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .mypage-menu .profile-info .id {
    color: var(--Light-Semantic-Text-Sub-Tertiary, #bac1cb);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .mypage-menu .profile-info .btn-regist {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat right
      center;
    background-size: 20px;
  }
  .mypage-menu .profile-info .btn-regist img {
    margin: 0 8px 0 0;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    border: 1px solid var(--Light-Basic-Gray-200, #e7eaee);
    object-fit: cover;
  }
  /* type-b */
  .mypage-menu .profile-info.type-b {
    padding-bottom: 16px;
  }
  .mypage-menu .profile-info.type-b .img {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50px;
    background: url(../../image/component/icon_mypage_v1.png) no-repeat;
    background-size: contain;
  }
  .mypage-menu .profile-info.type-b .img.apple {
    background: url(../../image/component/icon_platform_apple.png) no-repeat;
    background-size: contain;
  }
  .mypage-menu .profile-info.type-b .img img {
    width: 100%;
    height: 100%;
  }
  .mypage-menu .profile-info.type-b .info {
    width: calc(100% - 48px);
  }
  .mypage-menu .profile-info.type-b .name {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .mypage-menu .profile-info.type-b .account-date {
    margin: 8px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .mypage-menu .profile-info.type-b .account-date span {
    color: var(--Text-Sub-Primary, #8f95a1);
    margin: 0 8px 0 0;
  }
  .mypage-menu .profile-info.type-b .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mypage-menu .profile-info.type-b .info .btn-small {
    margin: 0;
  }
  /* pimg-name */
  .mypage-menu .pimg-name {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .mypage-menu .pimg-name .pimg img {
    width: 24px;
    height: 24px;
  }
  .mypage-menu .pimg-name .name {
    color: var(--Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.048px;
  }
  .mypage-menu .name-email {
    margin: 24px 0 0;
  }
  .mypage-menu .name-email .name {
    display: flex;
    align-items: center;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.06px;
  }
  .mypage-menu .name-email .name span {
    color: var(--Primary-Darkened, #ea2a9d);
  }
  .mypage-menu .name-email .name img {
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
  }
  .mypage-menu .name-email .email {
    margin: 8px 0 0;
    color: var(--Text-Sub-Tertiary, #bac1cb);

    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .mypage-menu .banner {
    display: flex;
    flex-direction: column;
    margin: 24px 0 0;
    padding: 16px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #ffeff9 url(../../image/mobile/banner_bg1.png) no-repeat right
      20px center;
    background-size: contain;
  }
  .mypage-menu .banner h3 {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 120% */
    letter-spacing: -0.045px;
    white-space: normal;
    word-wrap: break-word;
  }
  .mypage-menu .banner h5 {
    margin: 6px 0 0;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .mypage-menu .banner h5 span {
    color: var(--Primary-Darkened, #ea2a9d);
  }
  .mypage-menu .banner .btn-small {
    margin: 12px 0 0;
    width: 92px;
  }
  .mypage-menu hr {
    border-color: rgba(30, 34, 41, 0.08);
  }

  /* 정렬 */
  .display-flex {
    display: flex;
  }
  .display-inline-flex {
    display: inline-flex;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-flex-end {
    justify-content: flex-end !important;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center !important;
  }
  .align-items-flex-start {
    align-items: flex-start !important;
  }
  .align-items-flex-end {
    align-items: flex-end !important;
  }
  .flex-wrap-wrap {
    flex-wrap: wrap;
  }
  .flex-direction-column {
    flex-direction: column;
  }
  .inline-flex {
    display: inline-flex !important;
  }
  .space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  select,
  select option[selected] {
    color: #9595b2;
  }
  select option,
  select.active {
    color: #1e2229;
  }

  /* select ellipsis */
  select.input-regular.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    padding-right: 66px;
  }

  /* sns-login */
  .sns-login {
    margin: 32px 0 0;
  }
  .sns-login button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-gray-900, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px; /* 126.667% */
    letter-spacing: -0.045px;
    background-size: 40px !important;
  }
  .sns-login button + button {
    margin: 8px 0 0;
  }
  .sns-login button.kakao {
    background: #fee500 url(../../image/component/icon_platform_kakao.png)
      no-repeat 12px center;
  }
  .sns-login button.naver {
    color: var(--color-white, #fff);
    background: #27d34a url(../../image/component/icon_sns_login_naver.png)
      no-repeat 12px center;
  }
  .sns-login button.apple {
    color: var(--color-white, #fff);
    background: #0096E4 url(../../image/component/icon_sns_login_apple.png)
      no-repeat 12px center;
  }
  .sns-login button.google {
    border: 1px solid var(--color-gray-300, #d8dde2);
    background: #fff url(../../image/component) no-repeat 12px center;
  }

  /* sns-login-circle */
  .sns-login-circle {
    margin: 40px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sns-login-circle button {
    position: relative;
    margin: 0 8px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: -5000px;
  }
  .sns-login-circle button.kakao {
    background: #fee500 url(../../image/component/icon_platform_kakao_circle.png)
      no-repeat center center;
    background-size: contain;
  }
  .sns-login-circle button.kakao .sc3 {
    position: absolute;
    top: -40px;
    left: 0;
    margin: 0 0 0 -20px;
    width: 85px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    background: url(../../image/component/sc3.png) no-repeat;
    background-size: contain;
  }
  .sns-login-circle button.naver {
    color: var(--color-white, #fff);
    background: #27d34a url(../../image/component/icon_platform_naver_circle.png)
      no-repeat center center;
    background-size: contain;
  }
  .sns-login-circle button.apple {
    color: var(--color-white, #fff);
    background: #0096E4 url(../../image/component/icon_platform_apple_circle.png)
      no-repeat center center;
    background-size: contain;
  }
  .sns-login-circle button.google {
    background: #fff url(../../image/component/icon_platform_google_circle.png)
      no-repeat center center;
    background-size: contain;
  }

  /* more-layer */
  .more-layer {
    position: relative;
    margin: 0;
  }
  .more-layer > button {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_more_horizontal.png) no-repeat
      right center;
    background-size: contain;
    cursor: pointer;
  }
  .more-layer > ul {
    display: none;
    position: absolute;
    top: 26px;
    right: 0;
    z-index: 10;
    width: 160px;
    border-radius: 12px;
    background: var(--light-semantic-background-elevated-primary, #fff);
    box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.12);
  }
  .more-layer.active > ul {
    display: block;
  }
  .more-layer > ul > li,
  .more-layer > ul > li button {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .more-layer > ul > li {
    border-bottom: 1px solid #f3f5f6;
  }
  .more-layer > ul > li:last-child {
    border-bottom: 0;
  }
  .default .more-layer > ul > li:first-child {
    border-bottom: 0;
  }
  .more-layer > ul > li.tit {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 8px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .more-layer > ul > li.tit:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_check.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .more-layer button {
    display: flex;
    padding: 10px 16px;
    width: 100%;
  }

  /* tit-con-space-between */
  .tit-con-space-between {
    margin: 16px;
  }
  .tit-con-space-between > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tit-con-space-between > ul > li + li {
    margin: 12px 0 0;
  }
  .tit-con-space-between .tit {
    width: 100px;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .tit-con-space-between .con {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% - 100px);
    color: var(--Text-Secondary, #353c46);
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    white-space: normal;
    word-wrap: break-word;
  }
  .tit-con-space-between .con strong {
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: right;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: -0.048px;
  }
  .tit-con-space-between.bg {
    padding: 16px;
    border-radius: 12px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }

  /* tit-con */
  .tit-con > li {
    display: flex;
  }
  .tit-con > li + li {
    margin: 8px 0 0;
  }
  .tit-con > li .tit {
    padding: 2px 16px 2px 0;
    width: 100px;
    color: var(--Text-Sub-Primary, #686E7B);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .tit-con > li .con {
    width: calc(100% - 100px);
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
    word-break: break-all !important;
  }
  .tit-con > li .con p {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    word-break: break-all !important;
  }

  /* tit-con-bg-wrap */
  .tit-con-bg-wrap .tit-con {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .tit-con-bg-wrap .tit-con .subject {
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    padding: 0 0 12px;
    margin: 0 0 12px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .tit-con-bg-wrap .tit-con > ul > li {
    display: flex;
    justify-content: center;
  }
  .tit-con-bg-wrap .tit-con > ul > li + li {
    margin: 8px 0 0;
  }
  .tit-con-bg-wrap .tit-con .tit {
    width: 100px;
    padding: 3px 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .tit-con-bg-wrap .tit-con .tit p {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .tit-con-bg-wrap .tit-con .con {
    width: calc(100% - 100px);
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  /* tit-con-border-wrap */
  .tit-con-border-wrap {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Light-Basic-White, #fff);
  }
  .tit-con-border-wrap .tit-con > ul > li {
    display: flex;
    justify-content: center;
  }
  .tit-con-border-wrap .tit-con > ul > li + li {
    margin: 8px 0 0;
  }
  .tit-con-border-wrap .tit-con > .subject {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e7eaee;
    padding: 0 0 12px;
    margin: 0 0 12px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.048px;
  }
  .tit-con-border-wrap .tit-con > .subject .state {
    display: inline-flex;
    height: 24px;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--Border-Quaternary, #f3f5f6);
    background: var(--Background-Lower-Primary, #f3f5f6);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .tit-con-border-wrap .tit-con > a .subject {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e7eaee;
    padding: 0 0 12px;
    margin: 0 0 12px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .tit-con-border-wrap .tit-con > a .subject {
    position: relative;
    background: url(../../image/component/icon_arrow_right.png) no-repeat right
      top;
    background-size: 20px;
  }
  .tit-con-border-wrap .tit-con .subject img {
    width: 24px;
    height: 24px;
  }
  .tit-con-border-wrap .tit-con > ul > li > .tit {
    width: 100px;
    padding: 3px 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .tit-con-border-wrap .tit-con > ul > li > .con {
    width: calc(100% - 100px);
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .tit-con-border-wrap .tit-con > ul > li > .con .btn-xsmall {
    margin: 0 4px 0 0;
  }
  .tit-con-border-wrap .btn {
    margin: 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tit-con-border-wrap .btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  .tit-con-border-wrap .btn-group .more-layer-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--Border-Secondary, #d8dde2);
    background: var(--Background, #fff);
  }
  .tit-con-border-wrap .btn-group .btn-regular {
    width: calc((100% - 56px) / 2);
    margin: 0 0 0 8px !important;
  }
  .tit-con-border-wrap .btn-group .more-layer-wrap .more-layer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px 0 0;
  }

  .inactive-border-top {
    border-top: 0 !important;
  }

  /* notification-list */
  .notification-list {
    padding: 8px 16px 0;
  }
  .notification-list > button {
    float: right;
    margin: 0 0 8px;
  }
  .notification-list > ul {
    overflow: hidden;
    clear: both;
  }
  .notification-list > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
  }
  .notification-list > ul > li a {
    position: relative;
    display: block;
    padding: 16px 0 16px 40px;
  }
  .notification-list > ul > li a:before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_email.png) no-repeat center center;
    background-size: contain;
  }
  .notification-list > ul > li .date {
    margin: 8px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .notification-list > ul > li .tit {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .notification-list > ul > li .con {
    margin: 8px 0 0;
    padding-right: 48px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    word-break: break-all;
  }
  .notification-list > ul > li .delete {
    position: absolute;
    top: 16px;
    right: 0;
    display: block;
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_close_prohibited.png) center center
      no-repeat;
    background-size: contain;
    opacity: 0.7;
    z-index: 1;
  }
  .notification-list > ul > li.read a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
  }
  .notification-list > ul > li.read .con {
    color: #8f95a1;
  }
  .notification-list .list-empty {
    padding: 126px 0 306px;
  }

  /* unit-wrap */
  .unit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--light-semantic-border-secondary, #e7eaee);
    background: var(--light-semantic-background-elevated-primary, #fff);
    padding: 0 16px;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
  }
  .unit-wrap input {
    width: calc(100% - 32px);
    height: 46px !important;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    border: 0 !important;
    padding-left: 0;
  }
  .unit-wrap.https input {
    width: calc(100% - 60px);
  }
  .unit-wrap.readonly {
    border: 1px solid var(--Light-Semantic-Border-Tertiary, #e7eaee);
    background: var(--Light-Semantic-Background-Lowered-Secondary, #f2f2f2);
  }
  .unit-wrap.readonly input {
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
  }
  .unit-wrap.regular {
    height: 40px;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .unit-wrap.regular input {
    height: 38px !important;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  .title-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;
  }
  .title-more .more {
    width: 20px;
    height: 20px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat center
      center;
    background-size: contain;
  }

  /* search-area */
  .search-area {
    position: relative;
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .search-area .region {
    margin: 0 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search-area .region .input-regular {
    width: calc((100% - 16px) / 3);
    height: 40px;
    margin: 0 8px 0 0;
    border-radius: 8px;
  }
  .search-area .region .input-regular:nth-child(3n) {
    margin-right: 0;
  }
  .search-area .search-large .input-large {
    width: calc(100% - 32px);
    height: 40px;
    border-radius: 8px;
  }

  /* map */
  .map {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .map > img {
    width: 100%;
  }
  .map .marker-pin {
    position: absolute;
    width: 36px;
    height: 36px;
    z-index: 1;
    background: url(../../image/component/icon_map_pin.png) no-repeat center
      center;
    background-size: contain;
  }
  .map .btn-my-location {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff url(../../image/component/icon_map_gps.png) no-repeat center
      center;
    background-size: 28px;
    box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.12);
    cursor: pointer;
  }
  .map .marker {
    position: absolute;
    width: auto;
  }
  .map .marker img {
    position: relative;
    width: 40px;
    height: 40px;
  }
  .map .marker span {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 96px;
    width: 100%;
    display: flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.03px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .map .marker2 {
    position: absolute;
    width: auto;
    cursor: pointer;
  }
  .map .marker2 img {
    position: relative;
    width: 60px;
    height: 60px;
  }
  .map .marker2 span {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 96px;
    width: 100%;
    height: 20px;
    padding: 0px 6px;
    border-radius: 4px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.03px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  /* active */
  .map .marker2.active span {
    border: 1px solid var(--Gray-800, #353c46);
    background: var(--Gray-800, #353c46);
    color: var(--Text-Dark-Inverted, #fff);
  }

  /* map2 */
  .map2 {
    position: relative;
    overflow: hidden;
    height: 240px;
  }
  .map2 .marker {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(../../image/component/map_marker.png) no-repeat center center;
    background-size: contain;
  }
  .map2 > img {
    width: 100%;
  }
  .map2 .marker-pin {
    position: absolute;
    width: 36px;
    height: 36px;
    z-index: 1;
    background: url(../../image/component/icon_map_pin.png) no-repeat center
      center;
    background-size: contain;
  }

  /* guide-text */
  .guide-text {
    margin: 12px 16px 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .guide-text p {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .guide-text.small {
    text-align: left;
    color: var(--Info-Text, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .guide-text.small p {
    color: var(--Info-Text, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .guide-text.icon strong {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .guide-text.icon strong:before {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/mobile/emoji_backhand_index_pointing_right.png)
      no-repeat;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .guide-text.border-bottom {
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .guide-text .btn {
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* table01 */
  .table01-wrap {
    margin: 16px 16px 0;
  }
  .table01 {
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
    border-top: 1px solid rgba(30, 34, 41, 0.08);
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .table01 th {
    padding: 9px 0px;
    text-align: center;
    vertical-align: middle;
    background: var(--Gray-100, #f8f9fa);
    color: var(--Text-Sub-Primary, #686E7B);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .table01 td {
    padding: 10px 4px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    background: var(--Background, #fff);
    vertical-align: middle;
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 138.462%;
  letter-spacing: -0.039px;
  }
  .table01 td > div {
    color: var(--Text-Sub-Primary, #686E7B);
  text-align: center;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .table01 td.date {
    color: var(--Text-Sub-Secondary, #8f95a1);
  }

  /* authentication-time */
  .authentication-time {
    position: relative;
  }
  .authentication-time #time {
    position: absolute;
    top: 16px;
    right: 90px;
    z-index: 1;
    display: block;
    color: var(--Light-Basic-Blue, #067df4);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px; /* 126.667% */
    letter-spacing: -0.045px;
  }

  /* find-id-completed */
  .find-id-completed {
    margin: 24px 0 0;
  }
  .find-id-completed > ul > li {
    display: flex;
    align-items: center;
    margin: 16px 16px 0;
  }
  .find-id-completed .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d8dde2;
    border-radius: 50%;
  }
  .find-id-completed .icon img {
    width: 48px;
    height: 48px;
  }
  .find-id-completed .id-info {
    padding: 0 0 0 16px;
  }
  .find-id-completed .id {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .find-id-completed .info {
    margin: 4px 0 0;
    display: flex;
    gap: 8px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .find-id-completed .info span {
    color: var(--Text-Sub-Primary, #8f95a1);
    white-space: normal;
    word-wrap: break-word;
  }

  /* 메뉴레이어 */
  .menu-slidebar {
    min-width: auto !important;
    width: 288px !important;
    height: 100%;
    border-radius: 0 !important;
    transform: translateX(0);
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
  }
  .menu-slidebar .top {
    height: 48px;
    background: #fff;
    text-align: left;
    overflow: hidden;
  }
  .menu-slidebar .top h1 {
    display: inline-block;
    width: 180px;
    height: 48px;
    margin: 1px 0 1px 8px;
  }
  .menu-slidebar .top h1 a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .menu-slidebar .top h1 a img {
    width: 100%;
    height: 100%;
  }
  .menu-slidebar .top .b-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: url(../../image/component/icon_close_prohibited.png);
    background-size: contain;
    text-indent: -5000px;
    z-index: 99;
  }
  .menu-slidebar .member-login {
    padding: 24px 24px 0;
  }
  .menu-slidebar .member-login .tit {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1E2229);
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 117.647% */
  letter-spacing: -0.051px;
  }
  .menu-slidebar .member-login .con {
    margin: 8px 0 0;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }

  /* gnbWrap */
  .gnbWrap {
    height: 100%;
    overflow: auto;
    background: #fff;
    padding: 0 0 260px;
    margin: 0 24px;
  }
  .gnbWrap::-webkit-scrollbar {
    width: 0;
  }
  .gnbWrap .gnbBox {
    padding: 0;
  }
  .gnbWrap .gnb-group {
    border-top: 1px solid rgba(30, 34, 41, 0.08);
    padding: 24px 0 0;
    margin: 24px 0 16px;
    color: var(--Text-Primary, #1E2229);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }
  .gnbWrap .gnbBox > li {
    background: #fff;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .gnbWrap .gnbBox > li > a,
  .gnbWrap .gnbBox > li .title {
    margin: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    height: auto;
    color: #1E2229;
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
    letter-spacing: -0.045px;
    background: #fff;
    cursor: pointer;
  }
  .gnbWrap .gnbBox > li .title:after {
    content: '';
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_down.png) no-repeat 0 0;
    background-size: contain;
    opacity: 0.5;
  }
  .gnbWrap .gnbBox > li.on .title:after {
    content: '';
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_up.png) no-repeat 0 0;
    background-size: contain;
    opacity: 1;
  }
  .gnbWrap .gnbBox > li > a:after {
    content: '';
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat 0 0;
    background-size: contain;
  }
  .gnbWrap .gnbBox > li .title a {
    color: #1E2229;
  }
  .gnbWrap .gnbBox > li ul {
    display: none;
    border-radius: 8px;
  background: var(--Background-Lower-Secondary, #F8F9FA);
    padding: 2px 0;
  }
  .gnbWrap .gnbBox > li ul li a {
    display: block;
    height: 19px;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.039px;
    margin: 16px 0 16px 16px;
  }
  .gnbWrap .gnbBox > li ul li a:before {
    content: " - ";
  }
  .gnbWrap .gnbBox > li.on ul {
    display: block;
  }
  .gnbWrap .gnbBox > li > a {
    background: url(../../image/component/icon_pagination_next.png) right 10px
      center no-repeat;
    background-size: 32px;
  }
  .gnbWrap .btn {
    padding: 24px;
  }
  .gnbWrap .btn .btn-regular {
    min-width: 94px;
    height: 37px;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 35px;
    letter-spacing: -0.56px;
    color: #fff;
  }
  .gnbWrap .cs-center {
    margin: 24px 24px 0;
  }
  .gnbWrap .cs-center .tit {
    display: flex;
    align-items: center;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .gnbWrap .cs-center .tit:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../../image/mobile/icon_cs_center.png) no-repeat center center;
    background-size: contain;
    margin: 0 4px 0 0;
  }
  .gnbWrap .cs-center .con {
    margin: 4px 0 0;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }

  /* menu-slidebar-fixed-btn */
  .menu-slidebar-fixed-btn {
    position: fixed !important;
    bottom: 0 !important;
    display: flex;
    align-items: center;
    min-width: auto !important;
    width: 288px !important;
    transform: translateX(0);
    right: 0 !important;
  }
  .menu-slidebar-fixed-btn .calculator {
    width: 50%;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--Primary, #b2142b);
    background: var(--Primary, #b2142b);
    color: var(--Light-Basic-White, #fff);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .menu-slidebar-fixed-btn .calculator img {
    width: 32px;
    height: 32px;
    margin: 0 8px 0 0;
  }
  .menu-slidebar-fixed-btn .company-inquiry {
    width: 50%;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--Primary, #353c46);
    background: var(--Primary, #353c46);
    color: var(--Light-Basic-White, #fff);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .menu-slidebar-fixed-btn .company-inquiry img {
    width: 32px;
    height: 32px;
    margin: 0 8px 0 0;
  }

  /* creditcard-list */
  .creditcard-list {
    padding: 0 16px 16px;
  }
  .creditcard-list .border {
    position: relative;
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 8px;
    border: solid 1px #e7eaee;
    background-color: #fff;
  }
  .creditcard-list.bg .border {
    border: 1px solid var(--Border-Tertiary, #e7eaee) !important;
    background: var(--Background-Lower-Secondary, #f8f9fa) !important;
  }
  .creditcard-list input[type="radio"] {
    display: none;
  }
  .creditcard-list input[type="radio"]:checked + .border {
    border: 2px solid var(--Primary, #0096E4);
  }
  .creditcard-list > ul > li.default .more-layer .default {
    display: none;
  }
  .creditcard-list > ul > li.default .number::before {
    content: "";
    width: 30px;
    height: 20px;
    margin: 0 8px 0 0;
    background: url(../../image/component/set_default.png) no-repeat center center;
    background-size: contain;
  }
  /* card */
  .creditcard-list.card > ul > li.default .border {
    background: #fff;
  }
  .creditcard-list.card > ul > li.default .number::before {
    content: "";
    width: 47px;
    height: 20px;
    margin: 0 8px 0 0;
    background: #f8f9fa url(../../image/component/set_default_card.png) no-repeat
      center center;
    background-size: contain;
  }
  .creditcard-list .number {
    margin: 0 8px 0 0;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    display: flex;
    align-items: center;
  }
  .creditcard-list .name {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .creditcard-list .more-layer {
    position: absolute;
    top: 16px;
    right: 8px;
  }

  /* card-number-insert */
  .card-number-insert {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-number-insert .input-medium {
    min-width: calc((100% - 24px) / 4) !important;
    width: calc((100% - 24px) / 4) !important;
    text-align: center;
  }

  /* credit-credit */
  .credit-credit {
    margin: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .credit-credit label {
    width: calc((100% - 8px) / 2);
  }
  .credit-credit label > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--Light-Semantic-Border-Secondary, #d6d6d6);
    background: var(--Light-Semantic-Fill-Reverse-Primary, #fff);
    width: 100%;
    font-size: 14px;
    font-weight: 600;
  }
  .credit-credit label > div img {
    width: 24px;
    height: 24px;
  }
  .credit-credit label > div.icon img {
    width: 80px;
    height: 32px;
  }
  .credit-credit input {
    display: none;
  }
  .credit-credit label > input:checked + div {
    border: 2px solid var(--Light-Basic-Gray-900, #262626);
  }

  /* expiration-period-insert */
  .expiration-period-insert {
    display: flex;
    align-items: center;
  }
  .expiration-period-insert .input-medium {
    margin: 0 5px 0 0;
  }

  /* creditcard-view */
  .creditcard-view > ul > li {
    margin: 16px 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .creditcard-view .tit {
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.6px;
    text-align: left;
    color: #686e7b;
  }
  .creditcard-view .con {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.64px;
    text-align: right;
    color: #0096E4;
  }

  /* img-id-account */
  .img-id-account {
    margin: 0 16px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
    display: flex;
    align-items: center;
  }
  .img-id-account .img {
    width: 48px;
    height: 48px;
    background: url(../../image/component/bg_no_image_type_profile.png) no-repeat;
    background-size: contain;
    border-radius: 50%;
  }
  .img-id-account .img img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
  .img-id-account .id-account {
    width: calc(100% - 48px);
    padding: 0 0 0 12px;
  }
  .img-id-account .id {
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .img-id-account .account {
    margin: 4px 0 0;
    color: var(--Light-Semantic-Text-Sub-Primary, #bac1cb);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .img-id-account .account strong {
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
  }

  /* category-sub */
  .category-sub {
    padding: 16px 0 16px 16px;
  }
  .category-sub .scroll {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .category-sub .scroll::-webkit-scrollbar {
    height: 0;
  }
  .category-sub .scroll > div {
    width: 750px;
  }
  .category-sub a {
    display: inline-flex;
    height: 28px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    border: 1px solid var(--Light-Basic-Gray-150, #f2f2f2);
    background: var(--Light-Basic-Gray-150, #f2f2f2);
    color: var(--Light-Semantic-Text-Secondary, #464646);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .category-sub a.active {
    border: 1px solid var(--Navy-Black, #0096E4);
    background: var(--Navy-Black, #0096E4);
    color: var(--Light-Basic-White, #fff);
  }

  /* pay-payment */
  .pay-payment {
    display: flex;
    flex-wrap: wrap;
    margin: 4px 16px 0;
  }
  .pay-payment > button {
    margin: 8px 8px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 16px) / 3);
    height: 52px;
    border-radius: 8px;
    border: 1px solid var(--Light-Semantic-Border-Secondary, #d8dde2);
    background: var(--Light-Semantic-Fill-Reverse-Primary, #fff);
  }
  .pay-payment > button.active {
    border: 2px solid #353c46;
  }
  .pay-payment > button:nth-child(3n) {
    margin-right: 0;
  }
  .pay-payment > button img {
    width: 80px;
    height: 32px;
  }

  /* required */
  .required {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .required::after {
    content: "";
    width: 3.7px;
    height: 3.7px;
    background-color: #ff223c;
    border-radius: 50%;
    margin: 4px 0 0 4px;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  /* img-view */
  .img-view {
    margin: 8px 0 0;
  }
  .img-view > div {
    display: flex;
    flex-wrap: wrap;
    height: 88px;
    overflow: hidden;
  }
  .img-view.active > div {
    height: auto;
  }
  .img-view > div img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 5px 5px 0 0;
  }

  /* title */
  .title {
    margin: 40px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1E2229);
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 120% */
  letter-spacing: -0.045px;
  }
  .title img {
    width: 20px;
    height: 20px;
  }

  .title-small {
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
  }

  .title-regular {
    margin: 40px 16px 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .title-regular small {
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .title-regular p {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }

  .title-medium {
    margin: 40px 16px 0;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }
  .title-medium small {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  .title-medium-border {
    margin: 40px 16px 0;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }

  .title-medium-border2 {
    margin: 40px 16px 0;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }
  .title-medium-border2:first-child {
    margin-top: 16px;
  }

  .title-medium2 + .tit-con-space-between {
    margin-top: 16px;
  }

  .title-xlarge {
    margin: 24px 16px 0;
    text-align: center;
    color: var(--Text-Secondary, #353C46);
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 28px;
    letter-spacing: -0.072px;
  }

  .title-large {
    margin: 16px 16px 0;
    color: var(--Light-Semantic-Text-Primary, #262626);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.06px;
  }
  .title-large p {
    color: var(--Light-Semantic-Text-Primary, #130e0e);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.06px;
  }

  /* star-rating-insert-title */
  .star-rating-insert-title {
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .star-rating-insert-title .title-large {
    margin: 0 0 16px;
  }
  .star-rating-insert-title p {
    margin: 16px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  .m-only-side {
    margin-left: 16px;
    margin-right: 16px;
  }

  .sub-title-web {
    display: none;
  }

  .fixed-bottom-margin {
    margin-bottom: 80px;
  }
  .fixed-bottom-margin-large {
    margin-bottom: 130px;
  }
  .fixed-bottom-margin-xlarge {
    margin-bottom: 300px;
  }

  /* search-regular-select */
  .search-regular-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
    padding: 16px 0;
  }
  .search-regular-select .search-regular {
    display: block;
    width: calc(100% - 100px) !important;
  }
  .search-regular-select input {
    min-width: auto;
    width: 100% !important;
  }
  .search-regular-select select {
    min-width: auto;
    width: 100px;
  }

  /* calendar-ym */
  .calendar-ym {
    position: relative;
    padding: 14px 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .calendar-ym .prev {
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_arrow_left.png) center center
      no-repeat;
    background-size: 20px;
    border-radius: 8px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
  }
  .calendar-ym .next {
    width: 40px;
    height: 40px;
    background: url(../../image/component/icon_arrow_right.png) center center
      no-repeat;
    background-size: 20px;
    border-radius: 8px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
  }
  .calendar-ym span {
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
    margin: 0 12px;
  }

  /*calendar-table*/
  .calendar-table {
    width: calc(100% - 32px);
    margin: 0 16px;
    border-bottom: 1px solid #e6e6e6;
    table-layout: fixed;
  }
  .calendar-table th {
    width: 14.285%;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    text-align: center;
    font-family: "PretendardJP", "Pretendard";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    padding: 2px;
    text-align: center;
  }
  .calendar-table th.sun {
    color: #fe6060;
  }
  .calendar-table th.sat {
    color: #2c81fb;
  }
  .calendar-table td {
    position: relative;
    height: 104px;
    padding: 2px;
    border-top: 1px solid #e6e6e6;
  }
  .calendar-table td .date.sat {
    color: #2c81fb;
  }
  .calendar-table td .date.sun {
    color: #fe6060;
  }
  .calendar-table td .date.today {
    background-color: #000;
    color: #fff;
  }
  .calendar-table td .date.inactive {
    color: #c6c6c6;
  }
  .calendar-table td .date {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 auto;
    color: var(--Light-Semantic-Text-Secondary, #464646);
    text-align: center;
    font-family: "PretendardJP", "Pretendard";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .calendar-table .time1 {
    width: 100%;
    margin: 2px 0 0;
    padding: 2px 0 2px 2px;
    border-radius: 2px;
    background: var(--Light-Basic-Gray-100, #f6f6f6);
    color: var(--Light-Semantic-Text-Primary, #262626);
    text-align: center;
    font-family: "PretendardJP", "Pretendard";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .calendar-table .time2 {
    width: 100%;
    margin: 2px 0 0;
    padding: 2px 0 2px 2px;
    border-radius: 4px;
    background: var(--Red-Lightened, #ffebee);
    color: var(--Red-Darkened, #ee4747);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .calendar-table .time3 {
    width: 100%;
    margin: 2px 0 0;
    padding: 2px 0 2px 2px;
    border-radius: 4px;
    background: var(--Primary, #0096E4);
    color: var(--White, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  /* pimg-name-date-hit */
  .pimg-name-date-hit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
  }
  .pimg-name-date-hit .pimg {
    position: relative;
    width: 40px;
    height: 40px;
  }
  .pimg-name-date-hit .pimg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--Light-Basic-Gray-200, #e7eaee);
    object-fit: cover;
  }
  .pimg-name-date-hit .name-date-hit {
    width: calc(100% - 48px);
  }
  .pimg-name-date-hit .name {
    margin: 0;
    color: var(--Light-Semantic-Text-Secondary, #464646);

    /* Typhography/Body Highlighted S */
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .pimg-name-date-hit .date-hit {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pimg-name-date-hit .date-hit span {
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }

  .blue {
    color: #2876e7 !important;
  }
  .red {
    color: #ee4747 !important;
  }
  .gray {
    color: #8f95a1 !important;
  }
  .green {
    color: #23bd85 !important;
  }
  .dark {
    color: #0096E4 !important;
  }

  .guide-text-bottom {
    margin: 40px auto 0;
    width: 342px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    word-break: keep-all;
  }

  /* total-rating */
  .total-rating {
    height: 96px;
    border-radius: 12px;
    background: var(--Light-Basic-Gray-100, #f3f5f6);
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    padding: 24px 16px;
  }
  .total-rating > div {
    width: 43%;
  }
  .total-rating .tit-con {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-right: 1px solid #e7eaee;
  }
  .total-rating .tit-con .tit {
    width: auto;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .total-rating .tit-con .con {
    padding: 0 0 0 8px;
    width: auto;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px; /* 123.077% */
    letter-spacing: -0.026px;
    white-space: normal;
    word-wrap: break-word;
  }
  .total-rating .star-rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 0 8px 40px;
  }
  .total-rating .star-rating > div {
    margin: 4px 0 0;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }

  /* total */
  .total {
    margin: 24px 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .total .tit {
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.039px;
  }
  .total .con {
    color: var(--Text-Secondary, #353C46);
  text-align: right;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 137.5% */
  letter-spacing: -0.048px;
  }

  /* guide-text-bottom-arrow */
  .guide-text-bottom-arrow {
    padding: 12px 0;
    margin: 24px 0 0;
    border-top: 1px solid rgba(30, 34, 41, 0.08);
    border-bottom: 1px solid rgba(30, 34, 41, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--Text-Sub-Secondary, #8f95a1);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .guide-text-bottom-arrow img {
    width: 16px;
    height: 16px;
    opacity: 0.5;
  }

  /* chat-room */
  .chat-room {
    position: fixed;
    top: 48px;
    z-index: 1;
    max-width: 720px;
    width: 100%;
    height: calc(100% - 48px);
  }
  .chat-room .cont {
    position: relative;
    width: 100%;
    height: calc(100% - 47px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 16px 60px 8px;
  }
  .chat-room .cont > ul > li {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding-bottom: 8px;
  }
  .chat-room .cont > ul > li.clear-date {
    clear: both;
    display: block;
    width: 160px;
    margin: 0 auto 24px;
    padding: 4px 16px;
    border-radius: 24px;
    background: var(--light-basic-gray-100, #f3f5f6);
    color: var(--light-basic-gray-700, #666);
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .chat-room .cont > ul > li .text {
    position: relative;
    display: block;
    min-width: 52px;
    max-width: 240px;
    padding: 6px 8px;
    border-radius: 12px;
    overflow-wrap: break-word;
  }
  .chat-room .cont > ul > li .text + .text {
    margin-top: 32px !important;
    clear: both;
  }
  .chat-room .cont > ul > li .text.padding-a0 {
    background: #fff !important;
  }
  .chat-room .cont > ul > li .text .btn-download {
    display: inline-flex;
    height: 28px;
    padding: 6px 30px 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--light-semantic-border-primary, #d8dde2);
    background: #fff url(../../image/mobile/icon_download2.png) no-repeat right
      8px center;
    background-size: 18px;
    opacity: 1;
    color: var(--light-semantic-text-primary, #353c46) !important;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    text-decoration: none !important;
  }
  .chat-room .cont > ul > li .text img {
    max-width: 240px;
    max-height: 240px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--Dimed-8, rgba(30, 34, 41, 0.08));
  }
  .chat-room .cont > ul > li .date-time {
    position: absolute;
    bottom: 0;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .chat-room .cont > ul > li.left {
    position: relative;
    padding-right: 50px;
    padding-left: 44px;
  }
  .chat-room .cont > ul > li.left .img {
    position: absolute;
    top: 0;
    left: 6px;
    width: 32px;
    height: 32px;
    background: url(../../image/component/bg_no_image_type_profile.png) no-repeat;
    background-size: contain;
    border-radius: 50%;
  }
  .chat-room .cont > ul > li.left .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .chat-room .cont > ul > li.left .nick {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    display: flex;
    align-items: center;
  }
  .chat-room .cont > ul > li.left .text {
    margin: 4px 0 0;
    float: left;
    background: #f3f5f6;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .chat-room .cont > ul > li.left .text p {
    font-size: 12px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
  }
  .chat-room .cont > ul > li.left .text a {
    color: #1e2229;
    text-decoration: underline;
  }
  .chat-room .cont > ul > li.left .date-time {
    right: -32px;
  }
  .chat-room .cont > ul > li + li {
    margin-top: 16px;
  }

  /* right */
  .chat-room .cont > ul > li.right {
    padding-left: 110px;
  }
  .chat-room .cont > ul > li.right .text {
    float: right;
    background-color: #0096E4;
    text-align: left;
    color: var(--Text-Dark-Inverted, #fff);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .chat-room .cont > ul > li.right .text p {
    color: var(--Text-Dark-Inverted, #fff);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .chat-room .cont > ul > li.right .text img {
    max-width: 100%;
  }
  .chat-room .cont > ul > li.right .text.file {
    background: none;
    border: 0;
    padding: 0;
  }
  .chat-room .cont > ul > li.right .text a {
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    letter-spacing: -0.042px;
    color: #fff;
    text-decoration: underline;
  }
  .chat-room .cont > ul > li.right .date-time {
    left: -32px;
  }
  .chat-room .cont > ul > li.right .img {
    display: none;
  }
  .chat-room .cont > ul > li.right .nick {
    display: none;
  }
  .chat-room .cont > ul > li .date-time:before {
    display: none;
  }
  .chat-room .cont > ul > li.right .read {
    position: absolute;
    left: -20px;
    bottom: 1px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background-color: #20b2e5;
    border-radius: 50%;
    color: #fff;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  .chat-room .emoticon {
    width: 120px;
    height: 120px;
  }

  /* chat-form */
  .chat-form {
    background: var(--light-semantic-background-elevated-secondary, #fff);
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    z-index: 100;
    max-width: 720px;
  }
  .chat-form .insert {
    position: relative;
    padding: 4px 12px 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chat-form .insert .input-regular {
    width: calc(100% - 40px);
    height: 36px;
    max-height: 76px;
    line-height: 1.5;
    border-radius: 18px !important;
    padding: 8px 40px 0 16px;
    font-size: 14px;
    border: 1px solid var(--light-semantic-border-tertiary, #e6e6e6);
    background: var(--light-basic-gray-100, #f6f6f6);
  }
  .chat-form .insert .btn-send {
    position: absolute;
    bottom: 8px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: url(../../image/component/icon_sending.png);
    background-size: contain;
  }
  .chat-form .file-upload .btn-small {
    display: block;
    min-width: auto;
    width: 14px;
    height: 14px;
    background: url(../../image/mobile/icon_plus2.png) no-repeat center center;
    background-size: contain;
    margin: 0 8px 0 0;
    padding: 0;
    border: 0;
  }
  .chat-form .file-upload .gallery .img-thumb,
  .chat-form .file-upload .gallery .file-thumb {
    width: 80px;
    height: 80px;
  }
  .chat-form .btn-file-upload {
    width: 28px;
    height: 28px;
    background: url(../../image/component/icon_add_circled.png) no-repeat center
      center;
    background-size: contain;
    margin-right: 8px;
  }
  .chat-form .btn-chat-sponsor {
    width: 32px;
    height: 32px;
    background: url(../../image/mobile/icon_chat_sponsor.png) no-repeat center
      center;
    background-size: contain;
    margin: 0 8px 0 0;
  }
  .chat-form .file-upload-popup {
    width: 100%;
    justify-content: center;
    gap: 40px;
    padding: 16px 24px;
    display: none;
  }
  .chat-form .file-upload-popup.active {
    display: flex;
  }
  .chat-form .file-upload-popup .popup-close {
    cursor: pointer;
    position: absolute;
    top: 6px;
    left: 12px;
    width: 32px;
    height: 32px;
    background: #fff url(../../image/component/icon_close.png) no-repeat center
      center;
    background-size: contain;
  }
  .chat-form .file-upload-popup > ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
  .chat-form .file-upload-popup > ul > li {
    height: 118px;
    margin: 0 28px 0 0;
  }
  .chat-form .file-upload-popup > ul > li > button {
    width: 60px;
    height: 60px;
    border: 1px solid var(--Light-Semantic-Border-Tertiary, #e7eaee);
    border-radius: 50%;
  }
  .chat-form .file-upload-popup > ul > li > button.btn-album {
    background: url(../../image/mobile/icon_picture.png) no-repeat center center;
    background-size: 24px;
  }
  .chat-form .file-upload-popup > ul > li > button.btn-camera {
    background: url(../../image/mobile/icon_camera.png) no-repeat center center;
    background-size: 24px;
  }
  .chat-form .file-upload-popup > ul > li .tit {
    margin: 8px 0 0;
    color: var(--light-semantic-text-primary, #353c46);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn {
    width: 60px;
    height: 60px;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery.img {
    background: url(../../image/mobile/icon_picture.png) no-repeat center center;
    background-size: 24px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery.file {
    background: url(../../image/mobile/icon_file.png) no-repeat center center;
    background-size: 24px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery .img-thumb {
    border: 0;
    width: 100%;
    height: 100%;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery .img-thumb img {
    border: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  /* file-thumb */
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery .file-thumb {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    width: 100%;
    height: 100%;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .gallery .file-thumb img {
    display: none;
  }
  .chat-form
    .file-upload-popup
    .file-upload.inner-btn
    .gallery
    .file-thumb
    .name {
    position: absolute;
    top: 20px;
    left: 0;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    background-color: #fff !important;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: keep-all !important;
  }

  .chat-form .file-upload-popup .file-upload.inner-btn .upload {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .upload button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid var(--Light-Semantic-Border-Tertiary, #e7eaee);
    border-radius: 50%;
  }
  .chat-form .file-upload-popup .file-upload.inner-btn .upload input {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .chat-form .file-upload-popup .file-upload .gallery .delete {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
    background: url(/assets/image/component/icon_close_prohibited_circled_dark.png)
      no-repeat 0 0;
    background-size: contain;
  }
  .chat-form .insert .btn-emoticon {
    position: absolute;
    bottom: 8px;
    right: 56px;
    width: 28px;
    height: 28px;
    background: url(../../image/mobile/icon_emoticon.png);
    background-size: contain;
  }

  /* text.alirm */
  .chat-room .cont > ul > li .text.alirm {
    margin-top: 16px !important;
    width: 240px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--light-basic-gray-200, #e7eaee);
    background: var(--light-semantic-background, #fff) !important;
  }
  .chat-room .cont > ul > li .text.alirm .subject {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
    padding: 0 0 16px;
    color: var(--Dark-Gray, #3f3f3d);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: -0.048px;
  }
  .chat-room .cont > ul > li .text.alirm .subject:before {
    content: "";
    width: 32px;
    height: 32px;
    margin: 0 12px 0 0;
    background: url(../../image/mobile/icon_game.png) no-repeat center center;
    background-size: contain;
  }
  .chat-room .cont > ul > li .text.alirm ul {
    margin: 16px 0 0;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .chat-room .cont > ul > li .text.alirm li {
    display: flex;
    align-items: center;
    margin: 8px 0 0;
  }
  .chat-room .cont > ul > li .text.alirm .tit {
    width: 72px;
    color: var(--light-semantic-text-sub-secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    white-space: normal;
    word-wrap: break-word;
  }
  .chat-room .cont > ul > li .text.alirm .con {
    width: calc(100% - 72px);
    color: var(--light-semantic-text-primary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .chat-room .cont > ul > li .text.alirm .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 0;
  }
  .chat-room .cont > ul > li .text.alirm .btn .refuse {
    display: flex;
    width: 100px;
    height: 28px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--Bright-Gray, #e7eaee);
    background: var(--Bright-Gray, #e7eaee);
    color: var(--light-semantic-text-primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .chat-room .cont > ul > li .text.alirm .btn .accept {
    display: flex;
    width: 100px;
    height: 28px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--light-basic-lu-primary, #20b2e5);
    background: var(--Deep-Black, #20b2e5);
    color: var(--light-semantic-text-primary, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  /* text.accepted */
  .chat-room .cont > ul > li .text.accepted {
    margin-top: 16px !important;
    border-radius: 12px;
    border: 1px solid var(--light-basic-gray-150, #f2f2f2);
    padding: 17px 16px 16px 60px;
    background: #f2f2f2 url(../../image/mobile/icon_accepted.png) no-repeat 16px
      18px;
    background-size: 32px;
  }
  .chat-room .cont > ul > li .text.accepted .tit {
    color: var(--Dark-Gray, #3f3f3d);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .chat-room .cont > ul > li .text.accepted .con {
    margin: 2px 0 0;
    color: var(--light-semantic-text-primary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .chat-room .cont > ul > li .text.file {
    background-color: #fff;
    padding: 0;
  }
  .chat-room .cont > ul > li .text.file a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 240px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid var(--Light-Semantic-Border-Secondary, #d8dde2);
    background-color: #fff;
    padding: 8px 16px 8px 40px;
    text-decoration: none !important;
  }
  .chat-room .cont > ul > li .text.file a:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_download_gray.png) no-repeat center
      center;
    background-size: contain;
  }
  .chat-room .cont > ul > li .text.file .name {
    padding: 0 32px 0 0;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .chat-room .cont > ul > li .text.file .kb {
    color: var(--Light-Semantic-Text-Sub-Tertiary, #bac1cb);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }

  /* chat-list */
  .chat-list {
    padding: 0 16px;
  }
  .chat-list > li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .chat-list .starting-destination {
    color: var(--Pale-Blue, #3862a5);

    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }

  /* pimg-info-chat */
  .pimg-info-chat {
    display: flex;
    justify-content: space-between;
  }
  .pimg-info-chat .pimg-info {
    display: flex;
    width: calc(100% - 60px);
  }
  .pimg-info-chat .pimg {
    width: 64px;
    height: 64px;
    background: url(../../image/component/bg_profile.png) no-repeat 0 0;
    background-size: contain;
    border-radius: 50%;
    border: 1px solid var(--Light-Basic-Gray-200, #e7eaee);
  }
  .pimg-info-chat .pimg img {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
  }
  .pimg-info-chat .pimg-info .info {
    width: calc(100% - 64px);
    padding: 0 0 0 16px;
  }
  .pimg-info-chat .name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px; /* 126.667% */
    letter-spacing: -0.045px;
    white-space: normal;
    word-wrap: break-word;
  }
  .pimg-info-chat .name starting-destination {
    font-size: 10px;
  }
  .pimg-info-chat .name .date {
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
    white-space: normal;
    word-wrap: break-word;
  }
  .pimg-info-chat .cont {
    margin: 4px 0 0;
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .pimg-info-chat .chat {
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .pimg-info-chat .chat .date {
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    text-align: right;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .pimg-info-chat .chat .number {
    margin: 6px 0 0;
    display: flex;
    height: 20px;
    min-width: 20px;
    padding: 2px 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: var(--Red, #fe6060);
    color: var(--Text-Dark-Inverted, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }

  /* my-coupon-point */
  .my-coupon-point {
    margin: 16px 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .my-coupon-point .tit {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1E2229);
  text-align: right;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .my-coupon-point .tit img {
    width: 24px;
    height: 24px;
  }
  .my-coupon-point .con {
    color: var(--Text-Secondary, #353C46);
  text-align: right;
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 117.647% */
  letter-spacing: -0.051px;
    white-space: normal;
    word-wrap: break-word;
  }
  .my-coupon-point div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* small */
  .my-coupon-point.small {
    height: 44px;
    border-radius: 8px;
    background: var(--Light-Basic-Gray-100, #f3f5f6);
  }
  .my-coupon-point.small .tit {
    color: var(--Light-Semantic-Text-Secondary, #464646);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .my-coupon-point.small .con {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .my-coupon-point.small .con img {
    width: 20px;
    height: 20px;
  }
  /* large */
  .my-coupon-point.large .tit {
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }
  .my-coupon-point.large .con {
    color: var(--Text-Secondary, #353C46);
  text-align: right;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 120% */
  letter-spacing: -0.06px;
  }

  /* coupon-point-list */
  .coupon-point-list {
    margin: 0 16px;
  }
  .coupon-point-list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .coupon-point-list .dc {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
    white-space: normal;
    word-wrap: break-word;
  }
  .coupon-point-list .point-subject {
    margin: 4px 0 0;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .coupon-point-list .tit {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .coupon-point-list .con {
    margin: 4px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .coupon-point-list .status {
    background: none;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .coupon-point-list .status.available,
  .coupon-point-list .status.plus {
    color: var(--Blue-Darkened, #2876e7);
  }
  .coupon-point-list .status.used,
  .coupon-point-list .status.expiration,
  .coupon-point-list .status.minus {
    color: var(--Text-Sub-Secondary, #8f95a1);
  }
  .coupon-point-list .point {
    color: #0096E4;
    text-align: right;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .coupon-point-list .point.minus {
    color: var(--Text-Disabled-Secondary, #bac1cb);
  }
  .coupon-point-list .tit-con {
    margin: 8px 0 0;
  }
  .coupon-point-list .tit-con > li {
    display: flex;
    align-items: center !important;
  }
  .coupon-point-list .tit-con > li + li {
    margin: 4px 0 0;
  }
  .coupon-point-list .tit-con > li .tit {
    width: 60px;
    padding: 0;
    margin: 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .coupon-point-list .tit-con > li .con {
    width: 84px;
    padding: 0;
    margin: 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .coupon-point-list .subject {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .coupon-point-list .coupon-name {
    margin: 4px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .coupon-point-list .con2 {
    margin: 4px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .coupon-point-list .con2 p {
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  /* order-record-list */
  .order-record-list {
    margin: 0 16px;
  }
  .order-record-list > li {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--Light-Semantic-Border-Tertiary, #e7eaee);
    background: var(--Light-Semantic-Background, #fff);
  }
  .order-record-list > li.bg {
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .order-record-list > li + li {
    margin: 16px 0 0;
  }
  .order-record-list .top-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid #e7eaee;
  }
  .order-record-list .top-date strong {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 120% */
    letter-spacing: -0.045px;
  }
  .order-record-list .top-date .date {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }
  .order-record-list .top-date .bite {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.039px;
  }
  .order-record-list .top-date .bite:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../image/mobile/icon_bite.png) no-repeat;
    background-size: contain;
  }
  .order-record-list .top-date img {
    width: 20px;
    height: 20px;
  }
  .order-record-list .top-date .subject {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 120% */
    letter-spacing: -0.045px;
  }
  .order-record-list .tit-con {
    display: flex;
  }
  .order-record-list .tit-con + .tit-con {
    margin: 8px 0 0;
  }
  .order-record-list .tit-con .tit {
    width: 100px;
    padding: 2px 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .order-record-list .tit-con .con {
    width: calc(100% - 100px);
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .order-record-list .tit-con .bite {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.039px;
  }
  .order-record-list .tit-con .bite:before {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/mobile/icon_bite.png) no-repeat;
    background-size: contain;
  }
  .order-record-list hr {
    margin: 12px 0;
  }
  .order-record-list .tit-con .con .status {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .order-record-list .menu-name {
    padding: 0 60px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .order-record-list .time {
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .order-record-list .time span {
    display: inline-flex;
    height: 28px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--Primary, #0096E4);
    background: var(--Background, #fff);
    color: var(--Primary, #0096E4);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  /* order-record-view */
  .order-record-view {
    margin: 16px 16px 0;
  }
  .order-record-view > li {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #0096E4;
    background: var(--Light-Semantic-Background, #fff);
  }
  .order-record-view > li + li {
    margin: 16px 0 0;
  }
  .order-record-view .top-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid #e7eaee;
  }
  .order-record-view .top-date > div {
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.045px;
    white-space: normal;
    word-wrap: break-word;
  }
  .order-record-view .top-date img {
    width: 20px;
    height: 20px;
  }
  .order-record-view .tit-con {
    display: flex;
  }
  .order-record-view .tit-con + .tit-con {
    margin: 8px 0 0;
  }
  .order-record-view .tit-con .tit {
    width: 100px;
    padding: 2px 0;
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .order-record-view .tit-con .con {
    width: calc(100% - 100px);
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .order-record-view hr {
    margin: 12px 0;
  }
  /* type-b */
  .order-record-view.type-b > li {
    border-radius: 12px;
    border: 1px solid #0096E4;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .order-record-view.type-b + .title-medium {
    margin-top: 40px;
  }

  /* review-list */
  .review-list {
    margin: 0 16px;
    border-top: 1px solid rgba(30, 34, 41, 0.04);
  }
  .review-list > ul > li {
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .review-list .img-name-star-date-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .review-list .img-name-star-date {
    display: flex;
    align-items: center;
  }
  .review-list .img {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-200, rgba(30, 34, 41, 0.08));
    border-radius: 50%;
    overflow: hidden;
    background: url(../../image/component/bg_profile.png) no-repeat 0 0;
    background-size: contain;
  }
  .review-list .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .review-list .name-star-date {
    padding: 0 0 0 8px;
  }
  .review-list .name {
    display: inline-flex;
    align-items: center;
    color: var(--light-semantic-text-secondary, #464646);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .review-list .name .btn-small {
    margin: 0 4px 0 0;
    height: 21px;
    padding: 0 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }
  .review-list .star-date {
    display: flex;
    align-items: center;
  }
  .review-list .date {
    margin: 0 0 0 8px;
    color: var(--light-semantic-text-sub-secondary, #868686);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .review-list .party-name {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .review-list .review-con {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .review-list .more-layer > ul {
    right: 0;
  }

  /* reservation-list */
  .reservation-list .subject {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
    margin: 0 0 16px;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: -0.048px;
  }
  .reservation-list > li {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);
  }
  .reservation-list > li + li {
    margin-top: 16px;
  }
  .reservation-list .tit-con {
    display: flex;
    align-items: flex-start;
  }
  .reservation-list .tit-con + .tit-con {
    margin: 8px 0 0;
  }
  .reservation-list .tit-con .tit {
    width: 88px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Light-Semantic-Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .reservation-list .tit-con .tit img {
    width: 24px;
    height: 24px;
  }
  .reservation-list .tit-con .con {
    width: calc(100% - 88px);
    color: var(--Light-Semantic-Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
    white-space: normal;
    word-wrap: break-word;
  }
  .reservation-list .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .reservation-list .btn .btn-regular {
    min-width: auto !important;
    width: 40px !important;
    padding: 0;
  }
  .reservation-list .btn .btn-regular img {
    width: 20px;
    height: 20px;
  }
  .reservation-list .btn .btn-send-arrival {
    width: calc(100% - 100px) !important;
  }
  /* member-info */
  .member-info {
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .member-info .img {
    width: 24px;
    height: 24px;
    background: url(../../image/component/icon_mypage_v2.png) no-repeat;
    background-size: contain;
    border-radius: 50%;
  }
  .member-info .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .member-info .name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.048px;
  }
  .member-info .name span {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .member-info .shop {
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }

  /* video-wrap */
  .video-wrap {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 64%;
    height: 0;
    overflow: hidden;
  }
  .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* line8 */
  .line8 {
    border-bottom: 8px solid rgba(30, 34, 41, 0.04);
  }

  /* date-search-select */
  .date-search-select {
    margin: 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e7eaee;
  }
  .date-search-select .date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
  }
  .date-search-select .search-regular {
    display: block;
    margin: 8px 0 0;
  }
  .date-search-select .search-regular .input-regular {
    width: 100%;
  }

  /* date-search-btn */
  .date-search-btn {
    margin: 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .date-search-btn .input-regular {
    min-width: auto;
    width: calc((100% - 71px) / 2);
    margin: 0 8px 0 0;
  }
  .date-search-btn .btn-regular {
    min-width: auto;
    width: 55px;
    margin: 0;
  }

  /* img-list-thumb */
  .img-list-thumb {
    margin: 16px 0 0;
  }
  .img-list-thumb > ul {
    display: flex;
    flex-wrap: wrap;
  }
  .img-list-thumb > ul > li {
    margin-right: 8px;
  }
  .img-list-thumb > ul > li img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--Light-Basic-Gray-200, #e7eaee);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat,
      url(<path-to-image>) lightgray 50% / cover no-repeat;
  }
  /* w80 */
  .img-list-thumb.w80 > ul > li img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--Light-Basic-Gray-200, #e7eaee);
    background: url(<path-to-image>) lightgray 50% / cover no-repeat,
      url(<path-to-image>) lightgray 50% / cover no-repeat;
  }

  .text-cont {
    margin: 16px 16px 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }

  /* dot-li */
  .dot-li {
    margin: 0 0 0 8px;
  }
  .dot-li li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Light-Basic-Gray-600, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .dot-li li:before {
    content: "";
    width: 2px;
    height: 2px;
    background-color: #8f95a1;
    border-radius: 50%;
  }

  /* date-select-search */
  .date-select-search {
    padding: 0 0 16px;
    margin: 0 16px 16px;
    border-bottom: 1px solid #e7eaee;
  }
  .date-select-search .date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
  }
  .date-select-search .select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 0;
  }
  .date-select-search .select .input-regular {
    min-width: auto !important;
    width: calc(100% - 63px);
  }
  .date-select-search .select .input-regular + .input-regular {
    margin-left: 8px;
  }
  .date-select-search .select .btn-regular {
    display: flex;
    min-width: auto !important;
    width: 55px !important;
    height: 40px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    color: var(--Light-Semantic-Text-Primary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.039px;
  }

  /* verify-list */
  .verify-list {
    margin: 24px 16px 0;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }

  .verify-list > li {
    margin: 16px 0 0;
  }
  .verify-list .tit {
    display: flex;
    align-items: center;
    color: var(--Text-Primary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .verify-list .tit input {
    margin: 0 8px 0 0;
  }
  .verify-list .con {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  /* reviews-list */
  .reviews-list {
    margin: 0 16px;
  }
  .reviews-list > ul > li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .reviews-list > ul > li > .img-name-date-more-layer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .reviews-list .img-name-date {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    padding: 0 16px 0 0;
  }
  .reviews-list .img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: url(../../image/component/bg_profile.png) no-repeat 0 0;
    background-size: contain;
  }
  .reviews-list .name-date {
    width: calc(100% - 40px);
    padding: 0 0 0 8px;
  }
  .reviews-list .name-date .name {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .reviews-list .name-date .date {
    margin: 2px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .reviews-list .review-cont {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  /* board-line2-img-list */
  .board-line2-img-list {
    margin: 0 16px;
  }
  .board-line2-img-list > ul > li {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .board-line2-img-list > ul > li > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .board-line2-img-list > ul > li > a .info {
    min-width: calc(100% - 104px);
  }
  .board-line2-img-list .subject {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
  }
  .board-line2-img-list .subject .cate {
    color: var(--Plum, #af2d41);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .board-line2-img-list .cm-cont {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.042px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
  }
  .board-line2-img-list .cm-subject {
    margin: 4px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: keep-all;
  }
  .board-line2-img-list .date-hit {
    margin: 4px 0 7px;
  }
  .board-line2-img-list .date-hit strong {
    margin: 0 8px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .board-line2-img-list .date-hit span {
    margin: 0 8px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .board-line2-img-list .comment-heart {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .board-line2-img-list .comment {
    margin: 0 4px 0 0;
    display: inline-flex;
    align-items: center;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-line2-img-list .comment:before {
    content: "";
    width: 14px;
    height: 14px;
    background: url(../../image/component/icon_speech_bubble.png) no-repeat;
    background-size: contain;
    margin: 0 2px 0 0;
  }
  .board-line2-img-list .heart {
    display: inline-flex;
    align-items: center;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
    white-space: normal;
    white-space: normal;
    word-wrap: break-word;
  }
  .board-line2-img-list .heart:before {
    content: "";
    width: 12px;
    height: 12px;
    background: url(../../image/component/icon_heart_v2.png) no-repeat;
    background-size: contain;
    margin: 0 2px 0 0;
  }
  .board-line2-img-list .img {
    margin: 0 0 0 16px;
    position: relative;
    min-width: 88px;
    min-height: 88px;
    width: 88px;
    height: 88px;
    background: url(../../image/component/bg_no_image_type_picture.png) no-repeat;
    background-size: contain;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  .board-line2-img-list .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  /* type-b */
  .board-line2-img-list.type-b .img {
    margin: 0 16px 0 0;
    position: relative;
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
    background: url(../../image/component/bg_no_image_type_picture.png) no-repeat;
    background-size: contain;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  .board-line2-img-list.type-b > ul > li > a .info {
    min-width: calc(100% - 116px);
  }

  /* board-line2-img-view */
  .board-line2-img-view {
    margin: 0 16px;
    padding-top: 16px;
  }
  .board-line2-img-view .subject {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.045px;
    word-wrap: normal;
  }
  .board-line2-img-view .subject .cate {
    color: var(--Plum, #af2d41);
  }
  .board-line2-img-view .cont {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(30, 34, 41, 0.08);
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .board-line2-img-view .editor-img {
    margin: 24px 0 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .board-line2-img-view .keyword {
    margin: 40px 0 0;
    overflow: hidden;
  }
  .board-line2-img-view .keyword a {
    margin: 6px 6px 0 0;
    float: left;
    display: flex;
    height: 28px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--Border-Tertiary, #0096E4);
    background: var(--Background, #fff);
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  /* comment-list */
  .comment-list {
    margin: 64px 16px 24px;
  }
  .comment-list > .title {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--Light-Semantic-Text-Primary, #262626);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
    letter-spacing: -0.042px;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 0 12px;
  }
  .comment-list > .title .right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .comment-list > .title .right .btn-like {
    display: flex;
    align-items: center;
    color: var(--Light-Semantic-Text-Sub-Primary, #666);
    text-align: right;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .comment-list > .title .right button:before {
    content: "";
    width: 18px;
    height: 18px;
    margin: 0 4px 0 0;
    background: url(../../image/component/icon_heart.png) no-repeat 0 0;
    background-size: contain;
  }
  .comment-list > .title .right .btn-like.active:before {
    background: url(../../image/component/icon_heart_active.png) no-repeat 0 0;
    background-size: contain;
  }
  .comment-list > .title .right .btn-like span {
    margin: 0 0 0 4px;
  }
  .comment-list > ul > li {
    display: flex;
    padding: 16px 0 0;
  }
  .comment-list > ul > li.re {
    margin-left: 40px;
  }
  .comment-list .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: url(../../image/component/bg_profile.png) no-repeat 0 0;
    background-size: contain;
  }
  .comment-list .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .comment-list .info {
    width: calc(100% - 32px);
    padding: 0 0 0 8px;
  }
  .comment-list .name-date-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .comment-list .name {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--Light-Semantic-Text-Secondary, #464646);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .comment-list .name .btn-xsmall {
    height: 20px;
    padding: 0px 6px;
    color: var(--Text-Sub-Primary, #686e7b) !important;
  }
  .comment-list .date {
    color: var(--Light-Semantic-Text-Sub-Secondary, #868686);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: -0.033px;
  }
  .comment-list .more-layer {
    margin-top: 0;
    position: relative;
  }
  .comment-list .cont {
    margin: 4px 0 0;
    color: var(--Light-Semantic-Text-Secondary, #464646);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.039px;
  }
  .comment-list .btn-reply {
    margin: 8px 0 0;
    color: var(--Light-Semantic-Text-Sub-Secondary, #868686);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  /* comment-form */
  .comment-form {
    background: var(--light-semantic-background-elevated-secondary, #fff);
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    z-index: 50;
    max-width: 720px;
  }
  .comment-form.block:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.5;
  }
  .comment-form .insert {
    position: relative;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .comment-form .insert .input-regular {
    width: 100%;
    height: 36px;
    max-height: 80px;
    line-height: 1.5;
    border-radius: 18px !important;
    padding: 6px 40px 0 16px;
    font-size: 14px;
    border: 1px solid var(--light-semantic-border-tertiary, #e6e6e6);
    background: var(--light-basic-gray-100, #f6f6f6);
  }
  .comment-form .insert .btn-send {
    position: absolute;
    bottom: 7px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: url(../../image/component/icon_sending.png);
    background-size: contain;
  }

  .index-main {
    padding: 16px;
  }
  .index-main h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    letter-spacing: -0.06px;
  }
  .index-main h4 img {
    width: 24px;
    height: 24px;
  }
  .index-main .h4-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .index-main .h4-button h4 {
    color: var(--Text-Primary, #1e2229);
    font-family: Pretendard;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 121.739% */
    letter-spacing: -0.069px;
    padding: 7px 0 0;
    white-space: normal;
    word-wrap: break-word;
  }
  .index-main .h4-button button {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    white-space: normal;
    word-wrap: break-word;
  }
  .index-main .h4-button button:before {
    content: "";
    width: 12px;
    height: 12px;
    background: url(../../image/component/icon_information_circled.png) no-repeat;
    background-size: contain;
  }
  .index-main h5 {
    margin: 8px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  /* main-link */
  .main-link {
    margin: 8px 0 0;
  }
  .main-link > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 16px;
  }
  .main-link > ul > li {
    width: calc((100% - 54px) / 4);
    margin: 16px 0 0 18px;
  }
  .main-link > ul > li:nth-child(4n + 1) {
    margin-left: 0;
  }
  .main-link .icon {
    margin: 0 auto;
    width: 72px;
    height: 72px;
    padding: 4px;
    border-radius: 200px;
    background: var(--Gray-100, #f8f9fa);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-link .icon img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .main-link .subject {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  /* btn-more */
  .main-link .icon.btn-more {
    background: url(../../image/component/btn_more.png) no-repeat center center;
    background-size: contain;
  }
  .main-link .icon.btn-more + .subject:before {
    content: "더보기";
    display: block;
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .main-link.active .icon.btn-more {
    background: url(../../image/component/btn_more_active.png) no-repeat center
      center;
    background-size: contain;
  }
  .main-link.active .icon.btn-more + .subject:before {
    content: "접기";
    display: block;
    color: var(--Text-Primary, #1e2229);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .main-link.active li.hide {
    display: block !important;
  }

  /* main-link-arrow */
  .main-link-arrow {
    margin: 32px 16px 0;
  }
  .main-link-arrow > h4 {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
  }
  .main-link-arrow > ul > li {
    padding: 12px 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
  }
  .main-link-arrow > ul > li > a {
    width: 100%;
    display: flex;
    align-items: flex-start;
    background: url(../../image/component/icon_arrow_right.png) no-repeat right
      center;
    background-size: 24px;
    position: relative;
  }
  .main-link-arrow .icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-link-arrow .icon img {
    width: 100%;
    height: 100%;
  }
  .main-link-arrow .icon.w100 {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
  }
  .main-link-arrow .info {
    width: calc(100% - 72px);
    padding: 4px 0 8px 16px;
  }
  .main-link-arrow .icon.w100 + .info {
    width: calc(100% - 100px);
  }
  .main-link-arrow .subject {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.048px;
  }
  .main-link-arrow .cont {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  /* main-banner */
  .main-banner .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* slider-banner1 */
  .slider-banner1 {
    margin: 16px 0 0 16px;
  }
  .slider-banner1 .swiper-slide {
    width: 240px;
    height: 135px;
    margin: 0 12px 0 0;
  }
  .slider-banner1 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  /* popular-searches */
  .popular-searches > ul {
    margin: 16px 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .popular-searches > ul > li a {
    display: flex;
    height: 40px;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--Primary-Lightened, #ffeee9);
    background: var(--Primary-Lightened, #ffeee9);
    color: var(--Primary, #0096E4);
    text-align: center;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }

  /* slider-visiting-schedule */
  .slider-visiting-schedule {
    margin: 16px 16px 0;
  }
  .slider-visiting-schedule .swiper-slide {
    margin: 0 8px 0 0;
    width: 158px;
  }
  .slider-visiting-schedule input {
    display: none;
  }
  .slider-visiting-schedule .btn {
    width: 100%;
    height: 180px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
  }
  .slider-visiting-schedule .date {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .slider-visiting-schedule .time {
    margin: 5px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.3px;
  }
  .slider-visiting-schedule .invite {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .slider-visiting-schedule .invite:before {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_mypage_v1_s.png) no-repeat center
      center;
    background-size: contain;
  }
  .slider-visiting-schedule .won {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .slider-visiting-schedule .won:before {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_won_circled.png) no-repeat center
      center;
    background-size: contain;
  }
  .slider-visiting-schedule .btn-small {
    margin: 12px 0 0;
    display: flex;
    width: 100%;
    height: 28px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--Border-Disabled-Secondary, #f3f5f6);
    background: var(--Background-Disabled-Primary, #f3f5f6);
    color: var(--Text-Disabled-Secondary, #bac1cb);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .slider-visiting-schedule .btn-small:before {
    content: "선택하기";
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .slider-visiting-schedule .btn-small[disabled]:before {
    content: "선택 불가";
    color: var(--Text-Disabled-Secondary, #bac1cb);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  /* checked */
  .slider-visiting-schedule input:checked + .btn {
    border-radius: 8px;
    border: 2px solid var(--Primary, #f63);
  }
  .slider-visiting-schedule input:checked + .btn .btn-small {
    border: 1px solid var(--Primary-Lightened, #ffeee9);
    background: var(--Primary-Lightened, #ffeee9);
  }
  .slider-visiting-schedule input:checked + .btn .btn-small:before {
    content: "선택 완료";
    color: var(--Primary, #f63);
  }

  .talent-view-cont {
    padding: 16px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }

  /* review-total-score */
  .review-total-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    height: 96px;
    flex-shrink: 0;
    padding: 16px;
    border-radius: 8px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .review-total-score .total-score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 24px;
    height: 100%;
    border-right: 1px solid rgba(30, 34, 41, 0.08);
  }
  .review-total-score .total-score .tit {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .review-total-score .total-score .con {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 121.739% */
    letter-spacing: -0.069px;
  }
  .review-total-score .number {
    margin: 6px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    text-align: center;
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  /* text-bg-li */
  .text-bg-li {
    margin: 8px 0 0;
    padding: 16px;
    border-radius: 8px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .text-bg-li li {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .text-bg-li li + li {
    margin: 16px 0 0;
  }

  /* text-bg */
  .text-bg {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .text-bg h6 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .text-bg h6 img {
    width: 18px;
    height: 18px;
  }
  .text-bg h6 span {
    color: var(--Primary, #0096E4);
  }
  .text-bg p {
    margin: 4px 0 0;
    width: 100%;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }

  /* text-bg2 */
  .text-bg2 {
    margin: 16px 0 0;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    background: var(--Background-Lower-Secondary, #f8f9fa);
  }
  .text-bg2 h6 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .text-bg2 h6 img {
    width: 18px;
    height: 18px;
  }
  .text-bg2 p {
    margin: 4px 0 0;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .text-bg2 p span {
    color: var(--Primary, #0096E4);
  }

  /* copy-execCommand */
  .copy-execCommand {
    height: 60px;
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .copy-execCommand .tit {
    width: 50%;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .copy-execCommand .con {
    width: 50%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .copy-execCommand input {
    margin: 0 12px 0 0;
    width: 100px;
    color: var(--Text-Secondary, #353c46);
    text-align: right;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .copy-execCommand .con .btn-small {
    width: 45px;
    padding: 0 !important;
    font-weight: 700;
  }

  /* right-icon */
  .right-icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    color: var(--Text-Primary, #1e2229);
    text-align: right;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .right-icon img {
    width: 18px;
    height: 18px;
  }

  /* block-list */
  .block-list {
    margin: 0 16px;
  }
  .block-list > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .block-list .img-name-date {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .block-list .img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: url(../../image/component/bg_profile.png) no-repeat;
    background-size: contain;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
  }
  .block-list .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .block-list .name-date .name {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .block-list .name-date .date {
    margin: 4px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .block-list .btn-small {
    color: var(--Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }

  /* additem-list */
  .additem-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .additem-list li {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--Light-Basic-Gray-150, #f3f5f6);
    background: var(--Light-Basic-Gray-150, #f3f5f6);
    color: var(--Light-Semantic-Text-Secondary, #353c46);
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.036px;
  }
  .additem-list li .btn-del {
    margin-left: 4px;
    width: 16px;
    height: 16px;
    background: url(/assets/image/component/icon_close_prohibited_circled_dark.png)
      no-repeat;
    background-size: contain;
  }

  @media screen and (min-width: 960px) {
    .m-only {
      display: none;
    }
    .w-only {
      display: block;
    }
  }
  @media screen and (max-width: 960px) {
    .w-only {
      display: none;
    }
    .m-only {
      display: block;
    }
  }

  /******* 24모아모아 *******/
  .main-link2 {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 16px 24px 16px;
  }
  .main-link2 li {
    margin: 16px 15px 0 0;
    padding: 7px 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((100% - 15px)/2);
    height: 165px;
    border-radius: 12px;
  border: 2px solid var(--Border-Secondary, #D8DDE2);
  background: var(--Background, #FFF);
  box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.08);
  }
  .main-link2 li:nth-child(2n){
    margin-right: 0;
  }
  .main-link2 img {
    width: 128px;
  height: 128px;
  }
  .main-link2 a div {
    text-align: center;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 127.273% */
  letter-spacing: -0.033px;
  }

  /* main-24 */
  .main-24 {
    margin: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .main-24 > h5 {
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.054px;
  }
  .main-24 > div {
    margin: 4px 0 0;
    width: 309px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main-24 > div strong {
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 28px; /* 116.667% */
  letter-spacing: -0.072px;
  }
  .main-24 > div .btn-small {
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }

  /* sns-link */
  .sns-link {
    margin: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sns-link li {
    width: 33.3333%;
  }
  .sns-link li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .sns-link .icon {
    display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50px;
  }
.sns-link .icon.call {
border: 1px solid var(--Primary, #0096E4);
background: var(--Primary, #0096E4);
}
  .sns-link .icon.kakao {
    border: 1px solid #FEE500;
    background: #FEE500;
  }
  .sns-link .icon.email {
  border: 1px solid var(--Gray-800, #353C46);
  background: var(--Gray-800, #353C46);
  }
  .sns-link .icon img {
    width: 24px;
  height: 24px;
  }
  .sns-link .tit {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 140% */
  letter-spacing: -0.045px;
  }
  .sns-link .con {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }

  .guide-text-red {
    margin: 40px 0 0;
    color: var(--Red-Darkened, #EE4747);
  text-align: center;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }

  /* estimate-request-list */
  .estimate-request-list {
    margin: 16px 16px 0;
    border-top: 1px solid rgba(30, 34, 41, 0.04);
  }
  .estimate-request-list > ul > li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(30, 34, 41, 0.04);
  }
  .estimate-request-list .date-state {
    margin: 0 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .estimate-request-list .date-state .date {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .estimate-request-list .date-state .state {
    color: var(--Text-Secondary, #353c46);
    text-align: right;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.042px;
  }
  .estimate-request-list .img-info {
    display: flex;
  }
  .estimate-request-list .img-info .img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: var(--Gray-100, #F8F9FA);
  }
  .estimate-request-list .img-info .img img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
  }
  .estimate-request-list .img-info .img .btn-xsmall {
    position: absolute;
    top: 0;
    left: 0;
  }
  .estimate-request-list .img-info .info {
    width: calc(100% - 88px);
    padding: 0 0 0 16px;
  }
  .estimate-request-list .subject {
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: -0.045px;
  }
  .estimate-request-list .tit-con > li {
    margin: 4px 0 0;
  }
  .estimate-request-list .tit-con .tit {
    width: 80px;
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .estimate-request-list .tit-con .con {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 80px);
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .estimate-request-list .tit-con .con.ellipsis {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .estimate-request-list .tit-con .con strong {
    color: #353c46;
  }
  .estimate-request-list .btn {
    margin: 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .estimate-request-list .btn .btn-regular {
    width: 100%;
  }

  /* estimate-view-list */
  .estimate-view-list {
    margin: 16px;
  }
  .estimate-view-list > ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .estimate-view-list > ul > li > label > input {
    display: none;
  }
  .estimate-view-list > ul > li > label > .border {
    padding: 16px;
    border-radius: 8px;
  border: 1px solid var(--Border-Tertiary, #E7EAEE);
  background: var(--Background, #FFF);
  box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.04);
  }
  .estimate-view-list > ul > li > label > input:checked + .border {
  border: 2px solid var(--Primary, #0096E4);
  background: var(--Primary-Lightened, #F2FAFF);
  }
  .estimate-view-list > ul > li > label > input:checked + .border .img::before {
    content: '채택완료';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
  height: 20px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--Primary, #0096E4);
  background: var(--Primary, #0096E4);
  color: var(--Text-Dark-Inverted, #FFF);
  text-align: center;
  font-family: Pretendard;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px; /* 130% */
  letter-spacing: -0.03px;
  }
  .estimate-view-list .img-info {
    display: flex;
  }
  .estimate-view-list .img {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: url(../../image/component/bg_no_image_type_picture.png) no-repeat
      0 0;
    background-size: cover;
  }
  .estimate-view-list .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  .estimate-view-list .info {
    width: calc(100% - 72px);
    padding: 0 0 0 16px;
  }
  .estimate-view-list .subject {
    display: flex;
    align-items: center;
  }
  .estimate-view-list .subject span {
    max-width: 200px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .estimate-view-list .subject:after {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat 0 0;
    background-size: contain;
  }
  .estimate-view-list .address {
    margin: 9px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .estimate-view-list .star-rating-regular {
    margin: 5px 0 0;
    display: flex;
    align-items: center;
  }
  .estimate-view-list .star-rating-regular .star-score {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    margin-left: 2px;
  }
  .estimate-view-list .tit-con {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
  }
  .estimate-view-list .tit-con .tit {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .estimate-view-list .tit-con .con {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .estimate-view-list .img span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--Primary, #3097ff);
    background: var(--Primary, #3097ff);
    color: var(--Text-Dark-Inverted, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }
  /* total-estimate */
  .estimate-view-list .total-estimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .estimate-view-list .total-estimate .tit {
    color: var(--Text-Sub-Primary, #686E7B);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .estimate-view-list .total-estimate .tit {
    color: var(--Text-Sub-Primary, #686E7B);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .estimate-view-list .total-estimate .con {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Text-Secondary, #353C46);
  text-align: right;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 140% */
  letter-spacing: -0.045px;
  }

  /* estimate-view */
  .estimate-view {
    margin: 16px;
  }
  .estimate-view .img-info {
    display: flex;
  }
  .estimate-view .img {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--Dimed-4, rgba(30, 34, 41, 0.04));
    background: url(../../image/component/bg_no_image_type_picture.png) no-repeat
      0 0;
    background-size: cover;
  }
  .estimate-view .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  .estimate-view .info {
    width: calc(100% - 72px);
    padding: 0 0 0 16px;
  }
  .estimate-view .subject {
    display: flex;
    align-items: center;
  }
  .estimate-view .subject span {
    max-width: 200px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 117.647% */
    letter-spacing: -0.051px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .estimate-view .subject:after {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../image/component/icon_arrow_right.png) no-repeat 0 0;
    background-size: contain;
  }
  .estimate-view .address {
    margin: 9px 0 0;
    color: var(--Text-Sub-Secondary, #8f95a1);
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.036px;
  }
  .estimate-view .star-rating-regular {
    margin: 5px 0 0;
    display: flex;
    align-items: center;
  }
  .estimate-view .star-rating-regular .star-score {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
    margin-left: 2px;
  }
  .estimate-view .tit-con {
    margin: 16px 0 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--Border-Tertiary, #e7eaee);
    background: var(--Background, #fff);
  }
  .estimate-view .tit-con .tit {
    color: var(--Text-Sub-Primary, #686e7b);
    font-family: Pretendard;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 127.273% */
    letter-spacing: -0.033px;
  }
  .estimate-view .tit-con .con {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--Text-Secondary, #353c46);
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.039px;
  }
  .estimate-view .img span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--Primary, #3097ff);
    background: var(--Primary, #3097ff);
    color: var(--Text-Dark-Inverted, #fff);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
  }

  /* as-above */
  .as-above {
    margin: 24px 16px 0;
  }
  .as-above h6 {
    margin: 0 0 24px;
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }
  .as-above p {
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }

  /* request-details */
  .request-details {
    margin: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .request-details .tit {
    margin: 0 0 8px;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.039px;
  }
  .request-details .con {
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }

  /* .swiper-container.img-view */
  .swiper-container.img-view .swiper-slide img {
    border-radius: 8px;
  }

  /* company-view */
  .company-view {
    padding: 16px;
  }
  .company-view .cname {
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 117.647% */
  letter-spacing: -0.051px;
  }
  .company-view .address {
    margin: 8px 0 0;
    position: relative;
    padding-left: 22px;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.039px;
  }
  .company-view .address:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background: url(../../image/component/icon_map_marker.png) no-repeat 0 0;
    background-size: contain;
  }

  /* required-documents */
  .required-documents {
    margin: 16px 16px 0;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }

  /* request-quote-received */
  .request-quote-received {
    margin: 16px 16px 0;
    padding: 22px 0 24px;
    border-radius: 12px;
  border: 2px solid var(--Border-Secondary, #D8DDE2);
  background: var(--Background, #FFF);
  box-shadow: 0px 2px 6px 0px rgba(30, 34, 41, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .request-quote-received > li {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  .request-quote-received > li + li {
    border-left: 1px solid rgba(30, 34, 41, 0.08);
  }
  .request-quote-received .tit {
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }
  .request-quote-received .con {
    color: var(--Text-Primary, #1E2229);
  text-align: center;
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 117.647% */
  letter-spacing: -0.051px;
  }

  /* partner-guide */
  .partner-guide {
    margin: 8px 0 0;
    color: var(--Text-Secondary, #353C46);
  text-align: center;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 215.385% */
  letter-spacing: -0.039px;
  }

  /* overflow-x-scroll */
  .overflow-x-scroll {
    margin: 11px 0 0;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .overflow-x-scroll::-webkit-scrollbar {
    height: 0;
  }
  .overflow-x-scroll .table01 {
    width: 560px;
  }
  .overflow-x-scroll .table01 .display-flex {
    gap: 8px;
  }
  .overflow-x-scroll .table01 .display-flex img {
    width: 18px;
    height: 18px;
  }
  .overflow-x-scroll .table01 .display-flex .input-regular {
    width: calc(100% - 26px);
  }
  .overflow-x-scroll .table01 .input-regular {
    width: 100%;
  }

  /* estimate-form-manage-list */
  .estimate-form-manage-list {
    margin: 16px 16px 0;
  }
  .estimate-form-manage-list > ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .estimate-form-manage-list label input {
    display: none;
  }
  .estimate-form-manage-list label .border {
    position: relative;
  padding: 16px 56px 16px 16px;
  border-radius: 8px;
  border: 1px solid var(--Border-Tertiary, #E7EAEE);
  background: var(--Background, #FFF);
  }
  .estimate-form-manage-list label input:checked + .border {
    border: 2px solid var(--Primary, #0096E4);
  }
  .estimate-form-manage-list .subject {
    color: var(--Text-Primary, #1E2229);
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 140% */
  letter-spacing: -0.045px;
  overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .estimate-form-manage-list .date {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
  }
  .estimate-form-manage-list .date .tit {
    width: 80px;
    color: var(--Text-Sub-Primary, #686E7B);
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 127.273% */
  letter-spacing: -0.033px;
  }
  .estimate-form-manage-list .date .con {
    width: calc(100% - 80px);
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.036px;
  }
  .estimate-form-manage-list .more-layer {
    position: absolute;
    top: 16px;
    right: 16px;
  }


  /* app-purchase-list */
  .app-purchase-list {
    margin: 16px 16px 0;
  }
  .app-purchase-list > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .app-purchase-list > ul > li > label {
    position: relative;
    display: flex;
    align-items: center;
  }
  .app-purchase-list label input {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }
  .app-purchase-list > ul > li > label .border {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 76px;
    padding: 16px 56px 16px 16px;
    border-radius: 8px;
  border: 1px solid var(--Border-Tertiary, #E7EAEE);
  background: var(--Background, #FFF);
  }
  .app-purchase-list > ul > li > label input:checked + .border {
    border: 2px solid var(--Primary, #0096E4);
  }
  .app-purchase-list label img {
    width: 24px;
  height: 24px;
  }
  .app-purchase-list label .point {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--Text-Secondary, #353C46);
  font-family: Pretendard;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 117.647% */
  letter-spacing: -0.051px;
  }
  .app-purchase-list label .price {
    color: var(--Text-Secondary, #353C46);
  text-align: right;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.042px;
  }


/* 2025-06-17 */
.estimate-view-list > ul > li .border.active {
    border: 2px solid var(--Primary, #0096E4);
    background: var(--Primary-Lightened, #F2FAFF);
}
.estimate-view-list > ul > li .border.active .img::before {
    content: '채택완료';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    height: 20px;
    padding: 0px 6px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--Primary, #0096E4);
    background: var(--Primary, #0096E4);
    color: var(--Text-Dark-Inverted, #FFF);
    text-align: center;
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 130% */
    letter-spacing: -0.03px;
}

/* 2025-07-26 */
.link-to-download {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .link-to-download > li {
    width: 152px;
    height: 58px;
    text-indent: -9999px;
  }
  .link-to-download > li > a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid rgba(30, 34, 41, 0.1);
  }
  .link-to-download > li:first-child > a {
    background: url(../../image/component/btn_apple_appstore.png) no-repeat 0 0;
    background-size: contain;
  }
  .link-to-download > li:last-child > a {
    background: url(../../image/component/btn_google_playstore.png) no-repeat 0 0;
    background-size: contain;
  }
  .link-to-download > li > a:hover {
    transition: margin-top 0.3s;
    box-shadow: 0 4px 8px 0 rgba(30, 34, 41, 0.08);
    border: 1px solid rgba(30, 34, 41, 0.16);
    margin-top: -3px;
  }


	/* 2025-08-14 */
/* table-scroll */
.table-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}
.table-scroll::-webkit-scrollbar {
  height: 0;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #d8dde2;
  border-radius: 3px;
}
.table-scroll table {
  width: 700px !important;
}

/* large */
.table01.large th {
  padding: 9px 0px;
  text-align: center;
  vertical-align: middle;
  background: var(--Gray-100, #f8f9fa);
  color: var(--Text-Sub-Primary, #686E7B);
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 153.846% */
letter-spacing: -0.039px;
border-top: 1px solid #C8CFD6;
border-bottom: 1px solid #C8CFD6;
}
.table01.large td {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(30, 34, 41, 0.08);
  background: var(--Background, #fff);
  vertical-align: middle;
  color: var(--Text-Primary, #1E2229);
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 133.333% */
letter-spacing: -0.045px;
}

/* 25-09-16 */
#header {
  height: 60px;
}
#header > h1 {
  width: 225px;
  height: 60px;
}
#header > h1 a {
  background-size: cover;
}