@charset "UTF-8";
* {
  box-sizing: border-box;
}

:after, :before {
  box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, th, td, input, select, textarea, button {
  margin: 0;
  padding: 0;
}

dl, ul, ol, menu, li {
  list-style: none;
}

address, caption, code, em, var {
  font-style: normal;
}

img, fieldset, iframe {
  border: 0 none;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}

canvas, iframe, img, svg, video {
  vertical-align: middle;
}

input, select, textarea, button {
  vertical-align: middle;
}

textarea {
  resize: none;
}

input::-ms-clear {
  display: none;
}

button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}

button, input[type=button], input[type=submit], input[type=reset], input[type=file] {
  border-radius: 0;
  -webkit-appearance: button;
}

input[type=image], input[type=text], input[type=submit], input[type=password], input[type=search] {
  border-radius: 0;
  -webkit-appearance: none;
}

input:checked[type=checkbox] {
  -webkit-appearance: checkbox;
  background-color: transparent;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

caption, legend {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

a {
  text-decoration: none;
  select-dummy: expression(this.hideFocus=true);
}

body, h1, h2, h3, h4, h5, h6, th, td, input, select, textarea, button {
  /* font family, letter-spacing etc...*/
}

textarea, input {
  -webkit-apperence: none;
}

article, details, figure, footer, header, nav, section, main, menu {
  display: block;
}

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

sub {
  line-height: 0;
}

html, body {
  width: 100%;
}

/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("/font/woff2/Pretendard-Black.woff2") format("woff2"), url("/font/woff/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("/font/woff2/Pretendard-ExtraBold.woff2") format("woff2"), url("/font/woff/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("/font/woff2/Pretendard-Bold.woff2") format("woff2"), url("/font/woff/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("/font/woff2/Pretendard-SemiBold.woff2") format("woff2"), url("/font/woff/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("/font/woff2/Pretendard-Medium.woff2") format("woff2"), url("/font/woff/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("/font/woff2/Pretendard-Regular.woff2") format("woff2"), url("/font/woff/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("/font/woff2/Pretendard-Light.woff2") format("woff2"), url("/font/woff/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("/font/woff2/Pretendard-ExtraLight.woff2") format("woff2"), url("/font/woff/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("/font/woff2/Pretendard-Thin.woff2") format("woff2"), url("/font/woff/Pretendard-Thin.woff") format("woff");
}
@font-face {
  font-family: "Jalnan 2 TTF";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "JalnanGothic";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "GmarketSans";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "GmarketSans";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "GmarketSans";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "TAEBAEKfont";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/TAEBAEKfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* include */
:root {
  --white: #ffffff;
  --rec-primary: #00CD66;
  --rec-primary-gradient: #00CD66;
  --rec-primary-border: #ffe9af;
  --rec-primary-bg: #fff2d1;
  --rec-primary-bg-light: #fffdf7;
  --rec-secondary: #446ee8;
  --rec-secondary-border: rgba(63, 122, 255, 0.5);
  --rec-secondary-border-light: rgba(63, 122, 255, 0.2);
  --rec-secondary-bg: #eaf2ff;
  --rec-secondary-bg-light: rgba(68, 110, 232, 0.02);
  --rec-red: #f40a13;
  --rec-red-bg: #ffe2e5;
  --bg-gray: #f7f6f5;
  --bg-page: #eee;
  --bg-chat: #eee;
  --border: #e6e6e6;
  --border-light: #e6e6e6;
  --border-dark: #e6e6e6;
  --border-section: #e6e6e6;
  --text: #1b1b1b;
  --text-gray: #1b1b1b;
  --text-light: #a5a5a6;
  --full-height: calc(var(--vh, 1vh) * 100);
}

* {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
}

*::-webkit-input-placeholder {
  color: var(--text);
  opacity: 0.4;
}

*:-moz-placeholder {
  color: var(--text);
  opacity: 0.4;
}

*::-moz-placeholder {
  color: var(--text);
  opacity: 0.4;
}

*:-ms-input-placeholder {
  color: var(--text);
  opacity: 0.4;
}

*:focus {
  outline: none;
}

.mt10 {
  margin-top: 10px;
}

html {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  font-size: 62.5%;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-style: -ms-autohiding-scrollbar;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  background-color: #fff;
}

html.overflow {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  letter-spacing: -0.5px;
  height: 100%;
}

#viewport {
  margin: auto;
}

/* index용 */
.type-index body {
  padding: 0 60px 60px;
}
.type-index .contents {
  margin: 0;
  padding: 0 0 60px;
}
.type-index strong {
  font-weight: normal;
}
.type-index table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
.type-index caption,
.type-index legend {
  position: absolute;
  top: -9999px;
  left: -9999px;
  font-size: 0px;
  line-height: 0;
}
.type-index a {
  text-decoration: none;
  select-dummy: expression(this.hideFocus=true);
}
.type-index a:active {
  background-color: transparent;
}
.type-index .blue {
  color: #337aff;
}
.type-index .red {
  color: #ff337a;
}
.type-index .gray {
  color: #a6acaf;
}
.type-index h1 {
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 700;
}
.type-index .tbl * {
  font-size: 14px !important;
  letter-spacing: -1px;
}
.type-index .tbl {
  width: 100%;
  margin-bottom: 40px;
  border: 1px solid #e7e7e7;
  border-top: 0;
  border-right: 0;
}
.type-index .tbl table {
  width: 100%;
}
.type-index .tbl table th,
.type-index .tbl table td {
  color: #333;
  border-right: 1px solid #e7e7e7;
  padding: 10px;
}
.type-index .tbl table th:first-child,
.type-index .tbl table td:first-child {
  border-left: 0;
}
.type-index .tbl tbody tr {
  border-top: 1px solid #e7e7e7;
}
.type-index .tbl thead th {
  padding: 10px;
  background: #f3f3f3;
  border-top: 1px solid #e7e7e7;
}
.type-index .tbl tbody td {
  padding: 10px;
  text-align: left;
}
.type-index .tbl tbody a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  color: #333;
  text-align: left;
}
.type-index .tbl tbody .view-img,
.type-index .tbl tbody .view-img-m,
.type-index .tbl tbody .view-url {
  padding: 5px;
}
.type-index .tbl tbody .view-img a,
.type-index .tbl tbody .view-img-m a {
  display: inline;
  text-align: center;
  background: #a6acaf;
  color: var(--white);
  border-radius: 50px;
  padding: 5px;
  font-size: 12px;
}
.type-index .tbl tbody .view-url a {
  text-align: center;
  background: var(--white);
  color: #333;
  border: 1px solid #a6acaf;
  border-radius: 50px;
  padding: 5px;
  font-size: 12px;
}
.type-index .tbl tbody .link-url a {
  text-align: center;
  background: var(--white);
  color: #333;
  border: 1px solid #a6acaf;
  border-radius: 50px;
  padding: 5px;
  font-size: 12px;
}
.type-index .tbl tbody .view-img a:hover,
.type-index .tbl tbody .view-img-m a:hover,
.type-index .tbl tbody .view-url a:hover {
  opacity: 0.5;
}
.type-index .tbl tbody tr:hover td {
  background-color: #fafafa;
}
.type-index .tbl.top {
  margin-top: 50px;
}
.type-index .tbl.top th,
.type-index .tbl.top td {
  padding: 12px 20px;
  text-align: left;
}
.type-index .tbl.top th {
  background-color: #f3f3f3;
}
.type-index .tbl.top tbody td {
  padding: 12px 20px;
}
.type-index .tabs {
  display: flex;
  margin-bottom: 20px;
  gap: 8px;
}
.type-index .project-btn {
  border: 2px solid #e7e7e7;
  color: #333;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 2rem;
  font-weight: bold;
}
.type-index .project-btn:hover {
  background: #333;
  color: var(--white);
}
.type-index .project-btn.on {
  background: var(--rec-primary);
  border-color: var(--rec-primary);
  color: #fff;
}

#viewport {
  max-width: 100%;
  height: 100%;
}

.title-lv1 {
  color: #1b1b1b;
  font-weight: 700;
  font-size: 2.6rem;
  margin-bottom: 40px;
}

.title-lv2 {
  color: #1b1b1b;
  font-size: 2rem;
  line-height: normal;
  margin-bottom: 22px;
  font-weight: 800;
}

.title-lv2 .desc {
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 8px;
}

article + article {
  margin-top: 44px;
}

.footer {
  padding: 30px 24px 0;
}

.footer .logo {
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
}

.footer .logo img {
  width: 120px;
}

.footer .top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer .top .fnb {
  display: flex;
  gap: 20px;
}

.footer .top .fnb li a {
  color: var(--text-gray);
  font-size: 1.2rem;
  font-weight: 500;
}

.footer .top .fnb li a b {
  color: var(--text);
}

.footer .top + .bottom {
  margin-top: 10px;
}

.footer .bottom {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.footer .bottom .address,
.footer .bottom small {
  color: var(--text-light);
}

.footer .bottom small {
  font-weight: 400;
}

.footer .bottom .address {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.footer .bottom .address li {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 16px;
  gap: 4px;
}

.footer .bottom .address li a {
  color: var(--text-light);
  margin-left: -7px;
}

.quick-menu {
  width: 100px;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 160px;
  z-index: 8;
  background-color: #1b1b1b;
}

.quick-menu ul {
  display: flex;
  flex-direction: column;
}

.quick-menu ul li {
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-menu ul li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.quick-menu ul li:hover a img {
  transform: scale(0.9);
}

.quick-menu ul li:hover a span {
  font-size: 1.6rem;
}

.quick-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.quick-menu ul li a .img {
  width: 44px;
  transition: all 0.2s;
  border-radius: 100%;
  background-color: #fff;
  overflow: hidden;
}

.quick-menu ul li a .img img {
  width: 100%;
}

.quick-menu ul li a span {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  transition: all 0.2s;
  line-height: 1.2;
}

.quick-menu ul li a span em {
  display: block;
}

.header .notice-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header .notice-line .notice-label {
  display: block;
  padding: 5px 10px;
  font-size: 1.4rem;
  color: var(--rec-primary);
  font-weight: 600;
  border: 1px solid rgba(255, 84, 15, 0.5);
  border-radius: 100px;
}

.header .notice-line .notice-desc {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 500;
}

.header .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header .right .util {
  display: flex;
  align-items: center;
}

.header .right .util > li + li {
  margin-left: 10px;
}

.header .right .util .text-btn {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 700;
}

.header .right .util .alram-button {
  position: relative;
}

.header .right .util .alram-button .ico {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  background-color: #2e2e2e;
  border-radius: 12px;
}

.header .right .util .alram-button .ico .dot {
  right: 8px;
  top: 8px;
}

.header .right .util .alram-button .ico:after {
  width: 32px;
  height: 32px;
}

.header .right .util .alram-button.on .alram-menu {
  display: block;
}

.header .right .util .alram-button .alram-menu {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  width: 210px;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

.header .right .util .alram-button .alram-menu ul li {
  display: block;
  color: #1b1b1b;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  padding: 0 14px;
  height: 44px;
  line-height: 44px;
}

.header .right .util .alram-button .alram-menu ul li.bg {
  background-color: #e6e6e6;
}

.header .right .util .alram-button .alram-menu ul li.bg a {
  font-weight: 500;
  text-align: center;
}

.header .right .util .alram-button .alram-menu ul li + li {
  border-top: 1px solid #e7e7e7;
}

.header .right .util .alram-button .alram-menu ul li a {
  display: block;
  color: #1b1b1b;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 44px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header .right .util .user-button {
  position: relative;
}

.header .right .util .user-button.on .user-menu {
  display: block;
}

.header .right .util .user-button.on .user:after {
  transform: rotate(180deg);
}

.header .right .util .user-button .user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  height: 40px;
  border-radius: 100px;
  background-color: #2e2e2e;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  transition: all 0.1s;
}

.header .right .util .user-button .user:active {
  transform: scale(0.9);
}

.header .right .util .user-button .user:after {
  content: "";
  display: block;
  background: url("/img/ico-arrows-w.png") no-repeat;
  background-size: contain;
  width: 10px;
  height: 7px;
  opacity: 0.5;
}

.header .right .util .user-button .user .profile {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1b1b1b;
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.5;
  font-weight: 600;
}

.header .right .util .user-button .user-menu {
  display: none;
  position: absolute;
  top: 48px;
  width: 100%;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);
}

.header .right .util .user-button .user-menu ul li.bg {
  background-color: #e6e6e6;
}

.header .right .util .user-button .user-menu ul li.bg a {
  font-weight: 500;
  text-align: center;
}

.header .right .util .user-button .user-menu ul li + li {
  border-top: 1px solid #e7e7e7;
}

.header .right .util .user-button .user-menu ul li a {
  display: block;
  color: #1b1b1b;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 44px;
  text-align: center;
}

.header .right .util .btn-log {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  min-height: 40px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.header .right .util .btn-application {
  font-size: 1.5rem;
  font-weight: 700;
  min-height: 40px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rec-primary);
  padding: 0 10px;
}

.header .right .util .btn-application .arrow {
  width: 16px;
  height: 15px;
}

.header .right .util .btn-application .arrow:after {
  width: 100%;
  height: 100%;
  background-image: url("/img/ico-mainbtnArrow.png");
}

.header .logo img {
  left: -10px;
}

.header.transparent {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

#viewport:not(.ceo) .container {
  display: flex;
  flex: 1;
  min-height: 100%;
  padding-left: 250px;
}
#viewport:not(.ceo) .header {
  height: 60px;
  width: 100%;
  position: fixed;
  padding: 0 10px;
  top: 0;
  left: 0;
  background-color: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9;
  transition: all 0.3s;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  padding: 24px;
}

.menu-item .tit {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 140%;
  /* 22.4px */
}

.dashboard-box {
  border-radius: 12px;
}

.dashboard-box.blue {
  background-color: var(--rec-secondary);
}

.drag-guide {
  display: inline-flex;
  gap: 10px;
  line-height: 28px;
  font-size: 1.5rem;
  background-color: #e6e6e6;
  border-radius: 100px;
  padding: 6px 14px;
  margin: 0 0 10px 0;
}

.drag-guide span {
  font-weight: 600;
  color: #787878;
}

.drag-guide em {
  display: flex;
  gap: 4px;
  align-items: center;
}

.drag-guide em .ico {
  margin-left: 10px;
  pointer-events: none;
}

.drag-guide .dragset-button {
  display: flex;
  gap: 4px;
}

.drag-guide .dragset-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  text-indent: -999rem;
  background-color: white;
  border-radius: 4px;
}

.drag-guide .dragset-button a:after {
  content: "";
  display: block;
}

.drag-guide .dragset-button a.top:after {
  width: 8px;
  height: 14px;
  background-image: url(/img/ico-board-prev.png);
  background-size: contain;
  transform: rotate(90deg);
  background-repeat: no-repeat;
}

.drag-guide .dragset-button a.btm:after {
  width: 8px;
  height: 14px;
  background-image: url(/img/ico-board-prev.png);
  background-size: contain;
  transform: rotate(-90deg);
  background-repeat: no-repeat;
}

.drag-guide .dragset-button a.first:after {
  width: 14px;
  height: 14px;
  background-image: url(/img/ico-board-first.png);
  background-size: contain;
  transform: rotate(90deg);
  background-repeat: no-repeat;
}

.drag-guide .dragset-button a.last:after {
  width: 14px;
  height: 14px;
  background-image: url(/img/ico-board-first.png);
  background-size: contain;
  transform: rotate(-90deg);
  background-repeat: no-repeat;
}

.type-drag {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid #d0d0d0;
  display: flex;
  gap: 10px;
}

.optionGroup-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #d0d0d0;
  display: flex;
  gap: 10px;
}

.optionGroup-list li + li {
  margin-top: 10px;
}

.optionGroup-list li.on {
  border-color: #1b1b1b;
  border-width: 2px;
}

.optionGroup-list li .inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.optionGroup-list li .checkbox,
.optionGroup-list li .radio {
  flex: none;
}

.optionGroup-list li .tit {
  margin-bottom: 10px;
  font-size: 2rem;
  color: var(--text);
  font-weight: 700;
}

.optionGroup-list li .info {
  font-size: 1.6rem;
  color: var(--text);
  font-weight: 500;
}

.optionGroup-list li .drag {
  position: relative;
}

.flex {
  display: flex;
  align-items: center;
}

.flex.labelline {
  margin-bottom: 10px;
}

.flex.labelline label {
  margin: 0;
}

.flex.align {
  align-items: center;
}

.flex.justify {
  justify-content: space-between;
}

.flex.right {
  justify-content: flex-end;
}

.flex.center {
  justify-content: center;
}

.flex.center .title-lv1 {
  text-align: center;
}

.flex .align-center {
  align-items: center;
}

.flex .title-desc {
  color: #666;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 140%;
  /* 22.4px */
}

.row {
  display: flex;
}

.row.main {
  gap: 20px;
  margin-top: 16px;
}

.row.main .left {
  flex: 1;
}

.row.main .left .title-lv2 {
  font-size: 1.7rem;
  letter-spacing: -1px;
}

.row.main .left .title-lv2 span {
  display: block;
  font-size: 1.5rem;
  color: #787878;
  margin-top: 2px;
}

.row.main .right {
  width: 22%;
  align-items: stretch;
}

.row.main .right .rank {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  border-radius: 12px;
  padding: 8px 20px;
}

.row.main .right .rank .dashboard-box {
  box-shadow: none;
  background-color: transparent;
  padding: 0;
}

.row.main .right .rank .title-lv2 {
  margin: 0;
}

.row.main .right .rank .value-group {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.row.main .right .rank .value-group dl {
  flex: 1;
  align-self: stretch;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.row.main .right .rank .value-group dl:first-child dt,
.row.main .right .rank .value-group dl:first-child dd {
  font-size: 1.8rem;
  font-weight: 700;
}

.row.main .right .rank .value-group dl dt {
  font-size: 1.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  width: auto;
  overflow: hidden;
}

.row.main .right .rank .value-group dl dt,
.row.main .right .rank .value-group dl dd {
  font-size: 1.8rem;
  font-weight: 500;
}

.row.wrap {
  gap: 20px;
}

.row.wrap > li + li {
  margin: 0;
}

.row > li + li {
  margin-left: 20px;
}

.listbox + .listbox {
  margin-top: 20px;
}

.btn-promotion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 50px;
  border: 1px solid #fff;
  padding: 8px 20px;
  color: #fff;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 19.6px */
}

.btn-promotion::after {
  content: "";
  height: 22px;
  width: 16px;
  background-image: url("/img/ico-buttonArrows.png");
  background-size: contain;
  display: block;
  background-repeat: no-repeat;
}

.logo {
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logo img {
  width: 210px;
  position: relative;
  left: -22px;
}

.profile {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #e3e3e3;
  border-radius: 50%;
}

.gnb {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 2;
  flex: none;
  background-color: #e6e6e6;
  padding: 60px 0 20px;
  background-size: cover;
}

.gnb .admin-card {
  background-color: var(--rec-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 20px;
  position: relative;
  height: 85px;
}

.gnb .admin-card .profile {
  height: 36px;
  width: 36px;
  margin-bottom: 8px;
}

.gnb .admin-card .info {
  width: calc(100% - 40px);
}

.gnb .admin-card .info .name {
  font-size: 1.6rem;
  letter-spacing: -1px;
  font-weight: 800;
  color: #fff;
  line-height: 120%;
  word-break: break-all;
}

.gnb .admin-card .info .side {
  display: flex;
  gap: 10px;
  color: #1b1b1b;
}

.gnb .admin-card .info .side .id {
  display: flex;
  align-items: center;
}

.gnb .admin-card .info .side .id:after {
  content: "";
  display: block;
  width: 1px;
  height: 8px;
  background-color: #1b1b1b;
  margin-left: 10px;
  opacity: 0.5;
}

.gnb .admin-card .info .side span {
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
}

.gnb .admin-card .store-select {
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  right: 10px;
  width: 36px;
  height: 32px;
  background-color: #1b1b1b;
  border-radius: 13px;
}

.gnb .admin-card .store-select.on .store-select-button:after {
  transform: rotate(180deg);
}

.gnb .admin-card .store-select.on ul {
  display: block;
  box-shadow: 0 23px 16px 0 rgba(0, 0, 0, 0.1);
}

.gnb .admin-card .store-select ul {
  display: none;
  background-color: #fff;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 145px;
  width: 250px;
  overflow: auto;
  z-index: 9;
}

.gnb .admin-card .store-select ul li {
  border-top: 1px solid #e7e7e7;
  padding: 4px;
}

.gnb .admin-card .store-select ul li:hover {
  background-color: #fafafa;
}

.gnb .admin-card .store-select ul li.selected > a {
  border-radius: 8px;
  background-color: #eee;
}

.gnb .admin-card .store-select ul li.selected > a .view-btn {
  display: none;
}

.gnb .admin-card .store-select ul li > a {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gnb .admin-card .store-select ul li > a .view-btn {
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  color: var(--rec-primary);
  font-size: 1.4rem;
  letter-spacing: -1px;
  font-weight: 500;
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gnb .admin-card .store-select-button {
  text-indent: -999rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.gnb .admin-card .store-select-button:after {
  content: "";
  display: block;
  background: url("/img/ico-arrows-w.png") no-repeat;
  background-size: contain;
  width: 14px;
  height: 8px;
}

.gnb .admin-card .store-select .info {
  text-align: left;
}

.gnb .admin-card .store-select .info .id {
  color: #787878;
}

.gnb .admin-card .store-select .info .name {
  display: flex;
  gap: 4px;
  align-items: center;
  color: #1b1b1b;
}

.gnb .admin-card .store-select .info .name::before {
  display: block;
  width: 20px;
  height: 20px;
  background: url("/img/gnbico-store.png") no-repeat;
  background-size: contain;
}

.gnb nav {
  height: calc(100vh - 200px);
  overflow: auto;
  padding: 0 10px;
}

.gnb nav .depth1 > li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.gnb nav .depth1 > li > a {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 12px;
  color: #1b1b1b;
  padding: 24px 20px;
}

.gnb nav .depth1 > li > a span {
  position: relative;
  font-size: 1.7rem;
  font-weight: 700;
  transition: all 0.4s;
}

.gnb nav .depth1 > li > a span .line {
  display: none;
  transition: all 0.4s;
  width: 0%;
  border-radius: 2px;
}

.gnb nav .depth1 > li > a::before {
  display: block;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.gnb nav .depth1 > li.on > a span {
  font-weight: 800;
}

.gnb nav .depth1 > li.on > a span .line {
  width: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 16px;
  width: 111%;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.72);
}

.gnb nav .depth1 > li.on > a span .line:after,
.gnb nav .depth1 > li.on > a span .line:before {
  content: "";
  position: absolute;
  display: block;
  opacity: 0.54;
}

.gnb nav .depth1 > li.on > a span .line::before {
  height: 16px;
  width: 7px;
  background: url("/img/gnb-on-left.png") no-repeat;
  background-size: contain;
  left: -7px;
  top: 0;
}

.gnb nav .depth1 > li.on > a span .line::after {
  height: 17px;
  width: 13px;
  background: url("/img/gnb-on-right.png") no-repeat;
  background-size: contain;
  right: -6px;
  top: -1px;
  z-index: 2;
}

.gnb nav .depth2 {
  display: none;
  padding-bottom: 20px;
  padding-left: 20px;
}

.gnb nav .depth2 > li + li {
  margin-top: 4px;
}

.gnb nav .depth2 > li a {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #1b1b1b;
  padding: 4px 20px;
  opacity: 0.5;
}

.gnb nav .depth2 > li:hover a {
  color: #1b1b1b;
}

.gnb nav .depth2 > li.on a {
  color: #1b1b1b;
  opacity: 1;
  font-weight: 700;
}

.gnb .util-link {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.gnb .util-link ul {
  padding: 20px;
}

.gnb .util-link ul li + li {
  margin-top: 10px;
}

.gnb .util-link ul li a {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--text);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -1px;
  background-color: #fff;
}

.mobile-menu {
  display: none;
}

input[type=text].blueText {
  color: var(--rec-secondary);
  font-weight: 600;
}

.price-box {
  padding: 24px;
  border: 2px solid #1b1b1b;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
}

.price-box .flex span {
  font-size: 1.4rem;
}

.price-box .list-pricePaper {
  border-top: 2px solid #1b1b1b;
  padding-top: 20px;
}

.price-box .list-pricePaper + .list-pricePaper {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e7e7e7;
}

.price-box .list-pricePaper .tit {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
  margin-bottom: 10px;
}

.price-box .list-pricePaper p {
  font-size: 1.4rem;
  margin-top: 10px;
}

.price-box .list-pricePaper dl {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.price-box .list-pricePaper dl strong {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 10px;
  line-height: 53px;
}

.price-box .list-pricePaper dl dt {
  color: #666;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 140%;
  /* 22.4px */
}

.price-box .list-pricePaper dl dd {
  display: flex;
  align-items: center;
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 140%;
  /* 22.4px */
  gap: 4px;
}

.price-box .list-pricePaper dl dd .arrow {
  transform: rotate(-90deg);
  bottom: 1px;
}

.contents {
  min-width: 1024px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  flex: 1;
  background-color: #fff;
  padding: 87px 80px 40px;
}

.contents.type-submit.account {
  max-width: 644px;
  min-width: 644px;
  padding-top: 0;
  margin: auto;
}

.contents.type-submit > .button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.contents.type-submit > .button-group .btn {
  min-width: 180px;
}

.contents.type-submit .title-lv1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contents.type-submit .submit-form {
  box-shadow: none;
  padding: 0;
}

.contents.type-submit .submit-form + .submit-form {
  margin-top: 40px;
}

.contents.type-submit .submit-form select {
  min-width: inherit;
}

.contents.type-submit .submit-form .form.type-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.contents.type-submit .submit-form .form.type-row .input-item {
  flex: 1;
}

.contents.type-submit .submit-form .form.type-row .input-item + .input-item {
  margin-top: 0;
}

.contents.type-submit .submit-form .form + .form {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #e7e7e7;
}

.contents.type-submit .submit-form .form .guideline {
  background-color: #e6e6e6;
  padding: 24px;
}

.contents.type-submit .submit-form .button-group {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.contents.type-submit .submit-form .button-group .btn {
  flex: 1;
}

.text-btn {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-light);
}

.text-btn.add {
  padding-left: 10px;
  position: relative;
}

.text-btn.add:after,
.text-btn.add:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.text-btn.add:after {
  width: 2px;
  height: 8px;
}

.text-btn.add:before {
  width: 8px;
  height: 2px;
}

.text-btn-group {
  display: inline-flex;
  gap: 20px;
}

.text-btn.negative {
  color: var(--rec-red);
}

.text-btn.negative::after,
.text-btn.negative::before {
  background-color: var(--rec-red);
}

.text-btn.negative::after {
  content: none;
}

.text-btn.negative::before {
  width: 7px;
}

.text-btn.positive {
  color: var(--rec-secondary);
}

.text-btn.positive.add::after,
.text-btn.positive.add::before {
  background-color: var(--rec-secondary);
}

.text-btn.positive.add::after {
  left: 3px;
}

.text-btn.fill {
  padding: 7px 10px;
  background-color: var(--border);
  border-radius: 4px;
}

.text-btn.fill.negative {
  color: var(--rec-red);
  background-color: var(--rec-red-bg);
}

.text-btn.fill.positive {
  color: var(--rec-secondary);
  background-color: var(--rec-secondary-bg-light);
}

.text-btn .crud-ico {
  width: 17px;
}

.text-btn .crud-ico.arrow {
  width: 14px;
  position: relative;
  top: 1px;
}

.text-btn.type-down:after {
  content: "";
  display: block;
  width: 15px;
  height: 10px;
  background-image: url("/img/@2/crud-text-arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(90deg);
}

.text-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.data-null {
  text-align: center;
}

.data-null .emoji {
  margin: 20px;
}

.data-null .emoji img {
  width: 60px;
}

.data-null .button {
  display: flex;
  justify-content: center;
  margin: 30px 0 0;
}

.data-null .button .btn {
  min-width: 178px;
}

.data-null .tit {
  color: var(--text);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 32px;
  /* 123.077% */
  letter-spacing: -0.5px;
  text-transform: capitalize;
}

.data-null .desc {
  color: var(--text-gray);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 24px;
}

em.blue {
  color: var(--rec-secondary);
}

em.red {
  color: var(--rec-red);
}

em.gray {
  color: var(--text-light);
}

em.yellow {
  color: var(--rec-primary);
}

em.black {
  color: var(--text);
}

.input-message {
  font-weight: 600;
  font-size: 1.5rem;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.input-message .ico {
  width: 17px;
  height: 17px;
}

.input-message .pen {
  color: #7480a0;
  position: relative;
}

.input-message .pen .text {
  position: relative;
  z-index: 1;
}

.input-message .pen:after {
  content: "";
  width: 100%;
  height: 14px;
  background-color: #ecf1ff;
  position: absolute;
  left: 0;
  top: 3px;
}

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
.like-input {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  width: 100%;
  height: 50px;
  color: var(--text);
  font-size: 1.9rem;
  font-weight: 500;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border 0.3s;
  border: 1px solid #e7e7e7;
}

input[type=color].center,
input[type=date].center,
input[type=datetime-local].center,
input[type=datetime].center,
input[type=email].center,
input[type=month].center,
input[type=number].center,
input[type=password].center,
input[type=search].center,
input[type=tel].center,
input[type=text].center,
input[type=time].center,
input[type=url].center,
input[type=week].center,
select.center,
.like-input.center {
  text-align: center;
  padding: 0;
  -moz-text-align-last: center;
  text-align-last: center;
  /* 텍스트의 정렬 방향 설정 */
  -webkit-appearance: none;
  /* 기본 스타일링 비활성화 */
  -moz-appearance: none;
  appearance: none;
}

input[type=color].right,
input[type=date].right,
input[type=datetime-local].right,
input[type=datetime].right,
input[type=email].right,
input[type=month].right,
input[type=number].right,
input[type=password].right,
input[type=search].right,
input[type=tel].right,
input[type=text].right,
input[type=time].right,
input[type=url].right,
input[type=week].right,
select.right,
.like-input.right {
  text-align: right;
}

input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
.like-input:focus {
  outline: none;
  border-color: var(--rec-secondary);
}

input[type=color].invalid,
input[type=date].invalid,
input[type=datetime-local].invalid,
input[type=datetime].invalid,
input[type=email].invalid,
input[type=month].invalid,
input[type=number].invalid,
input[type=password].invalid,
input[type=search].invalid,
input[type=tel].invalid,
input[type=text].invalid,
input[type=time].invalid,
input[type=url].invalid,
input[type=week].invalid,
select.invalid,
.like-input.invalid {
  border-color: var(--rec-red-bg);
  color: var(--rec-red);
}

input[type=color].line,
input[type=date].line,
input[type=datetime-local].line,
input[type=datetime].line,
input[type=email].line,
input[type=month].line,
input[type=number].line,
input[type=password].line,
input[type=search].line,
input[type=tel].line,
input[type=text].line,
input[type=time].line,
input[type=url].line,
input[type=week].line,
select.line,
.like-input.line {
  height: 60px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--white);
  font-size: 2rem;
}

input[type=color].disabled,
input[type=date].disabled,
input[type=datetime-local].disabled,
input[type=datetime].disabled,
input[type=email].disabled,
input[type=month].disabled,
input[type=number].disabled,
input[type=password].disabled,
input[type=search].disabled,
input[type=tel].disabled,
input[type=text].disabled,
input[type=time].disabled,
input[type=url].disabled,
input[type=week].disabled,
select.disabled,
.like-input.disabled {
  background: #e9ebef;
  color: rgba(53, 53, 68, 0.2);
  pointer-events: none;
  background-image: none;
  border-color: transparent;
  pointer-events: none;
}

.like-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.like-input .placeholder {
  color: var(--text);
  opacity: 0.4;
}

.like-input .symbol {
  width: 30px;
}

.like-input.mainSearch {
  padding: 0 20px;
  border-radius: 16px;
  background: var(--border);
  font-weight: 700;
  line-height: 20px;
  /* 100% */
  letter-spacing: -0.5px;
  color: var(--text);
}

.like-input.type-select:after {
  content: "";
  display: block;
  background: url("/img/selected-arrow.png") no-repeat center;
  background-size: contain;
  width: 16px;
  height: 16px;
}

.like-input.type-time:after {
  content: "";
  display: block;
  background: url("/img/ico-time.png") no-repeat center;
  background-size: contain;
  width: 18px;
  height: 18px;
}

.like-input.type-date:after {
  content: "";
  display: block;
  background: url("/img/ico-date.png") no-repeat center;
  background-size: contain;
  width: 18px;
  height: 18px;
}

.like-input.type-search:after {
  content: "";
  display: block;
  background: url("/img/ico-search.png") no-repeat center;
  background-size: contain;
  width: 28px;
  height: 28px;
}

.like-input.fill {
  background-color: var(--border);
}

.like-input.type-added {
  font-weight: 700;
  background-color: var(--border);
  border-color: transparent;
  color: var(--text-light);
}

.like-input.type-added:after {
  content: "";
  display: block;
  background: url("/img/ico-added.png") no-repeat center;
  background-size: contain;
  width: 17px;
  height: 17px;
}

.input-desc {
  margin-bottom: 10px;
}

textarea {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  width: 100%;
  min-height: 112px;
  color: var(--text);
  font-size: 1.9rem;
  font-weight: 500;
  padding: 14px;
  border-radius: 8px;
  transition: border 0.3s;
  border: 1px solid #e7e7e7;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
}

textarea.invalid {
  border-color: var(--rec-red);
  color: var(--rec-red);
}

textarea:focus {
  outline: none;
  border-color: var(--rec-secondary);
}

.textarea-wrap {
  background-color: #fff;
  position: relative;
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 10px;
  transition: border 0.3s;
}

.textarea-wrap .label {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.textarea-wrap.focus {
  border-color: var(--rec-secondary);
}

.textarea-wrap textarea {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  min-height: 80px;
}

.textarea-wrap .count {
  font-size: 1.2rem;
  text-align: right;
  font-weight: 500;
  color: rgba(53, 53, 68, 0.4);
}

.textarea-wrap .count em {
  color: rgb(53, 53, 68);
}

select::-ms-expand {
  display: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("/img/selected-arrow.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
  padding-right: 30px;
  font-size: 1.9rem;
  font-weight: 500;
  min-width: 150px;
}

select.center {
  -moz-text-align-last: center;
  text-align-last: center;
}

select.min {
  background-image: url(/img/crud-select-arrow.png);
  background-size: 8px;
  padding: 0;
  padding-right: 16px;
  width: auto;
  background-color: transparent;
  min-width: 50px;
  border: none;
  font-size: 1.5rem;
}

.like-select {
  color: var(--text-gray);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 14px;
  /* 100% */
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-select:before {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  background: url("/img/crud-select-arrow.png") no-repeat;
  background-size: contain;
}

.file label.type-box {
  text-indent: -999rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.file label.type-box:after {
  content: "";
  display: block;
  width: 29px;
  height: 22px;
  background: url("/img/crud-cam.png") no-repeat;
  background-size: contain;
}

.file input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file span {
  margin-top: 10px;
  display: block;
  color: var(--text-light);
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 17px;
  /* 100% */
  letter-spacing: -0.5px;
}

.file small {
  display: block;
  margin-top: 10px;
  color: var(--text-light);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 17px;
  /* 113.333% */
  letter-spacing: -0.5px;
}

.checkbox,
.radio {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: left;
}

.checkbox input,
.radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox input:checked + span,
.radio input:checked + span {
  color: var(--text);
}

.checkbox span,
.radio span {
  display: block;
  font-size: 1.8rem;
  padding-left: 32px;
  line-height: 24px;
  min-height: 24px;
  font-weight: 600;
  color: var(--text);
}

.checkbox span a:hover em,
.radio span a:hover em {
  text-decoration: underline;
}

.checkbox span:before,
.radio span:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-size: contain;
}

.checkbox.select {
  padding: 0 14px;
  display: flex;
  align-items: center;
  height: 55px;
}

.checkbox.select input:checked + span:after {
  background: url(/img/ico-checkbox-on.png) no-repeat center;
  background-size: contain;
}

.checkbox.select span {
  gap: 10px;
  width: 100%;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -1px;
}

.checkbox.select span .select-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox.select span .select-label img {
  width: 30px;
}

.checkbox.select span:before {
  content: none;
}

.checkbox.select span:after {
  content: "";
  position: static;
  display: block;
  margin-right: 8px;
  background: url(/img/ico-checkbox-off.png) no-repeat center;
  background-size: contain;
  width: 17px;
  height: 17px;
}

.checkbox.agree {
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
}

.checkbox.agree.clear {
  padding: 0;
}

.checkbox.agree input:checked + span:before {
  background: url(/img/ico-checkbox-on.png) no-repeat center;
  background-size: contain;
}

.checkbox.agree span {
  color: var(--text);
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -1px;
}

.checkbox.agree span:before {
  position: static;
  display: block;
  margin-right: 8px;
  background: url(/img/ico-checkbox-off.png) no-repeat center;
  background-size: contain;
  width: 17px;
  height: 17px;
}

.checkbox.agree.all {
  border-radius: 10px;
  background: var(--border);
}

.checkbox.agree.all input:checked + span {
  color: var(--rec-secondary);
}

.checkbox.agree.all span {
  font-weight: 700;
}

.checkbox input:checked + span:before {
  background: url("/img/crud-check-checked.png") no-repeat center;
  background-size: contain;
}

.checkbox input:disabled + span:before {
  background: url("/img/crud-check-disabled.png") no-repeat center;
  background-size: contain;
}

.checkbox span:before {
  background: url("/img/crud-check.png") no-repeat center;
  background-size: contain;
}

input[disabled],
select[disabled],
option[disabled],
textarea[disabled] {
  background: #e9ebef;
  color: rgba(53, 53, 68, 0.2);
  pointer-events: none;
  background-image: none;
  border-color: transparent;
}

input[readonly],
select[readonly],
option[readonly],
textarea[readonly] {
  background-color: #e6e6e6;
  border-color: var(--border-dark);
  pointer-events: none;
  color: var(--text);
  background-image: none;
}

.radio span:before {
  border: 2px solid #DEDEDE;
  border-radius: 100%;
  background: #fff;
}
.radio input:checked + span:before {
  border: 7px solid var(--rec-primary);
}
.radio input:disabled + span:before {
  background: #ccc;
  border-radius: 100%;
  border: 2px solid #dedede;
}

.switch {
  display: inline-block;
  position: relative;
  min-width: 40px;
  height: 24px;
}

.switch input {
  display: none;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 42px;
  background: rgba(159, 162, 180, 0.4);
  transition: 0.2s;
  cursor: pointer;
}

.switch .slider:before {
  position: absolute;
  left: 2px;
  bottom: 4px;
  top: 2px;
  height: 20px;
  width: 20px;
  background-color: var(--white);
  border-radius: 50%;
  transition: 0.2s;
  content: "";
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
}

.switch.on .slider {
  background-color: var(--rec-secondary);
}

.switch.on .slider:before {
  transform: translateX(16px);
}

.list-category-readonly {
  display: flex;
  gap: 10px;
  align-items: center;
}

.list-category-readonly .category-readonly {
  font-size: 1.8rem;
  padding-left: 32px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text);
  background-color: #f4f4f4;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 0 14px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

.switch-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.switch-item .switch-tit {
  font-size: 1.6rem;
  font-weight: 600;
}

.switch-check input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  border: none;
  opacity: 0.1;
}
.switch-check label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  position: relative;
  padding: 0 8px 0 30px;
  background: #DEDEDE;
  border: 1px solid var(--text-gray);
  border-radius: 32px;
  text-align: center;
  color: var(--text);
  transition: 0.1s;
}
.switch-check label:after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: var(--text-light);
  transition: 0.1s;
  content: "";
}
.switch-check label span {
  display: block;
  width: 100%;
  padding: 0 3px;
  font-size: 1.3rem;
  font-weight: 700;
  transition: 0.1s;
}
.switch-check label .on {
  display: none;
}
.switch-check input:checked + label {
  padding: 0 30px 0 8px;
  background: #fff;
  border-color: var(--rec-primary);
  color: var(--rec-primary);
}
.switch-check input:checked + label:after {
  left: auto;
  right: 3px;
  background: var(--rec-primary);
}
.switch-check input:checked + label .off {
  display: none;
}
.switch-check input:checked + label .on {
  display: block;
}

.labelline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.labelline + .swiper {
  margin-top: 14px;
}

.labelline.type-input label {
  color: var(--text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.labelline label {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1;
  margin-bottom: 10px;
}

.labelline .command {
  margin-bottom: 10px;
}

.labelline .ico {
  top: -4px;
  right: -4px;
}

.labelline.sm {
  margin-bottom: 10px;
}

.labelline.sm label {
  color: var(--text-light);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.input-time-group {
  margin-top: 16px;
}

.input-time-group + .input-time-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.inputShowTarget {
  display: none;
}

.createItem .day-text {
  padding: 6px 12px;
  background: var(--rec-primary-bg);
  color: #ff5e29 !important;
  border-radius: 20px;
}

.createItem + .createItem {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #d9d9d9;
}

.createItem .input-item + .input-item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e7e7e7;
}

.input-item .flex-group {
  display: flex;
  gap: 10px;
}

.input-item .flex-group .select-vertical {
  display: flex;
  gap: 10px;
}

.input-item .flex-group .select-group {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
}

.input-item .flex-group .select-group-label {
  display: block;
  font-size: 1.8rem;
  line-height: 24px;
  font-weight: 600;
  color: var(--text);
}

.input-item .flex-group .select-group .datepicker {
  width: 170px;
}

.input-item .flex-group .select-group select,
.input-item .flex-group .select-group .input-item-inner {
  flex: 1;
}

.input-item .flex-group .ico {
  flex: none;
}

.input-item .unit-text {
  flex: none;
  font-size: 1.6rem;
  min-width: 50px;
  text-align: center;
}

.input-item.lined {
  border-bottom: 1px solid #1b1b1b;
  padding-bottom: 20px;
}

.input-item .file .btn {
  margin: 0;
}

.input-item .input-guide-box {
  display: flex;
  justify-content: space-between;
  background-color: #e6e6e6;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
}

.input-item .input-guide-box .tit,
.input-item .input-guide-box .val {
  color: #1b1b1b;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 140%;
  /* 25.2px */
}

.input-item .btn {
  margin-top: 14px;
  height: 50px;
  padding: 0 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.input-item-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input-item-inner.type-label {
  position: relative;
}

.input-item-inner.type-label input {
  text-align: right;
  padding-right: 30px;
}

.input-item-inner.type-label input.left {
  text-align: left;
}

.input-item-inner.type-label .label-right {
  font-size: 1.6rem;
  position: absolute;
  line-height: 50px;
  right: 14px;
  top: 0;
  font-weight: 700;
  white-space: nowrap;
}

.input-item-inner.type-label .label-left {
  font-size: 1.6rem;
  position: absolute;
  line-height: 50px;
  left: 14px;
  top: 0;
  font-weight: 700;
}

.input-item-inner.type-date {
  display: flex;
  align-items: center;
}

.input-item-inner.type-date .unit {
  line-height: 50px;
  flex: none;
  width: 20px;
  text-align: center;
}

.input-item-inner.type-date .input-item-inner {
  flex: 1;
}

.input-item-inner.type-ico {
  position: relative;
}

.input-item-inner.type-ico .ico {
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
}

.input-item-inner.type-ico .ico:after {
  width: 18px;
  height: 18px;
}

.input-item-inner .division {
  flex: none;
  line-height: 1;
  color: var(--text-light);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 52px;
  /* 305.882% */
  letter-spacing: -0.5px;
}

.input-item-inner.auto {
  flex-wrap: wrap;
}

.input-item-inner.auto > * {
  flex: none;
}

.input-item-inner > * {
  flex: 1;
}

.input-item-inner.no-flex .input-item-inner {
  flex-grow: unset;
  width: 25%;
  min-width: 200px;
}

.input-item-inner + .input-item-inner {
  margin-top: 16px;
}

.input-item + .input-item {
  margin-top: 30px;
}

.filter-form {
  padding: 0 30px;
}

.filter-form .form + .form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e7e7e7;
}

.labelline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.labelline .btn {
  margin: 0;
}

.labelline.type-input label {
  color: var(--text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.labelline label {
  display: block;
  color: #1b1b1b;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 140%;
  /* 25.2px */
  margin-bottom: 10px;
}

.labelline .ico {
  top: -4px;
  right: -4px;
}

.file-form {
  padding: 24px;
  background-color: #e6e6e6;
  border-radius: 12px;
}

.file-form .list-attchfile ul li .attch-item {
  width: 87px;
  height: 87px;
}

.vertical-center .file {
  margin-right: 10px;
}

.vertical-center .btn {
  min-width: 90px;
}

.input-item-inner.type-btn .btn {
  margin: 0;
  max-width: 90px;
}

.input-item-inner.auto > * {
  flex: none;
}

.input-item-inner.block.submit {
  gap: 0;
}

.input-item-inner.block.submit .checkbox:first-child,
.input-item-inner.block.submit .radio:first-child {
  border-radius: 8px 0 0 8px;
}

.input-item-inner.block.submit .checkbox:last-child,
.input-item-inner.block.submit .radio:last-child {
  border-radius: 0 8px 8px 0;
}

.input-item-inner.block.submit .checkbox input:checked + span,
.input-item-inner.block.submit .radio input:checked + span {
  color: var(--white);
  background-color: var(--text);
}

.input-item-inner.block.submit .checkbox input:checked + span:before,
.input-item-inner.block.submit .radio input:checked + span:before {
  content: none;
}

.input-item-inner.block.submit .checkbox input:disabled + span:before,
.input-item-inner.block.submit .radio input:disabled + span:before {
  content: none;
}

.input-item-inner.block.submit .checkbox span,
.input-item-inner.block.submit .radio span {
  height: 50px;
  color: var(--text);
  border-radius: 0;
  background-color: #e6e6e6;
  border: none;
}

.input-item-inner.block .checkbox input:checked + span,
.input-item-inner.block .radio input:checked + span {
  color: #fff;
  background-color: var(--rec-primary);
  border-color: var(--rec-primary);
}

.input-item-inner.block .checkbox input:checked + span:before,
.input-item-inner.block .radio input:checked + span:before {
  content: none;
}

.input-item-inner.block .checkbox input:disabled + span:before,
.input-item-inner.block .radio input:disabled + span:before {
  content: none;
}

.input-item-inner.block .checkbox span,
.input-item-inner.block .radio span {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  letter-spacing: -0.7px;
  height: 50px;
  padding: 0 14px;
  font-weight: 700;
  color: var(--text);
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  min-width: 69px;
}

.input-item-inner.block .checkbox span:before,
.input-item-inner.block .radio span:before {
  content: none;
}

.m0 {
  margin: 0 !important;
}

.btn {
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border-dark);
  background: var(--white);
  color: var(--text);
  padding: 17px 10px 18px 10px;
  line-height: 1;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
}

.btn:active {
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.05);
}

.btn.clear-underline {
  border: none;
  text-decoration: underline;
  color: #666;
  font-weight: 500;
  height: 40px;
  margin-top: 0;
}

.btn.sm {
  font-size: 1.4rem;
  border-radius: 100px;
  height: 30px;
  min-width: auto;
  padding: 0 14px;
}

.btn.medium {
  font-size: 1.6rem;
  padding: 0 10px 0 10px;
  border-radius: 8px;
  font-weight: 500;
  min-width: 96px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn .crudico {
  width: 18px;
  height: 18px;
}

.btn.positive {
  border-color: transparent;
  background: var(--text);
  color: var(--white);
}

.btn.positive:active {
  background: #202020;
}

.btn.negative {
  background: var(--rec-red-bg);
  color: var(--rec-red);
  border-color: transparent;
}

.btn.negative.line {
  background-color: transparent;
  border: 1px solid var(--rec-primary);
  color: var(--rec-red);
}

.btn.blue, .btn.orange {
  background-color: var(--rec-primary);
  color: var(--white);
  border-color: transparent;
}

.btn.line {
  background-color: transparent;
  border: 1px solid #bbb;
  color: #787878;
}
.btn.line.orange {
  border-color: var(--rec-primary);
  color: var(--rec-primary);
}
.btn.line.blue {
  border-color: var(--rec-secondary);
  color: var(--rec-secondary);
}

.btn.disabled {
  pointer-events: none;
  opacity: 0.5;
  pointer-events: none;
}

.cunnect-link {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
}

.cunnect-link li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 1.6rem;
  font-weight: 500;
}

.cunnect-link li.cancel {
  text-decoration: line-through;
}

.cunnect-link li + li {
  margin-top: 4px;
}

span.dot {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--rec-red);
  border-radius: 50%;
  position: absolute;
}

a.ico {
  transition: all 0.1s;
}

a.ico:active {
  transform: scale(0.9);
}

.common-data {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.tooltip-box {
  display: inline-block;
  position: relative;
}

.tooltip-box .tooltip {
  display: none;
  width: 400px;
  height: auto;
  position: absolute;
  top: 30px;
  left: -110px;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 16px;
}

.tooltip-box .tooltip p {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.tooltip-box .tooltip .tit {
  font-size: 1.6rem;
  font-weight: 700;
}

.tooltip-box .tooltip .row {
  gap: 30px;
}

.tooltip-box:hover .tooltip {
  display: block;
}

.ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-indent: -999rem;
  position: relative;
}

.ico.radius {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 16px;
}

.ico.radius:after {
  width: 32px;
  height: 32px;
}

.ico span.dot {
  right: 3px;
  top: 3px;
}

.ico:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.ico.help {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-indent: -999rem;
  position: relative;
  top: 0;
}

.ico.help:after {
  background-image: url("/img/ico-help.png");
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.ico.visibility-off:after {
  background-image: url("/img/ico-visibility-off.png");
}

.ico.visibility:after {
  background-image: url("/img/ico-visibility.png");
}

.ico.back:after {
  background-image: url("/img/ico-back.png");
}

.ico.alram:after {
  background-image: url("/img/ico-alram.png");
}

.ico.alram.white:after {
  background-image: url("/img/ico-alram-white.png");
}

.ico.arrow:after {
  width: 18px;
  height: 18px;
  background-image: url("/img/ico-arrows.png");
}

.ico.call:after {
  background-image: url("/img/ico-call.png");
}

.ico.report:after {
  background-image: url("/img/ico-report.png");
}

.ico.delete {
  width: 18px;
  height: 18px;
}

.ico.delete:after {
  background-image: url("/img/ico-delete.png");
}

.ico.delete:active {
  opacity: 0.5;
}

.ico.delete.disabled {
  opacity: 0.2;
  pointer-events: none;
}

.ico.search:after {
  background-image: url("/img/ico-search.png");
}

.ico.refresh {
  animation: ani-refresh 1s;
}

.ico.refresh:after {
  background-image: url("/img/ico-refresh.png");
}

.ico.refresh.clickSpin:after {
  animation: ani-refresh2 1s;
}

.ico.refresh.white:after {
  background-image: url("/img/ico-refresh-w.png");
}

.ico.favorite.on:after {
  animation: ani-beat 1s both;
  background-image: url("/img/ico-favorite-on.png");
}

.ico.favorite:after {
  background-image: url("/img/ico-favorite.png");
}

.ico.like.on:after {
  animation: ani-beat 1s both;
  background-image: url("/img/ico-like-on.png");
}

.ico.like:after {
  background-image: url("/img/ico-like.png");
}

.ico.attach {
  width: 24px;
  height: 24px;
}

.ico.attach:after {
  background-image: url("/img/ico-attach.png");
}

.ico.send {
  width: 24px;
  height: 24px;
}

.ico.send:after {
  background-image: url("/img/ico-send-on.png");
}

.ico.drag {
  width: 25px;
  height: 20px;
  cursor: move;
}

.ico.drag:after {
  background-image: url("/img/ico-drag.png");
}

.ico.date:after {
  background: url("/img/ico-filterDate.png") no-repeat center;
  background-size: contain;
}

.ico.scrollTop {
  position: fixed;
  bottom: 108px;
  right: 20px;
}

.ico.scrollTop:after {
  width: 24px;
  height: 24px;
  background: url("/img/ico-scrollTop.png") no-repeat center;
  background-size: contain;
}

.ico.location:after {
  background-image: url("/img/crud-location.png");
}

.ico.more:after {
  background-image: url("/img/ico-more.png");
}

.ico.more.white:after {
  background-image: url("/img/ico-more-white.png");
}

.ico.modify:after {
  background-image: url("/img/crud-modify.png");
}

.ico.modify.fill {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.ico.myRefresh:after {
  background-image: url("/img/ico-myRefresh.png");
  width: 17px;
  height: 17px;
  animation: ani-refresh 1s;
}

.ico.myRefresh.clickSpin:after {
  animation: ani-refresh2 1s;
}

.ico.check:after {
  background-image: url("/img/ico-checkbox-off.png");
  width: 17px;
  height: 17px;
}

.ico.copy:after {
  background-image: url("/img/ico-copy.png");
  width: 11px;
  height: 12px;
}

.ico.call:after {
  background-image: url("/img/crud-call.png");
}

.ico.close:after {
  background-image: url("/img/ico-delete-line.png");
  width: 10px;
  height: 10px;
}

.ico.close.white:after {
  background-image: url("/img/ico-delete-line-w.png");
}

.ico.download:after {
  background-image: url("/img/ico-download.png");
}

.ico.first:after {
  width: 14px;
  height: 14px;
  background-image: url("/img/ico-board-first.png");
}

.ico.prev:after {
  width: 8px;
  height: 14px;
  background-image: url("/img/ico-board-prev.png");
}

.ico.next:after {
  width: 8px;
  height: 14px;
  background-image: url("/img/ico-board-next.png");
}

.ico.last:after {
  width: 14px;
  height: 14px;
  background-image: url("/img/ico-board-last.png");
}

.modal {
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 99999;
  left: 0;
  top: 40%;
  transition: top 0.4s ease-in-out;
}

.modal.alert {
  text-align: center;
}

.modal.alert .modal-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.modal.alert .modal-inner {
  padding: 0;
}

.modal.alert .modal-inner .modal-header {
  margin: 24px;
  padding-bottom: 0;
}

.modal.on {
  top: 50%;
  z-index: 999;
}

.modal.on .modal-inner {
  opacity: 1;
}

.modal.panel {
  top: 0;
  margin-top: 0 !important;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  right: -100%;
  transition: right 0.4s ease-in-out;
}

.modal.panel .guideline {
  padding: 20px;
  border-radius: 12px;
}

.modal.panel .label {
  font-size: 1.6rem;
  font-weight: 600;
}

.modal.panel .optionGroup-list {
  margin-top: 10px;
}

.modal.panel .modal-inner {
  width: 484px;
  max-width: 484px;
  margin: inherit;
  height: 100%;
  border-radius: 0;
  left: auto;
}

.modal.panel.on {
  right: 0%;
}

.modal.panel .panelwrap .btn.clear {
  background-color: #e6e6e6;
}

.modal.panel .panelwrap .btn.type-crud {
  margin: 0;
  max-width: 60px;
}

.modal.panel .panelwrap .panel-head {
  padding: 0 24px;
  position: relative;
  height: 50px;
  border-bottom: 1px solid #e7e7e7;
  background-color: #fff;
}

.modal.panel .panelwrap .panel-head .tit {
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  line-height: 50px;
}

.modal.panel .panelwrap .panel-head .ico.back {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.modal.panel .panelwrap .panel-body {
  padding: 24px;
  height: calc(100vh - 153px);
  overflow: auto;
}

.modal.panel .panelwrap .panel-body .form + .form {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e7e7e7;
}

.modal.panel .panelwrap .panel-foot {
  border-top: 1px solid #e7e7e7;
  padding: 24px;
  display: flex;
  gap: 10px;
}

.modal.panel .panelwrap .panel-foot .btn {
  flex: 1;
}

.modal-inner {
  width: 90%;
  max-width: 504px;
  margin: auto;
  position: relative;
  z-index: 99999;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.modal .modal-dim {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: #1b1b1b;
  opacity: 0;
  z-index: 99998;
  transition: opacity 0.4s ease-in-out;
}

.modal .modal-dim.on {
  opacity: 0.7;
}

.modal .modal-header {
  border-bottom: 1px solid #e7e7e7;
  padding: 24px 0 16px;
  position: relative;
}

.modal .modal-header .modal-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.modal .modal-header .modal-title.center {
  text-align: center;
}

.modal .modal-header .ico {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.modal .modal-header .ico:after {
  width: 16px;
  height: 16px;
}

.modal .desc {
  font-weight: 500;
  line-height: 28px;
  /* 155.556% */
  letter-spacing: -1px;
  font-size: 1.6rem;
  color: #666;
}

.modal small {
  display: inline-block;
  color: var(--text-light);
  font-size: 1.5rem;
  line-height: 20px;
  font-weight: 500;
}

.modal .modal-body {
  max-height: 440px;
  overflow: auto;
  margin: 20px;
}

.modal .modal-body.auto {
  max-height: inherit;
}

.modal .modal-footer {
  background-color: #e6e6e6;
  padding: 20px;
  display: flex;
  gap: 10px;
}

.modal .modal-footer .btn {
  flex: 1;
}

.modal .modal-footer .btn.clear {
  background-color: transparent;
  border: none;
  width: 100px;
  flex: none;
}

/* image modal */
.attchfile-images-preview-modal {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s;
}

.attchfile-images-preview-modal .preview-close {
  position: absolute;
  right: 20px;
  top: 8px;
  display: block;
  text-indent: -999rem;
  background: url("/img/crud-preview-close.png") no-repeat center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 32px;
  height: 32px;
}

.attchfile-images-preview-modal .swiper-pagination {
  bottom: 20px;
}

.attchfile-images-preview-modal .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.attchfile-images-preview-modal .modal-swiper-container {
  width: 100vw;
  height: calc(100vh - 200px);
}

.attchfile-images-preview-modal .modal-swiper-container .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.attchfile-images-preview-modal .modal-swiper-container .swiper-wrapper .swiper-slide {
  overflow: hidden;
  position: relative;
}

.attchfile-images-preview-modal .modal-swiper-container .swiper-wrapper .attch-item {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
}

.attchfile-images-preview-modal .attch-item {
  opacity: 0;
  width: 200px;
  height: 200px;
}

.attchfile-images-preview-modal.on {
  opacity: 1;
}

.attchfile-images-preview-modal.on .attch-item {
  opacity: 1;
}

.list-attchfile .swiper-slide {
  width: auto;
}

.list-attchfile.default {
  margin: inherit;
}

.list-attchfile.default ul {
  display: flex;
  flex-wrap: wrap;
}

.list-attchfile.default ul li {
  width: auto;
  margin: 5px;
}

.list-attchfile.default.odd ul li:last-child a {
  width: 170px;
  height: 170px;
}

.list-attchfile ul li .attch-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 99px;
  height: 99px;
  background-color: var(--border);
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}

.list-attchfile ul li .attch-item.addType {
  background-color: #fff;
  border: 1px solid #e7e7e7;
}

.list-attchfile ul li .attch-item.addType .type-box {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-direction: column-reverse;
  text-indent: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
}

.list-attchfile ul li .attch-item.wide {
  width: 210px;
  height: 140px;
}

.list-attchfile ul li .attch-item .ico {
  position: absolute;
  right: 5px;
  top: 5px;
}

.list-attchfile ul li .attch-item .textLabel {
  position: absolute;
  left: 3px;
  top: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background-color: var(--rec-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.list-attchfile ul li .attch-item .statusLabel {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background-color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
}

.list-attchfile ul li .attch-item .statusLabel.complite {
  background-color: var(--rec-secondary);
  color: #fff;
}

.list-attchfile ul li .attch-item .statusLabel.request {
  background-color: #fff;
  color: var(--rec-secondary);
}

.list-attchfile ul li .attch-item .statusLabel.fail {
  background-color: var(--rec-red);
  color: #fff;
}

/* comp */
.option-name-label {
  display: flex !important;
  align-items: center;
  font-size: 1.6rem !important;
}

.list-option-tab {
  display: flex;
  align-items: center;
  height: 28px;
  overflow: hidden;
  gap: 4px;
}

.list-option-tab li {
  height: 100%;
}

.list-option-tab li.on a {
  color: #fff;
  background-color: #1b1b1b;
}

.list-option-tab li a {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 12px;
  color: #999;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 19.6px */
}

.createitem-group.type-admin .form-group + .form-group {
  margin-top: 40px;
}

.createitem-group.type-admin .form-block-group {
  display: flex;
  gap: 10px;
}

.createitem-group.type-admin .form-block-group .btn {
  height: 50px;
  width: 100px;
  padding: 15px 10px 16px 10px;
}

.createitem-group.type-admin .form-block-group .form-block {
  flex: 1;
}

.createitem-group.type-admin .form-block-group .form-block .multi-select-button {
  background-color: #fff;
}

.message-box {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 0px 60px 60px 60px;
  background: #fff;
  padding: 40px 40px 40px 40px;
  background-color: #e6e6e6;
}

.message-box img {
  width: 70px;
  position: absolute;
  left: 40px;
  top: 10%;
}

.message-box .tit {
  color: #1b1b1b;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 140%;
  /* 33.6px */
}

.message-box p {
  color: #666;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 140%;
  /* 22.4px */
}

.message-box .button-group {
  display: flex;
  gap: 10px;
}

.message-box .button-group .btn {
  min-width: 130px;
}

.main-top {
  gap: 20px;
  align-items: end;
  margin-bottom: 22px;
}

.util-linkbox {
  background-color: #e6e6e6;
  padding: 30px;
  border-radius: 40px;
}

.util-linkbox ul li + li {
  margin-top: 10px;
}

.util-linkbox ul li a {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--text);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -1px;
  background-color: #fff;
}

.list-status ul li {
  background-color: #e6e6e6;
  padding: 16px;
  flex: 1;
  position: relative;
}

.list-status ul li.on {
  background-color: #ffda64;
}

.list-status ul li .tit {
  color: #333;
  font-size: 3rem;
  font-style: normal;
  font-weight: 800;
  line-height: 140%;
  /* 22.4px */
  margin-bottom: 4px;
}

.list-status ul li .val {
  color: #1b1b1b;
  font-size: 3rem;
  font-style: normal;
  font-weight: 800;
  line-height: 140%;
  /* 25.2px */
  text-shadow: 14px 14px 6px rgba(0, 0, 0, 0.15);
}

.list-status ul li img {
  display: none;
  width: 80px;
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.bg-paper {
  background-color: #e6e6e6;
}

.value-group .null {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

.value-group .null em {
  font-size: 1.8rem;
}

.list-performance > ul > li {
  flex: 1;
}

.list-performance .dashboard-box {
  padding: 16px;
}

.list-performance .dashboard-box + .dashboard-box {
  margin-top: 20px;
}

.list-performance .dashboard-box.blue .tit {
  color: #fff;
}

.list-performance .dashboard-box.blue .value-group dl + dl {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.list-performance .dashboard-box.blue .value-group dl dt {
  color: #fff;
  opacity: 0.7;
}

.list-performance .dashboard-box.blue .value-group dl dd {
  color: #fff;
}

.list-performance .dashboard-box .flex {
  margin-bottom: 20px;
  position: relative;
}

.list-performance .dashboard-box .flex .ico {
  width: 24px;
  height: 24px;
  position: absolute;
  top: -4px;
  right: -4px;
}

.list-performance .dashboard-box .tit {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
  display: flex;
  align-items: center;
  gap: 4px;
}

.list-performance .dashboard-box .tit img {
  width: 18px;
}

.list-performance .dashboard-box .value-group {
  display: flex;
  justify-content: space-between;
}

.list-performance .dashboard-box .value-group dl + dl {
  padding-left: 32px;
}

.list-performance .dashboard-box .value-group dl:first-child dd {
  font-weight: 700;
}

.list-performance .dashboard-box .value-group dl dt {
  color: #787878;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 18.2px */
  white-space: nowrap;
  text-align: center;
}

.list-performance .dashboard-box .value-group dl dd {
  margin-top: 10px;
  color: #1b1b1b;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 1px;
  text-align: center;
}

.list-promotion ul.row {
  flex-wrap: wrap;
}

.list-promotion ul.row li {
  position: relative;
  width: calc(50% - 10px);
  border-radius: 20px;
  padding: 36px;
}

.list-promotion ul.row li.black .tit {
  color: #1b1b1b;
}

.list-promotion ul.row li.black p {
  color: #1b1b1b;
}

.list-promotion ul.row li.black .btn-promotion {
  color: #1b1b1b;
  border: 1px solid #1b1b1b;
}

.list-promotion ul.row li.black .btn-promotion::after {
  background-image: url("/img/ico-buttonArrows-b.png");
  background-size: contain;
}

.list-promotion ul.row li .tit {
  color: #fff;
  font-size: 2.4rem;
  font-style: normal;
  line-height: 120%;
  /* 28.8px */
  margin-bottom: 12px;
  font-weight: 800;
}

.list-promotion ul.row li p {
  color: #fff;
  font-family: Pretendard;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 18.2px */
}

.list-promotion ul.row li .btn-promotion {
  margin-top: 32px;
  display: inline-flex;
}

.list-promotion ul.row li img {
  width: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.badge {
  display: inline-flex;
  padding: 0px 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 500;
  background-color: #999999;
  color: #fff;
}

.badge.green {
  background-color: #61aa3f;
}

.badge.yellow {
  background-color: var(--rec-primary);
  color: #fff;
}

.badge.blue {
  background-color: var(--rec-secondary);
  color: #fff;
}

.badge.red {
  background-color: var(--rec-red);
  color: #fff;
}

.score {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text);
  font-family: Pretendard;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 133.333% */
  letter-spacing: 0.3px;
}

.score:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("/img/ico-favorite-on.png") no-repeat;
  background-size: contain;
}

.tabline {
  margin-bottom: 20px;
}

.tabline.min {
  border-bottom: 1px solid #999999;
}

.tabline.min ul {
  overflow: inherit;
}

.tabline.min ul li + li {
  border: none;
}

.tabline.min ul li:hover a .tit {
  color: #1b1b1b;
}

.tabline.min ul li.on {
  position: relative;
}

.tabline.min ul li.on:after {
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background-color: var(--rec-primary);
  bottom: -1px;
  left: 0;
  z-index: 2;
}

.tabline.min ul li.on a .tit {
  color: var(--rec-primary);
}

.tabline.min ul li a {
  border-radius: 0 !important;
  height: 56px;
  background: none !important;
  padding: 0 10px;
}

.tabline.min ul li a .tit {
  color: #999;
  font-weight: 700;
}

.tabline.min + .tabline {
  margin-top: 60px;
}

.tabline ul {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tabline ul li {
  flex: 1;
}

.tabline ul li + li {
  margin-left: 20px;
}

.tabline ul li.on a {
  background-color: var(--rec-secondary);
}

.tabline ul li.on a .tit {
  color: #fff;
}

.tabline ul li.on a span {
  color: #fff;
}

.tabline ul li a {
  height: 80px;
  padding: 0 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #e6e6e6;
  text-align: center;
}

.tabline ul li a .tit {
  display: inline-block;
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 130%;
  /* 20.8px */
}

.tabline ul li a span {
  color: #1b1b1b;
  font-size: 2rem;
  line-height: 100%;
  /* 16px */
  margin-top: 10px;
  font-weight: 800;
}

.filterline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.filterline + .line {
  margin-bottom: 20px;
  border: none;
}

.filterline a.box-button:active {
  transform: scale(0.95);
}

.filterline .box-button {
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e7e7e7;
  display: flex;
  height: 60px;
  padding: 24px;
  align-items: center;
  gap: 20px;
  transition: all 0.4s;
}

.filterline .box-button.type-blue {
  background-color: var(--rec-secondary);
}

.filterline .box-button.type-blue.black {
  background-color: var(--text);
}

.filterline .box-button.type-blue::before {
  display: none;
}

.filterline .box-button.type-blue .btn {
  background-color: transparent;
  border: none;
  color: #fff;
}

.filterline .box-button .tit {
  color: #1b1b1b;
  font-family: Pretendard;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
}

.filterline .box-button .val {
  color: #999;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 19.6px */
}

.filterline .box-button .val-label {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}

.filterline .box-button .val-badge {
  border-radius: 50px;
  background: #e6e6e6;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.filterline .box-button .val-badge .val {
  font-size: 1.6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100px;
}

.filterline .box-button .value-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filterline .box-button:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/img/ico-filter.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.filterline .box-button.type-date:before {
  background-image: url("/img/ico-filterDate.png");
}

.filterline .box-button.type-search {
  position: relative;
  flex: 1;
}

.filterline .box-button.type-search .inner {
  width: 100%;
}

.filterline .box-button.type-search input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  padding-right: 80px;
  padding-left: 0;
}

.filterline .box-button.type-search .ico {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.filterline .box-button.type-search:before {
  content: none;
}

.filterline + .tableline {
  padding-top: 20px;
  border-top: 1px solid #d9d9d9;
}

.coutnumberline {
  margin-bottom: 30px;
}

.coutnumberline ul {
  display: flex;
  gap: 20px;
}

.coutnumberline ul li {
  flex: 1;
  padding: 20px;
}

.coutnumberline ul li .tit {
  color: #1b1b1b;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 10px;
}

.coutnumberline ul li .val {
  color: var(--rec-secondary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.dataheadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  background: #e6e6e6;
  padding: 20px;
  margin-bottom: 20px;
}

.dataheadline.clear {
  background: transparent;
  border-top: 1px solid #d9d9d9;
  border-radius: 0;
  margin-bottom: 0;
}

.dataheadline input,
.dataheadline select {
  height: 42px;
}

.dataheadline .tit {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 140%;
  /* 25.2px */
}

.dataheadline .tit span {
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 10px;
}

.dataheadline .tit a {
  color: #1b1b1b;
}

.dataheadline .flex {
  gap: 10px;
}

.dataheadline .info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dataheadline .info dl {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dataheadline .info dl dt,
.dataheadline .info dl dd {
  color: #1b1b1b;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 25.2px */
}

.null {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.null-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.6rem;
}

.null img {
  width: 24px;
  margin: auto;
}

.sortable-placeholder {
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px dashed #e7e7e7;
  border-radius: 20px;
  height: 90px;
}

.preview-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  background-color: var(--border);
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.alram-group .dataheadline {
  border: none;
}

.alram-group .list-alram-date ul {
  background-color: #fff;
  border-radius: 20px;
}

.alram-group .list-alram-date ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}

.alram-group .list-alram-date ul li.null {
  justify-content: center;
  padding: 60px;
}

.alram-group .list-alram-date ul li + li {
  border-top: 1px solid #e7e7e7;
}

.alram-group .list-alram-date ul li.yet .tit {
  color: #1b1b1b;
  font-weight: 600;
}

.alram-group .list-alram-date ul li.yet .date {
  color: #1b1b1b;
}

.alram-group .list-alram-date ul li .tit {
  color: #999;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 130%;
  /* 20.8px */
}

.alram-group .list-alram-date ul li .date {
  color: #999;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}

.optionadd {
  background-color: transparent;
  border: 1px solid #bbb;
  margin-top: 0 !important;
}

.tableline-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tableline-group .null-inner {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.6rem;
  align-items: center;
  justify-content: center;
}

.tableline-group .null-inner img {
  width: 24px;
  margin: auto;
}

.tableline-group .tableline {
  margin: 0 !important;
}

.crop-area {
  overflow: hidden;
  border: 1px solid #e7e7e7;
  position: relative;
  height: 340px;
}

.crop-area .preview-img {
  display: block;
  max-width: 100%;
}

.tableline .caption {
  text-align: right;
  margin-top: 10px;
  padding: 0 6px;
}

.tableline .caption small {
  color: #fff;
  opacity: 0.8;
  font-size: 1.4rem;
}

.tableline .table-title {
  font-size: 2rem;
  font-weight: 600;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
}

.tableline .table-title img {
  width: 24px;
  margin-right: 4px;
  position: relative;
  bottom: 1px;
}

.tableline .table-title .checkbox {
  position: relative;
  top: 2px;
}

.tableline .table-title:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 25px;
  background: url("/img/ico-arrows.png") no-repeat;
  background-size: contain;
}

.tableline .table-slide-data {
  display: none;
}

.tableline .table-slide-data .btn-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tableline .table-slide-data .table-command {
  background: #fafafa;
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
  padding: 20px;
}

.tableline .table-slide-data .table-command .desc {
  font-size: 1.5rem;
}

.tableline .table-slide-data .table-head .cell-block {
  border-radius: 0;
}

.tableline.open .table-title {
  border-radius: 12px 12px 0 0;
}

.tableline.open .table-title:after {
  transform: rotate(180deg);
}

.tableline + .guideline {
  margin-top: 20px;
}

.tableline .list-attchfile.default ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tableline .list-attchfile.default ul li {
  width: calc(25% - 8px);
  margin: 0;
}

.tableline .list-attchfile ul li .attch-item {
  width: 100%;
  height: 280px;
}

.tableline .cellOpenButton {
  margin-right: 30px;
  display: block;
}

.tableline .cellOpenButton.clear {
  margin-right: 0;
}

.tableline .cellOpenButton.on:after {
  transform: rotate(180deg);
}

.tableline .cellOpenButton.on .ico.arrow:after {
  transform: rotate(180deg);
}

.tableline + .tableline {
  margin-top: 60px;
}

.tableline .btn.clear {
  background-color: #e6e6e6;
  margin-top: 10px;
}

.tableline .table-subhead .cell-block {
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #d9d9d9;
  background-color: #e6e6e6;
  color: #666;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

.tableline .table-head.lined {
  border-bottom: 1px solid #e7e7e7;
}

.tableline .table-head .cell-block {
  border-radius: 12px 12px 0 0;
  background-color: #e6e6e6;
}

.tableline .table-head .cell-block .cell-tr .cell-td {
  flex: 1;
  color: #666;
  font-family: Pretendard;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 19.6px */
  text-align: left;
}

.tableline .table-head + .table-body .cell-block:last-child {
  border-radius: 0 0 12px 12px;
}

.tableline .cell-block {
  display: block;
  background: #fff;
  padding: 24px 14px;
}

.tableline .cell-block + .cell-block {
  border-top: 1px solid #e7e7e7;
}

.tableline .cell-block .cell-tr {
  display: flex;
}

.tableline .cell-block .cell-tr .cell-td {
  flex: 1;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.tableline .cell-block .cell-tr .cell-td .column .btn + .btn {
  margin-top: 4px;
}

.tableline .cell-block .cell-tr .cell-td .list-attchfile {
  margin-right: 16px;
}

.tableline .cell-block .cell-tr .cell-td .list-attchfile .attch-item {
  width: 80px;
  height: 80px;
}

.tableline .cell-block .cell-tr .cell-td.center {
  text-align: center;
  justify-content: center;
}

.tableline .cell-block .cell-tr .cell-td.auto {
  flex: 2;
}

.tableline .cell-block .cell-tr .cell-td.inherit {
  flex: none;
}

.tableline .cell-block .cell-tr .cell-td.min {
  flex: none;
  width: 80px;
}

.tableline .cell-block .cell-tr .cell-td.type-button {
  flex: none;
  width: 140px;
  text-align: center;
  justify-content: center;
}

.tableline .cell-block .cell-tr .cell-td.type-button .btn {
  min-width: 66px;
}

.tableline .cell-block .cell-tr .cell-td .val {
  color: #1b1b1b;
  font-family: Pretendard;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.tableline .cell-block .cell-tr .cell-td .val b {
  font-size: 1.8rem;
}

.tableline .cellOpenData {
  display: none;
}

.tableline .cellOpenData .flex {
  margin-top: 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

.tableline .cellOpenData .flex .btn {
  flex: 1;
}

.tableline .cellOpenData .inner {
  margin: 20px 10px 0 50px;
  border-radius: 12px;
  background: #e6e6e6;
  padding: 40px;
}

.tableline .cellOpenData .data-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.tableline .cellOpenData .data-row + .data-row {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 40px;
  margin-top: 40px;
}

.tableline .cellOpenData .data-row .left {
  flex: 1;
}

.tableline .cellOpenData .data-row .left dl {
  margin-top: 20px;
}

.tableline .cellOpenData .data-row .left dl dt {
  color: #787878;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
}

.tableline .cellOpenData .data-row .left dl dd {
  color: #446ee8;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 140%;
  /* 33.6px */
}

.tableline .cellOpenData .data-row .right {
  flex: 1;
}

.tableline .cellOpenData .data-row .right .tit {
  font-size: 2rem;
}

.tableline .cellOpenData .data-row .tit {
  color: #1b1b1b;
  font-size: 2.4rem;
  font-style: normal;
  line-height: 130%;
  /* 20.8px */
  font-weight: 800;
}

.tableline .cellOpenData .data-row .tit + ul {
  margin-top: 10px;
}

.tableline .cellOpenData .data-row .tit + .desc {
  margin-top: 20px;
}

.tableline .cellOpenData .data-row .desc {
  color: #333;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  /* 19.6px */
}

.tableline .cellOpenData .data-row .desc.clear {
  margin: 0 !important;
}

.tableline .list-arrow li {
  color: #787878;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 140%;
  /* 19.6px */
  position: relative;
  padding-left: 14px;
}

.tableline .list-arrow li + li {
  margin-top: 4px;
}

.tableline .list-arrow li::before {
  content: "";
  background: url("/img/ico-listArrows.png") no-repeat center;
  width: 10px;
  height: 14px;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 2px;
}

.tableline .list-arrow dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tableline .list-calc > li {
  padding: 20px 0;
}

.tableline .list-calc > li:first-child {
  padding-top: 0;
}

.tableline .list-calc > li:last-child {
  border-top: 1px solid #1b1b1b;
}

.tableline .list-calc > li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tableline .list-calc > li > dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tableline .list-calc > li > dl dt {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 130%;
  /* 20.8px */
}

.tableline .list-calc > li > dl dd {
  color: #1b1b1b;
  text-align: right;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
}

.tableline .list-calc .list-arrow {
  margin-top: 10px;
}

.tableline .list-info dl {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tableline .list-info dl dt {
  color: #1b1b1b;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 180%;
  /* 25.2px */
  min-width: 150px;
}

.tableline .list-info dl dd {
  color: #666;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  /* 25.2px */
}

.board-view {
  padding: 40px;
}

.board-view .desc {
  font-size: 1.6rem;
  word-break: break-all;
}

.board-view .desc + .desc {
  margin-top: 24px;
}

.board-view + .tableline {
  margin-top: 40px;
}

.board-view .notice-img {
  gap: 20px;
  display: flex;
  width: 100%;
  margin: 24px 0;
}

.board-view .notice-img .inner img {
  width: 100%;
  max-width: 100%;
  flex: 1;
  border-radius: 12px;
}

.tableline.type-review .list-attchfile ul li .attch-item {
  width: 200px;
  height: 160px;
}

.cell-block.singleType .command {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-block.singleType .userInfo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-block.singleType .userInfo .profile {
  width: 32px;
  height: 32px;
}

.cell-block.singleType .userInfo .name {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
}

.cell-block.singleType .userInfo .side {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  gap: 4px;
}

.cell-block.singleType .desc {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 140%;
  /* 22.4px */
  margin-top: 24px;
}

.cell-block.singleType .list-order-menu {
  border-radius: 12px;
  background: #e6e6e6;
  padding: 24px;
  margin-top: 24px;
}

.cell-block.singleType .list-order-menu li {
  color: #1b1b1b;
}

.cell-block.singleType .list-attchfile {
  margin-top: 24px;
}

.cell-block.singleType .input-item {
  margin-top: 24px;
}

.cell-block.singleType .input-item + .flex {
  margin-top: 24px;
}

.cell-block.singleType .guideline {
  margin-top: 24px;
  background-color: #e6e6e6;
  padding: 24px;
}

.cell-block.singleType a.board-prev,
.cell-block.singleType .board-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cell-block.singleType a.board-prev .date,
.cell-block.singleType .board-next .date {
  font-size: 1.6rem;
  color: var(--text-light);
}

.cell-block.singleType a.board-next .label::before {
  transform: rotate(0);
}

.cell-block.singleType .notice-item {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 80px;
  gap: 20px;
}

.cell-block.singleType .notice-item .inner {
  padding: 24px;
}

.cell-block.singleType .notice-item .label {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1b1b1b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cell-block.singleType .notice-item .label::before {
  content: "";
  display: block;
  background: url("/img/ico-arrows.png") no-repeat;
  background-size: contain;
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}

.cell-block.singleType .notice-item .num {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 500;
}

.cell-block.singleType .notice-item .arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-90deg);
}

.cell-block.singleType .notice-item.faq .arrow {
  transform: rotate(0deg);
  right: -20px;
}

.cell-block.singleType .notice-item .tit {
  display: flex;
  flex-direction: column;
  color: #1b1b1b;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
}

.cell-block.singleType .notice-item .tit .date {
  color: #999;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 140%;
  /* 19.6px */
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.pagination ol {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination ol li.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pagination ol li a {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1b1b1b;
  font-size: 1.4rem;
  line-height: 1;
  line-height: 100%;
  /* 16px */
  width: 24px;
  height: 24px;
  border-radius: 4px;
  padding-top: 2px;
}

.pagination ol li a:hover {
  color: #787878;
}

.pagination ol li a.ico {
  padding-top: 0;
  width: 24px;
  height: 24px;
  background-color: #fff;
}

.pagination ol li a.ico.prev {
  margin-right: 14px;
}

.pagination ol li a.ico.next {
  margin-left: 14px;
}

.pagination ol li.on a {
  background-color: #1b1b1b;
  color: #fff;
}

.guide-area .tit-guide {
  font-size: 2rem;
  font-weight: 500;
}
.guide-area .conts-guide {
  margin-top: 12px;
  font-size: 1.6rem;
}
.guide-area .guideline {
  padding: 0;
  border-radius: none;
  background: none;
}

.guideline {
  padding: 40px;
  border-radius: 12px;
  background-color: #e6e6e6;
}

.guideline.min {
  padding: 16px;
  background-color: #e6e6e6;
}

.guideline.min .list-dot li {
  font-size: 1.4rem;
}

.guideline + .filterline {
  margin-top: 20px;
}

.guideline + .dataheadline {
  border-top: none;
}

.guideline .flex {
  gap: 40px;
}

.guideline .tit {
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 140%;
  margin-bottom: 10px;
}

.guideline .list-dot + .tit,
.guideline .list-num + .tit {
  margin-top: 14px;
}

.list-num > li {
  position: relative;
  counter-increment: list-counter;
  color: #1b1b1b;
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  padding-left: 14px;
  line-height: 1.4;
}

.list-num > li + li {
  margin-top: 10px;
}

.list-num > li:before {
  content: counter(list-counter) ". ";
  position: absolute;
  left: 0;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 1.6rem;
  color: #1b1b1b;
}

.list-num .list-dot {
  margin-top: 8px;
}

.list-dot.clear li::before {
  content: none;
  padding-left: 0;
}

.list-dot li {
  color: #666;
  font-size: 1.6rem;
  font-weight: 500;
  position: relative;
  padding-left: 14px;
  line-height: 1.4;
}

.list-dot li + li {
  margin-top: 4px;
}

.list-dot li::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: rgba(42, 46, 55, 0.7);
  border-radius: 50%;
  left: 4px;
  top: 8px;
}

article.guide {
  padding: 24px;
}

article.guide .guide-button {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

article.guide .guide-button a {
  flex: 1;
  background-color: #eee;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

article.guide .guide-button a .inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #666;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -1px;
}

article.guide .guide-button a .inner em {
  font-weight: 700;
  font-size: 2rem;
}

article.guide .guide-button a img {
  width: 40px;
}

article.guide .guide-button a + a {
  margin-left: 20px;
}

article.guide .list-system {
  display: flex;
}

article.guide .list-system li {
  flex: 1;
  border: 1px solid #e7e7e7;
  padding: 24px;
  border-radius: 20px;
}

article.guide .list-system li img {
  width: 40px;
  margin-bottom: 60px;
}

article.guide .list-system li .tit {
  color: #1b1b1b;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 130%;
  /* 28.6px */
  margin-bottom: 20px;
}

article.guide .list-system li .desc {
  color: #666;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 22.4px */
}

article.guide .list-system li + li {
  margin-left: 20px;
}

article.terms {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

article.terms .list-terms-history li a {
  display: block;
  color: var(--text-light);
  padding: 10px 0;
}

article.terms .list-terms-history li a:hover {
  color: var(--text);
}

article.terms .list-terms-history li + li {
  border-top: 1px solid var(--border-dark);
}

article.terms + .terms {
  margin-top: 20px;
}

article.terms h1 {
  font-size: 1.8rem;
  color: var(--text);
  line-height: 24px;
  letter-spacing: -1px;
  font-weight: 600;
}

article.terms p,
article.terms pre,
article.terms li {
  font-size: 1.5rem;
  color: var(--text-gray);
  line-height: 24px;
}

article.terms table {
  border: 1px solid var(--border-dark);
}

article.terms table th {
  background-color: var(--border);
  color: var(--text);
}

article.terms table tr {
  border-top: 1px solid var(--border-dark);
}

article.terms table th,
article.terms table td {
  border-left: 1px solid var(--border-dark);
  padding: 8px 10px;
  font-size: 1.2rem;
}

article.terms table td {
  color: var(--text-gray);
}

article.terms ol {
  list-style-position: inside;
  /* 숫자 표시 위치를 내부로 설정 */
  padding-left: 24px;
}

article.terms ol li {
  list-style: decimal;
}

.bill {
  margin: auto;
  padding: 80px;
}

.bill .guideline {
  background-color: #e6e6e6;
  padding: 24px;
}

.coupon-item {
  border-radius: 20px;
  padding: 30px 40px;
  background-color: #e6e6e6;
  position: relative;
}

.coupon-item + .coupon-item {
  margin-top: 16px;
}

.coupon-item.clear {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-direction: column;
}

.coupon-item.clear::before,
.coupon-item.clear::after {
  content: none;
}

.coupon-item.clear .tit {
  color: #333;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 140%;
  /* 28px */
}

.coupon-item.clear .desc {
  color: #666;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 140%;
  /* 19.6px */
}

.coupon-item.clear .list-mark {
  display: flex;
  gap: 10px;
}

.coupon-item.clear .list-mark li {
  color: #1b1b1b;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 140%;
  /* 1
  9.6px */
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #eaeaea;
  background-color: #fafafa;
}

.coupon-item .coupon-icon {
  width: 36px;
  height: 36px;
  background-color: var(--rec-secondary);
  border-radius: 100px;
  text-indent: -999rem;
  position: absolute;
  top: 20px;
  right: 30px;
}

.coupon-item .coupon-icon:after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url("/img/ico-coupon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.coupon-item:after,
.coupon-item:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.coupon-item:before {
  left: -20px;
}

.coupon-item:after {
  right: -20px;
}

.coupon-item .head {
  padding-bottom: 20px;
}

.coupon-item .head .badge-group {
  margin-bottom: 14px;
}

.coupon-item .head .tit {
  color: #666;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 6px;
}

.coupon-item .head .price {
  color: #1b1b1b;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: normal;
}

.coupon-item .body {
  border-top: 1px dashed #e7e7e7;
  padding-top: 20px;
}

.coupon-item .body .button-group {
  margin-top: -20px;
}

.list-recip {
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  overflow: hidden;
}

.list-recip + .guideline {
  margin-top: 24px;
  background-color: #fff;
}

.list-recip ul li {
  padding: 20px;
}

.list-recip ul li + li {
  border-top: 1px solid #e7e7e7;
}

.list-recip ul li.head {
  background-color: #1b1b1b;
}

.list-recip ul li.head dl dd,
.list-recip ul li.head dl dt {
  color: #fff;
}

.list-recip ul li.foot {
  background-color: #e6e6e6;
}

.list-recip ul li.foot dl dd {
  font-size: 2rem;
  font-weight: 800;
  line-height: 140%;
  /* 28px */
}

.list-recip ul li dl {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.list-recip ul li dl dt {
  color: #1b1b1b;
  font-size: 2rem;
  font-weight: 600;
  line-height: 140%;
  /* 22.4px */
}

.list-recip ul li dl dd {
  color: #1b1b1b;
  font-size: 2rem;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
}

.list-recip ul li dl.sub {
  position: relative;
  margin-top: 12px;
  padding-left: 28px;
}
.list-recip ul li dl.sub:before {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 12px;
  height: 12px;
  margin-top: -12px;
  border-bottom: 1px solid #999;
  border-left: 1px solid #000;
  content: "";
}
.list-recip ul li dl.sub dt {
  font-weight: 500;
  line-height: 1.2;
  word-break: normal;
}

/* lib */
/* CUSTOM :: 
jquery ui */
.ui-widget {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif;
  width: 320px;
  padding: 20px !important;
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a {
  color: var(--rec-secondary);
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a.ui-state-active {
  color: var(--white);
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child a {
  color: var(--rec-red);
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child a.ui-state-active {
  color: var(--white);
}

.ui-widget-content {
  background-color: var(--white);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  color: var(--text);
}

.ui-datepicker {
  border-radius: 4px;
  border: 1px solid var(--border);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.ui-datepicker th {
  color: var(--text);
}

.ui-datepicker th:first-child span {
  color: var(--rec-red);
}

.ui-datepicker th:last-child span {
  color: var(--rec-secondary);
}

.ui-datepicker .ui-widget-header {
  border: none;
  padding: 0;
  background: none;
  margin-bottom: 20px;
}

.ui-datepicker .ui-widget-header .ui-datepicker-title {
  margin: 0;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-datepicker .ui-widget-header .ui-datepicker-title,
.ui-datepicker .ui-widget-header .ui-datepicker-title span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  flex-direction: row-reverse;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next,
.ui-datepicker .ui-widget-header .ui-datepicker-prev {
  bottom: 0;
  margin: auto;
  top: 0;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next span,
.ui-datepicker .ui-widget-header .ui-datepicker-prev span {
  width: 17px;
  height: 17px;
  background: url("/img/ico-arrow-l.png") no-repeat;
  background-size: contain;
}

.ui-datepicker .ui-widget-header .ui-datepicker-prev {
  left: 0;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next {
  right: 0;
}

.ui-datepicker .ui-widget-header .ui-datepicker-next span {
  background: url("/img/ico-arrow-r.png") no-repeat;
  background-size: contain;
}

.ui-datepicker th {
  padding: 0;
}

.ui-datepicker th span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-light);
  display: flex;
  width: 44px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.ui-datepicker .ui-state-default {
  font-size: 1.7rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  height: 44px;
  font-weight: 500;
  line-height: 1;
  border: none;
  background: none;
  border-radius: 10px;
}

.ui-datepicker .ui-state-default.ui-state-highlight {
  position: relative;
}

.ui-datepicker .ui-state-default.ui-state-highlight:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: var(--rec-secondary);
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  margin: auto;
}

.ui-datepicker .ui-state-default.ui-state-active {
  background-color: var(--rec-secondary);
  color: var(--white);
}

.ui-datepicker .ui-state-default.ui-state-active.ui-state-hover {
  opacity: 1;
}

.ui-datepicker .ui-state-default.ui-state-hover {
  opacity: 0.5;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  background-color: transparent;
  font-weight: 700;
  border: none;
  margin: 0;
  padding-left: 0;
  padding-right: 10px;
  margin-right: 10px;
  font-size: 2rem;
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("/img/selected-arrow.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 17px;
  padding-right: 10px;
}

.ui-datepicker select.ui-datepicker-year {
  padding-right: 18px;
  min-width: 75px;
}

.ui-datepicker select.ui-datepicker-month {
  min-width: 55px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: none;
  background: none;
}

.datepicker-page {
  margin-top: -16px;
}

.datepicker-page .datepicker {
  width: 100%;
}

.datepicker-page .datepicker.readonly {
  pointer-events: none;
}

.datepicker-page .datepicker .ui-datepicker-inline {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
}

.ui-widget.ui-widget-content {
  border: none;
  padding: 0;
}

.ui-datepicker table {
  margin: 0;
  table-layout: fixed;
}

/* lib range slider */
/* Functional styling;
    * These styles are requivar(--rec-red) for noUiSlider to function.
    * You don't need to change these rules to apply your design.
    */
.range-lib-item {
  padding: 14px 16px 14px;
}

.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Wrapper for all connect elements.
    */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

/* Offset direction
    */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

/* Give origins 0 height/width so they don't interfere with clicking the
    * connect elements.
    */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  backface-visibility: hidden;
  position: absolute;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Slider size and handle placement;
    */
.noUi-horizontal {
  height: 14px;
}

.noUi-horizontal .noUi-handle {
  width: 30px;
  height: 30px;
  right: -14px;
  top: -8px;
}

.noUi-vertical {
  width: 14px;
}

.noUi-vertical .noUi-handle {
  width: 30px;
  height: 30px;
  right: -6px;
  bottom: -17px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -14px;
  right: auto;
}

/* Styling;
    * Giving the connect element a border radius causes issues with using transform: scale
    */
.noUi-target {
  background: var(--bg-gray);
  border-radius: 100px;
}

.noUi-connects {
  border-radius: 10px;
}

.noUi-connect {
  background: var(--rec-secondary);
}

/* Handles and cursors;
    */
.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  border: 2px solid var(--rec-secondary);
  border-radius: 100px;
  background: var(--white);
  cursor: default;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
}

.noUi-active {
  background: var(--rec-secondary);
}

/* Handle stripes;
    */
.noUi-handle:before,
.noUi-handle:after {
  content: none;
}

.noUi-handle:after {
  left: 17px;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

/* Disabled state;
    */
[disabled] .noUi-connect {
  background: var(--rec-red);
}

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/* Base;
    *
    */
.noUi-pips,
.noUi-pips * {
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: var(--text-light);
}

/* Values;
    *
    */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  color: var(--text-light);
  font-size: 1.2rem;
}

.noUi-value-sub {
  color: var(--text-light);
  font-size: 1.2rem;
}

/* Markings;
    *
    */
.noUi-marker {
  display: none;
  position: absolute;
  background: var(--text-light);
}

.noUi-marker-sub {
  background: var(--text-light);
}

.noUi-marker-large {
  background: var(--text-light);
}

/* Horizontal layout;
    *
    */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

/* Vertical layout;
    *
    */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  transform: translate(0, -50%);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: none;
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--white);
  color: var(--text);
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

/* swiper */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.8);
}

.swiper-pagination-bullet-active {
  background: var(--rec-primary);
}

.manipulation {
  touch-action: manipulation;
}

.include-icon-tit img {
  width: 24px;
  position: relative;
  bottom: 2px;
  margin-right: 4px;
}

.select-titleline {
  display: flex;
  gap: 20px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.checklinebox {
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.numCountInput {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.6rem;
  letter-spacing: -0.7px;
  height: 50px;
  padding: 0 14px;
  font-weight: 700;
  color: var(--text);
  border-radius: 8px;
  border: 1px solid #e7e7e7;
}

.numCountInput a {
  display: flex;
  color: var(--text-gray);
  width: 60px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #d9d9d9;
  text-align: center;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

@media (max-width: 1280px) {
  .title-lv1 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .title-lv2 {
    font-size: 1.8rem;
    margin-bottom: 14px;
  }
  article + article {
    margin-top: 30px;
  }
  .header {
    height: 50px;
  }
  .header .notice-line .notice-label {
    padding: 3px 8px;
    font-size: 1.3rem;
  }
  .header .notice-line .notice-desc {
    font-size: 1.4rem;
  }
  .header .right .util .text-btn {
    font-size: 1.5rem;
  }
  .header .right .util .alram-button .ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .header .right .util .alram-button .ico .dot {
    right: 3px;
    top: 3px;
  }
  .header .right .util .alram-button .ico:after {
    width: 28px;
    height: 28px;
  }
  .header .right .util .alram-button .alram-menu {
    top: 37px;
  }
  .header .right .util .alram-button .alram-menu ul li {
    font-size: 1.4rem;
  }
  .header .right .util .alram-button .alram-menu ul li a {
    font-size: 1.4rem;
  }
  .header .right .util .user-button .user {
    height: 34px;
    font-size: 1.4rem;
    gap: 4px;
  }
  .header .right .util .user-button .user:after {
    width: 8px;
    height: 5px;
  }
  .header .right .util .user-button .user .profile {
    width: 20px;
    height: 20px;
    font-size: 1.2rem;
    border-radius: 100px;
  }
  .header .right .util .user-button .user-menu {
    top: 37px;
    border-radius: 10px;
  }
  .header .right .util .user-button .user-menu ul li a {
    font-size: 1.3rem;
  }
  .logo {
    width: 230px;
  }
  .logo img {
    width: 170px;
  }
  .container {
    padding-left: 200px;
  }
  .gnb {
    width: 200px;
    padding: 50px 0 20px;
  }
  .gnb .admin-card .info {
    width: calc(100% - 40px);
  }
  .gnb .admin-card .info .name {
    font-size: 1.5rem;
  }
  .gnb .admin-card .info .side {
    gap: 4px;
  }
  .gnb .admin-card .info .side span {
    font-size: 1.1rem;
  }
  .gnb .admin-card .info .side span.id::after {
    content: none;
  }
  .gnb .admin-card .store-select {
    width: 30px;
    height: 30px;
  }
  .gnb .admin-card .store-select ul {
    top: 135px !important;
    width: 200px;
  }
  .gnb .admin-card .store-select ul li > a {
    padding: 6px;
  }
  .gnb .admin-card .store-select ul li > a .view-btn {
    border: none;
    font-size: 1.3rem;
    width: auto;
  }
  .gnb .admin-card .store-select-button:after {
    width: 12px;
    height: 6px;
  }
  .gnb nav {
    height: calc(100vh - 145px);
  }
  .gnb nav .depth1 > li > a {
    padding: 20px 16px;
  }
  .gnb nav .depth1 > li > a span {
    font-size: 1.6rem;
  }
  .gnb nav .depth1 > li.on > a span {
    font-size: 1.8rem;
  }
  .gnb nav .depth2 > li a {
    font-size: 1.5rem;
  }
  .contents {
    min-width: 824px;
    max-width: 100%;
    padding: 78px 40px 30px 40px;
  }
  .contents.type-submit.account {
    max-width: 600px;
    min-width: 600px;
  }
  .contents.type-submit .submit-form + .submit-form {
    margin-top: 30px;
  }
  .contents.type-submit .submit-form .form + .form {
    padding-top: 20px;
    margin-top: 20px;
  }
  .contents.type-submit .submit-form .form .guideline {
    background-color: #eeeeee;
    padding: 20px;
  }
  .contents.type-submit .submit-form .button-group {
    margin-top: 20px;
  }
  .contents.type-submit > .button-group .btn {
    min-width: 120px;
  }
  .drag-guide {
    font-size: 1.3rem;
    padding: 6px 10px;
  }
  .input-message {
    font-size: 1.4rem;
    font-weight: 400;
  }
  input[type=color],
  input[type=date],
  input[type=datetime-local],
  input[type=datetime],
  input[type=email],
  input[type=month],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=time],
  input[type=url],
  input[type=week],
  select,
  .like-input {
    font-size: 1.7rem;
  }
  select {
    font-size: 1.7rem;
  }
  .btn {
    font-size: 1.6rem;
  }
  .btn.medium {
    height: 34px;
    font-size: 1.5rem;
    min-width: 70px;
  }
  .modal .modal-header {
    padding: 20px 0 16px;
  }
  .modal .modal-header .modal-title {
    font-size: 1.8rem;
  }
  .modal .desc {
    line-height: 24px;
    font-size: 1.5rem;
  }
  .modal small {
    font-size: 1.4rem;
  }
  .modal .modal-footer {
    padding: 14px 20px;
  }
  .list-status .title-lv2 {
    height: 35px;
  }
  .list-status ul li .tit {
    font-size: 2.4rem;
  }
  .list-status ul li .val {
    font-size: 2.2rem;
  }
  .list-status ul li img {
    width: 60px;
  }
  .value-group .null em {
    font-size: 1.6rem;
  }
  .list-performance .dashboard-box .tit {
    font-size: 1.5rem;
  }
  .list-performance .dashboard-box .value-group dl {
    padding: 0;
  }
  .list-performance .dashboard-box .value-group dl dt {
    font-size: 1.4rem;
  }
  .list-performance .dashboard-box .value-group dl dd {
    font-size: 2.4rem;
    letter-spacing: 1px;
  }
  .message-box {
    padding: 30px 30px 30px 30px;
  }
  .message-box img {
    width: 50px;
    left: 30px;
  }
  .message-box .tit {
    font-size: 2rem;
  }
  .message-box p {
    font-size: 1.5rem;
  }
  .message-box .button-group .btn {
    min-width: 100px;
  }
  .row.main .left {
    width: 70%;
  }
  .row.main .left .title-lv2 {
    font-size: 1.5rem;
  }
  .row.main .right .title-lv2 {
    font-size: 1.5rem;
  }
  .row.main .right .rank .value-group {
    gap: 6px;
  }
  .row.main .right .rank .value-group dl {
    padding: 0 8px;
  }
  .row.main .right .rank .value-group dl:first-child dt,
  .row.main .right .rank .value-group dl:first-child dd {
    font-size: 1.5rem;
    font-weight: 700;
  }
  .row.main .right .rank .value-group dl dt {
    font-size: 1.4rem;
  }
  .row.main .right .rank .value-group dl dt,
  .row.main .right .rank .value-group dl dd {
    font-size: 1.4rem;
  }
  .list-promotion ul.row li {
    padding: 20px;
  }
  .list-promotion ul.row li .tit {
    font-size: 2rem;
  }
  .list-promotion ul.row li p {
    font-size: 1.3rem;
  }
  .list-promotion ul.row li .btn-promotion {
    margin-top: 24px;
  }
  .list-promotion ul.row li img {
    width: 120px;
  }
  .tabline {
    margin-bottom: 10px;
  }
  .tabline ul li + li {
    margin-left: 10px;
  }
  .tabline ul li a {
    height: auto;
    padding: 16px 16px;
  }
  .tabline ul li a .tit {
    font-size: 1.5rem;
  }
  .tabline ul li a span {
    font-size: 1.7rem;
  }
  .filterline {
    gap: 10px;
  }
  .filterline .box-button {
    height: 50px;
    padding: 14px;
    gap: 10px;
  }
  .filterline .box-button.type-blue .btn {
    font-size: 1.5rem;
    letter-spacing: -1px;
  }
  .filterline .box-button .tit {
    font-size: 1.4rem;
  }
  .filterline .box-button .val {
    font-size: 1.3rem;
    letter-spacing: -1px;
  }
  .filterline .box-button .val-label {
    font-size: 1.4rem;
  }
  .filterline .box-button .val-badge .val {
    font-size: 1.3rem;
  }
  .filterline .box-button:before {
    width: 16px;
    height: 16px;
  }
  .filterline .box-button.type-search {
    position: relative;
    flex: 1;
  }
  .filterline .box-button.type-search .inner {
    width: 100%;
  }
  .filterline .box-button.type-search input {
    font-size: 1.7rem;
    padding-right: 40px;
  }
  .filterline .box-button.type-search .ico {
    width: 16px;
    height: 16px;
  }
  .coutnumberline {
    margin-bottom: 20px;
  }
  .coutnumberline ul {
    gap: 10px;
  }
  .coutnumberline ul li {
    padding: 16px;
  }
  .coutnumberline ul li .tit {
    font-size: 1.5rem;
  }
  .coutnumberline ul li .val {
    font-size: 1.8rem;
  }
  .pagination {
    margin: 20px 0;
  }
  .pagination ol li a {
    font-size: 1.3rem;
    width: 18px;
    height: 18px;
  }
  .pagination ol li a.ico {
    width: 18px;
    height: 18px;
  }
  .pagination ol li a.ico.prev {
    margin-right: 10px;
  }
  .pagination ol li a.ico.next {
    margin-left: 10px;
  }
  .dataheadline .tit {
    font-size: 1.7rem;
  }
  .dataheadline .tit span {
    font-size: 1.4rem;
  }
  .dataheadline .info {
    gap: 10px;
    flex-direction: column;
  }
  .dataheadline .info dl dt,
  .dataheadline .info dl dd {
    font-size: 1.7rem;
  }
  .tableline-group .null-inner {
    padding: 40px 0;
    font-size: 1.5rem;
  }
  .tableline .table-title {
    font-size: 1.8rem;
  }
  .tableline .table-title img {
    width: 20px;
  }
  .tableline .table-title:after {
    width: 16px;
    height: 16px;
  }
  .tableline .table-slide-data {
    display: none;
  }
  .tableline .table-slide-data .btn-group {
    gap: 10px;
  }
  .tableline .table-slide-data .table-command .desc {
    font-size: 1.4rem;
  }
  .tableline .list-attchfile ul li .attch-item {
    height: 200px;
  }
  .tableline + .tableline {
    margin-top: 40px;
  }
  .tableline .table-subhead .cell-block {
    font-size: 1.4rem;
    letter-spacing: -1px;
  }
  .tableline .table-head .cell-block .cell-tr .cell-td {
    font-size: 1.4rem;
    letter-spacing: -1px;
  }
  .tableline .cell-block {
    padding: 16px 14px;
  }
  .tableline .cell-block .cell-tr .cell-td .list-attchfile .attch-item {
    width: 60px;
    height: 60px;
  }
  .tableline .cell-block .cell-tr .cell-td.min {
    width: 60px;
  }
  .tableline .cell-block .cell-tr .cell-td.type-button {
    width: 100px;
  }
  .tableline .cell-block .cell-tr .cell-td.type-button .btn {
    min-width: 40px;
  }
  .tableline .cell-block .cell-tr .cell-td .val {
    font-size: 1.5rem;
    letter-spacing: -1px;
  }
  .tableline .cell-block .cell-tr .cell-td .val b {
    font-size: 1.6rem;
  }
  .tableline .cellOpenData .inner {
    padding: 30px;
  }
  .tableline .cellOpenData .data-row + .data-row {
    padding-top: 20px;
    margin-top: 20px;
  }
  .tableline .cellOpenData .data-row .left {
    flex: none;
    width: 240px;
    padding-right: 60px;
  }
  .tableline .cellOpenData .data-row .left dl {
    margin-top: 10px;
  }
  .tableline .cellOpenData .data-row .left dl dt {
    font-size: 1.5rem;
  }
  .tableline .cellOpenData .data-row .left dl dd {
    font-size: 2rem;
  }
  .tableline .cellOpenData .data-row .right {
    flex: 1;
  }
  .tableline .cellOpenData .data-row .right .tit {
    font-size: 2rem;
  }
  .tableline .cellOpenData .data-row .tit {
    font-size: 2rem;
  }
  .tableline .cellOpenData .data-row .tit + .desc {
    margin-top: 10px;
  }
  .tableline .cellOpenData .data-row .desc {
    font-size: 1.5rem;
  }
  .tableline .list-calc > li > dl dt {
    font-size: 1.5rem;
  }
  .tableline .list-calc > li > dl dd {
    font-size: 1.5rem;
  }
  .cell-block.singleType {
    padding: 20px;
  }
  .cell-block.singleType .userInfo .name {
    font-size: 1.5rem;
  }
  .cell-block.singleType .userInfo .side {
    font-size: 1.5rem;
  }
  .cell-block.singleType .desc {
    font-size: 1.5rem;
    margin-top: 20px;
  }
  .cell-block.singleType .list-order-menu {
    padding: 20px;
    margin-top: 20px;
  }
  .cell-block.singleType .list-attchfile {
    margin-top: 20px;
  }
  .cell-block.singleType .input-item {
    margin-top: 20px;
  }
  .cell-block.singleType .input-item + .flex {
    margin-top: 20px;
  }
  .cell-block.singleType .guideline {
    margin-top: 20px;
    padding: 20px;
  }
  .cell-block.singleType a.board-prev .date,
  .cell-block.singleType .board-next .date {
    font-size: 1.5rem;
  }
  .cell-block.singleType .notice-item .inner {
    padding: 20px;
  }
  .cell-block.singleType .notice-item .label {
    font-size: 1.5rem;
  }
  .cell-block.singleType .notice-item .label::before {
    width: 16px;
    height: 16px;
  }
  .cell-block.singleType .notice-item .num {
    font-size: 1.4rem;
  }
  .cell-block.singleType .notice-item .tit {
    font-size: 1.7rem;
  }
  .cell-block.singleType .notice-item .tit .date {
    font-size: 1.5rem;
  }
  .guideline {
    padding: 30px;
  }
  .guideline.min .list-dot li {
    font-size: 1.3rem;
  }
  .guideline .flex {
    gap: 30px;
  }
  .guideline .tit {
    font-size: 1.5rem;
  }
  .list-num > li {
    font-size: 1.5rem;
  }
  .list-num > li:before {
    font-size: 1.5rem;
  }
  .list-num .list-dot {
    margin-top: 4px;
  }
  .list-dot li {
    font-size: 1.4rem;
  }
  .list-dot li + li {
    margin-top: 4px;
  }
  .list-dot li::before {
    width: 2px;
    height: 2px;
  }
  article.guide .guide-button {
    display: block;
    margin: 0;
    overflow: hidden;
  }
  article.guide .guide-button a {
    float: left;
    width: calc(50% - 5px);
    display: block;
    padding: 16px;
    margin-top: 10px;
  }
  article.guide .guide-button a:nth-child(odd) {
    margin-left: 0;
  }
  article.guide .guide-button a + a {
    margin-left: 10px;
  }
  article.guide .list-system li {
    padding: 16px;
  }
  article.guide .list-system li img {
    width: 40px;
    margin-bottom: 60px;
  }
  article.guide .list-system li .tit {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  article.guide .list-system li .desc {
    font-size: 1.4rem;
  }
  article.guide .list-system li + li {
    margin-left: 10px;
  }
  .bill {
    padding: 40px;
  }
  .bill .guideline {
    padding: 20px;
  }
  .list-recip + .guideline {
    margin-top: 20px;
  }
  .list-recip ul li {
    padding: 20px;
  }
  .list-recip ul li + li {
    border-top: 1px solid #e7e7e7;
  }
  .list-recip ul li.head {
    background-color: #000;
  }
  .list-recip ul li.head dl dd,
  .list-recip ul li.head dl dt {
    color: #fff;
  }
  .list-recip ul li dl dt {
    font-size: 1.8rem;
  }
  .list-recip ul li dl dd {
    font-size: 1.8rem;
  }
  .input-item-inner.block .checkbox span,
  .input-item-inner.block .radio span {
    min-width: inherit;
  }
  .input-item .flex-group .select-group .datepicker {
    width: 150px;
  }
  .input-item .unit-text {
    letter-spacing: -1px;
    min-width: 30px;
  }
}
@media (max-width: 1024px) {
  .footer {
    position: relative !important;
    z-index: 4 !important;
    padding: 20px 20px 40px !important;
  }
  .footer .app-inner {
    width: 100% !important;
    padding-left: 0;
    padding: 0 !important;
  }
  .footer .logo {
    display: none !important;
    position: static !important;
    margin-top: 0 !important;
  }
  .footer .logo img {
    width: 120px !important;
  }
  .footer .top {
    flex-direction: column !important;
  }
  .footer .top .fnb {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .footer .top .fnb li a {
    font-size: 1.2rem !important;
  }
  .footer .bottom {
    text-align: cente !important;
  }
  .footer .bottom small {
    margin-top: 4px;
    font-size: 1rem !important;
    text-align: center !important;
  }
  .footer .bottom .address {
    width: 100% !important;
    justify-content: center !important;
    margin: auto !important;
  }
  .footer .bottom .address li {
    font-size: 1rem !important;
  }
  .footer .bottom .address li.br:before {
    display: block !important;
  }
  .footer .bottom .address li + li:before {
    background-color: transparent !important;
  }
}
@media (max-width: 990px) {
  .main-top {
    flex-direction: column;
    align-items: start;
  }
  .util-linkbox {
    width: 100%;
  }
  .quick-menu {
    width: auto;
    right: 10px;
    top: auto;
    bottom: 66px;
    background-color: transparent;
    border-radius: 0;
    transform: scale(0.8);
  }
  .quick-menu ul li {
    padding: 12px;
    height: auto;
    background-color: #fae100;
    border-radius: 100%;
    width: 92px;
    height: 92px;
  }
  .quick-menu ul li + li {
    margin-top: 14px;
    border: none;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  }
  .quick-menu ul li a {
    gap: 0;
  }
  .quick-menu ul li a .img {
    margin-top: -8px;
    width: 42px;
  }
  .quick-menu ul li a span {
    margin-top: -6px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #000;
    position: relative;
    z-index: 2;
  }
  .header {
    padding: 0 10px;
  }
  .header .logo {
    width: auto;
    position: relative;
    bottom: 2px;
  }
  .header .logo img {
    min-width: 160px;
    max-width: 160px;
  }
  .header .notice-line {
    display: none;
  }
  .header .left {
    margin-left: 12px;
  }
  .header .right {
    position: absolute;
    right: 10px;
  }
  .header .right .util {
    gap: 0;
  }
  .header .right .util li + li {
    margin-left: 0;
  }
  .header .right .util li + li.user-button {
    margin-left: 10px;
  }
  .header .right .util .text-btn {
    font-size: 1.4rem;
    position: relative;
    top: 1px;
  }
  .header .right .util .btn-log {
    font-size: 1.4rem;
    border-color: #e7e7e7;
    padding: 0 6px;
  }
  .header .right .util .btn-application {
    font-size: 1.4rem;
    padding: 0 2px 0 12px;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  .header .right .util .btn-application .arrow {
    display: none;
  }
  .mobile-menu {
    margin-left: -20px;
    text-indent: -999rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }
  .mobile-menu.active:after {
    background: url("/img/gnb-close.png") no-repeat center;
    background-size: contain;
  }
  .mobile-menu:after {
    content: "";
    display: block;
    background: url("/img/gnb.png") no-repeat center;
    background-size: contain;
    width: 26px;
    height: 26px;
  }
  .gnb {
    width: 100%;
    padding: 50px 0 0;
    height: 100dvh;
    overflow: auto;
    top: -100%;
  }
  .gnb.open {
    top: 0%;
  }
  .gnb .admin-card {
    padding: 10px;
    height: 60px;
  }
  .gnb .admin-card .info .side span {
    font-size: 1.2rem;
  }
  .gnb .admin-card .store-select ul {
    top: 110px !important;
    width: 100%;
  }
  .gnb nav {
    height: auto;
  }
  .gnb nav .depth1 > li {
    border: none !important;
  }
  .gnb nav .depth1 > li > a {
    padding: 10px 10px;
  }
  .gnb nav .depth2 {
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .gnb nav .depth2 > li + li {
    margin-top: 4px;
  }
  .gnb nav .depth2 > li a {
    font-size: 1.4rem;
    padding: 2px 20px;
  }
  .gnb .util-link {
    position: static;
  }
  .contents {
    min-width: 100%;
    padding: 70px 20px 20px;
  }
  .contents.type-submit.account {
    margin: inherit;
    padding-top: 90px;
    max-width: 100%;
    min-width: 100%;
  }
  .contents.type-submit .submit-form + .submit-form {
    margin-top: 30px;
  }
  .contents.type-submit .submit-form .form + .form {
    padding-top: 20px;
    margin-top: 20px;
  }
  .contents.type-submit .submit-form .form .guideline {
    background-color: #eeeeee;
    padding: 20px;
  }
  .contents.type-submit .submit-form .button-group {
    margin-top: 20px;
  }
  .contents.type-submit > .button-group .btn {
    min-width: 120px;
  }
  .container {
    padding-left: 0;
  }
  .row.main {
    display: block;
  }
  .row.main .left {
    width: 100%;
  }
  .row.main .right {
    width: 100%;
    margin-top: 20px;
  }
  .row.main .right .rank {
    padding: 24px;
  }
  .list-performance .dashboard-box {
    padding: 24px;
  }
  .list-performance .dashboard-box .value-group {
    display: block;
  }
  .list-performance .dashboard-box .value-group dl {
    margin-top: 20px;
  }
  .list-performance .dashboard-box .value-group dl + dl {
    padding-left: 0;
  }
  .list-performance .dashboard-box .value-group dl dt {
    font-size: 1.5rem;
    text-align: left;
  }
  .list-performance .dashboard-box .value-group dl dd {
    font-size: 3rem;
    text-align: left;
    margin: 0;
  }
  .list-status + .list-performance {
    margin-top: 0;
  }
  .list-status .row {
    flex-wrap: wrap;
    gap: 20px;
  }
  .list-status .row .dashboard-box {
    min-width: calc(50% - 10px);
  }
  .list-status .row .dashboard-box + .dashboard-box {
    margin: 0;
  }
  .list-status ul li .val {
    font-size: 3rem;
  }
  .list-promotion {
    overflow: auto;
  }
  .list-promotion ul.row {
    flex-wrap: nowrap;
  }
  .list-promotion ul.row li {
    width: 240px;
    flex: none;
    padding: 24px 24px 110px;
  }
  article.guide {
    padding: 0;
  }
  article.guide .guide-button {
    display: flex;
    flex-direction: column;
  }
  article.guide .guide-button a {
    display: flex;
    justify-content: start;
    width: 100%;
  }
  article.guide .guide-button a .inner {
    font-size: 1.3rem;
  }
  article.guide .guide-button a .inner em {
    font-weight: 700;
    font-size: 1.5rem;
  }
  article.guide .guide-button a + a {
    margin-left: 0;
  }
  article.guide .list-system {
    flex-direction: column;
  }
  article.guide .list-system li img {
    margin-bottom: 20px;
  }
  article.guide .list-system li + li {
    margin-left: 0px;
    margin-top: 20px;
  }
  article.terms {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  article.terms .list-terms-history li a {
    display: block;
    color: var(--text-light);
    padding: 10px 0;
  }
  article.terms .list-terms-history li a:hover {
    color: var(--text);
  }
  article.terms .list-terms-history li + li {
    border-top: 1px solid var(--border-dark);
  }
  article.terms + .terms {
    margin-top: 20px;
  }
  article.terms h1 {
    font-size: 1.8rem;
    color: var(--text);
    line-height: 24px;
    letter-spacing: -1px;
    font-weight: 600;
  }
  article.terms p,
  article.terms pre,
  article.terms li {
    font-size: 1.5rem;
    color: var(--text-gray);
    line-height: 24px;
  }
  article.terms table {
    border: 1px solid var(--border-dark);
  }
  article.terms table th {
    background-color: var(--border);
    color: var(--text);
  }
  article.terms table tr {
    border-top: 1px solid var(--border-dark);
  }
  article.terms table th,
  article.terms table td {
    border-left: 1px solid var(--border-dark);
    padding: 8px 10px;
    font-size: 1.2rem;
  }
  article.terms table td {
    color: var(--text-gray);
  }
  article.terms ol {
    list-style-position: inside;
    /* 숫자 표시 위치를 내부로 설정 */
    padding-left: 24px;
  }
  article.terms ol li {
    list-style: decimal;
  }
  .dashboard-box.bg-paper {
    padding: 0;
    background-color: transparent;
  }
  .dashboard-box.terms {
    padding: 0;
  }
  .dashboard-box .bill {
    padding: 0;
  }
  .filterline {
    flex-direction: column;
  }
  .filterline .box-button {
    padding: 10px 14px;
    width: 100%;
    height: auto;
  }
  .filterline .box-button.type-blue .btn {
    text-align: center;
    width: 100%;
  }
  .filterline .box-button .tit {
    font-size: 1.5rem;
  }
  .filterline .box-button .val {
    font-size: 1.4rem;
  }
  .filterline .box-button .val-label {
    font-size: 1.5rem;
  }
  .filterline .box-button .val-badge {
    padding: 4px 10px;
  }
  .filterline .box-button .val-badge .val {
    font-size: 1.2rem;
  }
  .filterline .box-button .value-group {
    flex-wrap: wrap;
  }
  .filterline .box-button:before {
    width: 20px;
    height: 20px;
  }
  .coutnumberline {
    margin-bottom: 20px;
  }
  .coutnumberline ul {
    gap: 0;
  }
  .coutnumberline ul li {
    padding: 0;
    text-align: center;
  }
  .coutnumberline ul li .tit {
    font-size: 1rem;
    letter-spacing: -1px;
  }
  .coutnumberline ul li .val {
    font-size: 1.4rem;
  }
  .coutnumberline ul li .val br {
    display: none;
  }
  .dataheadline {
    flex-direction: column;
    padding: 14px;
  }
  .dataheadline.clear {
    background-color: #f9f9f9;
  }
  .dataheadline.clear .flex {
    width: 100%;
  }
  .dataheadline.clear .flex .btn {
    flex: 1;
    margin-top: 10px;
    height: 44px;
  }
  .dataheadline .tit {
    font-size: 1.6rem;
  }
  .dataheadline .tit span {
    font-size: 1.4rem;
  }
  .dataheadline .info {
    margin-top: 10px;
  }
  .dataheadline .info dl dt,
  .dataheadline .info dl dd {
    font-size: 1.5rem;
  }
  .drag-guide {
    width: 100%;
    background-color: transparent;
    padding: 0;
  }
  .drag-guide .gray {
    display: none;
  }
  .drag-guide span {
    display: none;
  }
  .drag-guide .dragset-button {
    display: flex;
    gap: 4px;
  }
  .drag-guide .dragset-button a {
    border: 1px solid var(--border);
  }
  .input-message {
    font-size: 1.2rem;
  }
  .tabline.min {
    overflow-x: auto;
  }
  .tabline.min ul li {
    flex: none;
    width: auto;
  }
  .tabline.min ul li a .tit {
    font-size: 1.6em;
  }
  .tabline ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #e6e6e6;
    text-align: center;
  }
  .tabline ul li a .tit {
    font-size: 1rem;
    letter-spacing: -1px;
  }
  .tabline ul li a span {
    color: #1b1b1b;
    font-size: 2rem;
    line-height: 100%;
    /* 16px */
    margin-top: 10px;
    font-weight: 800;
  }
  .tableline .list-attchfile.default ul {
    flex-direction: column;
  }
  .tableline .list-attchfile.default ul li {
    width: 100%;
  }
  .tableline .table-title {
    padding: 14px 0;
  }
  .tableline .table-slide-data .table-command .desc {
    font-size: 1.2rem;
    width: 70%;
  }
  .tableline .table-head {
    display: none;
  }
  .tableline .cell-block {
    padding: 14px 0;
  }
  .tableline .cell-block .cellOpenButton {
    margin-bottom: 10px;
  }
  .tableline .cell-block .cell-tr {
    flex-direction: column;
    gap: 10px;
    align-items: start;
  }
  .tableline .cell-block .cell-tr .cell-td {
    width: 100%;
    display: block;
    padding: 0;
    text-align: left !important;
  }
  .tableline .cell-block .cell-tr .cell-td .btn.medium {
    height: 50px;
  }
  .tableline .cell-block .cell-tr .cell-td .list-attchfile .attch-item {
    width: 50px;
    height: 50px;
  }
  .tableline .cell-block .cell-tr .cell-td.min {
    width: 100%;
  }
  .tableline .cell-block .cell-tr .cell-td.type-button {
    width: 100%;
  }
  .tableline .cell-block .cell-tr .cell-td.type-button .btn {
    min-width: 100%;
  }
  .tableline .cellOpenData .inner {
    margin: 10px 0 0;
    padding: 24px;
  }
  .tableline .cellOpenData .data-row {
    flex-direction: column;
  }
  .tableline .cellOpenData .data-row + .data-row {
    padding-top: 20px;
    margin-top: 20px;
  }
  .tableline .cellOpenData .data-row .left {
    padding: 0;
    width: 100%;
  }
  .tableline .cellOpenData .data-row .left dl dd {
    font-size: 2rem;
  }
  .tableline .cellOpenData .data-row .right {
    width: 100%;
    padding: 0;
    flex: 1;
  }
  .tableline .cellOpenData .data-row .right .tit {
    font-size: 1.8rem;
  }
  .tableline .cellOpenData .data-row .tit {
    font-size: 1.5rem;
  }
  .tableline .cellOpenData .data-row .desc {
    font-size: 1.6rem;
  }
  .tableline .list-calc > li > dl dt {
    font-size: 1.4rem;
  }
  .tableline .list-calc > li > dl dd {
    font-size: 1.4rem;
  }
  .tableline .list-info dl {
    justify-content: space-between;
  }
  .tableline .list-info dl dt {
    font-size: 1.4rem;
    min-width: inherit;
  }
  .tableline .list-info dl dd {
    text-align: right;
  }
}
.yet-find-tit {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
}

.yetidItem {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.yetidItem .info .id {
  font-size: 1.8rem;
  font-weight: 700;
}

.yetidItem .info .date {
  font-size: 1.4rem;
}

.kakao-btn {
  background-color: #fff;
  border-radius: 200px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 2rem;
  font-weight: 800;
  padding-right: 24px;
  z-index: 10;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.25);
  color: var(--text);
  transition: all 0.4s;
}

.kakao-btn:before {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  background: url("/img/kakaoch-logo.png") no-repeat;
  background-size: contain;
  border-radius: 100px;
  margin-right: 12px;
}

.clientWeb {
  background-color: #fff;
}
.clientWeb .header .right .util a {
  font-size: 1.85rem;
  font-weight: 500;
}
.clientWeb .input-item.agreeList.suball {
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.clientWeb .input-item.agreeList.suball .checkbox.agree span {
  font-weight: 800;
}
.clientWeb .input-item.agreeList.sub {
  padding: 0px 22px;
  border: 1px solid #e7e7e7;
  background-color: #fafafa;
  border-radius: 14px;
  margin-top: 0;
}
.clientWeb .input-item.agreeList.sub .input-item-inner + .input-item-inner {
  border-top: 1px solid #e7e7e7;
  margin: 0;
}
.clientWeb .guideline.min {
  background-color: #e6e6e6;
  padding: 24px 30px;
}
.clientWeb .guideline.min + .form-group {
  margin-top: 30px;
}
.clientWeb.intro {
  min-width: 1200px;
}
.clientWeb.single .container {
  min-height: inherit;
}
.clientWeb.single .app-inner + .app-inner {
  margin-top: 80px;
}
.clientWeb .footer {
  background-color: #0e0e0e;
  padding: 60px 24px 60px;
}
.clientWeb .footer .app-inner {
  width: 1240px;
  padding-left: 260px;
  position: relative;
}
.clientWeb .footer .logo {
  position: absolute;
  margin-top: -2px;
  left: 0;
}
.clientWeb .footer .logo img {
  width: 214px;
}
.clientWeb .footer .top .fnb li a {
  font-size: 1.4rem;
  color: #666;
}
.clientWeb .footer .top .fnb li a b {
  color: #787878;
}
.clientWeb .footer .bottom small {
  font-size: 1.4rem;
  color: #666;
}
.clientWeb .footer .bottom .address {
  flex-wrap: wrap;
  width: 80%;
}
.clientWeb .footer .bottom .address li {
  font-size: 1.4rem;
  color: #666;
  line-height: 140%;
}
.clientWeb .footer .bottom .address li.br:before {
  display: none;
}
.clientWeb .footer .bottom .address li a {
  color: #666;
  margin-left: 0px;
}
.clientWeb .createitem-group {
  margin: 60px 0;
}
.clientWeb .createitem-group .btn {
  min-width: 60px !important;
}
.clientWeb .createitem-group .createButton {
  max-width: 100% !important;
  margin-top: 20px;
}
.clientWeb .type-label {
  position: relative;
}
.clientWeb .type-label input {
  text-align: right;
  padding-right: 30px;
}
.clientWeb .type-label .label-right {
  font-size: 1.7rem;
  position: absolute;
  line-height: 52px;
  right: 14px;
  top: 0;
  font-weight: 700;
}
.clientWeb .type-label .label-left {
  font-size: 1.7rem;
  position: absolute;
  line-height: 52px;
  left: 14px;
  top: 0;
  font-weight: 700;
}
.clientWeb .input-item-inner .btn {
  margin: 0;
}
.clientWeb .input-item-inner.block .checkbox input:checked + span,
.clientWeb .input-item-inner.block .radio input:checked + span {
  color: var(--rec-secondary);
  background-color: var(--rec-secondary-bg);
  border: 2px solid var(--rec-secondary-border);
}
.clientWeb .input-item-inner.block .checkbox input:checked + span:before,
.clientWeb .input-item-inner.block .radio input:checked + span:before {
  content: none;
}
.clientWeb .input-item-inner.block .checkbox input:disabled + span:before,
.clientWeb .input-item-inner.block .radio input:disabled + span:before {
  content: none;
}
.clientWeb .input-item-inner.block .checkbox span,
.clientWeb .input-item-inner.block .radio span {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  letter-spacing: -0.7px;
  height: 52px;
  padding: 0 14px;
  line-height: 17px;
  font-weight: 700;
  text-align: center;
  color: var(--text-light);
  border-radius: 10px;
  background-color: #f7f6f5;
  border: 2px solid transparent;
}
.clientWeb .input-item-inner.block .checkbox span.justify,
.clientWeb .input-item-inner.block .radio span.justify {
  justify-content: space-between;
}
.clientWeb .input-item-inner.block .checkbox span img,
.clientWeb .input-item-inner.block .radio span img {
  width: 17px;
  margin-right: 6px;
}
.clientWeb .input-item-inner.block .checkbox span img + em,
.clientWeb .input-item-inner.block .radio span img + em {
  margin-right: auto;
}
.clientWeb .input-item-inner.block .checkbox span:before,
.clientWeb .input-item-inner.block .radio span:before {
  content: none;
}
.clientWeb .input-item-inner.block .checkbox input:checked + span:after {
  background: url("/img/ico-checkbox-on.png") no-repeat center;
  background-size: contain;
}
.clientWeb .input-item-inner.block .checkbox span {
  justify-content: space-between;
}
.clientWeb .input-item-inner.block .checkbox span:after {
  content: "";
  display: block;
  background: url("/img/ico-checkbox-off.png") no-repeat center;
  background-size: contain;
  width: 17px;
  height: 17px;
}
.clientWeb .input-item-inner.block.min .checkbox input:checked + span,
.clientWeb .input-item-inner.block.min .radio input:checked + span {
  color: var(--rec-secondary);
  background-color: var(--rec-secondary-bg);
  border: 2px solid var(--rec-secondary-border);
  font-weight: 700;
}
.clientWeb .input-item-inner.block.min .checkbox input:checked + span:after,
.clientWeb .input-item-inner.block.min .radio input:checked + span:after {
  content: none;
}
.clientWeb .input-item-inner.block.min .checkbox span,
.clientWeb .input-item-inner.block.min .radio span {
  justify-content: center;
  font-size: 1.5rem;
  height: auto;
  color: var(--text-gray);
  font-weight: 600;
  padding: 14px 18px;
  line-height: 15px;
  border-radius: 6px;
  background-color: var(--border);
  border: 2px solid transparent;
}
.clientWeb .input-item-inner.block.min .checkbox span img,
.clientWeb .input-item-inner.block.min .radio span img {
  width: 14px;
  margin-right: 4px;
}
.clientWeb .input-item-inner.block.min .checkbox span:before,
.clientWeb .input-item-inner.block.min .radio span:before {
  content: none;
}
.clientWeb .input-item-inner.block.min .checkbox span:after,
.clientWeb .input-item-inner.block.min .radio span:after {
  content: none;
}
.clientWeb .modal article + article {
  margin-top: 20px;
}
.clientWeb .modal .web-section {
  padding: 0 !important;
  min-width: 100%;
}
.clientWeb .modal.webview {
  max-width: 100%;
}
.clientWeb .modal.alert .list-num li:before {
  font-size: 1.6rem;
  color: var(--text);
  line-height: 24px;
}
.clientWeb .modal.alert .list-num li p {
  text-align: left;
}
.clientWeb .modal.alert .list-num li small {
  text-align: left;
}
.clientWeb .modal.alert .alert-tit {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.clientWeb .modal.alert .alert-tit.left {
  text-align: left;
}
.clientWeb .modal.alert .desc {
  font-size: 1.6rem;
  line-height: 24px;
}
.clientWeb .modal.alert .modal-inner {
  max-width: 340px;
  position: relative;
}
.clientWeb .modal.alert .modal-inner .ico {
  position: absolute;
  right: 10px;
  top: 10px;
  margin: auto;
}
.clientWeb .modal.alert .modal-inner .ico.close:after {
  background-image: url(/img/ico-close.png);
  width: 100%;
  height: 100%;
}
.clientWeb .modal.alert .modal-body {
  margin-top: 30px;
  padding: 20px 20px 0;
}
.clientWeb .modal-dim {
  max-width: 100%;
}
.clientWeb .modal-inner {
  max-width: 600px;
  padding: 0;
  border-radius: 0;
}
.clientWeb .modal-body {
  max-height: 500px;
  overflow: auto;
}
.clientWeb .modal-footer {
  background-color: #fff;
  justify-content: center;
}
.clientWeb .modal-footer .btn {
  max-width: 200px;
}
.clientWeb .modal .desc,
.clientWeb .modal .list-num > li:before {
  font-size: 1.7rem;
  color: var(--text);
  line-height: 28px;
}
.clientWeb .modal-head {
  border-bottom: 1px solid #e7e7e7;
  min-height: 67px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 20px;
}
.clientWeb .modal-head.clear {
  background-color: transparent;
  min-height: inherit;
}
.clientWeb .modal-head .ico {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.clientWeb .modal-head .ico.close:after {
  background-image: url(/img/ico-close.png);
  width: 100%;
  height: 100%;
}
.clientWeb .modal-head .tit {
  font-size: 2rem;
  font-weight: 600;
}
.clientWeb .only-pc {
  display: block;
}
.clientWeb .only-mo {
  display: none;
}
.clientWeb .btn {
  font-weight: 700;
}
.clientWeb .btn span {
  line-height: 1;
  font-size: 2rem;
  position: relative;
}
.clientWeb .btn.medium {
  padding: 17px 10px 15px;
  height: 52px;
  min-width: 100px;
  border-radius: 14px;
}
.clientWeb .btn.medium.min {
  max-width: 110px;
  min-width: 110px;
}
.clientWeb .btn.medium.readonly {
  background-color: var(--rec-secondary-bg);
  color: var(--rec-secondary);
  box-shadow: none;
  pointer-events: none;
}
.clientWeb .btn.positive {
  background: var(--rec-primary);
}
.clientWeb .btn.positive span {
  color: #fff;
}
.clientWeb .btn.white {
  background-color: #fff;
}
.clientWeb .btn.white span {
  color: #000;
}
.clientWeb .input-icon {
  position: relative;
}
.clientWeb .input-icon .delete {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.clientWeb .mainSearch.useSearchIco {
  position: relative;
}
.clientWeb .mainSearch.useSearchIco .delete {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 50px;
  bottom: 0;
  margin: auto;
}
.clientWeb .mainSearch.useSearchIco .textVisibilty {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.clientWeb .mainSearch .ico {
  width: 28px;
  height: 28px;
}
.clientWeb .list-faq > .dropDownLst {
  background-color: #fff;
}
.clientWeb .list-faq > .dropDownLst > li a {
  display: block;
  padding: 24px 68px 24px 68px;
  color: #222;
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 28px */
  letter-spacing: -0.4px;
  position: relative;
}
.clientWeb .list-faq > .dropDownLst > li a:before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: url("/img/ico-faq.png") no-repeat;
  background-size: 50%;
  position: absolute;
  background-position: center;
  left: 32px;
  top: 24px;
  margin: auto;
}
.clientWeb .list-faq > .dropDownLst > li a:after {
  content: "";
  display: block;
  background: url("/img/ico-arrows.png") no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 32px;
  top: 29px;
  margin: auto;
}
.clientWeb .list-faq > .dropDownLst > li a.clear {
  padding-left: 32px;
}
.clientWeb .list-faq > .dropDownLst > li a.clear:before {
  display: none;
}
.clientWeb .list-faq > .dropDownLst > li + li {
  border-top: 1px solid #e7e7e7;
}
.clientWeb .list-faq .dropDownCnt {
  background-color: #fff0eb;
  padding: 36px 49px;
  border-top: 1px solid #e7e7e7;
}
.clientWeb .list-faq .dropDownCnt .info-box {
  font-size: 1.6rem;
  line-height: 140%;
}
.clientWeb .swiper-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}
.clientWeb .swiper-arrows .next,
.clientWeb .swiper-arrows .prev {
  text-indent: -999rem;
  display: block;
  width: 60px;
  height: 60px;
  background: url("/img/slide-next.png") no-repeat;
  background-size: contain;
  background-position: center;
}
.clientWeb .swiper-arrows .next.swiper-button-disabled,
.clientWeb .swiper-arrows .prev.swiper-button-disabled {
  opacity: 0.3;
}
.clientWeb .swiper-arrows .prev {
  transform: rotate(180deg);
}
.clientWeb .web-section {
  width: 100%;
  min-width: 1024px;
  margin: auto;
  padding: 140px 0;
}
.clientWeb .web-section .mark {
  position: relative;
}
.clientWeb .web-section .mark i {
  display: inline;
  font-family: "GmarketSans";
  font-style: normal;
  position: relative;
  z-index: 1;
}
.clientWeb .web-section .mark.lar:after {
  background: url("/img/line-pen-lar.png");
  width: 240px;
  height: 19px;
  background-size: contain;
}
.clientWeb .web-section .mark:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 19px;
  background: url("/img/line-pen.png") no-repeat;
  background-size: contain;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.clientWeb .web-section .title.center {
  text-align: center;
}
.clientWeb .web-section .title h2 {
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 140%;
}
.clientWeb .web-section .title h2 small {
  font-size: 3rem;
}
.clientWeb .web-section .title h2 b {
  font-weight: 800;
}
.clientWeb .web-section .btn.btn-main {
  margin-top: 50px;
  display: inline-flex;
  padding: 30px 40px;
  border-radius: 12px;
  background-color: var(--rec-primary);
}
.clientWeb .web-section .btn.btn-main span {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}
.clientWeb .web-section .btn.btn-main span em {
  position: absolute;
  right: -60px;
  top: -50px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 30px;
  border-radius: 100px;
  box-shadow: 0px -7.219px 30px 0px rgba(27, 27, 27, 0.95) inset, 14.438px -7.219px 20px 0px rgba(27, 27, 27, 0.8) inset;
  padding: 3px 14px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.6);
}
.clientWeb .web-section .num {
  display: block;
  color: var(--rec-primary);
  font-weight: 700;
  font-size: 3rem;
  line-height: 160%;
}
.clientWeb .web-section.main {
  height: var(--full-height);
  background: url("/img/bg-main.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clientWeb .web-section.main.coustomer {
  background: url("/img/bg-main-costomer.png") no-repeat;
  background-position: center;
  background-size: cover;
}
.clientWeb .web-section.main .button-group {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  padding: 0 20px;
}
.clientWeb .web-section.main .button-group .btn-applecation img {
  width: 200px;
}
.clientWeb .web-section.main .copy {
  text-align: center;
}
.clientWeb .web-section.main .copy .title {
  color: #fff;
}
.clientWeb .web-section.main .copy .title span {
  display: block;
  margin-bottom: 20px;
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 3.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.clientWeb .web-section.main .copy .title .desc {
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 8.8rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  position: relative;
  z-index: 1;
  letter-spacing: 2px;
}
.clientWeb .web-section.main .visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  overflow: hidden;
}
.clientWeb .web-section.together {
  background-color: #e6e6e6;
}
.clientWeb .web-section.together .title {
  margin-bottom: 100px;
}
.clientWeb .web-section.together .row {
  display: flex;
  gap: 0;
}
.clientWeb .web-section.together .row .column {
  flex: 1;
  text-align: center;
}
.clientWeb .web-section.together .row .column + .column {
  border-left: 1px solid #4a4a4a;
}
.clientWeb .web-section.together .row .column h3 {
  margin-top: 30px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -1px;
}
.clientWeb .web-section.together .row .column img {
  max-width: 301px;
}
.clientWeb .web-section.together .row .column p {
  margin-top: 14px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -1px;
}
.clientWeb .web-section.black {
  background: #1b1b1b;
  color: #fff;
}
.clientWeb .web-section.black .title {
  color: #fff;
}
.clientWeb .web-section.black .title h2 {
  font-weight: 600;
}
.clientWeb .web-section.why {
  padding: 220px 0;
}
.clientWeb .web-section.why .title {
  margin-bottom: 100px;
}
.clientWeb .web-section.why .app-inner {
  width: 1024px;
}
.clientWeb .web-section.why .row {
  display: flex;
  gap: 50px;
}
.clientWeb .web-section.why .row .column {
  flex: 1;
  text-align: center;
}
.clientWeb .web-section.why .row .column img {
  width: 200px;
}
.clientWeb .web-section.why .row .column h3 {
  margin-top: 32px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}
.clientWeb .web-section.why .row .column h3 b {
  font-weight: 800;
}
.clientWeb .web-section.prossess {
  background-color: #e6e6e6;
}
.clientWeb .web-section.prossess article + article {
  border-top: 1px solid #d9d9d9;
  margin-top: 30px;
  padding-top: 30px;
}
.clientWeb .web-section.prossess .row {
  display: flex;
  align-items: center;
  text-align: center;
}
.clientWeb .web-section.prossess .row .column {
  flex: 1;
}
.clientWeb .web-section.prossess .row img {
  width: 258px;
}
.clientWeb .web-section.prossess .row p {
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
}
.clientWeb .web-section.prossess .row .arrow {
  flex: none;
}
.clientWeb .web-section.prossess .row .arrow img {
  margin-top: -20px;
  width: 20px;
}
.clientWeb .web-section.point {
  overflow: hidden;
}
.clientWeb .web-section.point .row {
  flex-direction: column;
  padding: 80px 150px;
}
.clientWeb .web-section.point .row .column {
  display: flex;
  align-items: center;
  gap: 150px;
}
.clientWeb .web-section.point .row .column + .column {
  border-top: 1px solid #292929;
  margin-top: 30px;
  padding-top: 30px;
}
.clientWeb .web-section.point .row .column img {
  width: 361px;
  position: relative;
}
.clientWeb .web-section.point .row .column p {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -1px;
}
.clientWeb .web-section.point .row .column p b {
  font-weight: 700;
}
.clientWeb .web-section.point .row .column:nth-child(1) img {
  left: -60px;
}
.clientWeb .web-section.point .row .column:nth-child(2) {
  flex-direction: row-reverse;
  text-align: right;
}
.clientWeb .web-section.point .row .column:nth-child(2) img {
  width: 382px;
  right: -40px;
}
.clientWeb .web-section.point .row .column:nth-child(3) img {
  left: -60px;
}
.clientWeb .web-section.point article {
  margin-top: 40px;
  border-radius: 182px;
  background: #141414;
  position: relative;
}
.clientWeb .web-section.point article:after {
  content: "";
  display: block;
  width: 137px;
  height: 80px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -70px;
  margin: auto;
  background: url("/img/img-point-arrow.png") no-repeat;
  background-size: contain;
}
.clientWeb .web-section.point article + .title {
  margin-top: 60px;
}
.clientWeb .web-section.point article + .title h2 {
  font-size: 3.6rem;
  font-weight: 500;
}
.clientWeb .web-section.ad {
  background-color: #ff6e33;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clientWeb .web-section.ad img {
  max-width: 1019px;
}
.clientWeb .web-section.step .title {
  margin-bottom: 60px;
}
.clientWeb .web-section.step .list-step ul {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clientWeb .web-section.step .list-step ul li {
  border-radius: 20px;
  background: #141414;
  padding: 40px;
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.clientWeb .web-section.step .list-step ul li:last-child {
  background-color: var(--rec-primary);
  border-color: transparent;
}
.clientWeb .web-section.step .list-step ul li:last-child .info span {
  opacity: 1;
  color: #fff;
}
.clientWeb .web-section.step .list-step ul li:last-child .info .tit {
  color: #fff;
}
.clientWeb .web-section.step .list-step ul li.stepArrow {
  flex: none;
  width: 61px;
  padding: 0;
  border: none;
  background-color: transparent;
}
.clientWeb .web-section.step .list-step ul li .step-ico {
  width: 32px;
  height: 32px;
}
.clientWeb .web-section.step .list-step ul li .info span {
  display: block;
  color: #fff;
  font-family: Pretendard;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 22.4px */
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.5;
}
.clientWeb .web-section.step .list-step ul li .info .tit {
  color: #fff;
  font-family: Pretendard;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 800;
  line-height: 140%;
  /* 33.6px */
}
.clientWeb .web-section.step .list-step ul li .info .tit small {
  color: #fff;
  font-family: Pretendard;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}
.clientWeb .web-section.videoReview .title {
  margin-bottom: 60px;
}
.clientWeb .web-section.videoReview .slide-video ul li .card {
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
.clientWeb .web-section.videoReview .slide-video ul li .card .box-video {
  flex: 1;
}
.clientWeb .web-section.videoReview .slide-video ul li .card .info {
  width: 500px;
  height: 393.75px;
  background-color: #121314;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  padding: 60px 40px;
}
.clientWeb .web-section.videoReview .slide-video ul li .card .info span {
  opacity: 0.7;
  color: #d1d6db;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 30px;
  /* 136.364% */
}
.clientWeb .web-section.videoReview .slide-video ul li .card .info p {
  color: #fff;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 41.6px;
  /* 160% */
}
.clientWeb .web-section.videoReview .slide-video ul li .card .info a {
  display: inline-block;
  width: 121px;
  color: var(--rec-primary);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 20px;
  /* 125% */
  border-radius: 100px;
  border: 1px solid var(--rec-primary);
  padding: 12px 24px;
}
.clientWeb .web-section.service {
  padding: 180px 0;
  background-color: #eeeeee;
}
.clientWeb .web-section.service .title h2 {
  font-size: 5.4rem;
}
.clientWeb .web-section.service .title h2 .mark:after {
  width: 200px;
  height: 25px;
  background-repeat: no-repeat;
}
.clientWeb .web-section.service .list-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.clientWeb .web-section.service .list-card .absolute-text {
  position: absolute;
  left: 0;
  bottom: 70px;
  font-family: "GmarketSans";
  font-size: 3.3rem;
  font-weight: 300;
}
.clientWeb .web-section.service .list-card .absolute-text.label {
  bottom: 120px;
  font-weight: 700;
  color: var(--rec-primary);
}
.clientWeb .web-section.service .list-card li {
  background-size: cover;
  width: calc(33.33% - 15px);
  background-color: #000;
  height: 240px;
  height: 395px;
  border-radius: 40px;
  overflow: hidden;
}
.clientWeb .web-section.service .list-card li:nth-child(3) dl .counting-value {
  color: #f9001d;
}
.clientWeb .web-section.service .list-card li.clear {
  background-color: transparent;
  padding: 10px;
}
.clientWeb .web-section.service .list-card li dl {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 40px;
}
.clientWeb .web-section.service .list-card li dl dt {
  color: #fff;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 41.6px */
}
.clientWeb .web-section.service .list-card li dl dd {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  color: #fff;
  font-family: "GmarketSans";
  font-size: 3.3rem;
  font-weight: 300;
  line-height: 120%;
  /* 34.8px */
  position: relative;
}
.clientWeb .web-section.service .list-card li dl dd .view,
.clientWeb .web-section.service .list-card li dl dd .counting-value {
  font-family: "GmarketSans";
  font-size: 6.6rem;
  font-weight: 700;
  line-height: 100%;
  color: var(--rec-primary);
}
.clientWeb .web-section.service .list-card li dl dd b {
  font-family: "GmarketSans";
  font-size: 6.6rem;
  font-weight: 500;
  line-height: 100%;
  color: var(--rec-primary);
}
.clientWeb .web-section.service .list-card li dl dd img {
  width: 30px;
}
.clientWeb .web-section.standard {
  background: url("/img/bg-table.png") no-repeat;
  background-size: cover;
  background-position: center;
}
.clientWeb .web-section.standard .box-video {
  width: 80%;
  border-radius: 30px;
  margin: auto;
}
.clientWeb .web-section.standard .title {
  margin-bottom: 60px;
}
.clientWeb .web-section.standard .title h2 {
  color: #fff;
  text-align: center;
}
.clientWeb .web-section.standard .title p {
  margin-top: 10px;
  color: #fff;
  text-align: center;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 30.8px */
  letter-spacing: -0.44px;
  opacity: 0.7;
}
.clientWeb .web-section.standard .tableline {
  position: relative;
}
.clientWeb .web-section.standard .tableline + .title {
  margin-top: 140px;
}
.clientWeb .web-section.standard .tableline .layer {
  position: absolute;
  width: 244px;
  height: 328px;
  border: 4px dashed #ff495e;
  background-color: transparent;
  left: 238px;
  top: -2px;
}
.clientWeb .web-section.standard .tableline .table-head {
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  border-bottom: 1px solid #e6e9f5;
}
.clientWeb .web-section.standard .tableline .table-head .cell-block .cell-tr .cell-td b {
  color: #fff;
}
.clientWeb .web-section.standard .tableline .table-head .cell-block .cell-tr .cell-td.strong b {
  color: #000;
}
.clientWeb .web-section.standard .tableline .cell-block {
  padding: 0;
}
.clientWeb .web-section.standard .tableline .cell-block .cell-tr + .cell-tr {
  border-top: 1px solid #e6e9f5;
}
.clientWeb .web-section.standard .tableline .cell-block .cell-td {
  height: 80px;
}
.clientWeb .web-section.standard .tableline .cell-block .cell-td + .cell-td {
  border-left: 1px solid #e6e9f5;
}
.clientWeb .web-section.standard .tableline .cell-block .cell-td b {
  font-size: 2.4rem;
  font-family: "GmarketSans";
  font-weight: 500;
}
.clientWeb .web-section.standard .tableline .cell-block .cell-td .val {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 144.444% */
}
.clientWeb .web-section.news {
  background-color: #e6e6e6;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.clientWeb .web-section.news .justify {
  margin-bottom: 60px;
}
.clientWeb .web-section.news .slide-news ul li .inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clientWeb .web-section.news .slide-news ul li .inner .img {
  width: 100%;
  height: 168px;
  overflow: hidden;
  border-radius: 14px;
}
.clientWeb .web-section.news .slide-news ul li .inner .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.clientWeb .web-section.news .slide-news ul li .inner .tit {
  color: #222;
  font-family: Pretendard;
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  /* 26.88px */
  display: -ms-flexbox;
  display: box;
  height: 60px;
  overflow: hidden;
  vertical-align: top;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.clientWeb .web-section.news .slide-news ul li .inner .info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.clientWeb .web-section.news .slide-news ul li .inner .info .label {
  padding: 2px 4px;
  background: #222;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 140%;
  /* 20.16px */
}
.clientWeb .web-section.news .slide-news ul li .inner .info .date {
  color: #666;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 140%;
  /* 23.52px */
}
.clientWeb .web-section.banner {
  text-align: center;
}
.clientWeb .web-section.banner .top {
  padding-bottom: 30px;
}
.clientWeb .web-section.banner .top .title {
  margin-bottom: 30px;
}
.clientWeb .web-section.banner .top .title h2 {
  font-weight: 700;
}
.clientWeb .web-section.banner .top .title h2 em {
  font-weight: 800;
}
.clientWeb .web-section.banner .btm {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.clientWeb .web-section.banner .btm p {
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 48px;
}
.clientWeb .web-section.banner .btm .button-group {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.clientWeb .web-section.banner .btm .button-group .btn-applecation img {
  width: 200px;
}
.clientWeb .web-section.review {
  background-color: #000;
}
.clientWeb .web-section.review .title {
  margin-bottom: 60px;
}
.clientWeb .web-section.review .title h2 {
  text-align: center;
  color: #fff;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 520px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .head {
  position: relative;
  z-index: 1;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .head span {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  line-height: 38px;
  margin-bottom: 12px;
  display: block;
  opacity: 0.7;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .head .tit {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 130%;
  /* 41.6px */
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .body {
  position: relative;
  z-index: 1;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .body p {
  color: #fff;
  font-size: 1.8rem;
  font-style: normal;
  line-height: 140%;
  /* 25.2px */
}
.clientWeb .web-section.review .slide-review ul li .reviewbox .body p + p {
  margin-top: 24px;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox.yellow {
  background-color: #f9b624;
  border-radius: 30px;
}
.clientWeb .web-section.review .slide-review ul li .reviewbox:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
}
.clientWeb .web-section.faq {
  background-color: #eeeeee;
}
.clientWeb .web-section.faq .button-group {
  display: flex;
  justify-content: center;
}
.clientWeb .web-section.faq .button-group .btn {
  min-width: 200px;
}
.clientWeb .web-section.faq .tab-sub {
  border-color: #999999;
}
.clientWeb .web-section.faq .tab-sub ul {
  height: 60px;
}
.clientWeb .web-section.faq .tab-sub ul li a {
  font-size: 2.2rem;
}
.clientWeb .web-section.faq .tab-sub ul li.on:after {
  height: 2px;
}
.clientWeb .web-section.faq .title {
  margin-bottom: 60px;
}
.clientWeb .web-section.faq .title h2 {
  text-align: center;
}
.clientWeb .web-section .title-lv1 {
  font-family: "GmarketSans";
  font-size: 4.7rem;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
  .clientWeb .web-section .title-lv1 {
    font-size: 3.2rem;
    margin-bottom: 20px;
  }
}
.clientWeb .web-section .title-lv1.center {
  text-align: center;
}
.clientWeb .web-section .tab-sub {
  border-bottom: 1px solid var(--border-light);
}
.clientWeb .web-section .tab-sub ul {
  padding: 0 20px;
  display: flex;
  height: 44px;
}
.clientWeb .web-section .tab-sub ul li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.clientWeb .web-section .tab-sub ul li a {
  color: rgba(53, 53, 68, 0.4);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 24px;
  /* 141.176% */
  letter-spacing: -0.5px;
}
.clientWeb .web-section .tab-sub ul li.on::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: var(--text);
  position: absolute;
  bottom: -1px;
  left: 0;
}
.clientWeb .web-section .tab-sub ul li.on a {
  color: var(--text);
}
.clientWeb .web-section.mainCeo {
  position: relative;
  display: flex;
  background-color: #1b1b1b;
}
.clientWeb .web-section.mainCeo .title {
  margin-bottom: 20px;
}
.clientWeb .web-section.mainCeo .title h2 {
  color: #fff;
  font-size: 2.4rem;
}
.clientWeb .web-section.mainCeo .tab-sub {
  margin-bottom: 20px;
}
.clientWeb .web-section.mainCeo.type-login {
  height: var(--full-height);
  padding-bottom: env(safe-area-inset-bottom);
}
.clientWeb .web-section.mainCeo.type-login .checkbox span,
.clientWeb .web-section.mainCeo.type-login .radio span {
  color: #fff !important;
}
.clientWeb .web-section.mainCeo.type-login .checkbox input:checked + span:before {
  background: url("/img/crud-check-main.png") no-repeat center;
  background-size: contain;
}
.clientWeb .web-section.mainCeo.type-login .btn.blue {
  background-color: #fff;
  color: var(--rec-secondary);
}
.clientWeb .web-section.mainCeo.type-login .result-desc {
  font-size: 1.8rem;
  text-align: center;
  padding: 20px 0;
  color: #fff;
}
.clientWeb .web-section.mainCeo.type-login .checkbox span,
.clientWeb .web-section.mainCeo.type-login .radio span {
  color: var(--text);
}
.clientWeb .web-section.mainCeo.type-login .tab-sub {
  border-color: rgba(255, 255, 255, 0.1);
}
.clientWeb .web-section.mainCeo.type-login .tab-sub ul li a {
  color: #fff;
  opacity: 0.5;
}
.clientWeb .web-section.mainCeo.type-login .tab-sub ul li.on:after {
  height: 2px;
  background-color: var(--rec-primary);
}
.clientWeb .web-section.mainCeo.type-login .tab-sub ul li.on a {
  opacity: 1;
}
.clientWeb .web-section.mainCeo.type-login .cont h2 {
  text-align: center;
}
.clientWeb .web-section.mainCeo.type-login .cont .form {
  padding: 20px 0;
  width: 320px;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .type-label input {
  text-align: left;
}
.clientWeb .web-section.mainCeo.type-login .cont .form input {
  text-align: center;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .btn {
  padding: 18px 20px 17px 20px;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .btn span {
  font-size: 1.8rem;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .side-btn {
  text-align: center;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .side-btn a {
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .side-btn a + a {
  margin-left: 20px;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .guide-btn {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
.clientWeb .web-section.mainCeo.type-login .cont .form .guide-btn + .guide-btn {
  margin-top: 10px;
}
.clientWeb .web-section.mainCeo.type-login .cont .form .guide-btn a {
  color: var(--rec-secondary);
  font-weight: 700;
  margin-left: 10px;
}
.clientWeb .web-section.mainCeo .app-inner {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
.clientWeb .web-section.mainCeo strong {
  position: absolute;
  bottom: 30px;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
  left: 0;
}
.clientWeb .web-section.mainCeo strong b {
  font-weight: 800;
}
.clientWeb .web-section.basic article.terms {
  padding: 0;
}
.clientWeb .web-section.basic .scroll-x-auto .swiper-slide {
  width: auto;
}
.clientWeb .web-section.basic .titleline {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 80px;
}
.clientWeb .web-section.basic .titleline .title {
  margin: 0;
  flex: none;
  text-align: center;
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -2px;
}
.clientWeb .web-section.basic .titleline .category-item {
  display: flex;
  padding: 16px 24px;
  border-radius: 24px;
  font-size: 2.2rem;
  color: var(--text-light);
  border: 1px solid var(--border-dark);
  background-color: var(--white);
}
.clientWeb .web-section.basic .titleline .category-item.active {
  background-color: var(--text);
  color: var(--white);
}
.clientWeb .web-section.application {
  padding-bottom: 80px;
}
.clientWeb .web-section.application .checkbox.agree {
  padding: 0;
}
.clientWeb .web-section.application .checkbox.agree.all {
  background: none;
  border-radius: 0;
  border-bottom: 1px solid #e7e7e7;
}
.clientWeb .web-section.application .checkbox.agree input:checked + span,
.clientWeb .web-section.application .checkbox.agree input:checked + span {
  color: var(--rec-secondary);
}
.clientWeb .web-section.application .input-message {
  font-size: 1.3rem;
  letter-spacing: -1px;
}
.clientWeb .web-section.application .text-btn {
  font-size: 1.5rem;
}
.clientWeb .web-section.application input[type=color],
.clientWeb .web-section.application input[type=date],
.clientWeb .web-section.application input[type=datetime-local],
.clientWeb .web-section.application input[type=datetime],
.clientWeb .web-section.application input[type=email],
.clientWeb .web-section.application input[type=month],
.clientWeb .web-section.application input[type=number],
.clientWeb .web-section.application input[type=password],
.clientWeb .web-section.application input[type=search],
.clientWeb .web-section.application input[type=tel],
.clientWeb .web-section.application input[type=text],
.clientWeb .web-section.application input[type=time],
.clientWeb .web-section.application input[type=url],
.clientWeb .web-section.application input[type=week],
.clientWeb .web-section.application select,
.clientWeb .web-section.application .like-input {
  background-color: #f7f6f5;
}
.clientWeb .web-section.application .guide-desc {
  font-size: 1.7rem;
  text-align: center;
}
.clientWeb .web-section.application .list-num {
  padding: 30px;
  border: 2px solid #e7e7e7;
  border-radius: 14px;
  margin-bottom: 40px;
  background-color: #fafafa;
}
.clientWeb .web-section.application .list-num li {
  font-size: 1.7rem;
  color: var(--text);
}
.clientWeb .web-section.application .list-num li:before {
  font-size: 1.7rem;
  color: var(--text);
}
.clientWeb .web-section.application input[readonly],
.clientWeb .web-section.application select[readonly],
.clientWeb .web-section.application option[readonly],
.clientWeb .web-section.application textarea[readonly] {
  background-color: var(--fff);
  border-color: var(--border-dark);
  pointer-events: none;
  color: var(--text);
  background-image: none;
}
.clientWeb .web-section.application .app-inner {
  width: 600px;
}
.clientWeb .web-section.application .button-group {
  margin-top: 60px;
}
.clientWeb .web-section.application .button-group.flex .btn {
  flex: 1;
  width: 100%;
}
.clientWeb .web-section.application .list-step + .form-group {
  margin-top: 50px;
}
.clientWeb .web-section.application .list-step ol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.clientWeb .web-section.application .list-step ol:after {
  content: "";
  height: 1px;
  width: 500px;
  background-color: #e7e7e7;
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  margin: auto;
}
.clientWeb .web-section.application .list-step ol li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clientWeb .web-section.application .list-step ol li .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.clientWeb .web-section.application .list-step ol li:first-child {
  align-items: flex-start;
}
.clientWeb .web-section.application .list-step ol li:last-child {
  align-items: flex-end;
}
.clientWeb .web-section.application .list-step ol li.on span {
  border: 1px solid #a5bbf6;
  background: #fff;
  box-shadow: 1px 1px 0px 0px rgba(68, 110, 232, 0.25);
}
.clientWeb .web-section.application .list-step ol li.on span i {
  color: var(--rec-secondary);
}
.clientWeb .web-section.application .list-step ol li.on .tit {
  color: var(--rec-secondary);
}
.clientWeb .web-section.application .list-step ol li span {
  border-radius: 40px;
  border: 1px solid #fff;
  background: #f7f6f5;
  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.25);
  width: 40px;
  height: 40px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clientWeb .web-section.application .list-step ol li span i {
  font-size: 2rem;
  font-family: "GmarketSans", sans-serif;
  color: #c7c7c7;
  font-style: normal;
  position: relative;
  top: 1px;
}
.clientWeb .web-section.application .list-step ol li .tit {
  font-size: 1.6rem;
  color: #bdbdbd;
  font-weight: 700;
}
.clientWeb .web-section.application .form-group .type-label input {
  text-align: left;
}
.clientWeb .web-section.application .form-group .btn {
  max-width: 100px;
}
.clientWeb .web-section.application .form-group .btn.full {
  max-width: 100%;
}
.clientWeb .web-section.application .form-group + .form-group {
  margin-top: 60px;
}
@media screen and (max-width: 1024px) {
  .clientWeb .web-section.application .form-group + .form-group {
    margin-top: 40px;
  }
}
.clientWeb .web-section.application .form-group .form-label {
  align-items: center;
  border-bottom: 2px solid var(--text);
  font-size: 2.2rem;
  font-weight: 600;
  padding: 14px 0;
  margin-bottom: 14px;
}
@media screen and (max-width: 1024px) {
  .clientWeb .web-section.application .form-group .form-label {
    font-size: 1.8rem;
    padding: 12px 0;
  }
}
.clientWeb .web-section.application .form-group .file {
  flex: none;
}
.clientWeb .web-section.application .form-group .file label {
  cursor: pointer;
}
.clientWeb .web-section.application .form-group .form-block {
  display: flex;
}
.clientWeb .web-section.application .form-group .form-block .box-guideline {
  padding: 16px;
  border: 1px solid #eeeeee;
  background-color: #fafafa;
  width: 100%;
}
.clientWeb .web-section.application .form-group .form-block + .form-block {
  margin-top: 14px;
}
.clientWeb .web-section.application .form-group .form-block .form-title {
  flex: none;
  width: 180px;
  display: flex;
}
.clientWeb .web-section.application .form-group .form-block .form-title .like-label {
  font-size: 1.7rem;
  line-height: 52px;
  font-weight: 500;
}
@media screen and (max-width: 1024px) {
  .clientWeb .web-section.application .form-group .form-block .form-title .like-label {
    line-height: 40px;
  }
}
.clientWeb .web-section.application .form-group .form-block .form-input {
  flex: 1;
}
.clientWeb .web-section .box-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: #000;
}
.clientWeb .web-section .box-video .video-screen {
  position: relative;
  padding-top: 56.25%;
  height: 0;
}
.clientWeb .web-section .box-video .video-screen .video-screen-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.clientWeb .web-section .box-video .video-screen .video-screen-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.clientWeb .mainVisual img {
  width: 545px;
}
.clientWeb .el-move {
  position: relative;
  top: 20px;
  opacity: 0;
}
.clientWeb .el-move.active {
  animation: webElMoveBtm 1s 0.1s forwards;
}
.clientWeb .el-left {
  opacity: 0;
  transform: translate(0, 0);
}
.clientWeb .el-left.active {
  animation: webElMoveLeft 1s 0.1s forwards;
}
.clientWeb .el-move-load {
  position: relative;
  top: 100px;
  opacity: 0;
  z-index: 9;
}
.clientWeb .el-move-load.active {
  animation: elMoveTop 1s 0.1s forwards;
}
@keyframes elMoveTop {
  100% {
    top: 0;
    opacity: 1;
  }
}
.clientWeb .el-scale-load {
  position: relative;
  top: 100px;
  opacity: 0;
  z-index: 9;
}
.clientWeb .el-scale-load.active {
  animation: webElScale 1.5s forwards;
}
.clientWeb .logo a div {
  background-image: url("/img/logoCeo.png");
  width: 212px;
  height: 26px;
  background-size: contain;
  text-indent: -999rem;
  background-repeat: no-repeat;
  background-position: center;
}
.clientWeb .logo a:before {
  background-image: url("/img/emoji-logo-w.png");
}
.clientWeb .logo.type-footer a div {
  background-image: url("/img/logo-footerCeo.png");
}
.clientWeb #viewport {
  max-width: 100%;
}
.clientWeb #viewport .container {
  padding: 0;
  display: block;
}
.clientWeb .app-inner {
  width: 1240px;
  margin: auto;
  gap: inherit;
  padding: 0 20px;
}

.multi-select-container {
  display: inline-block;
  position: relative;
  width: 100%;
}

.multi-select-menu {
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  font-size: 1.7rem;
  font-weight: 500;
  padding: 14px;
  background-color: #f7f6f5;
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 1;
  float: left;
  min-width: 100%;
  display: none;
}

/* 기본 체크박스를 숨김 */
.multi-select-menuitem input[type=checkbox] {
  display: none;
}

/* label에 커스텀 체크박스 스타일 추가 */
.multi-select-menuitem {
  position: relative;
  padding-left: 30px;
  /* 체크박스를 위한 공간 확보 */
  cursor: pointer;
}

.multi-select-menuitem {
  display: block;
  font-size: 1.7rem;
  padding: 6px 1em 6px 30px;
  white-space: nowrap;
}

.multi-select-menuitem:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/img/crud-check.png") no-repeat;
  background-size: contain;
  display: inline-block;
}

.multi-select-menuitem.selected:before {
  background: url("/img/crud-check-checked.png") no-repeat;
  background-size: contain;
}

.multi-select-legend {
  font-size: 0.875em;
  font-weight: bold;
  padding-left: 10px;
}

.multi-select-legend + .multi-select-menuitem {
  padding-top: 0.25rem;
}

.multi-select-presets {
  border-bottom: 1px solid #ddd;
}

.multi-select-menuitem input {
  position: absolute;
  margin-top: 0.25em;
  margin-left: -20px;
}

.multi-select-button {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: -0.5em;
  cursor: default;
  background-color: #f7f6f5;
  background-image: url(/img/selected-arrow.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 30px;
  padding-right: 30px;
  font-size: 1.9rem;
  font-weight: 500;
  min-width: 150px;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  transition: border 0.3s;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  line-height: 50px;
}

.multi-select-container--open .multi-select-menu {
  display: block;
}

.multi-select-container--open .multi-select-button:after {
  border-width: 0 0.4em 0.4em 0.4em;
  border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
  /* Avoid border/padding on menu messing with JavaScript width calculation */
  box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
  /* Allow labels to line wrap when menu is artificially narrowed */
  white-space: normal;
}

@media (max-width: 1024px) {
  .guideline.min {
    padding: 20px;
  }
  .guideline.min + .form-group {
    margin-top: 20px;
  }
  .kakao-btn {
    background-color: #fae100;
    position: fixed;
    bottom: 80px;
    width: 80px;
    height: 80px;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 10px;
    z-index: 9;
  }
  .kakao-btn span {
    margin-top: 24px;
  }
  .kakao-btn:before {
    width: 50px;
    height: 50px;
    margin-right: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0px;
    z-index: -1;
  }
  .kakao-btn.on {
    bottom: 20px;
  }
  .modal article.terms {
    padding: 0;
  }
  .modal .checkbox.agree span {
    font-size: 1.2rem;
  }
  .modal .checkbox.agree {
    height: 40px;
  }
  .modal .input-item.agreeList.sub {
    padding: 0;
  }
  .modal .input-item.agreeList.sub .text-btn {
    font-size: 1rem;
  }
  .modal.alert .modal-inner {
    max-width: 300px;
  }
  .modal-body {
    max-height: 400px;
    padding: 16px;
  }
  .modal-head {
    min-height: 50px;
  }
  .modal-head .tit {
    font-size: 1.7rem;
    font-weight: 700;
  }
  .only-pc {
    display: none;
  }
  .only-mo {
    display: block;
  }
  .logo a div {
    width: 140px;
    height: 18px;
  }
  .btn {
    padding: 20px 10px;
  }
  .btn span {
    font-size: 1.7rem;
  }
  .btn.medium {
    font-size: 1.6rem;
  }
  .btn.medium.min {
    font-size: 1.4rem;
    padding: 0 !important;
    max-width: 80px;
    min-width: 80px;
    line-height: 52px;
  }
  .logo a div {
    width: 140px;
    height: 18px;
  }
  .web-section {
    overflow: hidden;
  }
  .web-section .title-lv1 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .web-section.mainCeo {
    height: calc(var(--vh, 1vh) * 100 - 60px);
  }
  .web-section.mainCeo.type-login {
    padding: 40px 0;
  }
  .web-section.mainCeo.type-login .logo a div {
    width: 252px;
    height: 28px;
  }
  .web-section.mainCeo.type-login .messageToast .input-message {
    display: flex;
    justify-content: center;
  }
  .web-section.mainCeo.type-login .mainVisual {
    width: 30%;
  }
  .web-section.mainCeo.type-login .cont h2 small {
    font-size: 2.6rem;
  }
  .web-section.mainCeo.type-login .cont .form {
    width: 300px;
  }
  .web-section.mainCeo.type-login .cont .form .guide-btn {
    font-size: 1.2rem;
  }
  .web-section.mainCeo.type-login .cont .form .guide-btn + .guide-btn {
    margin-top: 8px;
  }
  .web-section.mainCeo.type-login .app-inner {
    gap: 0px;
  }
  .web-section.mainCeo .app-inner {
    flex-direction: column;
  }
  .web-section.mainCeo .mainVisual {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .web-section.mainCeo .mainVisual img {
    width: 55%;
  }
  .web-section.mainCeo .cont .keyword {
    font-size: 1.5rem;
    margin-bottom: 6px;
    text-align: center;
  }
  .web-section.mainCeo .cont .keyword i::before {
    width: 4px;
    height: 4px;
  }
  .web-section.mainCeo .cont h2 {
    font-size: 3rem;
    text-align: center;
  }
  .web-section.mainCeo .cont h2 small {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  .web-section.mainCeo .cont h2 .zero {
    width: 38px;
    position: relative;
    bottom: 4px;
  }
  .web-section.mainCeo .cont .button-group {
    display: block;
    margin-top: 20px;
  }
  .web-section.mainCeo .cont .button-group .btn {
    display: none;
    width: 100%;
    min-width: inherit;
  }
  .web-section.mainCeo strong {
    font-size: 1.8rem;
    margin-top: 14px;
    bottom: 14px;
  }
  .web-section.application {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .web-section.application .input-message {
    font-size: 1.4rem;
  }
  .web-section.application .list-num {
    padding: 20px;
    margin-bottom: 20px;
  }
  .web-section.application .app-inner {
    width: 100%;
  }
  .web-section.application .list-step + .form-group {
    margin-top: 20px;
  }
  .web-section.application .list-step ol:after {
    width: 100%;
  }
  .web-section.application .form-group .btn {
    max-width: 100px;
  }
  .web-section.application .form-group + .form-group {
    margin-top: 40px;
  }
  .web-section.application .form-group .form-label {
    font-size: 2rem;
    font-weight: 800;
  }
  .web-section.application .form-group .form-block {
    flex-direction: column;
  }
  .web-section.application .form-group .form-block .form-title {
    width: 100%;
    display: block;
  }
  .web-section.application .form-group .form-block .form-title .like-label {
    font-size: 1.7rem;
    line-height: 52px;
    font-weight: 500;
  }
  .web-section.application .form-group .form-block .form-input {
    flex: 1;
  }
  .app-inner {
    max-width: 100%;
  }
  .logo a:before {
    width: 22px;
    height: 22px;
    display: none;
  }
  .logo.type-footer a div {
    width: 150px;
    height: 18px;
  }
  .logo.type-footer a:before {
    display: block;
  }
  .clientWeb.intro {
    min-width: 100%;
  }
  .list-faq > .dropDownLst > li a {
    font-size: 1.7rem;
    padding: 18px 40px 18px 40px;
  }
  .list-faq > .dropDownLst > li a:before {
    width: 22px;
    height: 22px;
    left: 16px;
    top: 18px;
  }
  .list-faq > .dropDownLst > li a:after {
    width: 14px;
    height: 14px;
    right: 18px;
    top: 23px;
  }
  .list-faq > .dropDownLst > li a.clear {
    padding-left: 18px;
  }
  .list-faq .dropDownCnt {
    padding: 20px;
  }
  .swiper-arrows {
    gap: 4px;
  }
  .swiper-arrows .next,
  .swiper-arrows .prev {
    width: 40px;
    height: 40px;
  }
  .web-section {
    min-width: 100%;
    padding: 60px 0;
  }
  .web-section .mark.lar:after {
    width: 161px;
    height: 13px;
  }
  .web-section .mark:after {
    width: 101px;
    height: 12px;
  }
  .web-section.basic .titleline {
    display: block;
    margin-bottom: 44px;
  }
  .web-section.basic .titleline .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 2.6rem;
    line-height: 36px;
    letter-spacing: -0.5px;
  }
  .web-section .btn.btn-main {
    margin-top: 20px;
    display: inline-flex;
    padding: 18px 30px;
    border-radius: 12px;
    background-color: var(--rec-primary);
  }
  .web-section .btn.btn-main span {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
  }
  .web-section .btn.btn-main span em {
    font-size: 1.2rem;
    line-height: 24px;
    padding: 3px 10px;
    letter-spacing: 0;
    right: -45px;
    top: -36px;
  }
  .web-section .title.center {
    text-align: center;
  }
  .web-section .title h2 {
    font-size: 2.2rem;
  }
  .web-section .title h2 small {
    font-size: 2.2rem;
  }
  .web-section .num {
    font-size: 2.4rem;
  }
  .web-section.main {
    background-image: url("/img/bg-main-mo.png");
    background-position: center;
    background-size: cover;
    height: 465px;
  }
  .web-section.main.coustomer {
    background: url("/img/bg-main-costomer-mo.png") no-repeat;
    background-position: center;
    background-size: cover;
  }
  .web-section.main .app-inner {
    align-items: flex-start;
    padding-top: 20px;
    display: block;
  }
  .web-section.main .copy {
    text-align: center;
  }
  .web-section.main .copy .title {
    margin-bottom: 30px;
  }
  .web-section.main .copy .title span {
    margin-bottom: 10px;
    font-size: 1.7rem;
    text-align: center;
  }
  .web-section.main .copy .title .desc {
    font-size: 4.2rem;
    text-align: center;
  }
  .web-section.main .copy .btn-main.floating {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    border-radius: 0;
    justify-content: center;
    margin: 0 auto;
    z-index: 3;
    height: 66px;
    padding: 20px;
  }
  .web-section.main .copy .btn-main.floating span {
    font-size: 2rem;
  }
  .web-section.main .copy .btn-main.floating span em {
    right: -80px;
    font-size: 1.4rem;
  }
  .web-section.together .title {
    margin-bottom: 40px;
  }
  .web-section.together .row {
    flex-direction: column;
  }
  .web-section.together .row img {
    max-width: 200px;
  }
  .web-section.together .row .column + .column {
    padding-top: 36px;
    margin-top: 36px;
    border-left: none;
    border-top: 1px solid #4a4a4a;
  }
  .web-section.together .row .column h3 {
    margin-top: 16px;
    font-size: 2.2rem;
    font-weight: 700;
  }
  .web-section.together .row .column h3 em {
    font-weight: 800;
  }
  .web-section.together .row .column p {
    margin-top: 10px;
    font-size: 1.6rem;
  }
  .web-section.why {
    padding: 60px 0;
  }
  .web-section.why .title {
    width: 240px;
    margin: auto auto 40px auto;
  }
  .web-section.why .app-inner {
    width: 100%;
    max-width: 330px;
  }
  .web-section.why .row {
    gap: 30px;
    flex-wrap: wrap;
  }
  .web-section.why .row .column {
    flex: none;
    width: calc(50% - 15px);
  }
  .web-section.why .row .column img {
    width: 100%;
  }
  .web-section.why .row .column h3 {
    margin-top: 11px;
    font-size: 1.4rem;
  }
  .web-section.prossess article {
    max-width: 280px;
    margin: auto;
  }
  .web-section.prossess article + article {
    margin-top: 36px;
    padding-top: 36px;
  }
  .web-section.prossess .row {
    flex-direction: column;
  }
  .web-section.prossess .row .column {
    flex: none;
    margin-top: 30px;
  }
  .web-section.prossess .row img {
    width: 200px;
  }
  .web-section.prossess .row p {
    font-size: 1.5rem;
  }
  .web-section.prossess .row .arrow {
    display: none;
  }
  .web-section.point .row {
    padding: 40px 40px;
  }
  .web-section.point .row .column {
    flex-direction: column;
    gap: 14px;
    align-items: start;
  }
  .web-section.point .row .column + .column {
    margin-top: 36px;
    padding-top: 36px;
  }
  .web-section.point .row .column img {
    width: 100%;
    max-width: 272px;
    position: static;
  }
  .web-section.point .row .column p {
    font-size: 1.6rem;
  }
  .web-section.point .row .column:nth-child(1) img {
    left: -60px;
  }
  .web-section.point .row .column:nth-child(2) {
    flex-direction: column;
    align-items: end;
  }
  .web-section.point .row .column:nth-child(2) img {
    width: 100%;
  }
  .web-section.point article {
    border-radius: 50px;
    margin-top: 30px;
  }
  .web-section.point article:after {
    bottom: -60px;
  }
  .web-section.point article + .title {
    margin-top: 40px;
  }
  .web-section.point article + .title h2 {
    font-size: 2.2rem;
  }
  .web-section.ad img {
    max-width: 100%;
  }
  .web-section.step .title {
    margin-bottom: 30px;
  }
  .web-section.step .list-step ul {
    flex-direction: column;
  }
  .web-section.step .list-step ul li {
    width: 90%;
    padding: 30px;
  }
  .web-section.step .list-step ul li.stepArrow {
    transform: rotate(90deg);
    background-color: transparent;
  }
  .web-section.step .list-step ul li .step-ico {
    width: 24px;
    height: 24px;
  }
  .web-section.step .list-step ul li .info span {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .web-section.step .list-step ul li .info .tit {
    font-size: 2rem;
  }
  .web-section.videoReview .title {
    margin-bottom: 30px;
  }
  .web-section.videoReview .title h2 {
    font-size: 2.6rem;
    width: 80%;
    margin: auto;
  }
  .web-section.videoReview .title h2 br {
    display: none;
  }
  .web-section.videoReview .slide-video ul li .card {
    flex-direction: column-reverse;
  }
  .web-section.videoReview .slide-video ul li .card .info {
    width: 100%;
    height: auto;
    padding: 30px 30px;
  }
  .web-section.videoReview .slide-video ul li .card .info span {
    font-size: 1.6rem;
    line-height: 16px;
  }
  .web-section.videoReview .slide-video ul li .card .info p {
    font-size: 2.3rem;
    line-height: 34px;
  }
  .web-section.service {
    padding: 80px 0;
  }
  .web-section.service .title {
    margin-bottom: 0;
  }
  .web-section.service .title h2 {
    text-align: center;
    font-size: 3rem;
  }
  .web-section.service .title h2 br {
    display: none;
  }
  .web-section.service .title h2 .mark:after {
    width: 111px;
    height: 16px;
  }
  .web-section.service .list-card {
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 20px;
  }
  .web-section.service .list-card li {
    width: 100%;
    height: 340px;
    flex: none;
    aspect-ratio: auto;
  }
  .web-section.service .list-card li:first-child {
    flex: 1;
  }
  .web-section.service .list-card li:last-child .absolute-text {
    position: static;
  }
  .web-section.service .list-card li:last-child dl dd {
    flex-direction: column;
  }
  .web-section.service .list-card li.clear {
    aspect-ratio: auto;
  }
  .web-section.service .list-card li dl {
    padding: 30px;
  }
  .web-section.service .list-card li dl dt {
    font-size: 3rem;
    font-weight: 600;
  }
  .web-section.service .list-card li dl dd .view,
  .web-section.service .list-card li dl dd .counting-value {
    font-size: 4.5rem;
  }
  .web-section.service .list-card li dl dd b {
    font-size: 4.5rem;
  }
  .web-section.service .list-card li dl dd img {
    width: 30px;
  }
  .web-section.standard {
    height: auto;
  }
  .web-section.standard .box-video {
    width: 100%;
    border-radius: 20px;
  }
  .web-section.standard .title {
    margin-bottom: 40px;
  }
  .web-section.standard .title h2 {
    font-size: 2.6rem;
  }
  .web-section.standard .title p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.6rem;
    font-weight: 400;
  }
  .web-section.standard .title p br {
    display: none;
  }
  .web-section.standard .tableline + .title {
    margin-top: 100px;
  }
  .web-section.standard .tableline .layer {
    width: 84px;
    left: 66px;
  }
  .web-section.standard .tableline .cell-block .cell-td:nth-child(1) {
    width: 66px;
    flex: none;
  }
  .web-section.standard .tableline .cell-block .cell-td:nth-child(2) {
    width: 82px;
    flex: none;
  }
  .web-section.standard .tableline .cell-block .cell-td b {
    font-size: 1.5rem;
    letter-spacing: -1px;
  }
  .web-section.standard .tableline .cell-block .cell-td .val {
    font-size: 1.5rem;
    letter-spacing: -1px;
    line-height: 120%;
  }
  .web-section.faq .tab-sub {
    margin-bottom: 0;
  }
  .web-section.faq .tab-sub ul {
    padding: 0;
  }
  .web-section.faq .tab-sub ul li a {
    font-size: 1.8rem;
  }
  .web-section.faq .title {
    margin-bottom: 30px;
  }
  .web-section.faq .title h2 {
    font-size: 2.6rem;
  }
  .web-section.news .justify {
    margin-bottom: 30px;
  }
  .web-section.news .justify h2 {
    font-size: 2.6rem;
  }
  .web-section.news .justify h2 br {
    display: none;
  }
  .web-section.news .justify .title {
    margin: 0;
  }
  .web-section.news .slide-news ul li .inner .img {
    height: 180px;
  }
  .web-section.news .slide-news ul li .inner .tit {
    font-size: 1.8rem;
    line-height: 28px;
    height: 56px;
  }
  .web-section.news .slide-news ul li .inner .info .label {
    font-size: 1.4rem;
    font-weight: 500;
  }
  .web-section.news .slide-news ul li .inner .info .date {
    color: #666;
    font-size: 1.5rem;
  }
  .web-section.banner {
    background-color: #fff;
    position: relative;
    z-index: 4;
  }
  .web-section.banner .top {
    padding-bottom: 30px;
  }
  .web-section.banner .top .title {
    margin-bottom: 30px;
  }
  .web-section.banner .top .title h2 {
    font-size: 2.6rem;
  }
  .web-section.banner .top .btn {
    font-size: 2rem;
  }
  .web-section.banner .btm {
    padding-top: 30px;
  }
  .web-section.banner .btm p {
    font-family: Pretendard;
    font-size: 2rem;
  }
  .web-section.banner .btm p em {
    font-family: Pretendard;
  }
  .web-section.banner .btm .button-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  .web-section.banner .btm .button-group .btn-applecation img {
    width: 100%;
    max-width: 200px;
  }
}
/* 배달해주세요 사장님 포털 */
body.overflow-hidden {
  overflow: hidden;
}

#viewport.ceo {
  position: relative;
  padding-left: 250px;
  line-height: 1.35;
  /* 기존 레이아웃 대응  */
  height: auto;
  /* //기존 레이아웃 대응  */
  display: block;
}
#viewport.ceo.dimm {
  height: 100vh;
  overflow: hidden;
}
#viewport.ceo.dimm:before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9;
  content: "";
}
#viewport.ceo .web-section {
  min-width: 0;
}
#viewport.ceo .gnb {
  padding: 0;
}
#viewport.ceo .contents {
  min-width: 0;
  background: none;
  margin: unset;
}
#viewport.ceo .profile {
  background: none;
  border-radius: unset;
}
@media screen and (max-width: 1280px) {
  #viewport.ceo .container {
    padding-left: unset;
  }
}
@media screen and (max-width: 1024px) {
  #viewport.ceo .container {
    padding-left: unset;
  }
  #viewport.ceo .footer {
    padding: 0 20px !important;
  }
  #viewport.ceo .footer .logo {
    display: block !important;
  }
}
@media screen and (max-width: 1024px) {
  #viewport.ceo {
    padding-left: 0;
  }
}
#viewport.ceo:has(.contents.home) {
  background-color: #EAEAEA;
}
#viewport.ceo .footer {
  display: flex;
  gap: 30px;
  padding: 0 20px;
}
#viewport.ceo .footer .logo {
  filter: unset;
  opacity: unset;
  display: unset;
  height: unset;
}
#viewport.ceo .footer .logo img {
  width: unset;
  left: unset;
}
#viewport.ceo .footer a {
  color: inherit;
}
#viewport.ceo .footer .logo {
  width: 80px;
}
#viewport.ceo .footer .ft-links {
  display: flex;
  gap: 28px;
}
#viewport.ceo .footer .ft-links a {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
#viewport.ceo .footer .ft-info {
  margin-top: 12px;
  color: #74758C;
  font-weight: 700;
  font-size: 0;
}
#viewport.ceo .footer .ft-info .item {
  display: inline-block;
  margin-right: 14px;
  font-size: 10px;
  line-height: 17px;
}
#viewport.ceo .footer .ft-info .copyright {
  font-size: 10px;
  line-height: 17px;
}
@media screen and (max-width: 1280px) {
  #viewport.ceo .footer {
    flex-direction: column;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  #viewport.ceo .footer .logo {
    width: 70px;
  }
  #viewport.ceo .footer .ft-links {
    flex-wrap: wrap;
    gap: 6px 0;
  }
  #viewport.ceo .footer .ft-links li {
    width: 50%;
  }
  #viewport.ceo .footer .ft-links a {
    font-size: 11px;
    font-weight: 500;
  }
  #viewport.ceo .footer .ft-info .info-group {
    display: flex;
    flex-wrap: wrap;
  }
  #viewport.ceo .footer .ft-info .item {
    min-width: 160px;
    margin-right: 0;
  }
  #viewport.ceo .footer .ft-info .info-group:first-child .item:first-child {
    width: 100%;
  }
  #viewport.ceo .footer .ft-info .info-group:nth-child(3),
  #viewport.ceo .footer .ft-info .copyright {
    display: inline-block;
  }
}
#viewport.ceo a {
  word-break: normal;
}
#viewport.ceo a.default {
  color: #000FE4 !important;
}
#viewport.ceo a.default:hover {
  text-decoration: underline;
}
#viewport.ceo .close {
  position: relative;
  width: 32px;
  height: 32px;
  font-size: 0;
}
#viewport.ceo .close:before, #viewport.ceo .close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 24px;
  margin: -12px 0 0 -0.5px;
  background: #fff;
  content: "";
}
#viewport.ceo .close:before {
  transform: rotate(45deg);
}
#viewport.ceo .close:after {
  transform: rotate(-45deg);
}
#viewport.ceo .gnb {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #353544;
  color: #fff;
  text-align: center;
}
#viewport.ceo .gnb a {
  color: inherit;
}
#viewport.ceo .gnb .close {
  display: none;
}
#viewport.ceo .gnb h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
#viewport.ceo .gnb h1 .tit {
  display: block;
  font-size: 25px;
  font-weight: 600;
}
#viewport.ceo .gnb .inner-gnb {
  max-height: calc(100vh - 117px);
  padding: 0 20px 32px;
  overflow-y: auto;
}
#viewport.ceo .gnb .list-menu {
  line-height: 1;
}
#viewport.ceo .gnb .list-menu a {
  display: block;
  transition: 0.2s;
  color: #fff;
}
#viewport.ceo .gnb .list-menu > li {
  background-color: #575773;
  border-radius: 10px;
}
#viewport.ceo .gnb .list-menu > li + li {
  margin-top: 12px;
}
#viewport.ceo .gnb .list-menu > li > a {
  padding: 18px 44px;
  font-size: 20px;
  font-weight: 600;
}
#viewport.ceo .gnb .list-menu > li.emph {
  background-color: var(--rec-primary);
}
#viewport.ceo .gnb .list-menu > li:not(.emph).on a,
#viewport.ceo .gnb .list-menu > li:not(.emph) a:hover {
  color: var(--rec-primary);
}
#viewport.ceo .gnb .list-menu li:has(.list-sub) .depth1 {
  position: relative;
}
#viewport.ceo .gnb .list-menu li:has(.list-sub) .depth1:after {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(/img/v2/arrow01.png) no-repeat center/contain;
  transform: rotate(90deg);
  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(186deg) brightness(107%) contrast(101%);
  content: "";
}
#viewport.ceo .gnb .list-menu li:has(.list-sub) .depth1.on:after {
  transform: rotate(-90deg);
}
#viewport.ceo .gnb .list-menu + .list-menu {
  margin-top: 20px;
}
#viewport.ceo .gnb .list-sub {
  display: none;
  padding: 0 20px;
}
#viewport.ceo .gnb .list-sub li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}
#viewport.ceo .gnb .list-sub a {
  padding: 15px 24px;
  font-size: 16px;
  font-weight: 500;
}
#viewport.ceo .gnb .cs-area {
  margin-top: 40px;
}
#viewport.ceo .gnb .cs-area a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}
#viewport.ceo .gnb .cs-area a:before {
  display: inline-block;
  width: 46px;
  height: 46px;
  background-position: center;
  background-size: contain;
  content: "";
}
#viewport.ceo .gnb .cs-area a + a {
  margin-top: 12px;
}
#viewport.ceo .gnb .cs-area .cs-kakao:before {
  background-image: url(/img/ico-cs-kakako.png);
}
#viewport.ceo .gnb .cs-area .cs-tel:before {
  background-image: url(/img/ico-cs-tel.png);
}
@media screen and (max-width: 1024px) {
  #viewport.ceo .gnb {
    left: -250px;
    transition: 0.3s;
    z-index: 10;
  }
  #viewport.ceo .gnb.active {
    left: 0;
  }
  #viewport.ceo .gnb h1 {
    height: auto;
    padding: 28px 30px;
    justify-content: flex-start;
  }
  #viewport.ceo .gnb h1 .tit {
    display: inline-block;
    font-size: 20px;
  }
  #viewport.ceo .gnb .close {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: block;
  }
  #viewport.ceo .gnb .inner-gnb {
    max-height: calc(100vh - 83px);
  }
  #viewport.ceo .gnb .list-menu > li > a {
    padding: 17px 40px;
    font-size: 16px;
  }
  #viewport.ceo .gnb .list-sub {
    padding: 0 15px;
  }
  #viewport.ceo .gnb .list-sub a {
    padding: 13px 20px;
    font-size: 14px;
  }
  #viewport.ceo .gnb .cs-area {
    margin-top: 36px;
  }
}
#viewport.ceo .header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  background-color: #353544;
  color: #fff;
  z-index: 3;
}
#viewport.ceo .header .btn-menu {
  display: none;
}
#viewport.ceo .header .btn-alarm {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  font-size: 0;
}
#viewport.ceo .header .btn-alarm:after {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(/img/v2/ico-alram.png) no-repeat center/contain;
  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(186deg) brightness(107%) contrast(101%);
  content: "";
}
#viewport.ceo .header .btn-alarm .new {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  background-color: #EE5659;
  border-radius: 100%;
}
#viewport.ceo .header .profile {
  position: relative;
}
#viewport.ceo .header .profile .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  color: #fff;
}
#viewport.ceo .header .profile .thumb img {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#viewport.ceo .header .profile .name {
  position: relative;
  padding-right: 28px;
  font-size: 22px;
  font-weight: 600;
}
#viewport.ceo .header .profile .name:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(/img/v2/arrow01.png) no-repeat center/contain;
  transform: rotate(90deg);
  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(186deg) brightness(107%) contrast(101%);
  content: "";
}
#viewport.ceo .header .profile .menu-my {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 108px;
  margin-top: 4px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
