@charset "UTF-8";
[data-domain="mgmt.shopcast.kr"] {
  --main-color: #EC1D24;
  --color2: #fff0f0;
  --color3: #FFBEC0;
}

[data-domain="mgmt.shopnmusic.com"] {
  --main-color: #2f2f6b;
  --color2: #EAEAFD;
  --color3: #ABABDE;
}

[data-domain="mgmt.shopnmusic.kr"] {
  --main-color: #2f2f6b;
  --color2: #EAEAFD;
  --color3: #ABABDE;
}

:root {
  --d-color: #ddd;
  --color-white: #fff;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; /* 최적화 크기 (옵션) */
}

html {
  overflow: hidden;
  font-size: 16px;
  font-family: "NotoSansKR", sans-serif;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 14px;
  }
}
body {
  overflow-x: hidden;
  height: 100%;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.wrap {
  min-width: 1080px;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
}

input::placeholder {
  color: #cdcdcd;
  font-weight: 400;
  font-size: 0.875rem;
}

/*달력*/
.select-month {
  z-index: 999;
  position: absolute;
  top: 55px;
  left: 20%;
  border-radius: 5px;
}
.select-month.hide {
  display: none;
}
.select-month .calendar {
  display: inline-grid;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.select-month .calendar .month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  font-weight: 300;
}
.select-month .calendar .month .year {
  font-weight: 500;
}
.select-month .calendar .month .nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 40px;
  transition-duration: 0.2s;
  position: relative;
}
.select-month .calendar .month .nav:hover {
  background: #eee;
}
.select-month .calendar .days {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(7, 1fr);
  color: #999;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 15px;
}
.select-month .calendar .days span {
  width: 2rem;
  justify-self: center;
  align-self: center;
  text-align: center;
}
.select-month .calendar .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
}
.select-month .calendar .dates span {
  cursor: pointer;
  outline: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50px;
  margin: 2px;
  transition-duration: 0.2s;
}
.select-month .calendar .dates span.today {
  background: #f7f7f7;
}
.select-month .calendar .dates span.before {
  color: #a8a8a8;
}
.select-month .calendar .dates span:hover {
  background: #f7f7f7;
}
.select-month .calendar .dates span.start, .select-month .calendar .dates span.end, .select-month .calendar .dates span.selected {
  background: var(--main-color);
  color: var(--color-white);
}
.select-month .calendar .dates span.between {
  background: var(--color2);
  color: var(--main-color);
}
.select-month .calendar .btn-wrap {
  justify-content: end;
  display: flex;
  margin-top: 0.5rem;
}
.select-month .calendar .btn-wrap button {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  height: 2rem;
  cursor: pointer;
}
.select-month .calendar .btn-wrap button:not(:last-of-type) {
  margin-right: 0.5rem;
}
.select-month .calendar .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  background: var(--color-white);
  color: #606060;
}
.select-month .calendar .btn-wrap button.btn-confirm {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}

