/* font-family */
/* @font-face {
  font-family: 'SUIT';
  src: url('/assets/fonts/SUIT-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: url('/assets/fonts/SUIT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: url('/assets/fonts/SUIT-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: url('/assets/fonts/SUIT-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
} */

/* reset */
body {
  margin: 0;
  padding: 0;
  font-family: 'SUIT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -0.4px;
}

button {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
header .header-left,
header .header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
header .header-left {
  padding-left: 20px;
}
header .header-right {
  padding-right: 20px;
}
header i,
.actionbar-wrapper i {
  display: block;
  width: 24px;
  height: 24px;
}
header .back-ico {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7035 4.28944C16.096 4.67804 16.0991 5.3112 15.7105 5.70363L9.41423 12.0619L15.7035 18.2892C16.096 18.6778 16.0991 19.311 15.7105 19.7034C15.3219 20.0959 14.6888 20.099 14.2963 19.7104L7.2964 12.7794C7.10793 12.5928 7.00132 12.339 7.00001 12.0738C6.99871 11.8085 7.10282 11.5537 7.28944 11.3652L14.2893 4.29637C14.6779 3.90393 15.3111 3.90083 15.7035 4.28944Z' fill='%23121418'/%3E%3C/svg%3E%0A")
    no-repeat center;
  background-size: contain;
}
header .search-ico {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0904 5.90884C13.2786 3.09707 8.71982 3.09707 5.90805 5.90884C3.09628 8.72062 3.09628 13.2794 5.90805 16.0912C8.71982 18.903 13.2786 18.903 16.0904 16.0912C18.9022 13.2794 18.9022 8.72062 16.0904 5.90884ZM4.77668 4.77747C8.21329 1.34086 13.7851 1.34086 17.2218 4.77747C20.4677 8.0234 20.6478 13.1742 17.7621 16.6315L21.5649 20.4343C21.8773 20.7467 21.8773 21.2533 21.5649 21.5657C21.2525 21.8781 20.746 21.8781 20.4335 21.5657L16.6307 17.7629C13.1734 20.6486 8.02261 20.4685 4.77668 17.2226C1.34007 13.7859 1.34007 8.21409 4.77668 4.77747Z' fill='%23121418'/%3E%3C/svg%3E%0A")
    no-repeat center;
  background-size: contain;
}
header .navbar-ico {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.19922 4.99995C2.19922 4.55812 2.55739 4.19995 2.99922 4.19995H20.9992C21.441 4.19995 21.7992 4.55812 21.7992 4.99995C21.7992 5.44178 21.441 5.79995 20.9992 5.79995H2.99922C2.55739 5.79995 2.19922 5.44178 2.19922 4.99995ZM2.19922 12C2.19922 11.5581 2.55739 11.2 2.99922 11.2H20.9992C21.441 11.2 21.7992 11.5581 21.7992 12C21.7992 12.4418 21.441 12.8 20.9992 12.8H2.99922C2.55739 12.8 2.19922 12.4418 2.19922 12ZM2.19922 19C2.19922 18.5581 2.55739 18.2 2.99922 18.2H20.9992C21.441 18.2 21.7992 18.5581 21.7992 19C21.7992 19.4418 21.441 19.8 20.9992 19.8H2.99922C2.55739 19.8 2.19922 19.4418 2.19922 19Z' fill='%23121418'/%3E%3C/svg%3E%0A")
    no-repeat center;
  background-size: contain;
}
header h1 {
  display: flex;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #121418;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}
/* actionbar */
.actionbar-wrapper {
  z-index: 10;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 77px;
  width: 100%;
  background: url('../../images/common/layout/bg-actionbar.png') no-repeat center;
  background-size: auto 100%;
}
.actionbar-wrapper ul {
  margin-top: auto;
  display: flex;
  width: 100%;
  column-gap: 16px;
  align-items: flex-end;
  padding: 0 20px;
  height: 58px;
}
.actionbar-wrapper ul li {
  flex: 1 1;
  height: 58px;
}
.actionbar-wrapper ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.actionbar-wrapper ul .home a {
  background: #eceef2;
  border-radius: 50%;
  height: 48px;
  margin: -4px auto 0;
  max-width: 48px;
  outline: 6px solid #fff;
}
.actionbar-wrapper ul .home.on a {
  background: #24272d;
}
.actionbar-wrapper ul .home.on a {
  background: #24272d;
}
.actionbar-wrapper ul img {
  display: block;
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}
.actionbar-wrapper ul span {
  color: #828991;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  margin-top: 2px;
}

/* shoplive */
.wrapper {
  padding: 56px 0 80px;
}
.shoplive-container h2.ready-title {
  max-width: 1200px;
}
.shoplive-nodata {
  padding: 48px 0;
  text-align: center;
  color: #828991;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
  font-weight: 400;
}
.shoplive-container h2 {
  padding: 0 24px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 22px;
  letter-spacing: -0.02em;
  max-width: 1200px;
  margin: 0 auto;
}
.shoplive-container [class*='list-header-title'] {
  padding: 0 24px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #333 !important;
  line-height: 22px !important;
  letter-spacing: -0.02em !important;
  max-width: 1200px !important;
}
.shoplive-container + .shoplive-container {
  margin-top: 40px;
}
[class*='calendar-button'] {
  background-color: #fff !important;
}
[class*='theme-primary-background-color'] {
  background-color: #ef3434 !important;
}
.shoplive-featured-bg {
  background-color: #f6f6f6;
  width: 100%;
  padding: 42px 0;
  margin: 0 0 60px;
}
#shoplive-shortform {
  max-width: 1200px;
  margin: 0 auto;
}
.shoplive-container [class*='container-top-campaign'] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.shoplive-container [class*='smog-effect-block'] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f6f6f6 100%) !important;
}