#viewport.ceo .header .profile .menu-my a {
  display: block;
  white-space: nowrap;
  text-align: center;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 40px;
}
#viewport.ceo .header .profile .menu-my a:hover {
  background-color: #eaeaea;
}
#viewport.ceo .header .profile .on .name:after {
  transform: rotate(-90deg);
}
@media screen and (max-width: 1024px) {
  #viewport.ceo .header {
    height: 42px;
  }
  #viewport.ceo .header .btn-menu {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 10px;
    width: 42px;
    height: 42px;
    font-size: 0;
  }
  #viewport.ceo .header .btn-menu:before, #viewport.ceo .header .btn-menu:after, #viewport.ceo .header .btn-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    content: "";
  }
  #viewport.ceo .header .btn-alarm {
    width: 32px;
    height: 32px;
  }
  #viewport.ceo .header .btn-alarm:after {
    width: 24px;
    height: 24px;
  }
  #viewport.ceo .header .btn-alarm .new {
    top: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
  }
  #viewport.ceo .header .profile .inner {
    height: 32px;
  }
  #viewport.ceo .header .profile .name {
    font-size: 16px;
    padding-right: 24px;
  }
  #viewport.ceo .header .profile .name:after {
    width: 18px;
    height: 18px;
    margin-top: -9px;
  }
  #viewport.ceo .header .profile .menu-my {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  #viewport.ceo .header .profile .menu-my a {
    font-size: 14px;
    line-height: 32px;
  }
}
#viewport.ceo .container {
  padding-bottom: 60px;
}
#viewport.ceo .contents {
  max-width: 1690px;
  padding: 20px;
}
#viewport.ceo .contents.home {
  display: flex;
  gap: 20px;
}
#viewport.ceo .contents.home .row {
  display: flex;
  gap: 20px;
}
#viewport.ceo .contents.home .row + .row {
  margin-top: 20px;
}
#viewport.ceo .contents.home .btn-ranking {
  display: none;
}
#viewport.ceo .contents.home .info-summ {
  width: 70%;
}
#viewport.ceo .contents.home .info-ranking {
  width: 30%;
}
@media screen and (max-width: 1280px) {
  #viewport.ceo .contents.home {
    flex-direction: column;
  }
  #viewport.ceo .contents.home .row {
    gap: 8px 12px;
    flex-wrap: wrap;
  }
  #viewport.ceo .contents.home .row + .row {
    margin-top: 16px;
  }
  #viewport.ceo .contents.home .info-summ,
  #viewport.ceo .contents.home .info-ranking {
    width: 100%;
  }
  #viewport.ceo .contents.home .btn-ranking {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 6px;
    background-color: #353544;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rec-primary);
  }
  #viewport.ceo .contents.home .btn-ranking .thumb {
    display: inline-block;
  }
  #viewport.ceo .contents.home .btn-ranking .thumb img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