/*로그인페이지*/
.login-wrap {
  border-top: 8px solid var(--main-color);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.login-wrap h2 img {
  width: 18.5rem;
}
.login-wrap h3 {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 2rem;
  background: var(--color2);
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  color: var(--main-color);
}
.login-wrap .login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-wrap .login-box .login-form {
  width: 25rem;
  margin-top: 3.5rem;
}
.login-wrap .login-box .login-form .login-form-box {
  position: relative;
  border-radius: 0.4rem;
  width: 100%;
  margin: 0 auto;
}
.login-wrap .login-box .login-form .login-form-box .user-box {
  position: relative;
}
.login-wrap .login-box .login-form .login-form-box .user-box:not(:first-of-type) {
  margin-top: 0.5rem;
}
.login-wrap .login-box .login-form .login-form-box .user-box input {
  width: 100%;
  appearance: none;
  pointer-events: all;
  color: currentcolor;
  box-shadow: none;
}
.login-wrap .login-box .login-form .login-form-box .user-box input:valid + label {
  color: #999;
}
.login-wrap .login-box .login-form .login-form-box .user-box input:focus + label {
  color: var(--main-color);
}
.login-wrap .login-box .login-form .login-form-box .user-box input:focus {
  outline: 0;
}
.login-wrap .login-box .login-form .login-form-box .user-box label {
  font-weight: 400;
  font-size: 0.875rem;
  color: #999;
  top: 0;
  width: 5rem;
  height: 3.75rem;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  text-indent: 0.5rem;
}
.login-wrap .login-box .login-form .login-form-box .user-box input[type=text] {
  width: 100%;
  text-indent: 5rem;
  text-align: left;
  top: 0;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  padding: 0;
  height: 3.75rem;
}
.login-wrap .login-box .login-form .login-form-box .user-box input[type=text]:focus {
  border: 1px solid var(--main-color);
}
.login-wrap .login-box .login-form .login-form-box .user-box input[type=password] {
  width: 100%;
  text-indent: 5rem;
  text-align: left;
  top: 0;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  padding: 0;
  height: 3.75rem;
}
.login-wrap .login-box .login-form .login-form-box .user-box input[type=password]:focus {
  border: 1px solid var(--main-color);
}
.login-wrap .login-box .login-form .login-form-box .user-box span.login-icon-del {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
}
.login-wrap .login-box .login-form .login-form-box .user-box span.login-icon-del img {
  width: 1.5rem;
}
.login-wrap .login-box .login-form a {
  display: block;
}
.login-wrap .login-box .login-form .btn-wrap {
  margin-top: 4.5rem;
}
.login-wrap .login-box .login-form .btn-login {
  width: 100%;
  height: 4rem;
  background: var(--d-color);
  color: #858585;
  border: none;
  border-radius: 0.25rem;
}
.login-wrap .login-box .login-form .btn-login.on {
  background: var(--main-color);
  color: var(--color-white);
}
.login-wrap .login-footer {
  margin-top: 5.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #858585;
  font-weight: 400;
}
.login-wrap .login-footer img {
  width: 4.75rem;
  margin-left: 3px;
  margin-top: -3px;
}

/*대시보드*/
.container {
  display: flex;
  height: 100vh;
}
.container .sidebar {
  position: relative;
  width: 15rem;
  border-right: 1px solid #ededed;
}
.container .sidebar h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  border-bottom: 1px solid #ededed;
}
.container .sidebar h2 img {
  width: 10.125rem;
}
.container .sidebar .left-menu {
  margin-top: 2rem;
}
.container .sidebar .left-menu li {
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 3rem;
  font-size: 0.875rem;
  color: #9a9a9a;
}
.container .sidebar .left-menu li a {
  display: flex;
  align-items: center;
}
.container .sidebar .left-menu li a:not(:last-of-type) {
  margin-bottom: 0.5rem;
}
.container .sidebar .left-menu li.on, .container .sidebar .left-menu li:hover {
  color: var(--main-color);
  font-weight: 700;
  position: relative;
}
.container .sidebar .left-menu li.on:after, .container .sidebar .left-menu li:hover:after {
  content: "";
  position: absolute;
  right: 0;
  width: 7px;
  height: 12px;
  border-radius: 15px 0 0 15px;
  backgrounD: var(--main-color);
}
.container .sidebar .left-menu li span {
  display: flex;
  align-items: center;
  margin-right: 0.75rem;
}
.container .sidebar .left-menu li span img {
  width: 1.375rem;
}
.container .sidebar .logout-wrap {
  position: absolute;
  left: 1.5rem;
  bottom: 2rem;
  font-size: 0.875rem;
  color: #858585;
}
.container .sidebar .logout-wrap a {
  display: flex;
  align-items: center;
}
.container .sidebar .logout-wrap span {
  margin-right: 0.5rem;
}
.container .sidebar .logout-wrap span img {
  width: 1.5rem;
}
.container .main-contents {
  width: calc(100% - 15rem);
  height: 100%;
  background: #f7f7f7;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* MAGIC HAPPENS HERE */
}
.container .main-contents .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.container .main-contents .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.container .main-contents .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.container .main-contents .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .container .main-contents .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.container .main-contents .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.container .main-contents .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.container .main-contents .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.container .main-contents .login-text-wrap {
  height: 2.5rem;
}
.container .main-contents .login-text-wrap .login-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .main-contents .login-text-wrap .login-text ul {
  display: flex;
  align-items: center;
}
.container .main-contents .login-text-wrap .login-text ul li.img {
  border: 2px solid var(--color3);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  margin-right: 0.5rem;
}
.container .main-contents .login-text-wrap .login-text ul li.img span img {
  width: 100%;
}
.container .main-contents .login-text-wrap .login-text ul li.text {
  font-size: 1.125rem;
}
.container .main-contents .login-text-wrap .login-text ul li.text span {
  font-weight: 700;
}
.container .main-contents .login-text-wrap .login-text .refresh {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: #858585;
  font-weight: 400;
}
.container .main-contents .login-text-wrap .login-text .refresh a {
  display: flex;
  align-items: center;
}
.container .main-contents .login-text-wrap .login-text .refresh a span {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.container .main-contents .login-text-wrap .login-text .refresh a span img {
  display: flex;
  align-items: center;
  width: 1rem;
}
.container .main-contents .main-box {
  background: var(--color-white);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
}
.container .main-contents .main-total {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.container .main-contents .main-total .item-box:not(:last-of-type) {
  border-right: 1px solid #ededed;
  width: 20%;
}
.container .main-contents .main-total .item-box:last-of-type {
  width: 40%;
}
.container .main-contents .main-total .item-box ul li.title {
  font-size: 0.875rem;
  font-weight: 700;
}
.container .main-contents .main-total .item-box ul li.num {
  margin-top: 0.875rem;
  font-size: 1.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.container .main-contents .main-total .item-box ul li.num span {
  margin-left: 0.5rem;
  background: #e0fbf0;
  padding: 4px 0.5rem;
  color: #3c9d76;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  font-family: "Inter", serif;
  font-weight: 500;
}
.container .main-contents .main-total .item-box ul li.num .down {
  background: #fff0f0 !important;
  color: #de4a4a !important;
}
.container .main-contents .main-total .item-box ul li.this_month {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #858585;
}
.container .main-contents .main-total .live {
  display: flex;
  align-items: center;
  width: 40%;
}
.container .main-contents .main-total .live .item-box {
  border-right: 0;
  width: 30%;
}
.container .main-contents .main-total .live canvas {
  margin: 0 auto;
  width: 200px;
}
.container .main-contents .notice-box h2 {
  font-weight: 700;
  height: 1rem;
}
.container .main-contents .notice-box .notice-wrap {
  margin-top: 1rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap {
  flex-direction: column;
  height: calc(100% - 5rem);
  justify-content: start;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-edit {
  flex-direction: column;
  display: flex;
  width: 100%;
  height: calc(100% - 15rem);
  background: #f7f7f7;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-edit textarea {
  resize: none;
  border: none;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  background: #f7f7f7;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-edit textarea:focus {
  outline: none;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-range {
  display: flex;
  width: 100%;
  margin-top: 2rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-range input[type=range] {
  width: 100%;
  height: 3rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap.tts-btn-wrap .tts-btn {
  width: 100%;
  display: flex;
  justify-content: start;
  height: 3rem;
  margin-top: 2rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-write {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: var(--main-color);
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-write img {
  width: 1.2rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-write i {
  margin-right: 0.5rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-play {
  margin-left: 0.5rem;
  background: var(--color-white);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #444;
  border: 1px solid #e0dedf;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-play img {
  width: 1.2rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-play i {
  margin-right: 0.5rem;
}
.container .main-contents .notice-box .notice-wrap .notice-btn-wrap .btn-view {
  color: #858585;
  font-weight: 500;
  font-size: 0.875rem;
}
.container .main-contents .notice-box .notice-wrap .notice-list {
  margin-top: 1rem;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul {
  display: flex;
  align-items: center;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li:first-child {
  width: 10%;
  justify-content: center;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li:nth-child(2) {
  width: 35%;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li:nth-child(3) {
  width: 25%;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li:nth-child(4) {
  width: 15%;
  justify-content: center;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul li:last-child {
  width: 15%;
  justify-content: center;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.title li {
  font-size: 0.75rem !important;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item {
  margin: 0.5rem 0.3rem 0 0.1rem;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
  position: relative;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li img {
  width: 1rem;
  margin-left: 5px;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state {
  background: #eee;
  padding: 0.375rem 0.75rem;
  height: 30px;
  border-radius: 1rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state span {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: #9a9a9a;
  border-radius: 50%;
  display: inline-block;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state.on {
  background: #e0fbf0;
  color: #2A986C;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state.on span {
  background: #49C794;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state-select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state-select_ul ul {
  padding: 5px;
  flex-direction: column;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li .state-select_ul ul li {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #606060;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.title {
  font-weight: 700;
  color: #111;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.title a {
  width: 100%;
  display: flex;
  align-items: center;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.date {
  color: #a8a8a8;
  font-weight: 400;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.date span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--d-color);
  margin-right: 0.5rem;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.date.on {
  color: #606060;
}
.container .main-contents .notice-box .notice-wrap .notice-list ul.item li.date.on span {
  background: #49C794;
}
.container .main-contents .trending {
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
}
.container .main-contents .trending h2 {
  font-weight: 700;
  width: 10rem;
  display: flex;
  flex-direction: column;
}
.container .main-contents .trending h2 span {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #858585;
}
.container .main-contents .trending .trending-list {
  width: calc(100% - 10rem);
}
.container .main-contents .trending .trending-list .item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.container .main-contents .trending .trending-list .item ul {
  width: 19%;
}
.container .main-contents .trending .trending-list .item ul li.img {
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  padding-top: 100%;
}
.container .main-contents .trending .trending-list .item ul li.img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.container .main-contents .trending .trending-list .item ul li.img span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 0.5rem 0;
  background: #111;
  color: var(--color-white);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
.container .main-contents .trending .trending-list .item ul li.img span.top {
  background: var(--main-color);
}
.container .main-contents .trending .trending-list .item ul li.title {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #363636;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.container .main-contents .unconnect h2 {
  font-weight: 700;
}
.container .main-contents .unconnect h2 span {
  margin-left: 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #858585;
}
.container .main-contents .unconnect .unconnect-wrap {
  margin-top: 1rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-btn-wrap .btn-write {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #da3737;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-btn-wrap .btn-write img {
  width: 1.2rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-btn-wrap .btn-view {
  color: #858585;
  font-weight: 500;
  font-size: 0.875rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list {
  margin-top: 1rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul {
  display: flex;
  align-items: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li:first-child {
  width: 15%;
  justify-content: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li:nth-child(2) {
  width: 35%;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li:nth-child(3) {
  width: 20%;
  justify-content: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li:nth-child(4) {
  width: 15%;
  justify-content: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul li:last-child {
  width: 15%;
  justify-content: center;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
  font-size: 0.75rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item {
  margin-top: 0.5rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item li img {
  width: 1rem;
  margin-left: 5px;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item li.shop-name {
  font-weight: 700;
  color: #111;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item li.shop-name img {
  margin-right: 5px;
  width: 0.875rem;
}
.container .main-contents .unconnect .unconnect-wrap .unconnect-list ul.item li.period {
  font-weight: 700;
  color: #111;
}

/*공지사항*/
.notice {
  overflow-y: hidden !important;
}
.notice .wrap {
  height: 100%;
}
.notice .notice-box {
  height: calc(100% - 2.5rem);
  overflow: hidden;
}
.notice .notice-box h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notice .notice-box h2 .page-move {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.notice .notice-box h2 .page-move span {
  color: var(--d-color);
  padding: 0 1rem;
  font-size: 0.7rem;
  font-family: "Inter", serif;
}
.notice .notice-box h2 .page-move span:not(:last-of-type) {
  margin-left: 0.5rem;
}
.notice .notice-box h2 .page-move span.on {
  color: #111;
}
.notice .notice-box .notice-wrap {
  height: 100%;
  overflow: hidden;
  margin-top: 0 !important;
  /* MAGIC HAPPENS HERE */
}
.notice .notice-box .notice-wrap .notice-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: 29.25rem;
}
.notice .notice-box .notice-wrap .notice-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
  width: 100%;
}
.notice .notice-box .notice-wrap .notice-sch input:focus {
  outline: none;
}
.notice .notice-box .notice-wrap .notice-sch span img {
  width: 1.5rem;
}
.notice .notice-box .notice-wrap .notice-list {
  height: calc(100% - 6rem);
  overflow: hidden;
  /* MAGIC HAPPENS HERE */
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 3rem);
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.notice .notice-box .notice-wrap .notice-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.notice .notice-box .notice-wrap .notice-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.notice .notice-box .notice-wrap .notice-list ul.item:hover {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
}
.notice .notice-box .notice-wrap .notice-list ul.item li.regdate {
  width: 15%;
  justify-content: center;
}
.notice .notice-box .notice-wrap .notice-list ul.item li.del {
  display: none;
  position: relative;
}
.notice .notice-box .notice-wrap .notice-list ul.item li.del span {
  width: 2.5rem;
  height: 2.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
}
.notice .notice-box .notice-wrap .notice-list ul.item li.del span:hover {
  background: #fff0f0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}
.notice .notice-box .notice-wrap .notice-list ul.item li.del span img {
  width: 1.2rem !important;
  margin-left: 0 !important;
}
.notice .notice-box .notice-wrap .notice-write {
  height: 100%;
}
.notice .notice-box .notice-wrap .notice-write .title {
  display: flex;
  align-items: center;
  height: 3rem;
}
.notice .notice-box .notice-wrap .notice-write .title .arrow-back {
  font-size: 1.2rem;
  width: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .title input {
  border: none;
  padding: 0.5rem 0;
  font-size: 1.25rem;
  margin-left: 1rem;
  width: calc(100% - 11.5rem);
}
.notice .notice-box .notice-wrap .notice-write .title input:focus {
  outline: none;
}
.notice .notice-box .notice-wrap .notice-write .title input::placeholder {
  font-size: 1.25rem;
}
.notice .notice-box .notice-wrap .notice-write .title span.title-text {
  width: calc(100% - 13.5rem);
  font-size: 1.25rem;
  margin-left: 1rem;
  font-weight: 500;
}
.notice .notice-box .notice-wrap .notice-write .title .btn-wrap {
  width: 9.5rem;
}
.notice .notice-box .notice-wrap .notice-write .title .btn-wrap span {
  padding: 0.5rem 0.7rem;
  font-weight: 500;
  font-size: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .title .btn-wrap span.btn-confirm {
  color: #cdcdcd;
}
.notice .notice-box .notice-wrap .notice-write .title .btn-wrap span.btn-confirm.on {
  color: var(--main-color);
}
.notice .notice-box .notice-wrap .notice-write .title .view-btn-wrap {
  display: flex;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .title .view-btn-wrap span {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .title .view-btn-wrap span:not(:last-of-type) {
  margin-right: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .title .view-btn-wrap span a {
  display: flex;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .title .view-btn-wrap span img {
  width: 1.2rem;
  margin-right: 5px;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap {
  padding-left: 2rem;
  height: 100%;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul {
  display: flex;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul.upload-wrap {
  align-items: start;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li {
  font-size: 0.875rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li.table-title {
  color: #858585;
  font-size: 0.875rem;
  width: 5rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state {
  background: #eee;
  padding: 0.375rem 0.75rem;
  height: 30px;
  border-radius: 1rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  cursor: pointer;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state span {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: #9a9a9a;
  border-radius: 50%;
  display: inline-block;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state.on {
  background: #e0fbf0;
  color: #2A986C;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state.on span {
  background: #49C794;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state-select_ul {
  position: absolute;
  top: 55px;
  left: -1rem;
  width: 6rem;
  background: var(--color-white);
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state-select_ul ul {
  padding: 5px;
  flex-direction: column;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state-select_ul ul li {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .state-select_ul ul li:first-child {
  font-weight: 500;
  color: #363636;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .switch {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1.25rem;
  margin-right: 2rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li .switch .slider:before {
  position: absolute;
  content: "";
  height: 0.9rem;
  width: 0.9rem;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li input:checked + .slider {
  background-color: var(--main-color);
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li input:checked + .slider:before {
  transform: translateX(0.7rem);
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul li input:checked + .slider:after {
  left: 25%;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .popup-on {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  position: relative;
  height: 3rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .popup-on .table-title {
  color: #858585;
  font-size: 0.875rem;
  width: 5rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .popup-on .table-period {
  position: relative;
  height: 3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .popup-on .table-period > i {
  margin-left: 0.5rem;
  color: #9a9a9a;
  font-size: 0.75rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop {
  font-size: 0.875rem;
  font-weight: 500;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop .select-shop-list ul {
  display: flex;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop .select-shop-list ul li {
  padding: 0 0.5rem;
  font-weight: 400;
  color: #363636;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop .select-shop-list ul li span {
  color: #858585;
  margin-left: 5px;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop span {
  margin-left: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .select-shop span img {
  width: 1.5rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file {
  width: 100%;
  height: auto;
  flex-direction: column;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form {
  width: 100%;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form .form__container {
  position: relative;
  width: 100%;
  height: 5rem;
  border: 1px dashed silver;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  margin-bottom: 5px;
  border-radius: 0.5rem;
  color: #363636;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form .form__container.active {
  background-color: rgba(192, 192, 192, 0.2);
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form .form__container span {
  display: block;
  font-size: 0.7rem;
  color: #858585;
  font-weight: 400;
  margin-top: 5px;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form .form__container .form__file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .form .form__files-container {
  display: flex;
  width: 100%;
  padding: 5px 0;
  justify-content: space-between;
  align-items: center;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  background: #f7f7f7;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box img {
  width: 0.875rem;
  margin-right: 0.5rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box span.file-size {
  color: #858585;
  margin-left: 5px;
  font-weight: 300;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box span.icon-del {
  margin-left: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box span.icon-del a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap ul .upload-file .file-box span.icon-del a img {
  width: 1rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap .text-edit {
  margin-top: 2rem;
  border-top: 1px solid #ededed;
  padding-top: 2rem;
  height: calc(100% - 22rem);
  font-size: 0.875rem;
  line-height: 1.3;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap .text-edit textarea {
  resize: none;
  border: none;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap .text-edit textarea:focus {
  outline: none;
}
.notice .notice-box .notice-wrap .notice-write .notice-write-wrap .text-edit.tts-edit {
  flex-direction: column;
  display: flex;
  width: 100%;
}
.notice .notice-box .notice-wrap .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 3rem);
}
.notice .notice-box .notice-wrap .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.notice .notice-box .notice-wrap .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.notice .notice-box .notice-wrap .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .notice .notice-box .notice-wrap .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.notice .notice-box .notice-wrap .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.notice .notice-box .notice-wrap .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.notice .notice-box .notice-wrap .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}

/* Modal */
.modal {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal .modal-content {
  position: relative;
  background-color: var(--color-white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50.5rem;
  height: 37rem;
  border-radius: 0.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.modal .modal-content .modal-shop {
  width: 50.5rem;
  height: 37rem;
  display: flex;
}
.modal .modal-content .modal-shop .shop-list {
  width: 14.4rem;
  height: 100%;
  border-right: 1px solid #ededed;
}
.modal .modal-content .modal-shop .shop-list .top {
  padding: 1rem;
  border-bottom: 1px solid #ededed;
  height: 6.25rem;
}
.modal .modal-content .modal-shop .shop-list .top h2 {
  padding: 1rem 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.modal .modal-content .modal-shop .shop-list .shop-select {
  height: calc(100% - 6.25rem);
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap .scroll-box {
  padding: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-shop .shop-list .shop-select .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-shop .shop-list .shop-select .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-shop .shop-list .shop-select ul li {
  display: flex;
  align-items: center;
  height: 2.25rem;
}
.modal .modal-content .modal-shop .shop-list .checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.modal .modal-content .modal-shop .shop-list .checkbox i {
  font-size: 0.875rem;
  color: #9a9a9a;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 2px solid var(--d-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox:checked + label:before {
  background: var(--main-color);
  border: 2px solid var(--main-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: var(--d-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox:checked + label:after {
  position: absolute;
  left: 3px;
  top: 3px;
  content: "\f00c";
  font-weight: 700;
  color: var(--color-white);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2 {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2 + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2 + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2 + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 2px solid var(--d-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2:checked + label:before {
  background: var(--main-color);
  border: 2px solid var(--main-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2:disabled + label:before {
  box-shadow: none;
  background: var(--d-color);
}
.modal .modal-content .modal-shop .shop-list .checkbox .styled-checkbox2:checked + label:after {
  position: absolute;
  left: 3px;
  top: 3px;
  content: "\f068";
  font-weight: 700;
  color: var(--color-white);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-shop .right {
  padding: 2rem 1rem 0 1rem;
  width: calc(100% - 14.4rem);
  display: flex;
  flex-direction: column;
  /* MAGIC HAPPENS HERE */
}
.modal .modal-content .modal-shop .right h2 {
  font-weight: 700;
  position: relative;
  width: 100%;
  height: 1rem;
}
.modal .modal-content .modal-shop .right h2 .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 0.75rem;
  color: #363636;
  cursor: pointer;
  user-select: none;
}
.modal .modal-content .modal-shop .right h2 .modal-close:hover, .modal .modal-content .modal-shop .right h2 .modal-close:focus {
  color: rgba(0, 0, 0, 0.5);
}
.modal .modal-content .modal-shop .right .shop-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3rem;
  margin-top: 1rem;
}
.modal .modal-content .modal-shop .right .shop-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
}
.modal .modal-content .modal-shop .right .shop-sch input:focus {
  outline: none;
}
.modal .modal-content .modal-shop .right .shop-sch span img {
  width: 1.5rem;
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 8rem);
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap .scroll-box {
  padding: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .modal .modal-content .modal-shop .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-shop .right .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-shop .right .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-shop .right .shop-select-list ul li {
  height: 2.5rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-shop .right .shop-select-list ul li img {
  width: 0.75rem;
  margin-right: 5px;
  margin-left: 1.5rem;
}
.modal .modal-content .modal-shop .right .shop-select-list ul li span {
  font-size: 0.75rem !important;
}
.modal .modal-content .modal-shop .right .shop-select-list ul li span.empty {
  font-size: 1rem !important;
  width: 100%;
  text-align: center;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox i {
  font-size: 0.875rem;
  color: #9a9a9a;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox + label:before {
  content: "\f00c";
  margin-right: 10px;
  display: flex;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  left: 1px;
  top: 1px;
  font-weight: 700;
  color: var(--d-color);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox:checked + label:before {
  background: none;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-shop .right .shop-select-list .checkbox .styled-checkbox:checked + label:after {
  position: absolute;
  left: 1px;
  top: 1px;
  content: "\f00c";
  font-weight: 700;
  color: var(--main-color);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-shop .right .shop-btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.modal .modal-content .modal-shop .right .shop-btn .btn-wrap button {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  height: 2rem;
  border-radius: 3px;
}
.modal .modal-content .modal-shop .right .shop-btn .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-shop .right .shop-btn .btn-wrap button.btn-apply {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.modal .modal-content .modal-service {
  width: 50.5rem;
  height: 37rem;
  display: flex;
}
.modal .modal-content .modal-service .right {
  padding: 2rem 1rem 0 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* MAGIC HAPPENS HERE */
}
.modal .modal-content .modal-service .right h2 {
  font-weight: 700;
  position: relative;
  width: 100%;
  height: 1rem;
}
.modal .modal-content .modal-service .right h2 .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 0.75rem;
  color: #363636;
  cursor: pointer;
  user-select: none;
}
.modal .modal-content .modal-service .right h2 .modal-close:hover, .modal .modal-content .modal-service .right h2 .modal-close:focus {
  color: rgba(0, 0, 0, 0.5);
}
.modal .modal-content .modal-service .right .shop-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3rem;
  margin-top: 1rem;
}
.modal .modal-content .modal-service .right .shop-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
}
.modal .modal-content .modal-service .right .shop-sch input:focus {
  outline: none;
}
.modal .modal-content .modal-service .right .shop-sch span img {
  width: 1.5rem;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 8rem);
}
.modal .modal-content .modal-service .right .scroll-bar-wrap.service-bar {
  height: calc(100% - 12rem) !important;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap .scroll-box {
  padding: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .modal .modal-content .modal-service .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-service .right .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-service .right .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-service .right .shop-select-list .check-ul {
  padding: 1rem 1rem 0 1rem;
  border-bottom: 1px solid #dedede;
}
.modal .modal-content .modal-service .right .shop-select-list ul li {
  height: 2.5rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-service .right .shop-select-list ul li img {
  width: 0.75rem;
  margin-right: 5px;
  margin-left: 1.5rem;
}
.modal .modal-content .modal-service .right .shop-select-list ul li span {
  font-size: 0.75rem !important;
}
.modal .modal-content .modal-service .right .shop-select-list ul li span.all-check {
  margin-left: 1.5rem !important;
  margin-right: 5px;
  font-size: 0.875rem !important;
}
.modal .modal-content .modal-service .right .shop-select-list ul li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
  margin-left: 2rem !important;
  margin-right: 1rem !important;
}
.modal .modal-content .modal-service .right .shop-select-list ul li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
  margin-left: 2rem !important;
  margin-right: 1rem !important;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox i {
  font-size: 0.875rem;
  color: #9a9a9a;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox + label:before {
  content: "\f00c";
  margin-right: 10px;
  display: flex;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  left: 1px;
  top: 1px;
  font-weight: 700;
  color: var(--d-color);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox:checked + label:before {
  background: none;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-service .right .shop-select-list .checkbox .styled-checkbox:checked + label:after {
  position: absolute;
  left: 1px;
  top: 1px;
  content: "\f00c";
  font-weight: 700;
  color: #f35429;
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-service .right .shop-btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.modal .modal-content .modal-service .right .shop-btn .btn-wrap button {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  height: 2rem;
  border-radius: 3px;
}
.modal .modal-content .modal-service .right .shop-btn .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-service .right .shop-btn .btn-wrap button.btn-apply {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.modal .modal-content .modal-translate {
  width: 50.5rem;
  height: 37rem;
  display: flex;
}
.modal .modal-content .modal-translate .right {
  padding: 2rem 1rem 0 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* MAGIC HAPPENS HERE */
}
.modal .modal-content .modal-translate .right h2 {
  font-weight: 700;
  position: relative;
  width: 100%;
  height: 1rem;
}
.modal .modal-content .modal-translate .right h2 .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 0.75rem;
  color: #363636;
  cursor: pointer;
  user-select: none;
}
.modal .modal-content .modal-translate .right h2 .modal-close:hover, .modal .modal-content .modal-translate .right h2 .modal-close:focus {
  color: rgba(0, 0, 0, 0.5);
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box {
  padding: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  justify-content: space-between;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box {
  width: 49%;
  height: 100%;
  position: relative;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .default_option {
  border: 1px solid #dedede;
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #606060;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .default_option li {
  padding: 10px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .default_option li:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 18px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #9a9a9a #9a9a9a;
  transform: rotate(-45deg);
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  z-index: 999;
  border: 1px solid #dedede;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .select_ul ul {
  padding: 5px;
  height: 100%;
  width: 100%;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .select_ul ul li:hover {
  background: #f7f7f7;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .select_ul ul li.on {
  background: #f7f7f7;
  color: #363636;
  font-weight: 500;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .text-edit {
  margin-top: 1rem;
  height: calc(100% - 10rem);
  font-size: 0.875rem;
  line-height: 1.3;
  padding: 0.5rem;
  background: #f7f7f7;
  border-radius: 0.5rem;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .text-edit textarea {
  resize: none;
  border: none;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  background: #f7f7f7;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .text-edit textarea:focus {
  outline: none;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn {
  cursor: pointer;
  margin-top: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  font-size: 0.875rem;
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-translate {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #da3737;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-translate i {
  margin-right: 0.5rem;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-use {
  background: var(--color-white);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #444;
  border: 1px solid #e0dedf;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-use i {
  margin-right: 0.5rem;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-play {
  background: var(--color-white);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #444;
  border: 1px solid #e0dedf;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap .scroll-box .translate-box .btn.btn-play i {
  margin-right: 0.5rem;
}
.modal .modal-content .modal-translate .right .btn-wrap {
  display: flex;
  justify-content: center;
}
.modal .modal-content .modal-translate .right .btn-wrap button {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  height: 2.5rem;
  border-radius: 3px;
  width: 10rem;
}
.modal .modal-content .modal-translate .right .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-translate .right .btn-wrap button.btn-apply {
  margin-left: 0.875rem;
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.modal .modal-content .modal-translate .right .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-translate .right .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-translate .right .shop-select-list ul li {
  height: 2.5rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-translate .right .shop-select-list ul li img {
  width: 0.75rem;
  margin-right: 5px;
  margin-left: 1.5rem;
}
.modal .modal-content .modal-translate .right .shop-select-list ul li span {
  font-size: 0.75rem !important;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox i {
  font-size: 0.875rem;
  color: #9a9a9a;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox + label:before {
  content: "\f00c";
  margin-right: 10px;
  display: flex;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  left: 1px;
  top: 1px;
  font-weight: 700;
  color: var(--d-color);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox:checked + label:before {
  background: none;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-translate .right .shop-select-list .checkbox .styled-checkbox:checked + label:after {
  position: absolute;
  left: 1px;
  top: 1px;
  content: "\f00c";
  font-weight: 700;
  color: #f35429;
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-translate .right .shop-btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.modal .modal-content .modal-translate .right .shop-btn .btn-wrap button {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  height: 2rem;
  border-radius: 3px;
}
.modal .modal-content .modal-translate .right .shop-btn .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-translate .right .shop-btn .btn-wrap button.btn-apply {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.modal .modal-content .modal-contents .right {
  padding: 2rem 1rem 0 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* MAGIC HAPPENS HERE */
}
.modal .modal-content .modal-contents .right h2 {
  font-weight: 700;
  position: relative;
  width: 100%;
  height: 1rem;
}
.modal .modal-content .modal-contents .right h2 .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 0.75rem;
  color: #363636;
  cursor: pointer;
  user-select: none;
}
.modal .modal-content .modal-contents .right h2 .modal-close:hover, .modal .modal-content .modal-contents .right h2 .modal-close:focus {
  color: rgba(0, 0, 0, 0.5);
}
.modal .modal-content .modal-contents .right .date-wrap {
  padding: 1rem 0 0.5rem;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: 80%;
  margin: auto;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch .data-list-sch-box {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch .data-list-sch-box #f_startdate_str, .modal .modal-content .modal-contents .right .date-wrap .data-list-sch .data-list-sch-box #f_enddate_str {
  width: 80px;
  text-align: center;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch input:focus {
  outline: none;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch span {
  cursor: pointer;
}
.modal .modal-content .modal-contents .right .date-wrap .data-list-sch span img {
  width: 1.5rem;
}
.modal .modal-content .modal-contents .right .loader {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 40%;
  left: 45%;
  display: none;
}
.modal .modal-content .modal-contents .right .data-list-wrap {
  height: calc(100% - 6rem);
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list {
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .title li {
  font-size: 0.75rem;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap {
  position: relative;
  height: 20rem;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul {
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:first-child {
  width: 10%;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:nth-child(2) {
  width: 35%;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:nth-child(3) {
  width: 15%;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:nth-child(4) {
  width: 30%;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:last-child {
  width: 10%;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:last-child .download {
  cursor: default;
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  padding: 0.5rem;
  color: #cdcdcd;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:last-child .download.active {
  color: var(--main-color);
  cursor: pointer;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul li:last-child .data-checkbox .custom-checkbox {
  justify-content: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
  font-size: 0.75rem;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul.item {
  margin-top: 0.5rem;
  padding: 1rem 0;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul.item li {
  align-items: center;
  color: #606060;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul.item li .data-checkbox {
  margin-left: 0;
  width: 100%;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list ul.item li .data-checkbox label input[type=checkbox] {
  margin-right: 0;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .data-list-text {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 12px 8px;
  gap: 8px;
  font-size: 0.875rem;
  color: #858585;
  font-weight: 500;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .data-list-text span {
  color: var(--main-color);
  font-weight: 700;
}
.modal .modal-content .modal-contents .right .data-list-wrap .data-list .data-list-text .btn-download {
  display: flex;
  padding: 8px 12px;
  height: 30px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--main-color);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.28px;
}
.modal .modal-content .modal-contents .right .btn-wrap {
  display: flex;
  justify-content: center;
}
.modal .modal-content .modal-contents .right .btn-wrap button {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  height: 2.5rem;
  border-radius: 3px;
  width: 10rem;
}
.modal .modal-content .modal-contents .right .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-contents .right .btn-wrap button.btn-apply {
  margin-left: 0.875rem;
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.modal .modal-content .modal-contents .right .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.modal .modal-content .modal-contents .right .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.modal .modal-content .modal-contents .right .shop-select-list ul li {
  height: 2.5rem;
  display: flex;
  align-items: center;
}
.modal .modal-content .modal-contents .right .shop-select-list ul li img {
  width: 0.75rem;
  margin-right: 5px;
  margin-left: 1.5rem;
}
.modal .modal-content .modal-contents .right .shop-select-list ul li span {
  font-size: 0.75rem !important;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox i {
  font-size: 0.875rem;
  color: #9a9a9a;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox + label span {
  color: #858585;
  font-size: 0.875rem;
  margin-left: 5px;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox + label:before {
  content: "\f00c";
  margin-right: 10px;
  display: flex;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  left: 1px;
  top: 1px;
  font-weight: 700;
  color: var(--d-color);
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox:checked + label:before {
  background: none;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.modal .modal-content .modal-contents .right .shop-select-list .checkbox .styled-checkbox:checked + label:after {
  position: absolute;
  left: 1px;
  top: 1px;
  content: "\f00c";
  font-weight: 700;
  color: #f35429;
  font-family: "Font Awesome 6 Free", serif;
}
.modal .modal-content .modal-contents .right .shop-btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.modal .modal-content .modal-contents .right .shop-btn .btn-wrap button {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  height: 2rem;
  border-radius: 3px;
}
.modal .modal-content .modal-contents .right .shop-btn .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  color: #858585;
  background: var(--color-white);
}
.modal .modal-content .modal-contents .right .shop-btn .btn-wrap button.btn-apply {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}

/*매장 현황*/
.shop-state-page {
  overflow-y: hidden !important;
}
.shop-state-page .wrap {
  height: 100%;
}

.shop-state {
  height: calc(100% - 2.5rem);
  overflow: hidden;
}
.shop-state h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  height: 1rem;
}
.shop-state h2 .page-move {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.shop-state h2 .page-move span {
  color: var(--d-color);
  padding: 0 1rem;
  font-size: 0.7rem;
  font-family: "Inter", serif;
}
.shop-state h2 .page-move span:not(:last-of-type) {
  margin-left: 0.5rem;
}
.shop-state h2 .page-move span.on {
  color: #111;
}
.shop-state .shop-state-sch {
  margin-top: 2rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-state .shop-state-sch .btn-wrap {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  width: 15rem;
}
.shop-state .shop-state-sch .btn-wrap div {
  font-size: 0.75rem;
  padding: 0.875rem 0.75rem;
  border-radius: 5px;
  cursor: pointer;
}
.shop-state .shop-state-sch .btn-wrap div:not(:last-of-type) {
  margin-right: 0.5rem;
}
.shop-state .shop-state-sch .btn-wrap div.btn-cancel {
  border: 1px solid var(--d-color);
  background: var(--color-white);
  color: #606060;
}
.shop-state .shop-state-sch .btn-wrap div.btn-cancel i {
  margin-right: 0.5rem;
}
.shop-state .shop-state-sch .btn-wrap div.btn-cancel .form__file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}
.shop-state .shop-state-sch .btn-wrap div.btn-file {
  border: 1px solid var(--d-color);
  background: var(--color-white);
  color: #606060;
  position: relative;
}
.shop-state .shop-state-sch .btn-wrap div.btn-file i {
  margin-right: 0.5rem;
}
.shop-state .shop-state-sch .btn-wrap div.btn-file .form__file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}
.shop-state .shop-state-sch .btn-wrap div.btn-confirm {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.shop-state .shop-state-sch .btn-wrap div.btn-confirm i {
  margin-right: 0.5rem;
}
.shop-state .shop-state-sch .select_wrap {
  width: 12.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  border-bottom: 1px solid #e5e5e5;
}
.shop-state .shop-state-sch .select_wrap .btn-write {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #da3737;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.shop-state .shop-state-sch .select_wrap .btn-write img {
  width: 1.2rem;
}
.shop-state .shop-state-sch .select_wrap .default_option {
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #606060;
}
.shop-state .shop-state-sch .select_wrap .default_option li {
  padding: 10px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-state .shop-state-sch .select_wrap .default_option li:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 18px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #9a9a9a #9a9a9a;
  transform: rotate(-45deg);
}
.shop-state .shop-state-sch .select_wrap .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  z-index: 999;
  border: 1px solid #dedede;
}
.shop-state .shop-state-sch .select_wrap .select_ul ul {
  max-height: 400px;
  padding: 5px;
}
.shop-state .shop-state-sch .select_wrap .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.shop-state .shop-state-sch .select_wrap .select_ul ul li:hover {
  background: #f7f7f7;
}
.shop-state .shop-state-sch .select_wrap .select_ul ul li.on {
  background: #f7f7f7;
  color: #363636;
  font-weight: 500;
}
.shop-state .shop-state-sch .shop-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: calc(100% - 13.5rem);
  margin-left: 1rem;
}
.shop-state .shop-state-sch .shop-sch.contents_sch {
  width: calc(100% - 17rem);
}
.shop-state .shop-state-sch .shop-sch input {
  width: 100%;
  border: none;
  background: none;
  text-indent: 0.5rem;
}
.shop-state .shop-state-sch .shop-sch input:focus {
  outline: none;
}
.shop-state .shop-state-sch .shop-sch span img {
  width: 1.5rem;
}
.shop-state .select_wrap.active .select_ul {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 17.25rem;
  overflow-y: auto;
  z-index: 999;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .shop-state .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.shop-state .select_wrap.active .select_ul .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.shop-state .select_wrap.active .select_ul .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.shop-state .shop-state-wrap {
  margin-top: 1rem;
  height: calc(100% - 6rem);
}
.shop-state .shop-state-wrap .shop-state-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.shop-state .shop-state-wrap .shop-state-btn-wrap .btn-write {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #da3737;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.shop-state .shop-state-wrap .shop-state-btn-wrap .btn-write img {
  width: 1.2rem;
}
.shop-state .shop-state-wrap .shop-state-btn-wrap .btn-view {
  color: #858585;
  font-weight: 500;
  font-size: 0.875rem;
}
.shop-state .shop-state-wrap .btn-wrap {
  justify-content: end;
  display: flex;
  margin-top: 0.5rem;
}
.shop-state .shop-state-wrap .btn-wrap button {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  height: 2rem;
  cursor: pointer;
}
.shop-state .shop-state-wrap .btn-wrap button:not(:last-of-type) {
  margin-right: 0.5rem;
}
.shop-state .shop-state-wrap .btn-wrap button.btn-cancel {
  border: 1px solid var(--d-color);
  background: var(--color-white);
  color: #606060;
}
.shop-state .shop-state-wrap .btn-wrap button.btn-cancel i {
  margin-right: 0.5rem;
}
.shop-state .shop-state-wrap .btn-wrap button.btn-confirm {
  background: var(--main-color);
  color: var(--color-white);
  border: none;
}
.shop-state .shop-state-wrap .btn-wrap button.btn-confirm i {
  margin-right: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list {
  margin-top: 1rem;
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.shop-state .shop-state-wrap .shop-state-list.content-state-list li:first-child {
  width: 8%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list.content-state-list li:nth-child(2) {
  width: 50%;
  justify-content: start;
}
.shop-state .shop-state-wrap .shop-state-list.content-state-list li:nth-child(3) {
  width: 15%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list.content-state-list li:last-child {
  width: 32%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 6rem);
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  max-height: 35rem;
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.shop-state .shop-state-wrap .shop-state-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.shop-state .shop-state-wrap .shop-state-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.shop-state .shop-state-wrap .shop-state-list ul {
  display: flex;
  align-items: center;
}
.shop-state .shop-state-wrap .shop-state-list ul.info-item {
  cursor: pointer;
}
.shop-state .shop-state-wrap .shop-state-list ul.info-item li {
  width: 100% !important;
  justify-content: start !important;
  background: #f4f6f8;
  padding: 1rem;
  border-radius: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.shop-state .shop-state-wrap .shop-state-list ul li:first-child {
  width: 5%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list ul li:nth-child(2) {
  width: 15%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list ul li:nth-child(3) {
  width: 35%;
}
.shop-state .shop-state-wrap .shop-state-list ul li:nth-child(4) {
  width: 22%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list ul li:last-child {
  width: 23%;
  justify-content: center;
}
.shop-state .shop-state-wrap .shop-state-list ul li:last-child span {
  margin-left: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list ul li:last-child span.un {
  color: var(--main-color);
  font-weight: 500;
}
.shop-state .shop-state-wrap .shop-state-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
}
.shop-state .shop-state-wrap .shop-state-list ul.title li {
  font-size: 0.75rem;
}
.shop-state .shop-state-wrap .shop-state-list ul.item {
  margin-top: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li {
  cursor: default !important;
  height: 3.5rem;
  align-items: center;
  color: #606060;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
}
.shop-state .shop-state-wrap .shop-state-list ul.item li span.threeday {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #DA3737;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li span.threeday-text {
  color: #DA3737 !important;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li img {
  width: 1rem;
  margin-left: 5px;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li.shop-name {
  font-weight: 700;
  color: #111;
  cursor: pointer;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li.shop-name img {
  margin-right: 5px;
  width: 0.875rem;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li.shop-name .language {
  border: 1px solid #cecece;
  font-weight: 400;
  font-size: 0.75rem;
  padding: 3px;
  margin-right: 5px;
}
.shop-state .shop-state-wrap .shop-state-list ul.item li.period {
  font-weight: 700;
  color: #111;
}
.shop-state .shop-state-wrap .shop-state-list .state-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  margin-top: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li {
  cursor: pointer;
  height: 3.5rem;
  align-items: center;
  color: #606060;
  width: auto;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li:not(:first-of-type) {
  margin-left: 2rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li span {
  margin-right: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li span.threeday {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #DA3737;
}
.shop-state .shop-state-wrap .shop-state-list .state-text ul li b {
  color: #363636;
  margin-left: 0.5rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 9rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent a {
  display: flex;
  align-items: center;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent img {
  width: 1.2rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent .recent-list {
  position: absolute;
  background: var(--color-white);
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 16rem;
  z-index: 999;
  top: 35px;
  left: 0;
  width: 100%;
  border-radius: 5px;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent .recent-list ul {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent .recent-list ul li {
  width: 100%;
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
  margin-left: 0;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent .recent-list ul li.on {
  font-weight: 500;
  color: #363636;
  font-size: 0.875rem;
}
.shop-state .shop-state-wrap .shop-state-list .state-text .recent .recent-list ul li:hover {
  background: #f7f7f7;
}

/*채널*/
.trending-box {
  padding: 2rem 1.5rem;
}
.trending-box h2 {
  font-weight: 700;
  width: 10rem;
  display: flex;
  flex-direction: column;
}
.trending-box h2 span {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #858585;
}
.trending-box .trending-list {
  margin-top: 2rem;
}
.trending-box .trending-list .item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.trending-box .trending-list .item .arrow {
  width: 2rem;
  pointer-events: all;
  opacity: 1;
}
.trending-box .trending-list .item .arrow.off {
  pointer-events: none !important;
  opacity: 0;
}
.trending-box .trending-list .item ul {
  width: 17%;
}
.trending-box .trending-list .item ul li.img {
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  padding-top: 100%;
}
.trending-box .trending-list .item ul li.img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.trending-box .trending-list .item ul li.img span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 0.5rem 0;
  background: #111;
  color: var(--color-white);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
.trending-box .trending-list .item ul li.img span.top {
  background: var(--main-color);
}
.trending-box .trending-list .item ul li.title {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #363636;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.trending-box .trending-list .item ul li.percent {
  margin-top: 0.5rem;
  color: #1e1e1e;
  font-weight: 500;
}
.trending-box .trending-list .item ul li.shop-num {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #858585;
  font-weight: 300;
}

.stat-box h2 {
  font-weight: 700;
  width: 10rem;
  display: flex;
  flex-direction: column;
}
.stat-box .stat-date-tab {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stat-box .stat-date-tab .date-tab-box {
  position: absolute;
  left: 0;
}
.stat-box .stat-date-tab .date-tab-box ul {
  display: flex;
  align-items: center;
  height: 2.5rem;
}
.stat-box .stat-date-tab .date-tab-box ul a {
  display: block;
}
.stat-box .stat-date-tab .date-tab-box ul li {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  color: #858585;
  font-weight: 500;
}
.stat-box .stat-date-tab .date-tab-box ul li.on {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  border-radius: 0.5rem;
}
.stat-box .stat-date-tab .date-select .select_wrap {
  width: 12rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
}
.stat-box .stat-date-tab .date-select .select_wrap .select-month {
  left: 50%;
  transform: translateX(-50%);
}
.stat-box .stat-date-tab .date-select .select_wrap .select-month.hide {
  display: none;
}
.stat-box .stat-date-tab .date-select .select_wrap .select-month.show {
  display: block;
}
.stat-box .stat-date-tab .date-select .select_wrap .default_option {
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}
.stat-box .stat-date-tab .date-select .select_wrap .default_option li {
  padding: 10px 20px;
}
.stat-box .stat-date-tab .date-select .select_wrap .default_option li span {
  margin-right: 3px;
}
.stat-box .stat-date-tab .date-select .select_wrap .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 999;
}
.stat-box .stat-date-tab .date-select .select_wrap .select_ul ul {
  padding: 5px;
}
.stat-box .stat-date-tab .date-select .select_wrap .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.stat-box .stat-date-tab .date-select .select_wrap .select_ul ul li:first-child {
  font-weight: 500;
  color: #363636;
}
.stat-box .stat-date-tab .date-select .select_wrap .select_ul ul li:hover {
  background: #f7f7f7;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 17.25rem;
  overflow-y: auto;
  z-index: 999;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.stat-box .stat-date-tab .date-select .select_wrap.active .select_ul .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.stat-box .stat-list-box {
  display: flex;
  align-items: center;
}
.stat-box .stat-list {
  width: 50%;
  margin-top: 1rem;
  border-bottom: 1px solid #eee;
}
.stat-box .stat-list:not(:last-of-type) {
  border-right: 1px solid #eee;
}
.stat-box .stat-list ul {
  display: flex;
  align-items: center;
}
.stat-box .stat-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.stat-box .stat-list ul li:first-child {
  width: 15%;
  justify-content: center;
}
.stat-box .stat-list ul li:nth-child(2) {
  width: 50%;
}
.stat-box .stat-list ul li:last-child {
  width: 35%;
  justify-content: center;
}
.stat-box .stat-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
}
.stat-box .stat-list ul.title li {
  font-size: 0.75rem;
}
.stat-box .stat-list ul.item {
  margin-top: 0.5rem;
}
.stat-box .stat-list ul.item li {
  height: 3rem;
  align-items: center;
  color: #606060;
}
.stat-box .stat-list ul.item li img {
  width: 1rem;
  margin-left: 5px;
}
.stat-box .stat-list ul.item li.title {
  font-weight: 500;
  color: #111;
}
.stat-box .stat-list ul.item li.date {
  color: #a8a8a8;
  font-weight: 400;
}
.stat-box .stat-list ul.item li.date span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--d-color);
  margin-right: 5px;
}
.channel-list-box {
  height: calc(100% - 2.5rem);
  overflow: hidden;
}
.channel-list-box h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  height: 1rem;
}
.channel-list-box h2 .page-move {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.channel-list-box h2 .page-move span {
  color: var(--d-color);
  padding: 0 1rem;
  font-size: 0.7rem;
  font-family: "Inter", serif;
}
.channel-list-box h2 .page-move span:not(:last-of-type) {
  margin-left: 0.5rem;
}
.channel-list-box h2 .page-move span.on {
  color: #111;
}
.channel-list-box .channel-sch {
  margin-top: 2rem;
  height: 3rem;
  display: flex;
  align-items: center;
}
.channel-list-box .channel-sch .select_wrap {
  width: 12.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  border-bottom: 1px solid #e5e5e5;
}
.channel-list-box .channel-sch .select_wrap .default_option {
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #606060;
}
.channel-list-box .channel-sch .select_wrap .default_option li {
  padding: 10px 20px;
}
.channel-list-box .channel-sch .select_wrap .default_option:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 18px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #9a9a9a #9a9a9a;
  transform: rotate(-45deg);
}
.channel-list-box .channel-sch .select_wrap .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  z-index: 999;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.channel-list-box .channel-sch .select_wrap .select_ul ul {
  padding: 5px;
}
.channel-list-box .channel-sch .select_wrap .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.channel-list-box .channel-sch .select_wrap .select_ul ul li.on {
  font-weight: 500;
  color: #363636;
}
.channel-list-box .channel-sch .select_wrap .select_ul ul li:hover {
  background: #f7f7f7;
}
.channel-list-box .channel-sch .channel-list-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: calc(100% - 13.5rem);
  margin-left: 1rem;
}
.channel-list-box .channel-sch .channel-list-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
  width: 100%;
}
.channel-list-box .channel-sch .channel-list-sch input:focus {
  outline: none;
}
.channel-list-box .channel-sch .channel-list-sch span img {
  width: 1.5rem;
}
.channel-list-box .select_wrap.active .select_ul {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 17.25rem;
  overflow-y: auto;
  z-index: 999;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.channel-list-box .select_wrap.active .select_ul .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.channel-list-box .select_wrap.active .select_ul .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.channel-list-box .channel-list-wrap {
  margin-top: 1rem;
  height: calc(100% - 6rem);
}
.channel-list-box .channel-list-wrap .channel-list-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}
.channel-list-box .channel-list-wrap .channel-list-btn-wrap .btn-write {
  background: var(--color2);
  padding: 0.75rem 1rem;
  height: 3rem;
  border-radius: 0.5rem;
  color: #da3737;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.channel-list-box .channel-list-wrap .channel-list-btn-wrap .btn-write img {
  width: 1.2rem;
}
.channel-list-box .channel-list-wrap .channel-list-btn-wrap .btn-view {
  color: #858585;
  font-weight: 500;
  font-size: 0.875rem;
}
.channel-list-box .channel-list-wrap .channel-list {
  margin-top: 1rem;
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 6rem);
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.channel-list-box .channel-list-wrap .channel-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.channel-list-box .channel-list-wrap .channel-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.channel-list-box .channel-list-wrap .channel-list ul {
  display: flex;
  align-items: center;
}
.channel-list-box .channel-list-wrap .channel-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.channel-list-box .channel-list-wrap .channel-list ul li:first-child {
  width: 15%;
}
.channel-list-box .channel-list-wrap .channel-list ul li:nth-child(2) {
  width: 60%;
}
.channel-list-box .channel-list-wrap .channel-list ul li:last-child {
  width: 25%;
  justify-content: center;
}
.channel-list-box .channel-list-wrap .channel-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
}
.channel-list-box .channel-list-wrap .channel-list ul.title li {
  font-size: 0.75rem;
}
.channel-list-box .channel-list-wrap .channel-list ul.item {
  margin-top: 0.5rem;
  padding: 1rem 0;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li {
  align-items: center;
  color: #606060;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li.chennel-name {
  font-weight: 700;
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li.chennel-name p {
  font-weight: 300;
  margin-top: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li.tag {
  font-size: 0.75rem;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li.tag span {
  background: #f7f7f7;
  padding: 0.5rem;
  border-radius: 1rem;
}
.channel-list-box .channel-list-wrap .channel-list ul.item li.tag span:not(:last-of-type) {
  margin-right: 0.5rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 3rem;
  margin-top: 0.5rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
  width: auto;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li:not(:first-of-type) {
  margin-left: 2rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li span {
  margin-right: 0.5rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li span.threeday {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #DA3737;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text ul li b {
  color: #363636;
  margin-left: 0.5rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 9rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity a {
  display: flex;
  align-items: center;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity img {
  width: 1.2rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity .popularity-list {
  position: absolute;
  background: var(--color-white);
  display: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 10rem;
  z-index: 999;
  top: 35px;
  left: 0;
  width: 100%;
  border-radius: 5px;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity .popularity-list ul {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity .popularity-list ul li {
  width: 100%;
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
  margin-left: 0;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity .popularity-list ul li.on {
  font-weight: 500;
  color: #363636;
  font-size: 0.875rem;
}
.channel-list-box .channel-list-wrap .channel-list .channel-list-text .popularity .popularity-list ul li:hover {
  background: #f7f7f7;
}

/*편성표*/
.schedule .wrap {
  height: 100%;
}
.schedule .wrap .schedule-box {
  height: calc(100% - 2.5rem);
  overflow: hidden;
}
.schedule .wrap .schedule-box h2 {
  display: flex;
  align-items: center;
  font-weight: 700;
  height: 1rem;
}
.schedule .wrap .schedule-box h2 span {
  font-size: 0.875rem;
  color: #606060;
  margin-left: 1rem;
  font-weight: 300;
}
.schedule .wrap .schedule-box .channel-sch {
  margin-top: 2rem;
  height: 3rem;
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap {
  width: 12.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  border-bottom: 1px solid #e5e5e5;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .default_option {
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #606060;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .default_option li {
  padding: 10px 20px;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .default_option:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 18px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #9a9a9a #9a9a9a;
  transform: rotate(-45deg);
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  z-index: 999;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .select_ul ul {
  padding: 5px;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .select_ul ul li:first-child {
  font-weight: 500;
  color: #363636;
}
.schedule .wrap .schedule-box .channel-sch .select_wrap .select_ul ul li:hover {
  background: #f7f7f7;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 17.25rem;
  overflow-y: auto;
  z-index: 999;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.schedule .wrap .schedule-box .select_wrap.active .select_ul .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.schedule .wrap .schedule-box .schedule-tab {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.schedule .wrap .schedule-box .schedule-tab ul {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.schedule .wrap .schedule-box .schedule-tab ul li {
  height: 3rem;
  display: flex;
  align-items: center;
  color: #858585;
  justify-content: center;
  font-weight: 500;
}
.schedule .wrap .schedule-box .schedule-tab ul li a {
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.schedule .wrap .schedule-box .schedule-tab ul li.on, .schedule .wrap .schedule-box .schedule-tab ul li:hover {
  color: var(--main-color);
  position: relative;
}
.schedule .wrap .schedule-box .schedule-tab ul li.on:after, .schedule .wrap .schedule-box .schedule-tab ul li:hover:after {
  content: "";
  position: absolute;
  background: var(--main-color);
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
}
.schedule .wrap .schedule-box .schedule-tab .text {
  font-size: 0.875rem;
  color: #858585;
  font-weight: 300;
}
.schedule .wrap .schedule-box .schedule-tab .text span {
  font-weight: 700;
}
.schedule .wrap .schedule-box .schedule-list-wrap {
  height: calc(100% - 6rem);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list {
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 6rem);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul {
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:first-child {
  width: 5%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:nth-child(2) {
  width: 10%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:nth-child(3) {
  width: 40%;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:nth-child(4) {
  width: 10%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:nth-child(5) {
  width: 10%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul li:last-child {
  width: 25%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.title li {
  font-size: 0.75rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.item {
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.item li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.item li.broad-name {
  color: #111;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list ul.item li.broad-name p {
  font-weight: 300;
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 3rem;
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
  width: auto;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li:not(:first-of-type) {
  margin-left: 2rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li span {
  margin-right: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li span.threeday {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #DA3737;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text ul li b {
  color: #363636;
  margin-left: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 9rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity a {
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity img {
  width: 1.2rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity .popularity-list {
  position: absolute;
  background: var(--color-white);
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 10rem;
  z-index: 999;
  top: 35px;
  left: 0;
  width: 100%;
  border-radius: 5px;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity .popularity-list ul {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity .popularity-list ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
  margin-left: 0;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity .popularity-list ul li:first-child {
  font-weight: 500;
  color: #363636;
  font-size: 0.875rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list .channel-list-text .popularity .popularity-list ul li:hover {
  background: #f7f7f7;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 {
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 6rem);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul {
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul li {
  display: flex;
  font-size: 0.875rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul li:first-child {
  width: 10%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul li:nth-child(2) {
  width: 45%;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul li:nth-child(3) {
  width: 15%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul li:last-child {
  width: 30%;
  justify-content: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
  font-size: 0.75rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul.item {
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul.item li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul.item li.broad-name {
  color: #111;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 ul.item li.broad-name p {
  font-weight: 300;
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 3rem;
  margin-top: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li {
  height: 3.5rem;
  align-items: center;
  color: #606060;
  width: auto;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li:not(:first-of-type) {
  margin-left: 2rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li span {
  margin-right: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li span.connect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #49C794;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li span.unconnect {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--d-color);
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li span.threeday {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #DA3737;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text ul li b {
  color: #363636;
  margin-left: 0.5rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 9rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity a {
  display: flex;
  align-items: center;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity img {
  width: 1.2rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity .popularity-list {
  position: absolute;
  background: var(--color-white);
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 10rem;
  z-index: 999;
  top: 35px;
  left: 0;
  width: 100%;
  border-radius: 5px;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity .popularity-list ul {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity .popularity-list ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
  margin-left: 0;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity .popularity-list ul li:first-child {
  font-weight: 500;
  color: #363636;
  font-size: 0.875rem;
}
.schedule .wrap .schedule-box .schedule-list-wrap .schedule-list2 .channel-list-text .popularity .popularity-list ul li:hover {
  background: #f7f7f7;
}

#box-container {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
}

.boxes {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--main-color);
  position: relative;
}

.box-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box1 {
  position: relative;
  animation: moveBox1 1.5s ease-in-out infinite;
  left: 0;
}

@keyframes moveBox1 {
  0% {
    left: 0;
  }
  25% {
    top: 0;
    left: 3rem;
  }
  50% {
    left: 3rem;
    top: 3rem;
  }
  75% {
    top: 3rem;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
.box2 {
  background: #f2f6f8;
  left: 1.5rem;
}

.box3 {
  animation: moveBox3 1.5s ease-in-out infinite;
}

@keyframes moveBox3 {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: -3rem;
    left: 0;
  }
  50% {
    top: -3rem;
    left: 3rem;
  }
  75% {
    top: 0;
    left: 3rem;
  }
  100% {
    top: 0;
    left: 0;
  }
}
/*광고 송출 데이터*/
.data-wrap {
  width: calc(100% - 15rem);
  height: 100%;
  background: #f7f7f7;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.data-wrap .data-checkbox {
  display: flex;
  align-items: center;
  width: 24rem;
  margin-left: 1.5rem;
}
.data-wrap .data-checkbox h2 {
  width: 2rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #858585;
  margin-right: 1rem;
  justify-content: end;
}
.data-wrap .data-checkbox .check-state {
  display: flex;
  align-items: center;
  width: 20rem;
}
.data-wrap .data-checkbox label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.data-wrap .data-checkbox label:not(:first-of-type) {
  margin-left: 0.75rem;
}
.data-wrap .data-checkbox .btn-result {
  display: flex;
  padding: 8px 12px;
  height: 38px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--main-color);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.28px;
  margin-left: 1.5rem;
  width: 3.5rem;
}
.data-wrap .data-checkbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.data-wrap .data-checkbox .custom-checkbox .text {
  padding-left: 1.75rem;
  font-weight: 400;
  font-size: 0.875rem;
}
.data-wrap .data-checkbox .custom-checkbox input {
  display: none;
}
.data-wrap .data-checkbox .custom-checkbox .unchecked {
  color: var(--d-color);
}
.data-wrap .data-checkbox .custom-checkbox .unchecked, .data-wrap .data-checkbox .custom-checkbox .checked {
  font-size: 24px;
  position: absolute;
  transition: opacity 0.2s ease-in-out;
}
.data-wrap .data-checkbox .custom-checkbox .checked {
  opacity: 0;
  color: var(--main-color);
}
.data-wrap .data-checkbox .custom-checkbox input:checked ~ .unchecked {
  opacity: 0;
}
.data-wrap .data-checkbox .custom-checkbox input:checked ~ .checked {
  opacity: 1;
}
.data-wrap .wrap {
  height: 100%;
}
.data-wrap .wrap .main-box {
  background: var(--color-white);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
}
.data-wrap .wrap .main-total {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.data-wrap .wrap .main-total .item-box:not(:last-of-type) {
  border-right: 1px solid #ededed;
  width: 20%;
}
.data-wrap .wrap .main-total .item-box:last-of-type {
  width: 40%;
}
.data-wrap .wrap .main-total .item-box.data1 {
  width: 60%;
}
.data-wrap .wrap .main-total .item-box.data2 {
  width: 20%;
}
.data-wrap .wrap .main-total .item-box ul li.title {
  font-size: 0.875rem;
  font-weight: 700;
}
.data-wrap .wrap .main-total .item-box ul li.num {
  margin-top: 0.875rem;
  font-size: 1.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.data-wrap .wrap .main-total .item-box ul li.num span {
  margin-left: 0.5rem;
  background: #e0fbf0;
  color: #3c9d76;
  padding: 4px 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  font-family: "Inter", serif;
  font-weight: 600;
}
.data-wrap .wrap .main-total .item-box ul li.num .down {
  background: #fff0f0 !important;
  color: #de4a4a !important;
}
.data-wrap .wrap .main-total .item-box ul li.num2 {
  margin-top: 0.875rem;
  font-size: 1.75rem;
  font-weight: 500;
  display: flex;
  align-items: end;
}
.data-wrap .wrap .main-total .item-box ul li.num2 span {
  margin-left: 0.5rem;
  color: #858585;
  font-size: 1rem;
  border-radius: 0.5rem;
  font-family: "Inter", serif;
  font-weight: 600;
}
.data-wrap .wrap .main-total .item-box ul li.this_month {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #858585;
}
.data-wrap .wrap .main-total .live {
  display: flex;
  align-items: center;
  width: 40%;
}
.data-wrap .wrap .main-total .live .item-box {
  border-right: 0;
  width: 30%;
}
.data-wrap .wrap .main-total .live canvas {
  margin: 0 auto;
  width: 200px;
}
.data-wrap .data-list-box {
  height: calc(100% - 2.5rem);
  overflow: hidden;
}
.data-wrap .data-list-box h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1rem;
}
.data-wrap .data-list-box h2 .page-move {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.data-wrap .data-list-box h2 .page-move span {
  color: var(--d-color);
  padding: 0 1rem;
  font-size: 0.7rem;
  font-family: "Inter", serif;
}
.data-wrap .data-list-box h2 .page-move span:not(:last-of-type) {
  margin-left: 0.5rem;
}
.data-wrap .data-list-box h2 .page-move span.on {
  color: #111;
}
.data-wrap .data-list-box .data-sch {
  margin-top: 2rem;
  height: 3rem;
  display: flex;
  align-items: center;
}
.data-wrap .data-list-box .data-sch .select_wrap {
  width: 10rem;
  height: 3rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  border-bottom: 1px solid #e5e5e5;
}
.data-wrap .data-list-box .data-sch .select_wrap .default_option {
  background: var(--color-white);
  border-radius: 5px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: #606060;
}
.data-wrap .data-list-box .data-sch .select_wrap .default_option li {
  padding: 10px 20px;
}
.data-wrap .data-list-box .data-sch .select_wrap .default_option:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 18px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #9a9a9a #9a9a9a;
  transform: rotate(-45deg);
}
.data-wrap .data-list-box .data-sch .select_wrap .select_ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: 5px;
  display: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.data-wrap .data-list-box .data-sch .select_wrap .select_ul ul {
  padding: 5px;
}
.data-wrap .data-list-box .data-sch .select_wrap .select_ul ul li {
  padding: 10px 20px;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #606060;
}
.data-wrap .data-list-box .data-sch .select_wrap .select_ul ul li.on {
  font-weight: 500;
  color: #363636;
}
.data-wrap .data-list-box .data-sch .select_wrap .select_ul ul li:hover {
  background: #f7f7f7;
}
.data-wrap .data-list-box .data-sch .ad-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: 80%;
  height: 3rem;
  margin-top: 0.5rem;
  margin-left: 1.5rem;
}
.data-wrap .data-list-box .data-sch .ad-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
  width: 100%;
}
.data-wrap .data-list-box .data-sch .ad-sch input:focus {
  outline: none;
}
.data-wrap .data-list-box .data-sch .ad-sch span img {
  width: 1.5rem;
}
.data-wrap .data-list-box .data-sch .data-list-sch {
  background: #f7f7f7;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  width: calc(100% - 36.5rem);
  margin-left: 1rem;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.data-wrap .data-list-box .data-sch .data-list-sch .data-list-sch-box {
  display: flex;
  align-items: center;
}
.data-wrap .data-list-box .data-sch .data-list-sch input {
  border: none;
  background: none;
  text-indent: 0.5rem;
}
.data-wrap .data-list-box .data-sch .data-list-sch input:focus {
  outline: none;
}
.data-wrap .data-list-box .data-sch .data-list-sch span {
  cursor: pointer;
}
.data-wrap .data-list-box .data-sch .data-list-sch span img {
  width: 1.5rem;
}
.data-wrap .data-list-box .select_wrap.active .select_ul {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  height: 7rem;
  overflow-y: auto;
  z-index: 999;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap {
  position: relative;
  height: 100%;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.data-wrap .data-list-box .select_wrap.active .select_ul .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.data-wrap .data-list-box .select_wrap.active .select_ul .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.data-wrap .data-list-box .data-list-wrap {
  margin-top: 1rem;
  height: calc(100% - 6rem);
}
.data-wrap .data-list-box .data-list-wrap .data-list {
  margin-top: 1rem;
  height: 100%;
  /* MAGIC HAPPENS HERE */
}
.data-wrap .data-list-box .data-list-wrap .data-list .title li {
  font-size: 0.75rem;
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap {
  position: relative;
  height: calc(100% - 6rem);
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap .scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar, .data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap .scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.data-wrap .data-list-box .data-list-wrap .data-list .cover-bar {
  position: absolute;
  background: var(--color-white);
  height: 100%;
  top: 0;
  right: 0;
  width: 0.4em;
  -webkit-transition: all 0.5s;
  opacity: 1;
}
.data-wrap .data-list-box .data-list-wrap .data-list .scroll-bar-wrap:hover .cover-bar {
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul {
  display: flex;
  align-items: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li {
  display: flex;
  font-size: 0.875rem;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:first-child {
  width: 10%;
  justify-content: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:nth-child(2) {
  width: 35%;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:nth-child(3) {
  width: 15%;
  justify-content: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:nth-child(4) {
  width: 30%;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:last-child {
  width: 10%;
  justify-content: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:last-child .download {
  cursor: default;
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  padding: 0.5rem;
  color: #cdcdcd;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:last-child .download.active {
  color: var(--main-color);
  cursor: pointer;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul li:last-child .data-checkbox .custom-checkbox {
  justify-content: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul.title {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  height: 3rem;
  color: #9a9a9a;
  font-weight: 500;
  font-size: 0.75rem;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul.item {
  margin-top: 0.5rem;
  padding: 1rem 0;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul.item li {
  align-items: center;
  color: #606060;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul.item li .data-checkbox {
  margin-left: 0;
  width: 100%;
  justify-content: center;
}
.data-wrap .data-list-box .data-list-wrap .data-list ul.item li .data-checkbox label input[type=checkbox] {
  margin-right: 0;
}
.data-wrap .data-list-box .data-list-wrap .data-list .data-list-text {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 12px 8px;
  gap: 8px;
  font-size: 0.875rem;
  color: #858585;
  font-weight: 500;
}
.data-wrap .data-list-box .data-list-wrap .data-list .data-list-text span {
  color: var(--main-color);
  font-weight: 700;
}

/*# sourceMappingURL=style.css.map */