/* lnb 전체메뉴 */
.lnb-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  height: 100%;
  overflow-y: auto;
  transform: translateX(100%);
  z-index: 100;
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
}
.lnb-wrapper.active {
  transform: translateX(0);
}
.lnb-wrapper a {
  color: #121418;
  text-decoration: none;
}
.lnb-wrapper .lnb-header {
  align-items: center;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  left: 0;
  min-height: 56px;
  position: sticky;
  top: 0;
  padding: 0 20px;
  z-index: 10;
}
.lnb-wrapper .lnb-header .btn-home {
  font-size: 0;
  height: 24px;
  margin-right: 10px;
  width: 24px;
  border: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M12.657 3.923a4.2 4.2 0 0 0-1.314 0c-.608.096-1.212.398-2.022 1.05-.822.66-1.78 1.618-3.119 2.957-1.19 1.19-1.655 1.668-1.944 2.234q-.15.294-.252.61c-.197.604-.206 1.27-.206 2.954V15.6c0 1.143.001 1.935.067 2.543.064.593.183.915.353 1.15q.205.282.487.487c.235.17.557.289 1.15.353.608.066 1.4.067 2.543.067h7.2c1.143 0 1.936-.001 2.544-.067.593-.064.914-.182 1.15-.353q.28-.205.486-.487c.17-.235.289-.557.353-1.15.066-.608.067-1.4.067-2.543v-1.872c0-1.684-.009-2.35-.205-2.955a4 4 0 0 0-.253-.609c-.288-.566-.753-1.044-1.944-2.234-1.338-1.339-2.297-2.296-3.119-2.957-.81-.652-1.414-.954-2.022-1.05m-1.564-1.58a5.8 5.8 0 0 1 1.815 0c.996.157 1.857.645 2.774 1.383.897.722 1.917 1.741 3.214 3.038l.034.034.098.098c1.06 1.06 1.722 1.722 2.14 2.542q.208.406.348.84c.285.876.285 1.812.284 3.311v2.057c0 1.086 0 1.965-.076 2.67-.079.729-.247 1.364-.65 1.918a3.8 3.8 0 0 1-.84.84c-.554.402-1.189.57-1.918.65-.704.076-1.584.076-2.67.076H8.354c-1.086 0-1.965 0-2.67-.076-.729-.08-1.364-.248-1.917-.65a3.8 3.8 0 0 1-.841-.84c-.402-.554-.57-1.19-.65-1.918-.076-.704-.076-1.584-.076-2.67v-2.057c0-1.5 0-2.435.284-3.31a6 6 0 0 1 .348-.841c.418-.82 1.08-1.482 2.14-2.542l.099-.098.034-.034C6.402 5.467 7.42 4.448 8.318 3.726c.917-.738 1.778-1.226 2.775-1.384M7.2 17a.8.8 0 0 1 .8-.8h8a.8.8 0 1 1 0 1.6H8a.8.8 0 0 1-.8-.8' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat;
}
.lnb-wrapper .lnb-header .btn-close {
  height: 24px;
  width: 24px;
  border: none;
  font-size: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M3.695 3.695c.26-.26.683-.26.943 0L10 9.057l5.362-5.362a.667.667 0 1 1 .943.943L10.943 10l5.362 5.362a.667.667 0 1 1-.943.943L10 10.943l-5.362 5.362a.667.667 0 1 1-.943-.943L9.057 10 3.695 4.638a.667.667 0 0 1 0-.943' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center center / 24px;
}
.lnb-wrapper nav {
  padding: 20px 24px 68px;
}
.lnb-wrapper .live-banner-area {
  background-color: #f7f7f7;
  border-radius: 8px;
  display: block;
  margin: 0 0 40px;
  padding: 22px 19px 22px 24px;
  position: relative;
}
.lnb-wrapper .live-banner-area p {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.lnb-wrapper .live-banner-area strong {
  font-size: 18px;
}
.lnb-wrapper .live-banner-area p em {
  font-style: normal;
  color: #d61111;
}
.lnb-wrapper .live-banner-area span {
  color: #828991;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}
.lnb-wrapper .live-banner-area::after {
  content: '';
  height: 64px;
  position: absolute;
  right: 19px;
  top: 14.33px;
  width: 96px;
  background: url('../../images/common/ico/ico-gnb-live.png') no-repeat 50% / cover;
}
.lnb-wrapper nav h3 {
  color: #565b64;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  padding: 0;
  margin: 0;
}
.lnb-wrapper .lnb {
  margin: 0;
  padding: 0;
}
.lnb-wrapper .lnb li {
  list-style: none;
}
.lnb-wrapper .lnb li a {
  align-items: center;
  border-bottom: 1px solid #eceef2;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  width: 100%;
  position: relative;
}
.lnb-wrapper .lnb li a .nav-list {
  align-items: center;
  display: flex;
  flex: 1 1;
  flex-direction: row;
  flex-wrap: nowrap;
  grid-gap: 8px;
  gap: 8px;
  justify-content: flex-start;
  color: #828991;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
.lnb-wrapper .lnb li a strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  color: #121418;
  position: relative;
}
.lnb-wrapper .lnb li a strong.dot::after {
  background: #3953fa;
  border-radius: 50%;
  content: '';
  height: 6px;
  position: absolute;
  right: -7px;
  top: 0;
  width: 6px;
}
.lnb-wrapper .lnb li a::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M13.435 5.435a.8.8 0 0 1 1.13 0l6 6a.8.8 0 0 1 0 1.13l-6 6a.8.8 0 0 1-1.13-1.13l4.634-4.635H4a.8.8 0 0 1 0-1.6H18.07l-4.634-4.634a.8.8 0 0 1 0-1.131' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center center / 20px;
  opacity: 0.6;
}
.lnb-wrapper nav hr {
  border: 0;
  border-top: 12px solid #f7f7f9;
  margin: 40px -24px;
}
.lnb-wrapper .lnb .toggle-content {
  display: none;
}
.lnb-wrapper .lnb .toggle-content.active {
  display: block;
}
.lnb-wrapper .lnb .toggle-content ul {
  align-items: flex-start;
  background-color: #f7f7f9;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  grid-gap: 16px;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
}
.lnb-wrapper .lnb .toggle-content ul li {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 800;
  grid-gap: 4px;
  gap: 4px;
  line-height: 26px;
  position: relative;
  width: 100%;
}
.lnb-wrapper .lnb .toggle-content ul li a {
  border: none;
  padding: 0 0 0 20px;
}
.lnb-wrapper .lnb .toggle-content ul li a::after {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M13.435 5.435a.8.8 0 0 1 1.13 0l6 6a.8.8 0 0 1 0 1.13l-6 6a.8.8 0 0 1-1.13-1.13l4.634-4.635H4a.8.8 0 0 1 0-1.6H18.07l-4.634-4.634a.8.8 0 0 1 0-1.131' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center center / 20px;
  opacity: 0.6;
}
.lnb-wrapper .lnb .toggle-content ul li a::before {
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M15.704 4.29a1 1 0 0 1 .006 1.414l-6.296 6.358 6.29 6.227a1 1 0 1 1-1.408 1.421l-7-6.93a1 1 0 0 1-.007-1.415l7-7.069a1 1 0 0 1 1.415-.007' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center center;
  opacity: 0.6;
}
.lnb-wrapper .lnb.depth li a::after {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23828991' fill-rule='evenodd' d='M4.29 8.296a1 1 0 0 1 1.414-.007l6.358 6.297 6.227-6.29a1 1 0 0 1 1.422 1.408l-6.931 7a1 1 0 0 1-1.415.007l-7.069-7a1 1 0 0 1-.007-1.415' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat;
}
.lnb-wrapper .banner-eng {
  background-color: #f6f3f1;
  border-radius: 8px;
  margin-top: 24px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.lnb-wrapper .banner-eng strong {
  align-items: center;
  color: #3a3f49;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  line-height: 22px;
}
.lnb-wrapper .banner-eng strong::after {
  content: '';
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M13.435 5.435a.8.8 0 0 1 1.13 0l6 6a.8.8 0 0 1 0 1.13l-6 6a.8.8 0 0 1-1.13-1.13l4.634-4.635H4a.8.8 0 0 1 0-1.6H18.07l-4.634-4.634a.8.8 0 0 1 0-1.131' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center center / 16px;
  opacity: 0.6;
}
.lnb-wrapper .banner-eng span {
  color: #828991;
  font-size: 11px;
  line-height: 18px;
}
.lnb-wrapper .banner-eng p {
  color: #3a3f49;
  font-size: 11px;
  line-height: 18px;
  margin-top: 2px;
  margin: 0;
}
.lnb-wrapper .lnb.depth li:has(.toggle-content.active) > a {
  border: none;
}

/*챗봇*/
.custom-service{
  position: fixed;
  bottom: 80px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index:90;
}
.custom-service .btn-custom{
  border-radius: 50%;
  background: #000;
  box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
  display: block;
  height: 48px;
  pointer-events: auto;
  position: relative;
  width: 48px;
  font-size:0;
  border:none;
}
.custom-service .btn-custom::after{
  content:"";
  width:24px;
  height:24px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12 3.8A6.2 6.2 0 0 0 5.8 10v.2h.7a1.3 1.3 0 0 1 1.3 1.3v5a1.3 1.3 0 0 1-1.3 1.3H5A2.8 2.8 0 0 1 2.2 15v-2c0-1.268.843-2.34 2-2.684V10a7.8 7.8 0 1 1 15.6 0v.316c1.156.344 2 1.416 2 2.684v2a2.8 2.8 0 0 1-2.8 2.8h-.29c-.212.917-.784 1.627-1.517 2.116-.701.467-1.553.74-2.419.84A1.3 1.3 0 0 1 13.5 21.8H12a1.8 1.8 0 0 1 0-3.6h1.5a1.3 1.3 0 0 1 1.251.945c.595-.088 1.137-.282 1.555-.56.348-.232.606-.517.753-.862a1.3 1.3 0 0 1-.859-1.223v-5a1.3 1.3 0 0 1 1.3-1.3h.7V10A6.2 6.2 0 0 0 12 3.8m-7 8A1.2 1.2 0 0 0 3.8 13v2A1.2 1.2 0 0 0 5 16.2h1.2v-4.4zm12.8 0v4.4H19a1.2 1.2 0 0 0 1.2-1.2v-2a1.2 1.2 0 0 0-1.2-1.2zm-5.8 8a.2.2 0 0 0 0 .4h1.2v-.4z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center / 24px;
  position:absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.custom-service.active .btn-custom::after{
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M3.695 3.695c.26-.26.683-.26.943 0L10 9.057l5.362-5.362a.667.667 0 1 1 .943.943L10.943 10l5.362 5.362a.667.667 0 1 1-.943.943L10 10.943l-5.362 5.362a.667.667 0 1 1-.943-.943L9.057 10 3.695 4.638a.667.667 0 0 1 0-.943' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center / 24px;
}
.custom-service .custom-service-menu{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display:none;
}
.custom-service .custom-service-menu li{
  list-style: none;
  position:relative;
  line-height:48px;
  margin-top:12px;
}
.custom-service .custom-service-menu li a{
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  padding-right:60px;
  text-decoration: none;
}
.custom-service .custom-service-menu li a::after{
  content:"";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
  display: block;
  height: 48px;
  pointer-events: auto;
  position: absolute;
  right:0;
  top:0;
  width: 48px;
}

.custom-service .custom-service-menu li a::before{
  content:"";
  width:24px;
  height:24px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M7.6 3h7.8C16.836 3 18 4.209 18 5.7v7.19a.228.228 0 0 1-.292.22 5.063 5.063 0 0 0-4.749 1.023c-.115.099-.295.058-.399-.054a.85.85 0 0 0-.627-.279H8.467c-.479 0-.867.403-.867.9s.388.9.867.9h2.92c.167 0 .272.189.2.344a5.55 5.55 0 0 0-.52 2.356c0 .845.186 1.644.52 2.356.072.155-.033.344-.2.344H7.6C6.164 21 5 19.791 5 18.3V5.7C5 4.209 6.164 3 7.6 3m.867 3.6c-.479 0-.867.403-.867.9s.388.9.867.9h6.066c.479 0 .867-.403.867-.9s-.388-.9-.867-.9zm0 3.6c-.479 0-.867.403-.867.9s.388.9.867.9h6.066c.479 0 .867-.403.867-.9s-.388-.9-.867-.9z' clip-rule='evenodd'/%3E%3Cpath fill='%23121418' d='M16.5 15a3.5 3.5 0 0 1 3.248 4.802l-.273.557c-.173.36-.112.7.12 1.116a.344.344 0 0 1-.295.514c-.356.008-.925-.138-1.378-.306A3.6 3.6 0 0 1 16.5 22a3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E") no-repeat center center / 24px;
  position:absolute;
  right:0;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

.custom-service .custom-service-menu li:first-child a::before{
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23121418' fill-rule='evenodd' d='M22.001 11.474a9.474 9.474 0 0 1-9.473 9.473 9.45 9.45 0 0 1-3.571-.696c-.504-.205-1.065-.257-1.58-.082l-3.451 1.176a1 1 0 0 1-1.27-1.27l1.176-3.45c.176-.516.123-1.076-.082-1.58a9.474 9.474 0 1 1 18.251-3.571m-10.7 1.426a1 1 0 1 0-1.6 1.2 3.5 3.5 0 0 0 5.6 0 1 1 0 0 0-1.6-1.2c-.6.8-1.8.8-2.4 0m.2-3.4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center / 24px;
}

.custom-service.active .custom-service-menu {
  display: block;
}

/* dim */
.dim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 80;
}
.dim-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
body.no-scroll { overflow: hidden; }