#viewport.ceo .conts-tab .page {
  display: none;
}
#viewport.ceo .box-plain {
  width: 100%;
  padding: 30px 20px;
  background-color: #fff;
  border-radius: 10px;
}
#viewport.ceo .box-plain a {
  color: inherit;
}
#viewport.ceo .box-plain .hd-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
#viewport.ceo .box-plain .hd-box .tit-box {
  font-size: 22px;
  font-weight: 700;
}
#viewport.ceo .box-plain .hd-box .btn-refresh {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(/img/v2/ico-refresh.png) no-repeat center/contain;
  font-size: 0;
}
#viewport.ceo .box-plain .hd-box .tabs {
  display: flex;
  gap: 10px;
}
#viewport.ceo .box-plain .hd-box .tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  border-radius: 10px;
  background: #eaeaea;
  font-size: 17px;
  font-weight: 600;
}
#viewport.ceo .box-plain .hd-box .tabs .on a {
  background-color: var(--rec-primary);
  color: #fff;
}
#viewport.ceo .box-plain .hd-box .wrap-select {
  position: relative;
  min-width: 80px;
  color: var(--text);
  z-index: 2;
}
#viewport.ceo .box-plain .hd-box .wrap-select a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  padding: 0 4px;
  background-color: #fff;
  font-size: 17px;
  font-weight: 600;
}
#viewport.ceo .box-plain .hd-box .wrap-select .tit {
  position: relative;
  padding-right: 28px;
  border-radius: 10px;
}
#viewport.ceo .box-plain .hd-box .wrap-select .tit:after {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(/img/v2/arrow01.png) no-repeat center/contain;
  transform: rotate(90deg);
  content: "";
}
#viewport.ceo .box-plain .hd-box .wrap-select .list-select {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
#viewport.ceo .box-plain .hd-box .wrap-select .list-select a:hover {
  background-color: #eaeaea;
}
#viewport.ceo .box-plain .hd-box .wrap-select .list-select .selected {
  display: none;
}
#viewport.ceo .box-plain .hd-box .wrap-select.active .tit {
  border-radius: 10px 10px 0 0;
}
#viewport.ceo .box-plain .hd-box .wrap-select.active .tit:after {
  transform: rotate(-90deg);
}
#viewport.ceo .box-plain .hd-box .wrap-select.active .list-select {
  display: block;
}
#viewport.ceo .box-plain .conts-box {
  margin-top: 30px;
}
#viewport.ceo .box-plain.notice {
  padding: 24px 20px;
}
#viewport.ceo .box-plain.notice .conts-box {
  margin-top: 1em;
  font-size: 20px;
}
#viewport.ceo .box-plain.notice .desc {
  font-weight: 500;
}
#viewport.ceo .box-plain.notice a.default {
  display: inline-block;
  margin-top: 0.6em;
}
#viewport.ceo .box-plain.notice .list-link {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
#viewport.ceo .box-plain.notice .list-link li {
  display: flex;
  align-items: center;
}
#viewport.ceo .box-plain.notice .list-link a {
  position: relative;
  display: block;
  padding: 0 28px 0 16px;
  font-weight: 600;
}
#viewport.ceo .box-plain.notice .list-link a:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--rec-primary);
  border-radius: 100%;
  content: "";
}
#viewport.ceo .box-plain.notice .list-link a:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(/img/v2/arrow01.png) no-repeat center/contain;
  content: "";
}
#viewport.ceo .box-plain.status {
  padding: 15px 19px;
}
#viewport.ceo .box-plain.status .num {
  margin-top: 20px;
  text-align: right;
  font-size: 40px;
  font-weight: 700;
  color: var(--rec-primary);
  line-height: 1;
}
#viewport.ceo .box-plain.performance .hd-box .btn-period {
  display: none;
}
#viewport.ceo .box-plain.performance .info-performance {
  display: flex;
  gap: 40px;
}
#viewport.ceo .box-plain.performance .item {
  text-align: right;
  font-weight: 700;
}
#viewport.ceo .box-plain.performance .item dt {
  font-size: 22px;
}
#viewport.ceo .box-plain.performance .item dd {
  margin-top: 8px;
  font-size: 40px;
}
#viewport.ceo .box-plain.performance .item.emph {
  flex-grow: 1;
  color: var(--rec-primary);
}
@media screen and (max-width: 1024px) {
  #viewport.ceo .box-plain {
    padding: 20px 12px;
  }
  #viewport.ceo .box-plain .hd-box {
    gap: 20px;
  }
  #viewport.ceo .box-plain .hd-box .tit-box {
    font-size: 18px;
  }
  #viewport.ceo .box-plain .hd-box .btn-refresh {
    width: 18px;
    height: 18px;
  }
  #viewport.ceo .box-plain.notice {
    padding: 12px;
  }
  #viewport.ceo .box-plain.notice .conts-box {
    margin-top: 12px;
    font-size: 14px;
  }
  #viewport.ceo .box-plain.notice .list-link a {
    padding: 0 20px 0 12px;
  }
  #viewport.ceo .box-plain.notice .list-link a:after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }
  #viewport.ceo .box-plain.status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(50% - 6px);
    gap: 20px;
    height: 44px;
    padding: 0 12px;
    flex-grow: 1;
  }
  #viewport.ceo .box-plain.status .tit-box {
    font-size: 16px;
  }
  #viewport.ceo .box-plain.status .num {
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
  }
  #viewport.ceo .box-plain.performance .hd-box .right {
    position: relative;
  }
  #viewport.ceo .box-plain.performance .hd-box .btn-period {
    display: flex;
    width: 60px;
    height: 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    background-color: #353544;
    color: #fff;
    border-radius: 6px;
  }
  #viewport.ceo .box-plain.performance .hd-box .btn-period:after {
    width: 16px;
    height: 16px;
    background: url(/img/v2/arrow01.png) no-repeat center/contain;
    transform: rotate(90deg);
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(186deg) brightness(107%) contrast(101%);
    content: "";
  }
  #viewport.ceo .box-plain.performance .hd-box .btn-period.active {
    border-radius: 6px 6px 0 0;
  }
  #viewport.ceo .box-plain.performance .hd-box .btn-period.active:after {
    transform: rotate(-90deg);
  }
  #viewport.ceo .box-plain.performance .hd-box .tabs {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    background: #eaeaea;
  }
  #viewport.ceo .box-plain.performance .hd-box .tabs a {
    height: 32px;
    border-radius: 0;
    font-size: 13px;
  }
  #viewport.ceo .box-plain.performance .hd-box .tabs .on {
    display: none;
  }
  #viewport.ceo .box-plain.performance .hd-box .tabs.active {
    display: block;
  }
  #viewport.ceo .box-plain.performance .conts-box {
    margin-top: 10px;
  }
  #viewport.ceo .box-plain.performance .info-performance {
    display: block;
  }
  #viewport.ceo .box-plain.performance .item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 2px 0;
    text-align: left;
    line-height: 22px;
  }
  #viewport.ceo .box-plain.performance .item dt {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 500;
  }
  #viewport.ceo .box-plain.performance .item dt:before {
    position: absolute;
    top: 9px;
    left: 8px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: var(--text);
    content: "";
  }
  #viewport.ceo .box-plain.performance .item dd {
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
  }
  #viewport.ceo .box-plain.performance .item.emph dt {
    color: var(--text);
    font-weight: 700;
  }
}
#viewport.ceo .info-ranking {
  display: flex;
}
#viewport.ceo .info-ranking .hd-box .tit-box {
  color: var(--rec-primary);
}
#viewport.ceo .info-ranking .hd-box .close {
  display: none;
}
#viewport.ceo .info-ranking .conts-box {
  margin-top: 20px;
}
#viewport.ceo .info-ranking .box-plain {
  background-color: #353544;
  color: #fff;
}
#viewport.ceo .info-ranking .list-ranking li + li {
  margin-top: 20px;
}
#viewport.ceo .info-ranking .list-ranking .inner {
  display: flex;
  gap: 12px;
  align-items: center;
}
#viewport.ceo .info-ranking .list-ranking .thumb img {
  width: 83px;
  height: 83px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
#viewport.ceo .info-ranking .list-ranking .rank {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 18px;
  background-color: var(--rec-primary);
  border-radius: 18px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
#viewport.ceo .info-ranking .list-ranking .tit {
  display: block;
  margin-top: 6px;
  font-size: 16px;
}
#viewport.ceo .info-ranking .list-ranking .info {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}
#viewport.ceo .info-ranking .list-ranking .info span {
  display: block;
}
@media screen and (max-width: 1280px) {
  #viewport.ceo .info-ranking {
    position: fixed;
    top: 100vh;
    left: 0;
    right: 0;
    transition: 0.3s;
    padding-left: 270px;
    padding-right: 20px;
  }
  #viewport.ceo .info-ranking.active {
    top: 182px;
    bottom: 0;
    z-index: 10;
  }
  #viewport.ceo .info-ranking .box-plain {
    border-radius: 10px 10px 0 0;
  }
  #viewport.ceo .info-ranking .hd-box {
    flex-wrap: wrap;
    gap: 20px;
  }
  #viewport.ceo .info-ranking .hd-box .close {
    display: block;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select {
    order: 3;
    width: 100%;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .tit {
    display: none;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .list-select {
    display: flex;
    gap: 10px;
    position: relative;
    top: auto;
    border-radius: 0;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .list-select li {
    width: 100%;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .list-select .selected {
    display: block;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .list-select a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    border-radius: 10px;
    background-color: #eaeaea;
  }
  #viewport.ceo .info-ranking .hd-box .wrap-select .list-select .selected a {
    background-color: var(--rec-primary);
    color: #fff;
  }
  #viewport.ceo .info-ranking .conts-box {
    margin-top: 38px;
    max-height: calc(100vh - 356px);
    overflow-y: auto;
  }
}
@media screen and (max-width: 1024px) {
  #viewport.ceo .info-ranking {
    padding-left: 0;
    padding-right: 0;
  }
  #viewport.ceo .info-ranking .box-plain {
    padding: 20px;
  }
  #viewport.ceo .info-ranking .conts-box {
    max-height: calc(100vh - 344px);
  }
}
#viewport.ceo .search-box .inner {
  position: relative;
}
#viewport.ceo .search-box .inner input {
  width: 100%;
  height: 60px;
  font-size: 2rem;
  padding-right: 80px;
}
#viewport.ceo .search-box .ico.search {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 58px;
  height: 58px;
}
#viewport.ceo .search-box .ico.search:after {
  background-size: 24px;
}
#viewport.ceo .search-area {
  display: flex;
  gap: 20px;
}
#viewport.ceo .search-area .search-box {
  flex-grow: 1;
}
#viewport.ceo .search-area .btn-group {
  width: 19%;
  min-width: 84px;
}
#viewport.ceo .search-area .btn-group .btn {
  margin: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
#viewport.ceo .section-group .section:not(:first-child) {
  margin-top: 20px;
}
#viewport.ceo .hd-contents .title-area {
  display: flex;
  gap: 20px;
  align-items: center;
}
#viewport.ceo .hd-contents .title-area.between {
  justify-content: space-between;
}
#viewport.ceo .hd-contents .title-area + .title-area {
  margin-top: 8px;
}
#viewport.ceo .hd-contents .title-area .title {
  font-size: 2rem;
  font-weight: 500;
}
#viewport.ceo .hd-contents .title-area .desc {
  font-size: 1.6rem;
  font-weight: 500;
}
#viewport.ceo .hd-contents .title-area .buttons {
  display: flex;
  gap: 8px;
}
#viewport.ceo .hd-contents .title-area .buttons .btn {
  width: 100px;
  height: 30px;
  line-height: 28px;
  border-radius: 6px;
  font-size: 13px;
  padding: 0;
}
#viewport.ceo .wrap-tbl {
  border: 1px solid #BBB;
  border-radius: 8px;
  overflow: hidden;
}
#viewport.ceo .wrap-tbl table {
  width: 100%;
}
#viewport.ceo .wrap-tbl table .checkbox {
  vertical-align: middle;
}
#viewport.ceo .wrap-tbl table th, #viewport.ceo .wrap-tbl table td {
  font-size: 2rem;
  font-weight: 500;
}
#viewport.ceo .wrap-tbl table th:has(.checkbox), #viewport.ceo .wrap-tbl table td:has(.checkbox) {
  width: 60px;
}
#viewport.ceo .wrap-tbl table th:has(.checkbox) + th, #viewport.ceo .wrap-tbl table th:has(.checkbox) + td, #viewport.ceo .wrap-tbl table td:has(.checkbox) + th, #viewport.ceo .wrap-tbl table td:has(.checkbox) + td {
  padding-left: 0;
}
#viewport.ceo .wrap-tbl table thead th {
  height: 50px;
  background: #E9EAEE;
  font-weight: bold;
}
#viewport.ceo .wrap-tbl table td {
  padding: 20px;
}
#viewport.ceo .wrap-tbl table tr + tr th, #viewport.ceo .wrap-tbl table tr + tr td {
  border-top: 1px solid #bbb;
}
#viewport.ceo .wrap-tbl table .wrap-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
#viewport.ceo .wrap-tbl table .wrap-menu .thumb {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
}
#viewport.ceo .wrap-tbl table .wrap-menu .thumb img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
}
#viewport.ceo .wrap-tbl table .wrap-menu .conts .tit {
  display: block;
}
#viewport.ceo .wrap-tbl table .price {
  text-align: center;
}
#viewport.ceo .wrap-tbl table .price span {
  display: block;
}
#viewport.ceo .wrap-tbl table .price span + span {
  margin-top: 8px;
}
#viewport.ceo .wrap-tbl table .price .discount {
  color: var(--rec-primary);
}
#viewport.ceo .wrap-tbl table .price .origin {
  color: #A7A7A7;
  text-decoration: line-through;
}
#viewport.ceo .wrap-tbl table .price .last {
  font-weight: bold;
}
#viewport.ceo .wrap-tbl table .hours {
  text-align: center;
}
#viewport.ceo .wrap-tbl table .hours span {
  display: block;
}
#viewport.ceo .wrap-tbl table .hours span + span {
  margin-top: 4px;
}
#viewport.ceo .wrap-tbl table .status {
  display: block;
  text-align: center;
  font-weight: bold;
}
#viewport.ceo .wrap-tbl table .status.ready {
  color: var(--rec-secondary);
}
#viewport.ceo .wrap-tbl table .status.ing {
  color: var(--rec-primary);
}
#viewport.ceo .wrap-tbl table .buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}
#viewport.ceo .wrap-tbl table .buttons .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 60px;
}
#viewport.ceo .guide-area {
  margin-top: 30px;
  padding: 20px;
  background: #E9EAEE;
  border-radius: 8px;
}
#viewport.ceo .guide-area .guideline + .guideline {
  margin-top: 12px;
}
#viewport.ceo .guide-area .guideline .tit {
  font-weight: 600;
}
#viewport.ceo .guide-area .list-dot li {
  color: #0E0E0E;
}
#viewport.ceo .guide-area .list-dot li + li {
  margin-top: 0;
}
#viewport.ceo .list-box {
  border: 1px solid #bbb;
  border-radius: 8px;
  overflow: hidden;
}
#viewport.ceo .list-box:not(:first-child) {
  margin-top: 16px;
}
#viewport.ceo .list-box li + li,
#viewport.ceo .list-box .toggle-conts {
  border-top: 1px solid #bbb;
}
#viewport.ceo .list-box .item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}
#viewport.ceo .list-box .item .thumb img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #E5E5E5;
  -o-object-fit: cover;
     object-fit: cover;
}
#viewport.ceo .list-box .item .tit {
  display: block;
  font-size: 2rem;
  font-weight: 500;
}
#viewport.ceo .list-box .item .sub {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
}
#viewport.ceo .list-box .toggle-tit, #viewport.ceo .list-box .depth2 {
  padding: 0 20px;
}
#viewport.ceo .list-box .checkbox {
  display: inline-flex;
  align-items: center;
  height: 50px;
}
#viewport.ceo .list-box .checkbox span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 44px;
}
#viewport.ceo .list-box .checkbox .thumb {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #E5E5E5;
}
#viewport.ceo .list-box .toggle-tit {
  position: relative;
}
#viewport.ceo .list-box .toggle-tit:after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 12px;
  margin-top: -6px;
  background: url(/img/ico-dropdown.png) no-repeat center/contain;
  content: "";
}
#viewport.ceo .list-box .toggle-tit .checkbox span {
  font-weight: 700;
}
#viewport.ceo .list-box .toggle-tit.on {
  background: #E9EAEE;
}
#viewport.ceo .list-box .toggle-tit.on:after {
  transform: rotate(180deg);
}
#viewport.ceo .list-box .toggle-conts {
  display: none;
  background: #E9EAEE;
}
#viewport.ceo .list-box .depth2 {
  padding-left: 44px;
}
#viewport.ceo .list-box .depth2 .checkbox span {
  font-size: 500;
}
#viewport.ceo .list-box .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 0 1em;
  border-radius: 8px;
}
#viewport.ceo .group-button [class^=btn] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 1em;
  border-radius: 8px;
  border: 1px solid #c1c1c2;
  font-size: 16px;
  font-weight: bold;
}
#viewport.ceo .group-button .btn-check {
  padding: 0;
  cursor: pointer;
}
#viewport.ceo .group-button .btn-check input {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.1;
}
#viewport.ceo .group-button .btn-check:has(:checked) {
  background: var(--rec-primary);
  border-color: var(--rec-primary);
  color: #fff;
}
#viewport.ceo .check-flex {
  display: flex;
  gap: 12px;
  flex-grow: 1;
}
#viewport.ceo .check-flex input[type=checkbox],
#viewport.ceo .check-flex input[type=radio] {
  width: 24px;
  height: 24px;
  background: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#viewport.ceo .check-flex input[type=radio] {
  border-radius: 100%;
  border: 2px solid #dedede;
}
#viewport.ceo .check-flex input[type=radio]:checked {
  border: 7px solid var(--rec-primary);
}
#viewport.ceo .check-flex .conts-check {
  flex-grow: 1;
}
#viewport.ceo .check-flex .label {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
#viewport.ceo .check-flex .guide {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
}
#viewport.ceo .check-flex input[type=text],
#viewport.ceo .check-flex input[type=tel],
#viewport.ceo .check-flex input[type=number] {
  height: 50px;
  text-align: left;
  font-size: 16px;
  border-color: #e5e5e5;
}
#viewport.ceo .check-flex input[type=text]:disabled,
#viewport.ceo .check-flex input[type=tel]:disabled,
#viewport.ceo .check-flex input[type=number]:disabled {
  background: #dedede;
  background: #E6E6E6;
}
#viewport.ceo .check-flex input[type=text]:disabled + .label-right,
#viewport.ceo .check-flex input[type=tel]:disabled + .label-right,
#viewport.ceo .check-flex input[type=number]:disabled + .label-right {
  color: #828282;
}
#viewport.ceo .check-flex a.disabled {
  border-color: #c1c1c2;
  background: #dedede;
  color: #828282;
  opacity: 1;
}
#viewport.ceo .check-flex .item-form,
#viewport.ceo .check-flex .toggle-check {
  margin-top: 12px;
}
#viewport.ceo .check-flex .toggle-check {
  display: none;
}
#viewport.ceo .check-flex > input:checked + .conts-check .toggle-check {
  display: block;
}
#viewport.ceo .check-flex .group-button .row {
  gap: 4px;
  align-items: center;
  font-size: 16px;
}
#viewport.ceo .check-flex .group-button .row + .row {
  margin-top: 12px;
}
#viewport.ceo .check-flex .group-button .btn {
  color: #000;
  font-weight: 500;
}
#viewport.ceo .check-flex .group-button .checkbox {
  height: auto;
}
#viewport.ceo .inp-period {
  display: flex;
  gap: 4px;
  align-items: center;
}
#viewport.ceo .inp-period .btn {
  flex-grow: 1;
  border-color: #c1c1c2;
  font-weight: 500;
  gap: 10px;
}
#viewport.ceo .inp-period .btn:after {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(/img/ico-filterDate.png) no-repeat center/contain;
  content: "";
}
#viewport.ceo .inp-period .btn.disabled:after {
  opacity: 0.5;
}
#viewport.ceo .inp-period span {
  font-size: 17px;
}
#viewport.ceo .set-datetime .tit-blue {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--rec-secondary);
}
#viewport.ceo .set-datetime + .set-datetime {
  margin-top: 12px;
}
#viewport.ceo .set-datetime .group-button {
  margin-top: 8px;
}
#viewport.ceo .layer-wrap {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}
#viewport.ceo .layer-wrap .box-layer {
  position: absolute;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  transition: 0.2s;
}
#viewport.ceo .layer-wrap .box-layer.right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 33.33%;
  max-width: 500px;
  transform: translateX(100vw);
}
#viewport.ceo .layer-wrap .box-layer.on.right {
  transform: translateX(0);
}
#viewport.ceo .layer-wrap .hd-layer {
  position: relative;
  padding: 0 60px;
  border-bottom: 1px solid #efefef;
  text-align: center;
}
#viewport.ceo .layer-wrap .hd-layer .tit-layer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  font-size: 2rem;
  font-weight: bold;
}
#viewport.ceo .layer-wrap .hd-layer .back {
  position: absolute;
  top: 0;
  left: 8px;
  width: 44px;
  height: 44px;
  background: url(/img/arrow01.png) no-repeat center/20px;
  font-size: 0;
}
#viewport.ceo .layer-wrap .conts-layer {
  padding: 20px;
  flex-grow: 1;
  max-height: calc(100dvh - 115px);
}
#viewport.ceo .layer-wrap .group-conts + .group-conts {
  margin-top: 24px;
}
#viewport.ceo .layer-wrap .tit-conts {
  font-weight: 500;
}
#viewport.ceo .layer-wrap .tit-conts .tit {
  display: block;
  font-size: 2rem;
  font-weight: 700;
}
#viewport.ceo .layer-wrap .tit-conts .desc {
  margin-top: 4px;
  font-size: 16px;
}
#viewport.ceo .layer-wrap .guide-area {
  margin-top: 30px;
}
#viewport.ceo .layer-wrap .ft_layer {
  padding: 0 20px;
}
#viewport.ceo .layer-wrap .ft_layer .buttons {
  display: flex;
  gap: 18px;
}
#viewport.ceo .layer-wrap .ft_layer .btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  height: 50px;
}
#viewport.ceo .layer-wrap .ft_layer .btn.line {
  border-color: #C1C1C2;
  color: #000;
}
#viewport.ceo .layer-wrap.new {
  background: none;
}
#viewport.ceo.full {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: 0;
}
#viewport.ceo.full .header {
  justify-content: space-between;
  background: #1b1b1b;
}
#viewport.ceo.full .header h1.logo {
  width: auto;
  bottom: 0 !important;
}
#viewport.ceo.full .header h1.logo a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
#viewport.ceo.full .header h1.logo strong {
  color: var(--rec-primary);
  font-size: 2.4rem;
  font-weight: 600;
}
#viewport.ceo.full .header h1.logo span {
  font-weight: 400;
  font-size: 1.8rem;
}
#viewport.ceo.full .header .util {
  display: flex;
}
#viewport.ceo.full .header .util a {
  font-size: 1.5rem;
}
@media screen and (max-width: 1024px) {
  #viewport.ceo.full .header .left {
    margin-left: 0;
  }
  #viewport.ceo.full .header h1.logo a {
    gap: 4px;
  }
  #viewport.ceo.full .header h1.logo a strong {
    font-size: 1.8rem;
  }
  #viewport.ceo.full .header h1.logo a span {
    font-size: 1.4rem;
  }
}
#viewport.ceo.full .container {
  flex-grow: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#viewport.ceo.full .web-section {
  height: 100%;
  padding: 80px 0;
  flex-grow: 1;
}
#viewport.ceo.full .application {
  max-width: 600px;
  padding: 40px 0;
}
@media screen and (max-width: 1024px) {
  #viewport.ceo.full .application .title-lv1 {
    font-size: 3.2rem;
  }
}
#viewport.ceo.full .app-inner {
  width: 100%;
  max-width: 1240px;
}
#viewport.ceo.full .footer {
  padding: 60px 0;
}
#viewport.ceo.full .footer .logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 12px;
  filter: none;
  opacity: 1;
}
#viewport.ceo.full .footer .logo img {
  width: 96px;
}
#viewport.ceo.full .footer .top .fnb li a {
  color: #666;
}
@media screen and (max-width: 1280px) {
  #viewport.ceo.full .footer {
    padding: 30px 20px !important;
  }
}
@media screen and (max-width: 1024px) {
  #viewport.ceo.full .footer .logo {
    display: inline-flex !important;
    gap: 8px;
  }
  #viewport.ceo.full .footer .logo img {
    width: 72px;
  }
}